/* =========================================================
   JOGOS EM QUALQUER QUANTIDADE (home)
   Os jogos vêm do admin (/admin/jogos), então a página precisa ficar bonita
   com 0, 1, 2, 3... N jogos. As classes abaixo só entram quando há POUCOS
   jogos (Views/Home/Index.cshtml decide); com a lista de sempre nada muda.
   - .gpills--grande   atalhos do topo com 1 ou 2 jogos: pílulas maiores
   - .gpills--poucas   até 3 pílulas: no celular quebram a linha centralizadas
                       (sem rolagem e sem o esmaecido de "tem mais")
   - .explore__games--poucos  até 4 jogos no fim da página: cartões maiores,
                       que também aparecem no celular
   Sem nenhum jogo, o Razor nem desenha a lista.
   ========================================================= */

/* ---------- atalhos do topo (ao lado da busca) ---------- */

.gpills--grande .gpill,
.explore__games--poucos .gpill {
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0 1.625rem;
  border-radius: 16px;
  font-size: 1.25rem;
}

.gpills--grande .gpill--icon,
.explore__games--poucos .gpill--icon {
  padding-left: 0.375rem;
}

.gpills--grande .gpill__icon,
.explore__games--poucos .gpill__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 11px;
}

.gpills--grande .gpill__icon .ni,
.explore__games--poucos .gpill__icon .ni {
  font-size: 2.75rem;
}

.gpills--grande .gpills__list,
.explore__games--poucos .gpills__list {
  gap: var(--s3);
}

@media (max-width: 720px) {
  .gpills--poucas {
    margin-inline: 0;
    -webkit-mask: none;
    mask: none;
  }

  .gpills--poucas .gpills__list {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.25rem 0 0.375rem;
    overflow: visible;
  }

  .gpills--poucas .gpills__list > li:last-child {
    padding-right: 0;
  }

  .gpills--grande .gpill {
    min-height: 3.25rem;
    padding: 0 1.25rem;
    font-size: 1.125rem;
  }

  .gpills--grande .gpill__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .gpills--grande .gpill__icon .ni {
    font-size: 2.5rem;
  }
}

/* ---------- fim da página ("Explore o catálogo") ---------- */

@media (max-width: 760px) {
  /* com muitos jogos o celular esconde a lista (os atalhos do topo já cumprem o papel);
     com poucos ela cabe bem e fica, quebrando a linha centralizada */
  .explore__games.explore__games--poucos {
    display: block;
    width: 100%;
    margin-bottom: 1.25rem; /* folga para o desenho do canto de baixo não encostar nas pílulas */
  }

  .explore__games--poucos .gpills__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s2);
    padding: 0;
    overflow: visible;
  }

  .explore__games--poucos .gpills__list > li:last-child {
    padding-right: 0;
  }

  .explore__games--poucos .gpill {
    min-height: 3.125rem;
    padding: 0 1.125rem;
    font-size: 1.0625rem;
  }

  .explore__games--poucos .gpill__icon {
    width: 2.375rem;
    height: 2.375rem;
  }

  .explore__games--poucos .gpill__icon .ni {
    font-size: 2.375rem;
  }
}