/*
 * Correcoes de layout aplicadas POR CIMA do bundle compilado.
 *
 * O bundle (index-CX7pE5UZ.css) nao tem fonte neste servidor, entao nada aqui
 * pode ser editado la'. Este arquivo entra depois dele no <head>, com a mesma
 * especificidade dos seletores que corrige — por ordem, vence.
 *
 * ---------------------------------------------------------------------------
 * Problema 1: o topbar cobria o saldo e os botoes Depositar/Sacar do lobby.
 *
 * O topbar e' `position:sticky` com `top:max(8px,env(safe-area-inset-top))` e
 * altura variavel (o logo manda: 56px + padding + borda ~= 70px). Ja' o lobby
 * e' `position:fixed` com o topo CHUMBADO em 89px (62px em <=700px) e
 * `z-index:20`, contra o `z-index:45` do topbar.
 *
 * Num celular comum: topbar termina em 8+70 = 78px, o lobby comeca em 62px —
 * 16px do card de saldo ficam embaixo da faixa. Com notch (safe-area ~47px) o
 * topbar termina em ~117px e engole 55px: o saldo inteiro e um pedaco dos
 * botoes. E' exatamente o sintoma relatado.
 *
 * A correcao troca o numero chumbado por --snake-topbar-bottom, que o
 * ui-fixes.js mede do proprio topbar (rect.bottom + folga) e reescreve em
 * resize, rotacao e sempre que o topbar muda de tamanho. O valor abaixo e' so'
 * a estimativa do primeiro quadro, antes do script rodar.
 */
:root {
  --snake-topbar-bottom: calc(max(8px, env(safe-area-inset-top, 0px)) + 78px);
}

/* Lobby e tela de carregamento: ambos `position:fixed` presos ao topbar. */
.bb-root .panel-page.game-home-page.snake-lobby-scroll,
.bb-root .panel-page.game-home-page.snake-loading-view {
  top: var(--snake-topbar-bottom) !important;
  height: calc(100dvh - var(--snake-topbar-bottom)) !important;
}

/* Demais paginas do painel (carteira, perfil, apostas...): mesma conta. */
.bb-root .panel-shell > .panel-page:not(.game-home-page) {
  height: calc(100dvh - var(--snake-topbar-bottom)) !important;
}

/*
 * O card de saldo e' o primeiro elemento do lobby e ficava colado no topbar.
 * Com o offset correto ele aparece inteiro; esta folga evita que a sombra do
 * topbar caia em cima dele.
 */
.bb-root .snake-lobby-scroll .snake-wallet-actions {
  margin-top: 10px;
}

/*
 * ---------------------------------------------------------------------------
 * Problema 2: o arranjo do lobby em si — o jogador descreveu como
 * "desorganizado".
 *
 * Nao e' sobreposicao como o problema 1: aqui tudo aparece, mas mal
 * distribuido. A coluna da esquerda e' travada em 600-680px e a dos valores
 * de entrada em tres colunas fixas, entao com quatro valores o ultimo cai
 * sozinho numa segunda linha, e em telas de 1100-1400px sobra margem dos dois
 * lados enquanto o conteudo fica espremido.
 */

/* ── Espaçamento da grade ────────────────────────────────────────────────────
 * As colunas em si são definidas mais abaixo (problema 4): aqui fica só o
 * respiro entre elas e no topo. */
@media (min-width: 1101px) {
  .bb-root .snake-page.snake-page-lobby {
    column-gap: clamp(20px, 2.4vw, 34px);
    padding-top: 18px;
  }
}

/* ── Valores de entrada ──────────────────────────────────────────────────────
 * Eram três por linha fixos: com quatro valores, o último ficava sozinho numa
 * segunda linha. `auto-fit` acomoda 3, 4 ou 6 valores sem sobra. */
.bb-root .snake-bets {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
}

/* ── Faixa de skins ──────────────────────────────────────────────────────────
 * Dava para rolar mas não parecia rolável, e as miniaturas ficavam apertadas
 * umas nas outras. Mais respiro e uma barra de rolagem discreta resolvem. */
.bb-root .snake-skin-rail {
  gap: 10px;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: #3a4a6a transparent;
}
.bb-root .snake-skin-rail::-webkit-scrollbar { height: 6px; }
.bb-root .snake-skin-rail::-webkit-scrollbar-thumb {
  background: #3a4a6a;
  border-radius: 99px;
}

/* A cobra escolhida é o elemento principal do bloco: merece mais altura. */
.bb-root .snake-customizer { padding: 14px; }
.bb-root .snake-skin-selected { gap: 16px; margin-top: 12px; }

/* ── Respiro entre os blocos ─────────────────────────────────────────────────
 * Margens originais de 17–20px entre seções de altura diferente deixavam o
 * cartão com ritmo irregular. */
.bb-root .snake-lobby-meta { margin: 14px 0; }
.bb-root .snake-rules { margin: 16px 0; gap: 9px; }

/* ── Carteira (saldo, depositar e sacar) ─────────────────────────────────────
 * A coluna da direita fica colada no topo; alinhar com a caixa do jogo tira a
 * sensação de que são duas telas soltas. */
@media (min-width: 1101px) {
  .bb-root .snake-page-lobby .snake-wallet-actions {
    top: 18px;
    padding: 16px;
  }
}

/* ── Telas estreitas ─────────────────────────────────────────────────────────
 * Abaixo de 1100px o bundle já empilha; o que faltava era largura máxima e
 * centralização, senão o cartão encosta nas bordas. */
@media (max-width: 1100px) {
  .bb-root .snake-page.snake-page-lobby {
    padding-left: 14px;
    padding-right: 14px;
  }
  .bb-root .snake-lobby-card {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*
 * ---------------------------------------------------------------------------
 * Problema 3: o menu flutuante comia o fim do cartão.
 *
 * `.snake-bottom-menu` é `position:fixed`, 72px de altura mais
 * `max(8px, safe-area)` de folga — ou seja, ocupa ~80px na base da tela. O
 * lobby reservava 44px de `padding-bottom`, então a última linha do cartão
 * (o "Saldo" e o "Coleta após") ficava por baixo do menu, cortada.
 */
.bb-root .snake-page.snake-page-lobby {
  padding-bottom: calc(96px + max(8px, env(safe-area-inset-bottom, 0px)));
}

/* Rolar até o fim também precisa parar acima do menu, não embaixo dele. */
.bb-root .panel-page.game-home-page.snake-lobby-scroll {
  scroll-padding-bottom: 96px;
}

/*
 * Com o cartão da carteira curto e o do jogo alto, a coluna da direita ficava
 * com um vazio grande embaixo. Alinhar os dois pelo topo com a mesma folga e
 * aproximar as larguras tira a sensação de peças soltas.
 */
/*
 * ---------------------------------------------------------------------------
 * Problema 4: no desktop nada ficava no mesmo eixo.
 *
 * O original usa duas colunas (jogo | carteira) com `justify-content:center`.
 * Isso centra o PAR, não o cartão: o cartão do jogo ficava à esquerda do
 * centro e a carteira à direita. Só que a barra do topo e o menu de baixo são
 * `position:fixed` com `left:50%` — centrados na TELA. Eram três eixos na
 * mesma página.
 *
 * A solução é a mesma que o próprio bundle usa no celular: UMA coluna, com a
 * carteira em cima e o jogo embaixo. Tudo cai no eixo da tela, e o saldo para
 * de flutuar ao lado do cartão de jogar, onde não tinha relação com nada.
 *
 * O `position:sticky` da carteira sai junto: numa coluna só ele faria o cartão
 * de saldo grudar no topo e passar por cima do jogo ao rolar.
 */
@media (min-width: 1101px) {
  .bb-root .snake-page.snake-page-lobby {
    grid-template-columns: minmax(600px, 720px);
    grid-template-rows: auto auto;
    justify-content: center;
    align-content: start;
    row-gap: 14px;
  }

  .bb-root .snake-page-lobby .snake-wallet-actions {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .bb-root .snake-page-lobby .snake-lobby-card {
    grid-column: 1;
    grid-row: 2;
  }
}

/*
 * ---------------------------------------------------------------------------
 * Fundo do lobby.
 *
 * O original era um degradê roxo (`radial-gradient` no `.snake-page-lobby`).
 * Aqui entra a arte com as cobrinhas de neon. Duas camadas: um véu escuro por
 * cima da imagem e a imagem embaixo — sem o véu, os cantos claros da arte
 * brigam com o texto dos cartões. O miolo da arte já é escuro, que é onde os
 * cartões ficam, então o véu é leve.
 *
 * `fixed` prende o fundo à janela: ao rolar o lobby a arte não desliza junto,
 * que é o que se espera de um papel de parede. Em telas estreitas vira
 * `scroll`, porque `fixed` custa caro para rolar em celular.
 *
 * A tela de indicar (/referrals) entra no MESMO seletor, não numa cópia: são o
 * mesmo papel de parede, e duas regras iguais sairiam de sincronia na primeira
 * troca de arte. A classe `snake-page-referrals` vem do `pageClassName` que o
 * bundle repassa ao container `.panel-page` — sem ela, a única forma de atingir
 * só essa página seria pelo `:has()` de um filho, que é frágil.
 */
.bb-root .snake-page.snake-page-lobby,
.bb-root .panel-page.snake-page-referrals {
  background-color: #0b0a1e;
  background-image:
    linear-gradient(rgba(10, 8, 28, .34), rgba(10, 8, 28, .34)),
    url("/brand/fundo-lobby.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

@media (max-width: 1100px) {
  .bb-root .snake-page.snake-page-lobby,
  .bb-root .panel-page.snake-page-referrals {
    background-attachment: scroll, scroll;
  }
}

/*
 * Os cartões da tela de indicar têm fundo sólido (`So` no bundle), e sobre a
 * arte eles pareciam adesivos colados. Um leve desfoque atrás faz a arte
 * atravessar sem prejudicar a leitura do número.
 */
.bb-root .panel-page.snake-page-referrals .aff-niveis > div > div {
  backdrop-filter: blur(2px);
}