/**
 * ░░░░░██╗░█████╗░░█████╗░░█████╗░  ░░██╗  ██████╗░███████╗██╗░░░██╗  ██╗░░
 * ░░░░░██║██╔══██╗██╔══██╗██╔══██╗  ░██╔╝  ██╔══██╗██╔════╝██║░░░██║  ╚██╗░
 * ░░░░░██║██║░░██║███████║██║░░██║  ██╔╝░  ██║░░██║█████╗░░╚██╗░██╔╝  ░╚██╗
 * ██╗░░██║██║░░██║██╔══██║██║░░██║  ╚██╗░  ██║░░██║██╔══╝░░░╚████╔╝░  ░██╔╝
 * ╚█████╔╝╚█████╔╝██║░░██║╚█████╔╝  ░╚██╗  ██████╔╝███████╗░░╚██╔╝░░  ██╔╝░
 * ░╚════╝░░╚════╝░╚═╝░░╚═╝░╚════╝░  ░░╚═╝  ╚═════╝░╚══════╝░░░╚═╝░░░  ╚═╝░░
 *
 * Central iGaming — desenvolvido por João
 *
 * Canal      https://t.me/central_igaming_channel
 * Network    https://t.me/central_igaming
 * Contato    https://t.me/Joao_igaming
 */

/* ============================================================================
   JogPIX — pages/lobby.css  (HOME / lobby)
   Estrutura (ver jp_render_lobby):
     .jp-lobby-shell
       .jp-real-hero-combo
         .jp-real-main-banner (banner topo, 688/236)
         .jp-real-top-grid  →  .jp-real-jackpot-card (376/320) + .jp-real-side-banners
       .jp-real-ticker
       .jp-lobby-cats (categorias horizontais)
       .jp-lobby-section* (seções de jogos)
   Mobile-first: tudo fluido dentro da moldura.
   ============================================================================ */

.jp-lobby-shell { display: flex; flex-direction: column; gap: 10px; }

/* ---- HERO: banner + (jackpot | banners laterais) ------------------------- */
.jp-real-hero-combo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.jp-real-main-banner {
  display: block;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.jp-real-main-banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 688 / 236;
  object-fit: cover;
  object-position: center;
}

.jp-real-top-grid {
  display: grid;
  /* Proporção vem dos PRÓPRIOS assets, não de um chute:
     jackpot = 376x320 e cada banner lateral = 300x96 (três empilhados com 6px de
     gap dão ~300px de altura, ou seja a coluna direita foi desenhada com 300 de
     largura). 376:300 é o que faz a arte caber inteira.

     Estava 1.62fr : 0.9fr (= 1.8:1), coluna direita estreita demais: o
     `object-fit: cover` dos banners descartava ~34% da largura, 41px de cada
     lado, e comia justamente o texto — "CADASTRE-SE" aparecia como "STRE-SE" e
     "CONVIDE UM AMIGO" como "NVIDE UM AMIGO". */
  grid-template-columns: minmax(0, 376fr) minmax(0, 300fr);
  gap: 6px;
  align-items: stretch;
  width: 100%;
}

/* coluna esquerda: jackpot */
.jp-real-jackpot-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 376 / 320;
  /* Piso de altura: os dígitos são proporcionais e o feed de ganhadores tem 72px
     fixos, então abaixo de ~157px o feed sobe por cima do número do jackpot. */
  min-height: 158px;
  border-radius: 10px;
  overflow: hidden;
}
.jp-real-jackpot-card > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* dígitos do jackpot sobre a arte */
.jp-jackpot-display {
  position: absolute;
  top: 30.4%; left: 7%; right: 7%;
  height: 20%;
  display: flex; align-items: center; justify-content: center;
  gap: 2px;
  z-index: 2;
}
.jp-jackpot-digit {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: clamp(16px, 5.3vw, 22px);
  height: clamp(24px, 8vw, 32px);
  padding: 0 2px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .55);
  color: var(--jp-yellow);
  font-size: clamp(17px, 5.4vw, 23px);
  font-weight: 900; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.jp-jackpot-sep { font-size: clamp(16px, 5vw, 21px); margin: 0 -2px; color: var(--jp-yellow); font-weight: 900; }

/* feed de ganhadores (marquee) sobre a arte */
.jp-winner-marquee {
  position: absolute;
  left: 7px; right: 7px; bottom: 6px;
  height: 72px;
  overflow: hidden;
  z-index: 2;
}
.jp-winner-track {
  display: flex; flex-direction: column;
  gap: 3px;
}
.jp-winner-feed article {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .42);
  transition: background .3s;
}
.jp-winner-feed article.is-on { background: rgba(var(--jp-purple-rgb), .55); }
.jp-winner-feed img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.jp-winner-feed span { min-width: 0; overflow: hidden; }
.jp-winner-feed b { display: block; font-size: 8px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-winner-feed small { display: block; font-size: 7px; color: var(--jp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-winner-feed strong { font-size: 8px; color: var(--jp-yellow); white-space: nowrap; }

/* coluna direita: 3 banners empilhados */
.jp-real-side-banners {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-width: 0;
  /* a folga que sobrar vira espaço entre os banners, nunca esticão */
  justify-content: space-between;
}
.jp-real-side-banners a {
  display: block;
  /* Não esticar: proporção diferente da do arquivo (300x96) vira corte lateral
     com object-fit:cover, e some o começo do texto da arte.

     Travando a proporção no valor do próprio asset, a arte cabe inteira em
     QUALQUER largura de tela: telefone menor só reduz o banner
     proporcionalmente, sem mudar o enquadramento. */
  flex: 0 0 auto;
  aspect-ratio: 300 / 96;
  border-radius: 8px;
  overflow: hidden;
}
/* `contain` em vez de `cover`: garante que nada seja cortado mesmo se um
   cliente trocar a arte por outra de proporção diferente. */
.jp-real-side-banners img { width: 100%; height: 100%; object-fit: contain; }

/* ---- TICKER (faixa de aviso) --------------------------------------------- */
.jp-real-ticker {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% + var(--jp-frame-pad) * 2);
  margin: 4px calc(var(--jp-frame-pad) * -1) 4px;
  height: 30px; padding: 0 12px;
  background: rgba(var(--jp-purple-rgb), .35);
  font-size: 11px; color: var(--jp-muted); font-weight: 700;
  overflow: hidden;
}
.jp-real-ticker i { color: var(--jp-yellow); flex: 0 0 auto; }
.jp-real-ticker span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-real-ticker b {
  flex: 0 0 auto;
  background: var(--jp-grad-action);
  border-radius: 999px; padding: 2px 9px;
  font-size: 10px; color: #fff;
}

/* ---- CATEGORIAS (scroll horizontal) -------------------------------------- */
.jp-lobby-cats {
  display: flex;
  gap: 6px;
  width: calc(100% + var(--jp-frame-pad));
  margin: 2px calc(var(--jp-frame-pad) * -1) 0 0;
  padding: 4px 12px 8px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.jp-lobby-cats::-webkit-scrollbar { display: none; }
.jp-lobby-cats a {
  flex: 0 0 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  width: 58px; height: 58px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--jp-muted); font-size: 8.7px; font-weight: 800;
  text-align: center;
}
.jp-lobby-cats a.active {
  background: rgba(var(--jp-purple-rgb), .42);
  border-color: rgba(var(--jp-purple-rgb), .6);
  color: #fff;
}
.jp-lobby-cats img { width: 27px; height: 27px; object-fit: contain; }

/* ---- SEÇÕES DE JOGOS ----------------------------------------------------- */
.jp-lobby-section {
  width: 100%;
  padding: 10px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--jp-panel-rgb), .35), rgba(var(--jp-card-rgb), .45));
  border: 1px solid rgba(255, 255, 255, .05);
}
.jp-lobby-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.jp-lobby-section-head h2 {
  display: flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 900;
}
.jp-lobby-section-head h2 em {
  font-style: normal; font-size: 11px; font-weight: 800;
  color: var(--jp-yellow);
  background: rgba(var(--jp-yellow-rgb), .12);
  border-radius: 999px; padding: 1px 8px;
}
.jp-lobby-section-head a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 800;
  color: var(--jp-muted);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px; padding: 6px 9px;
  white-space: nowrap;
}

/* grade de cards: 4 colunas (3 no muito estreito) */
.jp-lobby-games, .jp-real-game-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

@media (max-width: 340px) {
  /* Não empilhar nem esconder os banners: isso daria ao celular pequeno um layout
     diferente, em vez do mesmo layout menor.
     Só a grade de jogos passa para 3 colunas, senão os cards ficam pequenos
     demais para reconhecer o jogo. */
  .jp-lobby-games, .jp-real-game-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- atalhos de gamificação (se usados na home) -------------------------- */
.jp-gamif-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }