/* ==========================================================================
   BUBBLE WIN — TEMA "CÂMARA DE PRESSÃO"
   ----------------------------------------------------------------------
   Direção de design: instrumento de mergulho de precisão. Vigia (porthole)
   com anel de latão rebitado, mostradores tipo manômetro, um único tom de
   brilho bioluminescente (ametista) e latão/âmbar como metal nobre — roxo
   como cor de assinatura, mas aplicado em placa/vidro com hardware de
   latão, não em gradiente neon achatado. A narrativa: bolhas sobem sob
   pressão e estouram = prêmio na superfície.

   Sobrescreve as classes .bbh-* (home) e .bb-* (tela do jogo) do bundle
   compilado. Carregado por último → vence a cascata. Não altera o app.
   ========================================================================== */

:root {
  /* ---- superfícies: preto-tinta com fundo do mar profundo ---- */
  --bw-bg:        #05100f;
  --bw-bg-2:      #081a19;
  --bw-card:      #0b211f;
  --bw-card-2:    #0f2b28;
  --bw-border:    rgba(201, 161, 90, .26);   /* costura de latão */
  --bw-border-2:  rgba(201, 161, 90, .14);

  --bw-text:      #eef6f3;
  --bw-muted:     #8fada7;

  /* ---- metal nobre (estrutura / confiança) ---- */
  --bw-brass:     #c9a15a;
  --bw-brass-l:   #eccf8e;
  --bw-brass-d:   #7c5e2c;

  /* ---- brilho bioluminescente único (energia / ação) ---- */
  --bw-violet:      #8b5cf6;
  --bw-violet-l:    #c4b5fd;
  --bw-violet-d:    #5b32c9;

  /* ---- prêmio ---- */
  --bw-amber:     #ffb648;
  --bw-amber-d:   #b9791f;

  --bw-danger:    #ff7a68;

  /* tipografia */
  --bw-font-display: 'Fraunces', 'Georgia', serif;
  --bw-font-ui:      'Space Grotesk', 'Roboto Condensed', sans-serif;

  /* textura de grão — profundidade tátil sem imagem raster */
  --bw-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========================================================================
   FUNDO GERAL + GUARDAS DE LAYOUT
   ======================================================================== */
body.bg-base,
:is(.dark .bg-base) { background-color: var(--bw-bg) !important; }

.bbh-page {
  background: var(--bw-bg) !important;
  color: var(--bw-text) !important;
  font-family: var(--bw-font-ui) !important;
  position: relative;
}
.bbh-page * { min-width: 0; }
/* Nada de overflow-x aqui dentro. Declarar overflow-x:hidden sem
   overflow-y (ou mesmo COM overflow-y:visible — testei, não adianta: a
   conversão do CSS pro valor computado final "auto" acontece de
   qualquer jeito) transforma cada um desses blocos numa área de
   rolagem própria assim que o conteúdo interno passa da altura da
   caixa — foi exatamente isso que fazia o herói "rolar separado" do
   resto da página. A proteção contra estouro horizontal já existe nas
   camadas de fora (html, body, #galaxsysgaming logo abaixo) e cobre o
   site inteiro sem esse risco. */
.bbh-hero, .bbh-hero-in, .bbh-section, .bbh-final { max-width: 100%; }
html, body { overflow-x: hidden; max-width: 100vw; }
#galaxsysgaming, #galaxsysgaming > * { max-width: 100vw; overflow-x: hidden; }

/* grão sutil sobre toda a página — a marca registrada do acabamento */
.bbh-page::before,
.bb-page.bb-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--bw-grain);
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.bbh-page > * { position: relative; z-index: 2; }

/* ========================================================================
   NAVBAR
   ======================================================================== */
.navtop-color,
:is(.dark .navtop-color) {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: blur(8px);
}
nav.navtop-color.mt-0 { background-color: rgba(5, 16, 15, 0) !important; }
nav.navtop-color:not(.mt-0) {
  background-color: rgba(5, 16, 15, .86) !important;
  border-bottom: 1px solid var(--bw-border) !important;
}
.bgbotaop {
  background: linear-gradient(180deg, var(--bw-violet) 0%, var(--bw-violet-d) 100%) !important;
  box-shadow: 0 6px 18px rgba(139, 92, 246, .35) !important;
  font-family: var(--bw-font-ui) !important;
  font-weight: 700 !important;
}
nav.navtop-color a img { height: 42px !important; max-width: 180px !important; }

/* ========================================================================
   HERO — vigia de latão (porthole) atrás do título
   ======================================================================== */
.bbh-hero { min-height: 0 !important; position: relative; }
.bbh-hero-img {
  background-image: url('/assets/theme/hero-bg.png') !important;
  background-position: center top !important;
  background-size: cover !important;
  filter: saturate(.92) contrast(1.04);
}
.bbh-hero-shade {
  background: linear-gradient(
    rgba(5, 16, 15, .08) 0%,
    rgba(5, 16, 15, .22) 34%,
    rgba(6, 20, 19, .64) 68%,
    rgba(6, 20, 19, .93) 88%,
    var(--bw-bg) 100%
  ) !important;
}

.bbh-hero-in { padding: 40px 22px 54px !important; position: relative; }

/* anel de manômetro gigante atrás do conteúdo — âncora de diferenciação */
.bbh-hero-in::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: min(560px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    repeating-conic-gradient(var(--bw-brass) 0deg 2.2deg, transparent 2.2deg 15deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 8px), #000 calc(100% - 2px), transparent calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 8px), #000 calc(100% - 2px), transparent calc(100% - 1px));
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.bbh-hero-in > * { position: relative; z-index: 1; }

@media (min-width: 900px) {
  .bbh-hero-img { background-position: center 22% !important; }
  .bbh-hero-in { padding: 56px 22px 66px !important; }
}

/* logado: esconde a parte de marketing do herói (selo "online", título
   "Estoure e Ganhe", parágrafo, selinhos) — quem já tem conta não precisa
   do discurso de venda, e o card de escolher o valor da aposta (que o
   próprio app já mostra no lugar da vitrine de cadastro) passa a ser o
   primeiro conteúdo visível abaixo do cabeçalho. A classe "bw-authed" é
   ligada pelo pwa.js, fora da árvore do Vue, lendo o token de login que o
   app já grava sozinho no localStorage. */
html.bw-authed .bbh-online,
html.bw-authed .bbh-h1,
html.bw-authed .bbh-hero-p,
html.bw-authed .bbh-badges {
  display: none !important;
}
/* com o título/parágrafo/selos escondidos, o respiro generoso que existia
   pra caber tudo isso (calculado pra versão de marketing) sobra em volta
   do card de aposta e empurra o botão "Jogar agora" pra baixo, some em
   celulares mais baixos. Encolhe pra caber mais no primeiro tela. */
html.bw-authed .bbh-hero-in {
  padding: 12px 16px 16px !important;
}
html.bw-authed .bbh-hero-in::before { display: none !important; }

.bbh-online {
  background: rgba(6, 20, 19, .6) !important;
  border: 1px solid var(--bw-border) !important;
  color: #d9ece6 !important;
  font-family: var(--bw-font-ui) !important;
  border-radius: 999px !important;
}
/* ponto "sonar" no lugar do ping genérico */
.bbh-dot, .bbh-online-mini, .bbh-online-float {
  background: var(--bw-violet) !important;
  box-shadow: 0 0 0 0 rgba(139, 92, 246, .6) !important;
}
.bbh-dot-ping {
  background: var(--bw-violet) !important;
  animation: bwSonarPing 2.6s ease-out infinite !important;
}
@keyframes bwSonarPing {
  0%   { transform: scale(1);   opacity: .7; }
  80%  { transform: scale(2.6); opacity: 0;  }
  100% { transform: scale(2.6); opacity: 0;  }
}

.bbh-h1, .bbh-h2 {
  font-family: var(--bw-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}
.bbh-h1 {
  font-size: 47px !important;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .55) !important;
}
.bbh-h1-gold {
  font-style: italic;
  color: var(--bw-amber) !important;
  text-shadow: 0 3px 0 #5a3a08, 0 10px 26px rgba(0, 0, 0, .55) !important;
}
.bbh-hero-p { color: #dcece8cf !important; font-family: var(--bw-font-ui) !important; }
.bbh-aqua { color: var(--bw-violet-l) !important; }

/* ========================================================================
   DIVISOR "TENSÃO SUPERFICIAL" — onde o herói encontra a página
   ======================================================================== */
.bbh-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,58 350,2 600,26 C850,54 1050,4 1200,28 L1200,60 L0,60 Z' fill='%2305100f'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}

/* ========================================================================
   BOTÕES — placas de latão rebitadas
   ======================================================================== */
.bbh-cta-free, .bbh-cta-outline, .bbh-cta-play, .bbh-cta-sm {
  font-family: var(--bw-font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  border-radius: 12px !important;
  position: relative;
}

/* CTA principal: vidro de bolha teal com rebites de latão nos cantos */
.bbh-cta-free {
  color: #1c0f38 !important;
  background:
    radial-gradient(circle 2.5px at 11px 9px,  var(--bw-brass-l) 97%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 11px) 9px, var(--bw-brass-l) 97%, transparent 100%),
    linear-gradient(180deg, #e4d9ff 0%, var(--bw-violet-l) 42%, var(--bw-violet) 58%, var(--bw-violet-d) 100%) !important;
  border: 1px solid #4a25b5 !important;
  box-shadow:
    0 6px #4a25b5,
    0 0 28px rgba(139, 92, 246, .4),
    0 16px 38px rgba(15, 156, 133, .3),
    inset 0 2px 2px rgba(255, 255, 255, .55) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .4) !important;
}
.bbh-cta-free:active {
  box-shadow: 0 2px #4a25b5, 0 0 18px rgba(139, 92, 246, .45), inset 0 2px 2px rgba(255, 255, 255, .5) !important;
}

/* CTA secundário: placa de latão escovado */
.bbh-cta-outline {
  color: #2c2005 !important;
  background:
    radial-gradient(circle 2.5px at 11px 9px, #4a3610 97%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 11px) 9px, #4a3610 97%, transparent 100%),
    linear-gradient(180deg, var(--bw-brass-l) 0%, var(--bw-brass) 52%, var(--bw-brass-d) 100%) !important;
  border: 1px solid var(--bw-brass-d) !important;
  box-shadow: 0 6px #5c4520, 0 14px 28px rgba(201, 161, 90, .28), inset 0 2px 2px rgba(255, 255, 255, .4) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .35) !important;
}
.bbh-cta-outline:active { box-shadow: 0 2px #5c4520, inset 0 2px 2px rgba(255, 255, 255, .4) !important; }

.bbh-ghost.bbh-hero-login { color: #cfe6e0 !important; font-family: var(--bw-font-ui) !important; }

.bbh-badges { flex-wrap: wrap !important; max-width: 100% !important; }
.bbh-badge {
  background: rgba(6, 20, 19, .55) !important;
  border: 1px solid var(--bw-border-2) !important;
  color: #cfe6e0 !important;
  border-radius: 999px !important;
  flex: 0 1 auto !important;
}
.bbh-badge i { color: var(--bw-violet-l) !important; }

/* mensagens de estado */
.bbh-erro { color: var(--bw-danger) !important; }
.bbh-warn, .bbh-warn-ic { color: var(--bw-amber) !important; }

.bbh-stats { display: none !important; }

/* ========================================================================
   SEÇÕES
   ======================================================================== */
.bbh-section, .bbh-final { background: var(--bw-bg) !important; }

.bbh-h2 {
  color: var(--bw-text) !important;
  text-shadow: 0 2px 0 #051815, 0 6px 18px rgba(0, 0, 0, .45) !important;
}
.bbh-h2-sub { color: var(--bw-muted) !important; font-family: var(--bw-font-ui) !important; }
.bbh-divider {
  background: linear-gradient(90deg, transparent, var(--bw-border), transparent) !important;
}

/* cards "como funciona" — mostrador com borda de latão */
.bbh-step {
  background: linear-gradient(180deg, var(--bw-card-2), var(--bw-card)) !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4) !important;
}
.bbh-step h3 { color: var(--bw-text) !important; font-family: var(--bw-font-display) !important; font-weight: 600 !important; }
.bbh-step p  { color: var(--bw-muted) !important; font-family: var(--bw-font-ui) !important; }
.bbh-step-ic {
  border-radius: 999px !important;
  border: 1px solid var(--bw-border) !important;
}
.bbh-ic-blue  { background: rgba(201, 161, 90, .14) !important; }
.bbh-ic-gold  { background: rgba(255, 182, 72, .14) !important; }
.bbh-ic-green { background: rgba(139, 92, 246, .14) !important; }

/* depoimentos */
.bbh-quote {
  background: linear-gradient(180deg, var(--bw-card-2), var(--bw-card)) !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: 16px !important;
}
.bbh-quote p { color: #cfe0dc !important; font-family: var(--bw-font-ui) !important; }
.bbh-quote-who strong { color: var(--bw-text) !important; }
.bbh-quote-who span { color: var(--bw-violet-l) !important; }
.bbh-stars { color: var(--bw-amber) !important; }

/* ---------- vitrine de entrada rápida (visitante deslogado) ----------
   Componente nativo do app: banner + contador "online" + chips de valor
   + campo customizado. Aqui SÓ troco cor/tipografia — a estrutura (o
   banner "sangra" até a borda do card com margem negativa calibrada
   contra o padding do card; os chips usam grid nativo; a folha embaixo
   se adapta sozinha entre tela cheia e modal) é do próprio app. Chegar
   sobrescrevendo padding/aspect-ratio/display aqui quebra esse encaixe
   e desalinha tudo — por isso ficou de fora desta vez. */
.bbh-lobby {
  background: linear-gradient(180deg, var(--bw-card-2), var(--bw-card)) !important;
  border: 1px solid var(--bw-border) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .05) !important;
}
.bbh-lobby-banner { background: var(--bw-bg-2) !important; }
.bbh-online-float {
  background: rgba(5, 16, 15, .72) !important;
  border-color: var(--bw-border-2) !important;
}

.bbh-divider {
  color: var(--bw-muted) !important;
  font-family: var(--bw-font-ui) !important;
  font-size: 10.5px !important;
  letter-spacing: .08em !important;
}
.bbh-divider::before, .bbh-divider::after { background: var(--bw-border-2) !important; }

.bbh-chip {
  border: 1px solid var(--bw-border-2) !important;
  background: var(--bw-card-2) !important;
  color: var(--bw-muted) !important;
  font-family: var(--bw-font-ui) !important;
  font-weight: 600 !important;
  transition: border-color .15s, color .15s;
}
.bbh-chip:disabled { opacity: .4 !important; }
.bbh-chip-on {
  background: linear-gradient(180deg, var(--bw-violet-l), var(--bw-violet)) !important;
  border-color: var(--bw-violet-d) !important;
  color: #1c0f38 !important;
  font-weight: 700 !important;
}

.bbh-custom {
  background: var(--bw-bg) !important;
  border: 1px solid var(--bw-border-2) !important;
}
.bbh-custom-prefix { color: var(--bw-amber) !important; font-weight: 700 !important; font-family: var(--bw-font-ui) !important; }
.bbh-custom input {
  background: transparent !important;
  color: var(--bw-text) !important;
  font-family: var(--bw-font-ui) !important;
  font-variant-numeric: tabular-nums;
}

.bbh-saldo { color: var(--bw-amber) !important; font-family: var(--bw-font-ui) !important; font-weight: 700 !important; }
.bbh-legal { color: #5f7a75 !important; }

.bbh-final-l, .bbh-final-r { display: none !important; }
.bbh-final-btns { flex-wrap: wrap !important; }

/* rodapé com logo */
.bbh-final::after {
  content: "";
  display: block;
  width: 120px;
  height: 46px;
  margin: 34px auto 0;
  background: url('/assets/theme/logo.png') center/contain no-repeat;
  opacity: .85;
  filter: saturate(.85);
}

@media (max-width: 600px) {
  nav.navtop-color a img { height: 32px !important; max-width: 120px !important; }
  .bbh-h1 { font-size: 37px !important; }
  .bbh-section, .bbh-final { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ==========================================================================
   BARRA DE MENU INFERIOR (mobile)
   ========================================================================== */
.nav-glass {
  background: rgba(5, 16, 15, .9) !important;
  border-top: 1px solid var(--bw-border) !important;
  box-shadow: 0 -6px 34px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .05) !important;
}
.glow-line {
  background: linear-gradient(90deg, transparent, var(--bw-brass), transparent) !important;
  opacity: .6 !important;
}

/* barra mais baixa SEM mexer no tamanho dos ícones.
   A coluna do "Jogar" (círculo de 56px + rótulo) era o que esticava a
   fileira toda — o app só desloca ela 20px pra cima no visual
   (-translate-y-5), mas pro layout ela continua ocupando a altura
   inteira. Aqui ela passa a não contar na altura (height:0, ancorada na
   base, conteúdo transbordando pra cima): os rótulos ficam todos na mesma
   linha e o círculo sobressai acima da barra, como no desenho original. */
.nav-glass .grid { padding-top: 4px !important; padding-bottom: 4px !important; }
.nav-item { padding: 0 !important; gap: 2px !important; }
.nav-item span { line-height: 1.2 !important; }
.nav-glass .grid > button:nth-child(3) {
  height: 0 !important;
  min-height: 0 !important;
  align-self: end !important;
  justify-content: flex-end !important;
  overflow: visible !important;
  transform: none !important;
}
.nav-glass .grid > button:nth-child(3) span { line-height: 1.2 !important; }
/* sem isso o círculo é espremido pra caber na coluna de altura zero e vira
   uma elipse achatada — ele e o rótulo mantêm o tamanho e só transbordam */
.nav-glass .grid > button:nth-child(3) > * { flex-shrink: 0 !important; }

.nav-item .nav-icon-wrap i {
  font-size: 20px !important;
  color: rgba(238, 246, 243, .78) !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)) !important;
  transition: color .2s, transform .2s !important;
}
.nav-item:hover .nav-icon-wrap i { color: #fff !important; transform: translateY(-1px); }
.nav-item .nav-icon-wrap.nav-active i,
.nav-icon-wrap.play-active i { color: var(--bw-violet-l) !important; }
.nav-icon-wrap.nav-active {
  background: rgba(139, 92, 246, .14) !important;
  box-shadow: 0 0 18px rgba(139, 92, 246, .24) !important;
}
.nav-item span {
  font-size: 10px !important;
  font-family: var(--bw-font-ui) !important;
  color: rgba(238, 246, 243, .6) !important;
  letter-spacing: .02em !important;
}
.nav-item:hover span { color: rgba(238, 246, 243, .85) !important; }
.nav-badge {
  background: var(--bw-violet) !important;
  color: #1c0f38 !important;
}
.nav-badge-gold {
  background: var(--bw-amber) !important;
  color: #3a2000 !important;
}

/* botão central "Jogar" — o anel giratório e o brilho já são nativos do
   app e seguem a cor da marca sozinhos (var(--ci-primary-color), já em
   violeta). Aqui só devolvo o ícone da bolha: a v24 mostrava ele via
   ::after, e eu tinha reaproveitado esse pseudo-elemento pra um segundo
   anel de sonar sem perceber que o ícone dependia dele — por isso sumiu. */
@keyframes bwBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* a fileira do grid (acima) já está fixada na altura dos ícones normais
   com align-items:center — o botão de 56px transborda sozinho, simétrico
   e centralizado com os outros, sem precisar de margem calculada. */
.play-btn > svg { opacity: 0 !important; }

.play-btn::after {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 11;
  background: url('/assets/theme/bubble-icon.png') center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
  animation: bwBreathe 3.2s ease-in-out infinite;
  pointer-events: none;
}

.play-label { color: var(--bw-violet-l) !important; font-family: var(--bw-font-ui) !important; }

@media (prefers-reduced-motion: reduce) {
  .play-btn::after, .bbh-dot-ping { animation: none !important; }
}

/* ==========================================================================
   BARRA DE INSTALAÇÃO DO PWA
   ========================================================================== */
#bw-install-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 70;
  display: block;
  height: 56px;
  background: linear-gradient(90deg, #1c0f38 0%, #3a1f7a 55%, #5b32c9 130%);
  border-bottom: 1px solid var(--bw-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  font-family: var(--bw-font-ui), system-ui, sans-serif;
  animation: bwBarIn .32s cubic-bezier(.22, 1.2, .36, 1);
}
@keyframes bwBarIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

#bw-install-bar .bw-ib-close {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff; cursor: pointer;
}
#bw-install-bar .bw-ib-close:hover { background: rgba(255, 255, 255, .26); }

#bw-install-bar .bw-ib-icon {
  position: absolute; left: 42px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--bw-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

#bw-install-bar .bw-ib-text {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 88px; right: 108px;
  overflow: hidden;
  line-height: 1.25;
}
#bw-install-bar .bw-ib-text strong,
#bw-install-bar .bw-ib-text span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#bw-install-bar .bw-ib-text strong { color: #fff; font-size: 12.5px; font-weight: 700; }
#bw-install-bar .bw-ib-text span { color: rgba(255, 255, 255, .8); font-size: 11.5px; }

#bw-install-bar .bw-ib-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  padding: 9px 16px;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--bw-brass-l), var(--bw-brass));
  color: #2c2005;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .6);
  transition: filter .15s;
}
#bw-install-bar .bw-ib-btn:hover { filter: brightness(1.05); }
#bw-install-bar .bw-ib-btn:active { filter: brightness(.95); }

#bw-install-bar .bw-ib-hint {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--bw-card);
  color: #d9ece6;
  font-size: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--bw-border);
}

@media (max-width: 460px) {
  #bw-install-bar .bw-ib-icon { left: 40px; width: 34px; height: 34px; }
  #bw-install-bar .bw-ib-text { left: 82px; right: 92px; }
  #bw-install-bar .bw-ib-btn { right: 8px; padding: 8px 12px; font-size: 12px; }
  #bw-install-bar .bw-ib-btn svg { display: none; }
}

html.bw-bar-open nav.navtop-color { top: 56px !important; }
html.bw-bar-open #galaxsysgaming { padding-top: 56px; }
html.bw-bar-open .bb-page.bb-page { min-height: calc(100dvh - 56px); }

/* ==========================================================================
   BARRA "VOLTAR AO LOBBY"
   ========================================================================== */
#bw-lobby-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  box-sizing: border-box;
  z-index: 65;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  background: rgba(5, 16, 15, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bw-border);
  font-family: var(--bw-font-ui);
}
#bw-lobby-bar .bw-hd-logo { display: flex; align-items: center; height: 100%; }
#bw-lobby-bar .bw-hd-logo img { height: 30px; max-width: 120px; object-fit: contain; }
#bw-lobby-bar .bw-hd-right { display: flex; align-items: center; gap: 6px; }
#bw-lobby-bar button {
  display: flex; align-items: center; justify-content: center;
  height: 32px; border-radius: 10px; cursor: pointer;
  font-family: inherit; color: var(--bw-text);
  transition: background .15s, filter .15s;
}
#bw-lobby-bar .bw-hd-bal {
  padding: 0 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#bw-lobby-bar .bw-hd-dep {
  width: 36px; border: 0; color: #fff;
  background: linear-gradient(180deg, var(--bw-violet) 0%, var(--bw-violet-d) 100%);
  box-shadow: 0 4px 12px rgba(139, 92, 246, .35);
}
#bw-lobby-bar .bw-hd-av, #bw-lobby-bar .bw-hd-back {
  min-width: 32px; padding: 0 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  font-weight: 700; font-size: 13px;
}
#bw-lobby-bar button:hover { filter: brightness(1.12); }
#bw-lobby-bar button:active { filter: brightness(.92); }

html.bw-lobby-open #galaxsysgaming { padding-top: 44px; }
/* durante o jogo a barra "Baixe nosso APP" some: ela roubava 56px de altura
   do tabuleiro, e o tabuleiro tem proporção fixa (1,53 : 1) — sem essa
   altura ele encolhe e as bolinhas deixam de encostar nas laterais */
html.bw-lobby-open #bw-install-bar { display: none !important; }
html.bw-bar-open.bw-lobby-open #bw-lobby-bar { top: 0; }
html.bw-bar-open.bw-lobby-open #galaxsysgaming { padding-top: 44px; }

/* o jogo calcula a própria altura como "100% da tela" (estilo inline
   calc(100dvh - 0px)), sem saber das barras que empurram ele pra baixo.
   Sem descontar, o rodapé com o botão "Retirar" sai da tela. */
html.bw-bar-open .bb-wrap { height: calc(100dvh - 56px) !important; }
html.bw-lobby-open .bb-wrap,
html.bw-bar-open.bw-lobby-open .bb-wrap { height: calc(100dvh - 44px) !important; }
/* O tabuleiro tem proporção fixa (altura = 1,528 × largura, com a
   configuração atual: 8 colunas, linha de derrota 11) e o jogo encaixa as
   bolinhas pelo lado que acabar primeiro. Se a coluna for mais larga do
   que a altura disponível comporta, sobram faixas vazias nas laterais.
   Aqui a coluna é limitada à largura que cabe na altura da tela:
   100dvh − 44px (cabeçalho do jogo) − ~250px (saldo, prêmio, botão Retirar e
   espaçamentos), dividido pela proporção, + 16px (padding e bordas).
   Se o admin mudar colunas ou a linha de derrota, o 1.528 muda junto. */
.bb-wrap {
  max-width: min(460px, 100%, max(280px, calc((100dvh - 294px) / 1.528 + 16px))) !important;
}
html.bw-lobby-open .bb-page.bb-page,
html.bw-bar-open.bw-lobby-open .bb-page.bb-page { min-height: calc(100dvh - 44px); }

/* ==========================================================================
   ENTRAR / CADASTRO — banner no topo do card
   ========================================================================== */
.auth-card.rounded-3xl {
  padding-top: 118px !important;
  position: relative !important;
  border-radius: 18px !important;
}
.auth-card.rounded-3xl::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 114px;
  background: url('/assets/theme/banner.png') center/cover no-repeat;
  border-bottom: 1px solid var(--bw-border);
  z-index: 0;
}
.auth-card.rounded-3xl > [class*="absolute"] { z-index: 3 !important; }

/* ==========================================================================
   FOLHA "VALOR DE ENTRADA" — bottom-sheet exibido quando o jogador tenta
   jogar sem saldo suficiente (irmã do bbh-lobby-zone, mesma vitrine só que
   em modal). Mesma regra do bloco acima: só cor/tipografia — a folha já
   se adapta sozinha entre tela cheia (mobile) e modal centralizado
   (desktop), e o banner já limita a própria altura; sobrescrever isso
   quebra a transição responsiva.
   ========================================================================== */
.bbl-backdrop {
  background: rgba(3, 8, 7, .72) !important;
  backdrop-filter: blur(3px);
}
.bbl-sheet {
  background: linear-gradient(180deg, var(--bw-card-2), var(--bw-card)) !important;
  border: 1px solid var(--bw-border) !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .05) !important;
}
.bbl-handle { background: var(--bw-brass) !important; opacity: .55 !important; }

.bbl-banner { background: var(--bw-bg-2) !important; }

.bbl-body { color: var(--bw-text) !important; font-family: var(--bw-font-ui) !important; }
.bbl-loading { color: var(--bw-muted) !important; }
.bbl-spin { border-top-color: var(--bw-violet-l) !important; }

.bbl-divider {
  color: var(--bw-muted) !important;
  font-family: var(--bw-font-ui) !important;
  font-size: 10.5px !important;
  letter-spacing: .08em !important;
}
.bbl-divider::before, .bbl-divider::after { background: var(--bw-border-2) !important; }

.bbl-chip {
  border: 1px solid var(--bw-border-2) !important;
  background: var(--bw-card-2) !important;
  color: var(--bw-muted) !important;
  font-family: var(--bw-font-ui) !important;
  font-weight: 600 !important;
}
.bbl-chip:disabled { opacity: .4 !important; }
.bbl-chip-on {
  background: linear-gradient(180deg, var(--bw-violet-l), var(--bw-violet)) !important;
  border-color: var(--bw-violet-d) !important;
  color: #1c0f38 !important;
  font-weight: 700 !important;
}

.bbl-custom {
  background: var(--bw-bg) !important;
  border: 1px solid var(--bw-border-2) !important;
}
.bbl-custom-prefix { color: var(--bw-amber) !important; font-weight: 700 !important; font-family: var(--bw-font-ui) !important; }
.bbl-custom input {
  background: transparent !important;
  color: var(--bw-text) !important;
  font-family: var(--bw-font-ui) !important;
  font-variant-numeric: tabular-nums;
}

.bbl-warn, .bbl-warn-ic { color: var(--bw-amber) !important; }
.bbl-erro { color: var(--bw-danger) !important; }
.bbl-saldo { color: var(--bw-muted) !important; font-family: var(--bw-font-ui) !important; }
.bbl-saldo strong { color: var(--bw-amber) !important; }

/* CTA "Depositar para jogar" — placa de vidro violeta, sem rebites (modal
   compacto), coerente com o botão de início da tela do jogo (.bb-play) */
.bbl-cta {
  background: linear-gradient(180deg, var(--bw-violet-l), var(--bw-violet-d)) !important;
  color: #1c0f38 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px #4a25b5, 0 0 22px rgba(139, 92, 246, .38) !important;
  font-family: var(--bw-font-ui) !important;
  font-weight: 700 !important;
}
.bbl-cta:disabled { opacity: .45 !important; box-shadow: none !important; }

.bbl-x {
  background: rgba(255, 255, 255, .08) !important;
  color: var(--bw-text) !important;
  border-radius: 999px !important;
}
.bbl-x:hover { background: rgba(255, 255, 255, .16) !important; }

/* ==========================================================================
   TELA DO JOGO — mesma identidade, painel de manômetro
   ========================================================================== */
.bb-page.bb-page {
  background:
    linear-gradient(rgba(5, 16, 15, .6), rgba(5, 16, 15, .92)),
    url('/assets/theme/hero-bg.png') center top/cover no-repeat !important;
  font-family: var(--bw-font-ui) !important;
}

.bb-topbar, .bb-multirow, .bb-modal-box, .bb-vcard, .bb-gcard {
  background: linear-gradient(180deg, var(--bw-card-2), var(--bw-card)) !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: 14px !important;
}
.bb-board {
  background: radial-gradient(120% 70% at 50% 0%, #0f2b28 0%, #081a19 55%, var(--bw-bg) 100%) !important;
  border: 1px solid var(--bw-border) !important;
}

.bb-lbl, .bb-hint, .bb-fairbar, .bb-fairbar code, .bb-fairbar button,
.bb-fair-row span, .bb-gtext, .bb-modal-p { color: var(--bw-muted) !important; }

/* leituras numéricas: fonte técnica + traços de escala, como manômetro */
.bb-money, .bb-amt, .bb-mval, .bb-val.bb-money {
  color: var(--bw-amber) !important;
  font-family: var(--bw-font-ui) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
}
.bb-gtext strong { color: var(--bw-amber) !important; }
.bb-dmult, .bb-mtext { font-family: var(--bw-font-ui) !important; font-variant-numeric: tabular-nums; }

.bb-betctl button {
  background: var(--bw-card-2) !important;
  border: 1px solid var(--bw-border) !important;
  color: #cfe0dc !important;
  border-radius: 10px !important;
}

/* botão iniciar -> teal (identidade principal) */
.bb-play {
  background: linear-gradient(180deg, var(--bw-violet-l), var(--bw-violet-d)) !important;
  color: #1c0f38 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px #4a25b5, 0 0 24px rgba(139, 92, 246, .4) !important;
  font-family: var(--bw-font-ui) !important;
  font-weight: 700 !important;
}
.bb-vbtn, .bb-modal-close {
  background: linear-gradient(180deg, var(--bw-violet-l), var(--bw-violet-d)) !important;
  color: #1c0f38 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px #4a25b5 !important;
  font-family: var(--bw-font-ui) !important;
}
.bb-modal-close { background: var(--bw-card-2) !important; color: var(--bw-text) !important; box-shadow: none !important; }

.bb-gbadge {
  color: var(--bw-violet-l) !important;
  background: rgba(139, 92, 246, .1) !important;
  border: 1px solid rgba(139, 92, 246, .3) !important;
  border-radius: 999px !important;
}
.bb-spinner { border-top-color: var(--bw-violet-l) !important; }
.bb-modal-title { color: var(--bw-text) !important; font-family: var(--bw-font-display) !important; font-weight: 600 !important; }
.bb-fair-row code { color: var(--bw-text) !important; }
.bb-seed-edit input { background: var(--bw-bg) !important; border: 1px solid var(--bw-border) !important; color: var(--bw-text) !important; }

/* ==========================================================================
   BAÚ DE INDICAÇÃO
   ========================================================================== */
.bbc-referral {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--bw-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bbc-referral-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bbc-referral-head strong {
  color: var(--bw-text);
  font-family: var(--bw-font-display);
  font-size: 13.5px;
}
.bbc-referral-head span {
  color: var(--bw-violet-l);
  font-family: var(--bw-font-ui);
  font-size: 12px;
  font-weight: 700;
}
.bbc-referral-loading {
  color: var(--bw-muted);
  font-size: 12.5px;
  text-align: center;
  padding: 8px 0;
}
.bbc-referral-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 420px) {
  .bbc-referral-list { grid-template-columns: repeat(2, 1fr); }
}

.bbc-open-btn.bbc-done {
  background: rgba(139, 92, 246, .14) !important;
  color: var(--bw-violet-l) !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: default !important;
}