/* =====================================================================================================
   PIXGOL — layout do p1xgol.io (front oficial da plataforma com o tema pixgol) por cima da base e da paleta
   (theme.css). Medidas tiradas da referência com ?vxdebug=1 em 402 e 1440; nada de logo, imagem ou CSS dela.
   Organização: 0 tokens · 1 topo · 2 busca da home (barra + Provedor) · 3 Procurar (busca da Vaidebet).
   ===================================================================================================== */

/* ---------- 0. tokens (tema pixgol: neutral-950…500 e laranja theme-500) ---------- */
:root {
  --x-bg: #171f1e;
  --x-900: #1c2423;
  --x-800: #232a29;
  --x-700: #2a302f;
  --x-500: #323636;
  --x-orange: #c8d30d;
  --x-orange-300: #d3dc3d;
  --x-on-orange: #212612;
  --x-text-2: rgba(255, 255, 255, .8);
  --x-header: rgb(28, 36, 35);
  --x-pink: #f548a8;
}

/* ---------- 1. topo: fundo do tema, menu em texto com o ativo em pílula laranja, botões em pílula ---------- */
.topbar, body[data-mode] .topbar { background: var(--x-header) !important; }
@media (min-width: 901px) {
  .topbar::after { background: rgba(255, 255, 255, .08) !important; }
  .topnav { gap: 6px !important; }
  .topnav a, .topnav a.on { height: 32px !important; padding: 0 6px !important; border-radius: 6px; background: none !important; color: var(--x-text-2) !important; font-size: 14px !important; font-weight: 500 !important; }
  .topnav a span, .topnav a.on span { color: inherit !important; }
  .topnav a.on { background: var(--x-orange) !important; color: var(--x-on-orange) !important; }
  .topnav a:hover:not(.on) { color: #fff !important; background: none !important; }
  .topnav a.on::after, .topnav a::after { display: none !important; }
}
/* sem o selo PIX do Registrar (a referência não tem) */
.topbar .btn.solid[href="#/cadastro"]::after { display: none !important; }
/* desktop: sem hambúrguer (a lateral fica sempre aberta) e logo de até 255×80 a 16px da borda */
@media (min-width: 901px) {
  .topbar .p-burger { display: none !important; }
  .topbar .logo { margin-left: 0 !important; }
  .topbar .logo img { height: 80px !important; max-width: 255px !important; }
}
/* celular: hambúrguer 36px a 12px da borda, logo 31px de altura, Entrar (contorno) antes de Registrar, 35/33px de altura */
@media (max-width: 900px) {
  .topbar { height: 64px; padding: 0 12px !important; }
  .topbar .p-burger { width: 36px; height: 36px; margin: 0 4px 0 0 !important; padding: 0 7px; }
  .topbar .logo img { height: 31px !important; max-width: 130px !important; }
  .topbar .auth { gap: 8px !important; }
  .topbar .auth .btn.outline { display: inline-flex !important; order: 1; height: 35px !important; padding: 0 12px !important; }
  .topbar .auth .btn.solid { order: 2; height: 33px !important; padding: 0 12px !important; }
}
.topbar .auth .btn.solid, .topbar .auth .btn.outline { border-radius: 9999px !important; font-weight: 600; font-size: 14px; }
/* Registrar em rosa (pedido do usuário, 21/10): o rosa do tema pixgol, #f548a8 */
.topbar .auth .btn.solid { background: var(--x-orange) !important; color: var(--x-on-orange) !important; }
.topbar .auth .btn.solid:hover { background: var(--x-orange-300) !important; }
a.btn.solid[href="#/cadastro"] { background: var(--x-orange) !important; color: var(--x-on-orange) !important; border-color: transparent !important; }
.topbar .auth .btn.outline { background: transparent !important; border: 1px solid var(--x-orange) !important; color: var(--x-orange-300) !important; }

/* ---------- 2. busca da home/cassino igual à da Vaidebet: campo translúcido com borda fina, raio 10, texto 14px cinza; no celular um campo só de 45px com o filtro de provedor como ícone dentro ---------- */
body .csb-bar, body:not([data-mode="casino"]):not([data-mode="live"]) .csb-bar { background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .10) !important; border-radius: 10px !important; color: #a6a5a5 !important; box-shadow: none !important; }
body .csb-bar:hover { background: rgba(255, 255, 255, .16) !important; filter: none; }
body .csb-ic, .csb-cur { color: #a6a5a5 !important; }
.csb-txt { font-size: 14px !important; font-weight: 500 !important; color: #a6a5a5 !important; }
.csb-txt b { color: #fff !important; }
body .csb-prov, body:not([data-mode="casino"]):not([data-mode="live"]) .csb-prov { background: rgba(255, 255, 255, .12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .10) !important; border-radius: 10px !important; box-shadow: none !important; }
body .csb-prov:hover { background: rgba(255, 255, 255, .16) !important; filter: none; }
.csb-prov svg { color: #fff !important; }
.csb-prov span { font-size: 14px !important; font-weight: 600 !important; color: #fff !important; }
@media (max-width: 900px) {
  .csb { position: relative; display: block !important; }
  body .csb .csb-bar, body:not([data-mode]) .csb .csb-bar { width: 100% !important; height: 45px !important; border-radius: 10px !important; padding-right: 52px !important; }
  .csb .csb-txt { font-weight: 400 !important; }
  body .csb .csb-prov, body:not([data-mode="casino"]):not([data-mode="live"]) .csb .csb-prov { position: absolute !important; right: 0; top: 0; width: 48px !important; min-width: 0 !important; height: 45px !important; background: transparent !important; border: 0 !important; padding: 0 !important; justify-content: center !important; }
  .csb .csb-prov > :not(svg):not(.csb-pv-ic) { display: none !important; }
}

/* ---------- 3. Procurar (busca da Vaidebet): folha de baixo com alça, título 20px, campo 42px, "Buscas populares" ---------- */
.gs-field, .gs-ctx-btn, .gs-btn { border-radius: 10px !important; background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .10) !important; }
.gs-field:focus-within { border-color: var(--x-orange-300) !important; box-shadow: 0 0 0 3px rgba(200, 211, 13, .14); }
.gs-head h2 { font-family: var(--font); font-weight: 700; }
.modal.gs-modal { background: var(--x-bg) !important; border: 1px solid var(--x-700); }
/* chips da busca iguais aos da Vaidebet: pílula de 34px, texto 12px/500, sem a imagem da categoria (só o ícone de grade do "Todos") */
.gs-cats .gs-cat, #gs-cats .gs-cat { height: 34px !important; padding: 0 13px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; text-transform: none; background: rgba(0, 0, 0, .45) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #fff !important; }
.gs-cats .gs-cat span { font-size: 12px !important; color: #fff !important; }
.gs-cats .gs-cat img, .gs-cats .gs-cat .s-ic { display: none !important; }
.gs-cats .gs-cat.on, #gs-cats .gs-cat.on { background: rgba(200, 211, 13, .25) !important; border-color: var(--x-orange) !important; color: #fff !important; }
@media (max-width: 900px) {
  .modal-bg:has(> .gs-modal) { align-items: flex-end !important; padding: 60px 0 0 !important; background: rgba(10, 12, 12, .55) !important; }
  .modal.gs-modal { left: 0 !important; width: 100% !important; max-width: none !important; height: calc(100dvh - 60px) !important; margin: 0 !important; border-radius: 24px 24px 0 0 !important; border-bottom: 0 !important; padding-top: 18px !important; position: relative; }
  .modal.gs-modal::before { content: ""; position: absolute; top: 12px; left: 50%; width: 80px; height: 4px; margin-left: -40px; border-radius: 2px; background: rgba(255, 255, 255, .34); }
  .gs-modal .gs { background: transparent !important; border: 0 !important; }
  .gs-modal .gs-head h2 { font-size: 20px !important; font-weight: 700 !important; }
  .gs-modal .gs-head .m-close { width: 36px; height: 36px; border-radius: 50% !important; background: var(--x-700) !important; }
  .gs #gs-ctx-wrap, .gs #gs-sort, .gs #gs-prov { display: none !important; }
  .gs .gs-bar { padding: 4px 16px 0 !important; }
  .gs .gs-field { flex: 1 1 auto !important; width: 100% !important; height: 42px !important; }
  .gs .hs-wrap:has(> #gs-cats) { height: auto !important; padding: 16px 16px 0; }
  .gs .hs-wrap:has(> #gs-cats)::before { content: "Buscas populares"; display: block; margin-bottom: 10px; font: 700 13px var(--font); color: #fff; text-transform: uppercase; }
  .gs .hs-wrap:has(> #gs-cats) .car-btn, .gs .hs-wrap:has(> #gs-cats) .hs-arrow { display: none !important; }
  .gs #gs-cats { flex-wrap: wrap !important; overflow: visible !important; padding: 0 !important; height: auto !important; gap: 8px !important; }
  .gs #gs-cats .gs-cat:nth-child(n+9) { display: none !important; }
  .gs .gs-sec { margin-top: 16px !important; font-size: 13px !important; }
}

/* ---------- 4. barra de baixo (celular): pílula flutuante 378×56 a 12px das bordas e 8px do fim, itens 70×44 com ícone 16px
   e rótulo 10px/500; o disco redondo de 54px do canto direito vem do item de Esportes da config ---------- */
@media (max-width: 900px) {
  .tabbar, .tabbar.bn-cassino, body[data-mode] .tabbar {
    left: 12px !important; right: 12px !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; height: 56px !important; padding: 0 4px !important;
    align-items: center !important; gap: 0; border-radius: 9999px !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-top: 1px solid rgba(255, 255, 255, .08) !important;
    background: rgba(42, 48, 47, .94) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .35) !important; overflow: visible !important;
  }
  .tabbar .bn-item { flex: 1 1 0; height: 44px !important; gap: 3px !important; border-radius: 9999px; color: rgba(255, 255, 255, .8) !important; }
  .tabbar .bn-item.active { color: #fff !important; background: rgba(255, 255, 255, .08); }
  .tabbar .bn-switch.start { order: 99; }
  .tabbar .bn-item.active::before { display: none !important; }
  .tabbar .bn-ic, .tabbar .bn-item.active .bn-ic { width: 16px !important; height: 16px !important; border: 0 !important; background: none !important; }
  .tabbar .bn-ic .bn-mask, .tabbar .bn-ic .bn-img, .tabbar .bn-ic svg { width: 16px !important; height: 16px !important; }
  .tabbar .bn-item.active .bn-mask { background-color: #fff !important; }
  .tabbar .bn-lb { font-size: 10px !important; font-weight: 500 !important; line-height: 12px !important; }
  .tabbar .bn-switch, .tabbar.bn-cassino .bn-switch, body[data-mode] .tabbar .bn-switch { flex: 0 0 54px !important; width: 54px !important; height: 54px !important; padding: 0 !important; margin-right: -2px; border-radius: 50% !important; border: 1px solid var(--x-700) !important; background: var(--x-800) !important; display: grid !important; place-items: center; overflow: hidden; }
  .tabbar .bn-switch .bn-sw-img, .tabbar .bn-switch svg { width: 48px !important; height: 48px !important; border-radius: 50%; object-fit: cover; }
  .tabbar .bn-main { flex: 0 0 54px; display: grid; place-items: center; height: 54px; margin-right: -2px; }
  .tabbar .bn-disc { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--x-700); background: var(--x-800); overflow: hidden; color: #fff; }
  .tabbar .bn-disc img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
  .tabbar > * { animation: none !important; }
}

/* ---------- 5. home: seções de jogos com container CLEAN (sem cartão) e 2 linhas (rows da config) ----------
   referência: celular cabeçalho 36px (padding 8), título 16px/700, capas 100×133, vãos 10 (coluna) e 8 (linha);
   desktop cabeçalho 48px (padding 12), título 18px/700, capas 156×208, vãos 10 e 12 */
.wg.wg-clean { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.wg.wg-clean > .wg-head { min-height: 48px; padding: 12px !important; margin: 0 !important; }
.wg.wg-clean > .wg-head h2 { font-size: 18px !important; font-weight: 700 !important; text-transform: uppercase; }
.wg.wg-clean .casino-row.home-row, .wg.wg-clean .hs-wrap > .casino-row.home-row { padding: 0 !important; margin: 0 !important; }
.casino-row.home-row.rows-2 { grid-template-rows: repeat(2, auto); grid-auto-flow: column; row-gap: 12px; column-gap: 10px; }
.casino-row.home-row.rows-3 { grid-template-rows: repeat(3, auto); grid-auto-flow: column; row-gap: 12px; column-gap: 10px; }
.wg.wg-clean .home-row.prop-vertical { grid-auto-columns: 156px; }
@media (max-width: 900px) {
  .wg.wg-clean > .wg-head { min-height: 36px; padding: 8px !important; }
  .wg.wg-clean > .wg-head h2 { font-size: 16px !important; }
  .wg.wg-clean .home-row.prop-vertical, .wg.wg-clean .home-row.prop-square { grid-auto-columns: 100px !important; display: grid !important; grid-template-columns: none !important; }
  .wg.wg-clean .home-row.prop-vertical > .casino-tile, .wg.wg-clean .home-row.prop-square > .casino-tile { display: block !important; width: auto !important; }
  .casino-row.home-row.rows-2, .casino-row.home-row.rows-3 { row-gap: 8px; column-gap: 10px; }
}

/* ---------- 6. rodapé (5.18): cartão com degradê #2a302f → #1c2423, raio 8 8 0 0, padding 24; logo 133×42 centralizado;
   colunas Plataforma/Legal (título 14px/600, links 12px/500 a cada 26px, 60% de branco); selos 200×80 numa caixa com borda;
   ícone de jogo responsável 225×54, texto legal 10px justificado e "ano © nome" 12px a 80% ---------- */
.footer .ft-box { background: linear-gradient(rgb(42, 48, 47) 0%, rgb(28, 36, 35) 50%, rgb(28, 36, 35) 100%) !important; border-radius: 8px 8px 0 0 !important; padding: 24px !important; }
.footer .ft-box .ft-top { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 0 !important; align-items: start; }
.footer .ft-brand { display: flex; justify-content: center; }
.footer .ft-brand img { width: 133px !important; height: 42px !important; object-fit: contain; object-position: center; }
.footer .ft-col { display: flex; flex-direction: column; gap: 0; padding-left: 12px; }
.footer .ft-col h4 { margin: 0 0 17px; color: #fff; font: 600 14px/17px var(--font); text-transform: none !important; letter-spacing: 0 !important; }
.footer .ft-col a, .footer .ft-col span { color: rgba(255, 255, 255, .6) !important; font: 500 12px/14px var(--font); margin: 0 0 12px; }
.footer .ft-col a:hover { color: #fff !important; }
.footer .ft-col.ft-imgs { grid-column: 1 / -1; padding: 16px; border-radius: 8px; background: rgba(35, 42, 41, .5); border: 1px solid rgba(57, 61, 61, .6); }
.footer .ft-col.ft-imgs h4 { display: none; }
.footer .ft-col.ft-imgs .ft-icons { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 11px 16px; }
.footer .ft-col.ft-imgs .ft-icons img { width: 200px; height: 80px; object-fit: contain; }
.footer .ft-lic-ic { display: flex; justify-content: center; margin-top: 24px; }
.footer .ft-lic-ic img { width: 225px; height: 54px; object-fit: contain; }
.footer .ft-license { margin: 16px 0 0 !important; font-size: 10px !important; line-height: 1.5; text-align: justify; color: rgba(255, 255, 255, .6) !important; white-space: pre-line; }
.footer .ft-box .ft-bottom { margin-top: 24px !important; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8) !important; font-size: 12px; }
@media (max-width: 900px) {
  .footer .ft-box .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer .ft-brand { grid-column: 1 / -1; }
  .footer .ft-col.ft-imgs .ft-icons { flex-direction: column; }
}
/* rodapé alinhado à coluna do conteúdo (desktop 312…1408; celular 12…390) e o espaço da barra de baixo fica no rodapé, não no .main */
@media (min-width: 901px) { .footer { padding-right: 32px !important; } }
@media (max-width: 900px) {
  .main, #app { padding-bottom: 0 !important; }
  .footer { padding: 8px 12px calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- 7. entrar/cadastro iguais aos da Vaidebet: janela de 420px com X redondo, título 20px à esquerda com subtítulo,
   rótulo acima do campo (46px, translúcido, raio 10); no celular sobe como folha de baixo com alça e X ---------- */
.modal.p-auth { width: 420px !important; max-width: 94vw !important; background: var(--x-bg) !important; border: 1px solid var(--x-700) !important; border-radius: 24px !important; padding: 20px 16px 26px !important; }
@media (min-width: 901px) { .modal-bg:has(> .modal.p-auth) { background-color: rgba(10, 12, 12, .6) !important; } }
.p-auth .pa-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 14px; padding-right: 44px; }
.p-auth .pa-logo { display: none !important; }
.p-auth .pa-title { margin: 0; font: 700 20px/1.3 var(--font) !important; text-align: left; color: #fff; text-transform: none; }
.p-auth .pa-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--x-text-2, #b6c0be); }
.p-auth .pa-x, .p-auth .pa-x[hidden] { position: absolute; display: grid !important; place-items: center; top: 0; right: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--x-700) !important; color: #fff !important; cursor: pointer; z-index: 2; }
.p-auth .pa-x svg { width: 18px; height: 18px; }
.p-auth .pa-form { gap: 14px; }
.p-auth .fl-field { display: flex !important; flex-direction: column; gap: 6px !important; font-size: 13px; }
.p-auth .fl-field > .fl, .p-auth .fl-field:has(input:focus) > .fl, .p-auth .fl-field:has(input:not(:placeholder-shown)) > .fl, .p-auth .fl-field:has(input[type="date"]) > .fl {
  position: static; order: -1; margin: 0; transform: none; font: 500 13px/20px var(--font); color: #e9e9e9; white-space: normal; background: none; padding: 0;
}
.modal.p-auth .fl-field input:not([type="checkbox"]):not([type="radio"]), .modal.p-auth .fl-field select, .modal.p-auth .m-form input:not([type="checkbox"]):not([type="radio"]) {
  height: 46px !important; padding: 0 12px !important; font: 400 14px var(--font) !important; background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important; border-radius: 10px !important; color: #fff !important;
}
.p-auth .fl-field input::placeholder { color: #a6a5a5; }
.modal.p-auth .fl-field input:focus { border-color: var(--x-orange-300) !important; box-shadow: 0 0 0 3px rgba(200, 211, 13, .14) !important; }
.modal.p-auth .fl-field.fl-contact input:not([type="checkbox"]):not([type="radio"]) { padding-left: 80px !important; }
.p-auth .fl-contact::before { top: auto; bottom: 0; height: 46px; left: 12px; font-family: var(--font); }
.p-auth .fl-field [data-eye] { color: #a6a5a5; }
.p-auth .pa-forgot { align-self: flex-end; margin-top: -4px; font: 400 13px var(--font) !important; color: #fff !important; text-decoration: underline; }
.p-auth .pa-forgot svg { display: none; }
.p-auth .pa-submit { height: 48px !important; margin-top: 4px; font: 700 15px var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: 10px !important; }
.p-auth .pa-foot { margin-top: 4px !important; font: 400 13px var(--font) !important; color: #fff; }
.p-auth .pa-foot a { color: var(--x-orange) !important; font-weight: 600; }
.p-auth .pa-foot a.pa-back { color: #fff !important; font-weight: 400; text-decoration: underline; }
.p-auth .m-row:has(> :only-child) { grid-template-columns: 1fr !important; }
.p-auth .m-row:has(> :only-child) > * { width: 100%; }
.p-auth .check { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .12); font-size: 12px !important; line-height: 17px; color: #e9e9e9 !important; }
.p-auth .check a { color: var(--x-orange-300) !important; text-decoration: none !important; }
.p-auth .check input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; border: 1.5px solid var(--x-orange); border-radius: 4px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.p-auth .check input[type="checkbox"]:checked { background: var(--x-orange); }
.p-auth .check input[type="checkbox"]:checked::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.p-auth .error:not(:empty), .p-auth #msg:not(:empty) { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: rgba(252, 165, 165, .30); border: 1px solid #a3ad0e; color: #fff; font-size: 13px; text-align: left; }
.p-auth-login form { display: flex; flex-direction: column; }
.p-auth-login form #msg:not(:empty) { order: -1; margin-bottom: 4px; }
@media (max-width: 900px) {
  .modal-bg:has(> .modal.p-auth) {
    top: 0 !important; display: flex !important; flex-direction: column; justify-content: flex-end; align-items: stretch !important; padding: 0 !important; background: rgba(10, 12, 12, .6) !important; z-index: 200 !important;
  }
  .modal-bg > .modal.p-auth {
    position: relative; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; max-height: 92dvh !important; margin: 0 !important;
    border-radius: 24px 24px 0 0 !important; border-bottom: 0 !important; padding: 8px 16px calc(26px + env(safe-area-inset-bottom)) !important; overflow-y: auto; animation: pxg-up .25s ease;
  }
  .modal-bg > .modal.p-auth::before { content: ""; display: block; width: 80px; height: 4px; margin: 4px auto 14px; border-radius: 2px; background: rgba(255, 255, 255, .34); }
}
@keyframes pxg-up { from { transform: translateY(100%); } }

/* ---------- 8. lateral do desktop (atalhos de cassino): título 14px/700 branco, itens 44px #232a29, raio 8, padding 8/12,
   vão 8, ícone colorido da categoria 20px, nome 12px/500; sem contagem (a referência não mostra) ---------- */
@media (min-width: 901px) {
  .side .side-title { margin: 0 0 18px !important; padding: 0 !important; color: #fff !important; font: 700 14px/17px var(--font) !important; letter-spacing: 0 !important; text-transform: uppercase; }
  .side .side-link { height: 44px; min-height: 44px; margin: 0 !important; padding: 8px 12px !important; gap: 8px !important; border-radius: 8px !important; background: var(--x-800) !important; }
  .side .side-link:hover { background: var(--x-700) !important; }
  .side .side-link .s-nm { font: 500 12px/14px var(--font) !important; color: #fff; }
  .side .side-link .s-ic, .side .side-link .s-ic .s-img { width: 20px !important; height: 20px !important; flex: 0 0 20px; }
  .side .side-link em { display: none !important; }
}
/* capas sem o nome por cima (a referência mostra só a arte) */
[data-all] .casino-tile .cas-ov, .casino-tile .cas-ov { display: none !important; }

/* ---------- 9. velocidade (5.22, igual à Vaidebet): rodapé abaixo da dobra no carregamento e banners com espaço reservado ---------- */
main#app { min-height: calc(100vh - var(--topbar-h, 54px)); }
.banners[style*="--bn-n"]:not([style*="--bn-ratio"]) .banner img { aspect-ratio: var(--bn-ar, auto); height: auto; object-fit: cover; }

/* ---------- 10. gaveta do celular (hambúrguer): altura da tela toda, sem a sobra embaixo ---------- */
@media (max-width: 900px) {
  body.p-drawer .side, body[data-mode].p-drawer .side { top: 0 !important; bottom: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- 11. Pix365: barra de baixo do oficial — faixa inteira de 64px colada no fim (não flutua), fundo rgba(0,0,0,.8) com
   desfoque 4px e linha #2a302f no topo; 4 itens de largura igual com ícone 20px a 8px do topo e rótulo 10px/500 #b6c0be (até 2 linhas) ---------- */
@media (max-width: 900px) {
  .tabbar, .tabbar.bn-cassino, body[data-mode] .tabbar {
    left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: calc(64px + env(safe-area-inset-bottom)) !important;
    padding: 0 0 env(safe-area-inset-bottom) !important; border-radius: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: stretch !important; gap: 0 !important;
    background: rgba(0, 0, 0, .8) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 0 !important; border-top: 1px solid #2a302f !important; box-shadow: none !important;
  }
  .tabbar .bn-item { flex: 1 1 0 !important; min-width: 0 !important; height: 63px !important; padding: 8px 0 0 !important; margin: 0 !important; border-radius: 0 !important; gap: 4px !important;
    justify-content: flex-start !important; align-items: center !important; background: transparent !important; color: #b6c0be !important; }
  .tabbar .bn-item.active { background: transparent !important; color: #b6c0be !important; }
  .tabbar .bn-item .bn-ic, .tabbar .bn-item .bn-ic img, .tabbar .bn-item .bn-ic svg { width: 20px !important; height: 20px !important; }
  .tabbar .bn-item .bn-lb { max-width: 50px; font: 500 10px/12px var(--font) !important; color: #b6c0be !important; text-align: center; white-space: normal !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .main, #app { padding-bottom: 0 !important; }
  .footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}