/* Jogos — só o que a base não tem. Nenhuma cor nova: tudo var(--...).
   Motivo: a ficha da base não tem imagem e é um link inteiro. Aqui o cartão
   leva a capa do jogo no topo (16:9, a capa paisagem de cada jogo) e um
   botão "Jogar grátis" que é o único link; o primeiro jogo (destaque, "novo")
   ocupa a linha inteira e, no desktop, põe a capa ao lado do texto.        */

.jogos > li { display: flex; }
.jogo { padding: 0; gap: 0; width: 100%; }
.jogo .capa {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--raise-2); border-bottom: 1px solid var(--line-2); border-radius: 3px 3px 0 0;
}
.jogo-corpo { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; padding: 20px 22px 22px; }
.jogo .ficha-nome { overflow-wrap: anywhere; }
.jogo .botao { margin-top: auto; align-self: flex-start; }
.selo-novo { color: var(--copper); border: 1px solid var(--copper); border-radius: 2px; padding: 2px 8px; }

.jogos .destaque { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .destaque .jogo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .destaque .capa { height: 100%; border-bottom: 0; border-right: 1px solid var(--line-2); border-radius: 3px 0 0 3px; }
  .destaque .jogo-corpo { justify-content: center; padding: 32px 34px; }
  .destaque .ficha-nome { font-size: clamp(36px, 3.4vw, 50px); }
  .destaque .botao { margin-top: 8px; }
}