/**
* Poupex Play 4.0 — Jogos
* Namespace: .pp4-* / --pp4-* · Escopo: .pp4-games
*
* Sprint 10 do redesign visual.
*
* ------------------------------------------------------------------
* ESTE ARQUIVO NÃO É "O CSS DA TELA DE JOGOS"
* ------------------------------------------------------------------
* É o componente de *catálogo jogável* da plataforma. `.pp4-game-card`
* não sabe o que é Dominó: recebe capa, título, descrição, um par de
* indicadores e um CTA. Dominó, Truco, Cacheta, Dados, Super Poupex e
* qualquer jogo futuro usam a mesma peça — a instrução do Sprint foi
* explícita: "Não criar componentes exclusivos para apenas um jogo."
*
* Reaproveitados de outros arquivos, sem cópia local:
* tabs.css .task-tabs / .task-tab filtros de categoria
* activity.css .pp4-act-empty categoria sem jogos
* activity.css .pp4-act-skeleton carregamento
* activity.css .pp4-act-progress__bar barra de XP do jogador
* shell.css .page-header cabeçalho (via parcial)
*
* ------------------------------------------------------------------
* CONVIVÊNCIA COM `assets/css/jogos-hub.css`
* ------------------------------------------------------------------
* `jogos.php` injeta `jogos-hub.css` por `` no corpo, portanto
* DEPOIS de tudo que `_top.php` carrega. Aquele arquivo continua sendo
* necessário: além do hub ele estiliza o lobby de Damas
* (`.jogos-damas-lobby`, `.jogos-lobby-toolbar`) e as páginas de jogo
* (`.jogos-game-page--*`, `.jogos-game-shell__*`). Não foi removido.
*
* A boa notícia é que ele não tem uma única declaração `!important` nem
* um seletor composto — tudo é 0,1,0. Qualquer regra aqui, com o escopo
* `.pp4-games` na frente, chega a 0,2,0 e vence por especificidade,
* independentemente da ordem de carregamento.
*
* ------------------------------------------------------------------
* ESTADOS DE SELO
* ------------------------------------------------------------------
* O Sprint pediu quatro: Novo, Popular, Em breve e Favorito. Os quatro
* existem abaixo. Três têm origem real nos dados:
*
* Em breve `status === 'em_breve'` no catálogo
* Ao vivo `jogadores_online > 0`
* Popular maior `jogadores_online` do catálogo, quando > 0
* Favorito `GamePlayer::profile()['favoriteGame']`
*
* `--novo` fica definido e SEM USO: não existe data de publicação de
* jogo em lugar nenhum do catálogo nem do banco, e marcar um jogo como
* novo por chute seria inventar informação. No dia em que o catálogo
* ganhar esse campo, o selo já está pronto.
*/
/* ============================================================
1 · CONTÊINER
============================================================ */
.pp4-games {
display: flex;
flex-direction: column;
gap: var(--pp4-space-6);
width: 100%;
min-width: 0;
color: var(--pp4-color-text);
}
/* O invólucro herdado traz padding e fundo próprios. */
.pp4-games.jogos-hub,
.pp4-games.bo-dashboard {
padding: 0;
margin: 0;
background: none;
border: 0;
}
.pp4-games .jogos-hub__section,
.pp4-games .bo-section {
display: contents;
padding: 0;
margin: 0;
background: none;
border: 0;
/* `display: contents` já tira o elemento do fluxo, mas a borda dourada
continua computada e a varredura de cor acusa. A origem é
`brand-theme.css:769` (`.shell--app .bo-section`, 0,2,0 !important),
que empata com o seletor daqui — daí o `!important`. */
border-color: transparent !important;
box-shadow: none;
}
.pp4-games [hidden] { display: none !important; }
/* `.shell--app p` = 0,1,1 (creme). Aqui 0,2,1. */
.pp4-games p { color: var(--pp4-color-text-muted) !important; }
/* ============================================================
2 · SEÇÃO → design-system/section.css
============================================================
Movido no Sprint 11. `.pp4-games-section` nunca teve nada de jogos:
é título de faixa com contagem e complemento. O Hub de Mini Apps
precisava do mesmo componente, e essa seria a segunda cópia. Agora
chama-se `.pp4-sec*` e vive em section.css. */
/* ============================================================
3 · HERÓI DO JOGADOR
============================================================
Substitui o cabeçalho "Escolha seu jogo", que era decorativo. Todos
os números aqui já eram calculados por `GamePlayer::profile()` e
`GameRanking::forUser()` — a tela antiga descartava quase todos. */
.pp4-games-hero {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--pp4-space-5);
padding: var(--pp4-space-6);
border: 1px solid rgba(91, 140, 255, 0.28);
border-radius: var(--pp4-radius-lg);
background: linear-gradient(135deg, #123bf9 0%, #0b1f8f 58%, #0a0e17 100%);
overflow: hidden;
}
.pp4-games-hero__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 64px;
height: 64px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #ffffff !important;
font-size: var(--pp4-text-xl);
font-weight: var(--pp4-weight-bold);
}
.pp4-games-hero__body {
display: flex;
flex-direction: column;
gap: var(--pp4-space-2);
min-width: 0;
}
.pp4-games-hero__name,
html[data-theme] .pp4-games-hero__name {
margin: 0 !important;
color: #ffffff !important;
font-size: var(--pp4-text-2xl);
font-weight: var(--pp4-weight-bold);
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pp4-games-hero__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pp4-space-2);
}
.pp4-games-hero__tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px var(--pp4-space-3);
border-radius: var(--pp4-radius-pill);
background: rgba(255, 255, 255, 0.14);
color: #ffffff !important;
font-size: var(--pp4-text-sm);
font-weight: var(--pp4-weight-semibold);
}
.pp4-games-hero__tag--patent { background: var(--pp4-color-success); color: var(--pp4-color-success-ink) !important; }
/* Progresso de nível — `.pp4-act-progress__bar` / `__fill` vêm de
activity.css; aqui só a legenda e a largura. */
.pp4-games-hero__xp {
display: flex;
flex-direction: column;
gap: 5px;
max-width: 360px;
}
.pp4-games-hero__xp-label {
display: flex;
justify-content: space-between;
gap: var(--pp4-space-3);
color: rgba(255, 255, 255, 0.72) !important;
font-size: var(--pp4-text-xs);
font-variant-numeric: tabular-nums;
}
.pp4-games-hero .pp4-act-progress__bar { background: rgba(255, 255, 255, 0.18); }
.pp4-games-hero__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--pp4-space-3);
flex: 0 0 auto;
}
.pp4-games-hero__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 78px;
padding: var(--pp4-space-3);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--pp4-radius-md);
background: rgba(255, 255, 255, 0.08);
}
.pp4-games-hero__stat-value {
color: #ffffff !important;
font-size: var(--pp4-text-xl);
font-weight: var(--pp4-weight-bold);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.pp4-games-hero__stat-label {
color: rgba(255, 255, 255, 0.68) !important;
font-size: var(--pp4-text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: center;
}
/* ============================================================
4 · CARTÃO DE JOGO — o componente reutilizável
============================================================
Estrutura mínima esperada:
Nada aqui presume um jogo específico. A capa é uma superfície com
gradiente por variante `--accent-*`; o glifo é conteúdo. */
.pp4-games-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--pp4-space-4);
padding: 0;
margin: 0;
list-style: none;
}
/* Sem isto o