/* ===== CAPAS ILUSTRADAS NA GRADE DE JOGOS =====
   Duas colunas com a capa do jogo, no lugar de tres colunas com medalhao de
   icone (pedido do dono em 02/09/2026). Carrega depois do design-system, entao
   a cascata resolve sem precisar editar o arquivo dele. */

.category-grid{grid-template-columns:repeat(2,1fr);gap:14px}

/* O card com capa vira uma ficha: ilustracao em cima, nome embaixo. */
.game-card.tem-capa{
    aspect-ratio:1/1.22;
    padding:0 0 10px;
    justify-content:flex-end;
    min-height:150px;
    contain-intrinsic-size:auto 200px;
}
/* O card tem um ::before colorido cobrindo o topo (z-index 1). A ilustracao
   precisa vir por cima dele, senao fica escondida atras do gradiente. */
.game-card.tem-capa::before{display:none}
.game-card.tem-capa .gc-capa{
    position:absolute;
    z-index:1;
    top:0;left:0;right:0;
    width:100%;
    height:72%;
    object-fit:cover;
    object-position:center;
    display:block;
    border-bottom:3px solid var(--ink,#1B1235);
    background:var(--paper,#FFF6E9);
}
/* O medalhao de icone perde a razao de existir quando ha ilustracao. */
.game-card.tem-capa .game-card-icon{display:none}
.game-card.tem-capa .card-deco{display:none}

.game-card.tem-capa .game-card-title{
    position:relative;
    z-index:2;
    padding:0 6px;
    font-size:13px;
    line-height:1.15;
    text-align:center;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
/* Selo e indicadores continuam por cima da ilustracao. */
.game-card.tem-capa .game-card-badge,
.game-card.tem-capa .game-card-diff{z-index:3}
.game-card.tem-capa .game-card-progress{position:relative;z-index:2;margin-top:3px}

/* Telas estreitas: duas colunas ainda cabem, so o texto encolhe. */
@media (max-width:340px){
    .category-grid{gap:10px}
    .game-card.tem-capa{min-height:132px}
    .game-card.tem-capa .game-card-title{font-size:12px}
}