/* ============================================================
   SEÇÃO DE JOGOS — sidebar vertical à esquerda + abas no topo
   Só atua dentro da seção de jogos da home (marcada pelo layout.js
   com data-sg). 1rem = 1/7.5 da largura mobile.
   ============================================================ */

/* Container das abas nativas vira grid: [sidebar | conteúdo] */
[data-sg="gx"] {
  display: grid !important;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  padding-bottom: .3rem;
}

/* ---------- SIDEBAR (abas nativas de categoria, na vertical) ---------- */
[data-sg="side"] {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky !important;
  top: var(--sg-top, 0px);
  align-self: start;
  height: auto !important;
  z-index: 2;
}
[data-sg="side"] .ui-sticky--fixed,
[data-sg="side"] .ui-sticky,
[data-sg="side"] > div {
  position: static !important;
  width: auto !important;
  top: auto !important;
  transform: none !important;
  height: auto !important;
}
[data-sg="side"] .ui-tabs__wrap {
  padding: .2rem 0 0 .2rem !important;
  overflow: visible !important;
  background: transparent !important;
  min-height: 0 !important;
  height: auto !important;
}
[data-sg="side"] .ui-tabs__nav {
  flex-direction: column !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  transform: none !important;
}
[data-sg="side"] .ui-tabs__line,
[data-sg="side"] .ui-tabs__navigation-prev,
[data-sg="side"] .ui-tabs__navigation-next {
  display: none !important;
}
[data-sg="side"] .ui-tab {
  flex: none !important;
  width: 1.5rem !important;
  height: .7rem !important;
  margin: 0 0 .2rem 0 !important;
  padding: 0 !important;
}

/* Caixinha do botão: ícone à esquerda + nome */
[data-sg="side"] [class*="_tab-item-title_"] {
  flex-direction: row !important;
  align-items: center !important;
  width: 1.5rem !important;
  min-width: 1.5rem !important;
  max-width: 1.5rem !important;
  height: .7rem !important;
  padding: 0 .06rem 0 .04rem !important;
  border-radius: .1rem;
  background: #0d4b44;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 .02rem .04rem rgba(0, 0, 0, .25);
  color: #e6e6e6 !important;
  box-sizing: border-box;
}
[data-sg="side"] [class*="_tab-item-title_"] [class*="_icon_"] {
  width: .48rem !important;
  height: .36rem !important;
  flex-shrink: 0;
  font-size: .36rem !important;
}
[data-sg="side"] [class*="_tab-item-title_"] [class*="_icon_"] img,
[data-sg="side"] [class*="_tab-item-title_"] [class*="_icon_"] i {
  max-width: .48rem !important;
  max-height: .36rem !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}
[data-sg="side"] [class*="_tab-item-title_"] [class*="_text_"] {
  flex: 1;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: .2rem !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e6e6e6 !important;
}
/* Item ativo */
[data-sg="side"] .ui-tab--active [class*="_tab-item-title_"] {
  border-color: rgba(253, 216, 128, .35);
}
[data-sg="side"] .ui-tab--active [class*="_tab-item-title_"] [class*="_text_"] {
  color: #fdd880 !important;
}

/* ---------- ABAS DO TOPO: Popular / Recente / Favoritos ---------- */
#sg-game-tabs {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: stretch;
  height: .7rem;
  margin: 0 .2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
#sg-game-tabs .sg-gt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: .26rem;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#sg-game-tabs .sg-gt.active { color: #fdd880; }
#sg-game-tabs .sg-gt.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: .9rem;
  height: .04rem;
  border-radius: .04rem;
  background: #fdd880;
}

/* ---------- CONTEÚDO (grid de jogos) ---------- */
[data-sg="content"] {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 0 .2rem;
  overflow: hidden;            /* nunca invade a sidebar */
}
/* Grade de 3 cards centralizada na coluna */
[data-sg="content"] [class*="_list-ordinary_"] {
  margin: 0 auto;
  max-width: 100%;
}
[data-sg="content"] [class*="_game-list-box_"] {
  padding-top: .2rem !important;
}
/* Some o título "Popular" do primeiro bloco (a aba já mostra) */
[data-sg-hide] { display: none !important; }

/* ---------- BARRA LATERAL PRÓPRIA (lista fixa igual ao modelo) ---------- */
/* a nativa continua no DOM (cliques/rolagem), só não aparece */
[data-sg="gx"] > [data-sg="side"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#sg-side-nav {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: var(--sg-top, 0px);
  align-self: start;
  z-index: 2;
  padding: 0 0 0 .2rem;   /* "Popular" na mesma altura da linha das abas */
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
#sg-side-nav .sg-sn {
  display: flex;
  align-items: center;
  width: 1.5rem;
  height: .7rem;
  padding: 0 .03rem 0 .04rem;
  box-sizing: border-box;
  border-radius: .1rem;
  background: #0d4b44;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 .02rem .04rem rgba(0, 0, 0, .25);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#sg-side-nav .sg-sn-ico {
  width: .48rem;
  height: .36rem;
  object-fit: contain;
  flex-shrink: 0;
}
#sg-side-nav .sg-sn-txt {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: .185rem;
  letter-spacing: -.005rem;
  line-height: 1.1;
  color: #e6e6e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sg-side-nav .sg-sn.active { border-color: rgba(253, 216, 128, .45); }
#sg-side-nav .sg-sn.active .sg-sn-txt { color: #fdd880; }

/* ---------- BOTÃO "Mais N jogos  Expandir ⌄" ---------- */
.sg-load-more {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: .1rem;
  margin: .2rem 0 .1rem;
  padding: 0 .1rem;
  font-size: .24rem !important;
  text-align: right !important;
}
.sg-load-more .sg-load-more-info {
  color: #2f9e8f;
}
.sg-load-more [class*="_trigger-text_"] {
  display: inline-flex !important;
  align-items: center;
  margin-top: 0 !important;
  color: #fdd880 !important;
}
.sg-load-more [class*="_down-arrow_"] {
  color: #fdd880;
  fill: #fdd880;
  width: .22rem !important;
  height: .22rem !important;
}
.sg-load-more [class*="_down-arrow_"] path { fill: #fdd880 !important; }
.sg-load-more img[class*="_down-arrow_"] {
  /* se o ícone vier como <img>, pinta de dourado */
  filter: brightness(0) saturate(100%) invert(87%) sepia(37%) saturate(612%) hue-rotate(338deg) brightness(103%) contrast(98%);
}

/* ============================================================
   REMOVER CARD DE DESTAQUE (dragão grande à esquerda da aba
   Popular). O JS acha o wrapper .name-img-layout do card individual
   e marca com data-sg-hide-featured. Só esse card é removido —
   nunca a grade inteira, nunca a seção "Jogo especiais".
   ============================================================ */
[data-sg-hide-featured="1"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  background: none !important;
  background-image: none !important;
}

/* Também remove qualquer card cuja imagem seja a arte institucional
   PG Slots (custom_BRL.avif) — defesa extra via seletor de atributo. */
.name-img-layout[style*="custom_BRL.avif"],
[class*="_name-img-layout_"][style*="custom_BRL.avif"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove o <img> do PG Slots marcado pelo index.php */
img[data-sg-pg-art="1"] {
  display: none !important;
}

/* Oculta os controles nativos de Login/Registro apenas no cabeçalho.
   Os botões customizados em #sg-auth-bar, abaixo do jackpot, permanecem. */
#app .lobby-home-header-container [class*="_un-login_"],
#app .lobby-home-header-container #loginClick,
#app .lobby-home-header-container #registerClickModal {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Logo fornecida: elemento independente do carregamento lazy do lobby. */
#sg-fixed-brand-logo {
  position: fixed !important;
  top: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(330px, 88vw) !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
  visibility: hidden !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
}
#sg-fixed-brand-logo[data-sg-ready="1"] {
  visibility: visible !important;
}