/* BetZap — cards da vitrine v3. Aplicação exclusiva à página inicial. */
/* Mantém as cores de marca existentes; altera proporção, textos e ranking. */
body:not(.admin) .reference-lobby .games {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 2px 1px 12px;
  -webkit-overflow-scrolling: touch;
}
body:not(.admin) .reference-lobby .games .game {
  flex: 0 0 clamp(140px, 13vw, 172px);
  width: clamp(140px, 13vw, 172px);
  min-width: 0;
  scroll-snap-align: start;
  text-align: left;
}
body:not(.admin) .reference-lobby .games .cover,
body:not(.admin) .reference-lobby .rank-games .cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 11px;
  overflow: hidden;
  background: #10141b;
  border: 1px solid rgba(255,255,255,.07);
}
body:not(.admin) .reference-lobby .games .cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Rótulos existentes, antes ocultos pelo CSS antigo. */
body:not(.admin) .reference-lobby .games .game > h4 {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0;
  margin: 9px 0 1px;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
body:not(.admin) .reference-lobby .games .game > small {
  display: block;
  color: #9699a4;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ranking abaixo da imagem: o número fica ao lado do nome. */
body:not(.admin) .reference-lobby .rank-games .game {
  padding-bottom: 1px;
}
body:not(.admin) .reference-lobby .rank-games .game > h4,
body:not(.admin) .reference-lobby .rank-games .game > small {
  padding-left: 27px;
}
body:not(.admin) .reference-lobby .rank-games .game > h4 {
  margin-top: 10px;
}
body:not(.admin) .reference-lobby .rank-games .game .rank {
  position: absolute;
  left: 1px;
  top: calc(100% + 9px);
  color: #ff451e;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 31px;
  opacity: 1;
  text-shadow: none;
  z-index: 2;
  pointer-events: none;
}
/* Tornar o número visível fora do botão sem cortar a capa. */
body:not(.admin) .reference-lobby .rank-games .cover { overflow: visible; }
body:not(.admin) .reference-lobby .rank-games .cover > img { border-radius: 10px; }
body:not(.admin) .reference-lobby .rank-games .cover::after { border-radius: 0 0 10px 10px; }
body:not(.admin) .reference-lobby .games .fav { background: rgba(4,9,13,.72); }
body:not(.admin) .reference-lobby .section-head { margin-top: 26px; margin-bottom: 12px; }
/* Mantém a personalização anterior da fonte dos títulos em 14px. */
body:not(.admin) .reference-lobby .section-head h2 { font-size: 14px; }
@media (max-width: 720px) {
  body:not(.admin) .reference-lobby .games { gap: 10px; }
  body:not(.admin) .reference-lobby .games .game {
    flex-basis: clamp(120px, 36vw, 150px);
    width: clamp(120px, 36vw, 150px);
  }
  body:not(.admin) .reference-lobby .rank-games .game .rank { font-size: 25px; }
}