/* 24/10 (devjunior) FUNDO + PALETA DA CASA — "4 como padrão, a casa toda harmônica, os menus também estão pretos".
   Histórico: v1 luz azul (rejeitada: "tudo flutuando") → v2 ardósia sólida → prévias ?fundo=1..4 → escolhida a 4 (textura).
   Backups: /root/casa-rebuild/backups/fundo.css.v1-luz e fundo.css.v2-previas.
   PALETA (tudo deriva daqui; nada de preto puro):
     base     #141830  20 24 48   fundo da página, com trama fina de pontos
     moldura  #0f1226  15 18 38   header, barra de baixo, menu lateral, gavetas, menus, janelas (antes #010404 = preto)
     painel   #1a1f3d  26 31 61   caixas dentro das molduras (campos, cartões de menu, abas)
     borda    rgb(255 255 255 / .06) */
:root {
  --bg-color: 20 24 48;
  --surface-color: 15 18 38;
  --jb-base: 20 24 48; --jb-moldura: 15 18 38; --jb-painel: 26 31 61; --jb-borda: 255 255 255 / .06;
  --c-bottomnav-bg: rgb(15 18 38);
  --header-bg: rgb(15 18 38);
}
html { background-color: rgb(20 24 48); }
body {
  background-color: rgb(20 24 48);
  background-image: radial-gradient(rgb(255 255 255 / .055) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.casino-shell, .casino-shell[data-v-66755cc3] { background-color: transparent !important; }
.site-footer[data-v-238e98a4] { background: rgb(15 18 38) !important; border-top-color: rgb(255 255 255 / .06) !important; }

/* escurecido atrás das janelas (menu da conta, depósito/saque, +18): azul-marinho translúcido em vez de preto */
:is(.age-overlay.ml-fundo, .vera-overlay, .dep-overlay) { background-color: rgb(8 9 12 / .72) !important; }   /* grafite (tema 3) */
/* página do jogo: moldura em volta do jogo e o "entre para jogar" na cor da moldura (era preto puro) */
:is(.game-desktop, .auth-required, .game-mobile) { background-color: var(--jb-moldura-c, rgb(18 19 25)) !important; }

/* 24/10 "cantos pretos nas capas": a caixa POR TRÁS da capa arredondada era quadrada — na home com fundo escuro
   (.game-card-wrapper #0a0d16), na página de categoria com sombra quadrada (.game-card). Com o fundo mais claro os
   cantos apareceram. Caixa de trás sem fundo e sombra seguindo o arredondado da capa. */
.game-card-wrapper { background-color: transparent !important; }
.game-card[data-v-144a840e], a.game-card { border-radius: var(--jb-capa-raio, 16px); }

/* 24/10: barra de baixo não puxa a página quando o arrasto começa nela (ver brava.js, touchmove bloqueado) */
nav.vera-bottom-nav { touch-action: none; overscroll-behavior: none; }

/* ===== HIERARQUIA — opção 3 "grafite + azul" (24/10, devjunior escolheu entre ?tema=1..3; v3 monótona em
   backups/fundo.css.v3-monotono, prévias em backups/fundo.css.v4-previas-tema).
   MOLDURA grafite neutro (header, barra de baixo, menu lateral, gavetas, menus, janelas, rodapé) + linha azul da marca;
   FUNDO azul-ardósia com textura; CARTÕES azul um pouco mais claro que o fundo. O azul fica no conteúdo e nos destaques,
   o grafite enquadra — dá pra saber de cara o que é menu e o que é página. Variáveis com !important porque o
   <html style="--surface-color..."> do layout.php ganha de :root. */
:root {
  --surface-color: 30 35 66 !important;          /* cartões */
  --jb-moldura-c: rgb(18 19 25);                 /* grafite */
  --jb-moldura-2: rgb(26 27 35);                 /* grafite um tom acima: itens/campos dentro da moldura */
  --jb-linha: rgb(255 255 255 / .08);
  --jb-azul: rgb(22 82 240);
  --c-bottomnav-bg: rgb(18 19 25);
  --header-bg: rgb(18 19 25);
}
:is(.vera-header, nav.vera-bottom-nav, aside.sidebar, .vera-panel, .dep-sheet, .site-footer[data-v-238e98a4]) {
  background-color: var(--jb-moldura-c) !important;
}
.vera-header { box-shadow: 0 2px 0 rgb(22 82 240 / .8), 0 8px 24px -12px rgb(0 0 0 / .6) !important; }
nav.vera-bottom-nav { box-shadow: 0 -1px 0 var(--jb-linha), 0 -8px 24px -14px rgb(0 0 0 / .6) !important; }
:is(aside.vera-panel, .dep-sheet) { box-shadow: 0 0 0 1px var(--jb-linha) !important; }
@media (min-width: 1024px) {   /* menu lateral do PC vira uma coluna de verdade (era transparente, sumia no fundo) */
  .hidden.lg\:contents > aside.sidebar { border-radius: 18px; box-shadow: 0 0 0 1px var(--jb-linha); margin-top: 12px; padding-bottom: 12px; align-self: flex-start; }
}