:root {
  --phone-w: 516px;
  --phone-half: 258px;
}

/* Fundo fora do aparelho */
html:has(body.vita-clone) {
  background: #0a0b12 !important;
}

body.vita-clone {
  background: #0a0b12 !important;
  display: block !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home-ref,
body.has-ref-header {
  background: #0a0b12 !important;
  display: block !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Coluna do “celular” — sempre centralizada */
body.vita-clone .app {
  display: block !important;
  width: 100% !important;
  max-width: var(--phone-w) !important;
  margin: 0 auto !important;
  background: #0a0b12 !important;
  position: relative !important;
  overflow-x: hidden !important;
  box-shadow:
    0 0 0 1px rgba(213, 96, 255, 0.18),
    0 24px 80px rgba(0, 0, 0, 0.55) !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
}

body.home-ref .vita-app,
body.has-ref-header .vita-app {
  display: block !important;
  width: 100% !important;
  max-width: var(--phone-w) !important;
  margin: 0 auto !important;
  background: #0a0b12 !important;
  position: relative !important;
  overflow-x: hidden !important;
  box-shadow:
    0 0 0 1px rgba(213, 96, 255, 0.18),
    0 24px 80px rgba(0, 0, 0, 0.55) !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
}

/* Header / tabbar / footer fixos na coluna */
body.vita-clone .header,
body.vita-clone .app-dl-banner,
body.vita-clone .tabbar,
body.home-ref .ref-header,
body.home-ref .layout-footer,
body.has-ref-header .ref-header,
body.has-ref-header .layout-footer {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: var(--phone-w) !important;
  box-sizing: border-box !important;
}
body.vita-clone.sidebar-open .header,
body.vita-clone.sidebar-open .app-dl-banner,
body.vita-clone.sidebar-open .tabbar,
body.home-ref.sidebar-open .ref-header,
body.home-ref.sidebar-open .layout-footer,
body.has-ref-header.sidebar-open .ref-header,
body.has-ref-header.sidebar-open .layout-footer {
  transform: translateX(calc(-50% + var(--sb-push, 29.2rem))) !important;
}

/* Overlay escuro só na coluna */
body.vita-clone .overlay,
body.vita-clone .sidebar-overlay,
body.vita-clone .l7-login,
body.vita-clone #l7Login,
body.home-ref .overlay,
body.home-ref .sidebar-overlay,
body.has-ref-header .overlay,
body.has-ref-header .sidebar-overlay,
body.vita-clone #overlay,
body.home-ref #overlay {
  left: 50% !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: var(--phone-w) !important;
  height: 100% !important;
  height: 100dvh !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}

/* Sidebar ancorada na borda esquerda do shell — só aparece com .open */
body.vita-clone #mySidebar.app-sidebar,
body.home-ref #mySidebar.app-sidebar,
body.has-ref-header #mySidebar.app-sidebar {
  left: max(0px, calc(50% - var(--phone-half))) !important;
  right: auto !important;
  height: 100% !important;
  height: 100dvh !important;
  transform: translateX(-105%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.vita-clone #mySidebar.app-sidebar.open,
body.home-ref #mySidebar.app-sidebar.open,
body.has-ref-header #mySidebar.app-sidebar.open {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Modais “caixa” centrados no shell */
body.vita-clone .modal.show:not(.modal-suporte):not(.modal-slots):not(.modal-deposito):not(.modal-retirada):not(.modal-auth):not(.modal-auth-recover):not(.modal-licenca),
body.home-ref .modal.show:not(.modal-suporte):not(.modal-slots):not(.modal-deposito):not(.modal-retirada):not(.modal-auth):not(.modal-auth-recover):not(.modal-licenca),
body.has-ref-header .modal.show:not(.modal-suporte):not(.modal-slots):not(.modal-deposito):not(.modal-retirada):not(.modal-auth):not(.modal-auth-recover):not(.modal-licenca) {
  left: 50% !important;
  right: auto !important;
  max-width: min(400px, calc(var(--phone-w) - 32px)) !important;
  width: min(90%, calc(var(--phone-w) - 32px)) !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
}

/* Painéis full-column: depósito / saque / suporte / auth / slots / catalogo */
body.vita-clone .modal-deposito,
body.vita-clone .modal-retirada,
body.vita-clone .modal-suporte,
body.vita-clone .modal-slots,
body.vita-clone .modal-auth,
body.vita-clone .modal-auth-recover,
body.vita-clone .modal-licenca,
body.vita-clone #previewCatalogo,
body.vita-clone #slotsCatalogo,
body.vita-clone .slots-catalogo,
body.vita-clone #ofertas-detalhe-deposito,
body.vita-clone .ofertas-detalhe-deposito,
body.vita-clone #recompensaEntrada,
body.vita-clone .recompensa-entrada,
body.vita-clone #fundoPerdas,
body.vita-clone .fundo-perdas,
body.vita-clone #convidarCentro,
body.vita-clone .convidar-centro,
body.vita-clone #promoverAmigos,
body.vita-clone .promover-amigos,
body.home-ref .modal-deposito,
body.home-ref .modal-retirada,
body.home-ref .modal-suporte,
body.home-ref .modal-slots,
body.home-ref .modal-auth,
body.home-ref .modal-auth-recover,
body.home-ref .modal-licenca,
body.home-ref #slotsCatalogo,
body.home-ref .slots-catalogo,
body.pagina-perfil .modal-deposito,
body.pagina-perfil .modal-retirada,
body.pagina-ofertas .modal-deposito,
body.pagina-ofertas .modal-retirada,
body.pagina-extrato .modal-deposito,
body.pagina-extrato .modal-retirada,
body.has-ref-header .modal-deposito,
body.has-ref-header .modal-retirada,
body.has-ref-header .modal-suporte,
body.has-ref-header .modal-slots,
body.has-ref-header .modal-auth,
body.has-ref-header .modal-auth-recover,
body.has-ref-header .modal-licenca,
body.has-ref-header #slotsCatalogo,
body.has-ref-header .slots-catalogo {
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: var(--phone-w) !important;
  transform: translateX(-50%) !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

body.vita-clone .modal-deposito.show,
body.home-ref .modal-deposito.show,
body.pagina-perfil .modal-deposito.show,
body.pagina-ofertas .modal-deposito.show,
body.pagina-extrato .modal-deposito.show,
body.has-ref-header .modal-deposito.show {
  top: 0 !important;
  bottom: calc(4.35rem + env(safe-area-inset-bottom, 0px)) !important;
  background: #0B101B !important;
}
body.vita-clone .modal-retirada.show,
body.home-ref .modal-retirada.show,
body.pagina-perfil .modal-retirada.show,
body.pagina-ofertas .modal-retirada.show,
body.pagina-extrato .modal-retirada.show,
body.has-ref-header .modal-retirada.show {
  top: 0 !important;
  bottom: calc(4.35rem + env(safe-area-inset-bottom, 0px)) !important;
  background: #0B101B !important;
}

body.vita-clone .modal-slots.show,
body.home-ref .modal-slots.show,
body.has-ref-header .modal-slots.show,
body.vita-clone #modal.modal-slots.show {
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  height: 100dvh !important;
}

body.vita-clone .modal-suporte.show,
body.vita-clone #modalContato.modal-suporte.show,
body.home-ref #modalContato.modal-suporte.show,
body.has-ref-header #modalContato.modal-suporte.show {
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  height: 100dvh !important;
}

/* Auth preview (.auth) — card centralizado na coluna */
body.vita-clone .auth,
body.vita-clone #auth {
  left: 50% !important;
  right: auto !important;
  width: 92% !important;
  max-width: min(40rem, calc(var(--phone-w) - 24px)) !important;
  transform: translate(-50%, -50%) !important;
  top: 52% !important;
}

/* Chat atendimento — coluna do celular */
body.vita-clone .vita-support-chat,
body.home-ref .vita-support-chat,
body.has-ref-header .vita-support-chat {
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: var(--phone-w) !important;
  transform: translateX(-50%) !important;
}

/* Manutenção / PWA / lembrete registro */
body.vita-clone .modal-manutencao-jogo.show,
body.home-ref .modal-manutencao-jogo.show,
body.has-ref-header .modal-manutencao-jogo.show {
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: var(--phone-w) !important;
  transform: translateX(-50%) !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 100180 !important;
}
body.vita-clone .pwa-install,
body.home-ref .pwa-install {
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: var(--phone-w) !important;
  transform: translateX(-50%) !important;
  padding: 0 !important;
}
body.vita-clone .modal-manutencao-jogo:not(.show),
body.home-ref .modal-manutencao-jogo:not(.show),
body.has-ref-header .modal-manutencao-jogo:not(.show),
#modalManutencaoJogo:not(.show) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.vita-clone .pwa-install-wrap,
body.home-ref .pwa-install-wrap {
  max-width: 100% !important;
  width: 100% !important;
}
body.vita-clone .registro-lembrete,
body.home-ref .registro-lembrete {
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: var(--phone-w) !important;
  transform: translateX(-50%) !important;
}

/* FAB Telegram / Chat colados no shell */
body.vita-clone .vita-fab-stack,
body.home-ref .vita-fab-stack,
body.has-ref-header .vita-fab-stack {
  right: max(6px, calc(50% - var(--phone-half) + 6px)) !important;
  left: auto !important;
}
body.vita-clone .vita-fab-stack.is-expanded,
body.home-ref .vita-fab-stack.is-expanded,
body.has-ref-header .vita-fab-stack.is-expanded {
  right: max(4px, calc(50% - var(--phone-half) + 2px)) !important;
}
body.vita-clone .vita-tg-fab,
body.home-ref .vita-tg-fab {
  display: none !important;
}
body.vita-clone .vita-sup-fab,
body.home-ref .vita-sup-fab {
  left: max(8px, calc(50% - var(--phone-half) + 8px)) !important;
  right: auto !important;
}
body.vita-clone .vita-top-fab,
body.home-ref .vita-top-fab {
  right: max(8px, calc(50% - var(--phone-half) + 8px)) !important;
  left: auto !important;
}
body.vita-clone .vita-mina-fab,
body.home-ref .vita-mina-fab {
  right: max(2px, calc(50% - var(--phone-half) + 2px)) !important;
  left: auto !important;
}
body.vita-clone .vita-convite-fab,
body.home-ref .vita-convite-fab {
  right: max(26px, calc(50% - var(--phone-half) + 26px)) !important;
  left: auto !important;
}

/* Conteúdo legado que escapa */
body.vita-clone .content-box,
body.home-ref .content-box,
body.home-ref .ofertas-page,
body.home-ref .perfil-page,
body.home-ref .extrato-page {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile real: shell ocupa 100% */
@media (max-width: 515px) {
  :root {
    --phone-w: 100%;
    --phone-half: 50%;
  }
  body.vita-clone .app,
  body.home-ref .vita-app,
  body.has-ref-header .vita-app {
    max-width: 100% !important;
    box-shadow: none !important;
  }
  body.vita-clone .header,
  body.vita-clone .tabbar,
  body.home-ref .ref-header,
  body.home-ref .layout-footer,
  body.has-ref-header .ref-header,
  body.has-ref-header .layout-footer,
  body.vita-clone .overlay,
  body.vita-clone .sidebar-overlay,
  body.home-ref .overlay,
  body.home-ref .sidebar-overlay,
  body.has-ref-header .overlay,
  body.has-ref-header .sidebar-overlay,
  body.vita-clone .modal-suporte,
  body.home-ref .modal-suporte,
  body.has-ref-header .modal-suporte,
  body.vita-clone #modalContato.modal-suporte,
  body.vita-clone #modalContato.modal-suporte.show,
  body.home-ref #modalContato.modal-suporte.show,
  body.has-ref-header #modalContato.modal-suporte.show,
  body.vita-clone .modal-slots,
  body.home-ref .modal-slots,
  body.has-ref-header .modal-slots,
  body.vita-clone #slotsCatalogo,
  body.home-ref #slotsCatalogo,
  body.has-ref-header #slotsCatalogo,
  body.vita-clone .slots-catalogo,
  body.home-ref .slots-catalogo,
  body.has-ref-header .slots-catalogo,
  body.vita-clone #ofertas-detalhe-deposito,
  body.vita-clone .ofertas-detalhe-deposito,
  body.vita-clone #recompensaEntrada,
  body.vita-clone .recompensa-entrada,
  body.vita-clone #fundoPerdas,
  body.vita-clone .fundo-perdas,
  body.vita-clone #convidarCentro,
  body.vita-clone .convidar-centro,
  body.vita-clone #promoverAmigos,
  body.vita-clone .promover-amigos,
  body.vita-clone .modal-deposito,
  body.home-ref .modal-deposito,
  body.has-ref-header .modal-deposito,
  body.vita-clone .modal-retirada,
  body.home-ref .modal-retirada,
  body.has-ref-header .modal-retirada,
  body.vita-clone .auth,
  body.vita-clone .l7-login,
  body.vita-clone #l7Login,
  body.vita-clone .registro-lembrete {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Depósito / Saque: tela cheia (não centralizar — isso cortava metade) */
  body.vita-clone .modal-deposito.show,
  body.home-ref .modal-deposito.show,
  body.has-ref-header .modal-deposito.show {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: calc(4.35rem + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    z-index: 100100 !important;
    background: #0B101B !important;
    box-sizing: border-box !important;
  }
  body.vita-clone .modal-retirada.show,
  body.home-ref .modal-retirada.show,
  body.has-ref-header .modal-retirada.show {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: calc(4.35rem + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    z-index: 100100 !important;
    background: #0B101B !important;
    box-sizing: border-box !important;
  }

  body.vita-clone .modal-deposito .deposito-screen,
  body.vita-clone .modal-retirada .finance-screen,
  body.vita-clone .modal-retirada .retirada-screen,
  body.home-ref .modal-deposito .deposito-screen,
  body.home-ref .modal-retirada .finance-screen,
  body.home-ref .modal-retirada .retirada-screen,
  body.has-ref-header .modal-deposito .deposito-screen,
  body.has-ref-header .modal-retirada .finance-screen,
  body.has-ref-header .modal-retirada .retirada-screen {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.vita-clone .modal-deposito .deposito-scroll,
  body.vita-clone .modal-retirada .retirada-scroll,
  body.vita-clone .modal-retirada .finance-scroll,
  body.home-ref .modal-deposito .deposito-scroll,
  body.home-ref .modal-retirada .retirada-scroll,
  body.home-ref .modal-retirada .finance-scroll,
  body.has-ref-header .modal-deposito .deposito-scroll,
  body.has-ref-header .modal-retirada .retirada-scroll,
  body.has-ref-header .modal-retirada .finance-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Outros modais pequenos continuam centralizados */
  body.vita-clone .modal.show:not(.modal-suporte):not(.modal-slots):not(.modal-deposito):not(.modal-retirada):not(.modal-auth):not(.modal-auth-recover):not(.modal-licenca),
  body.home-ref .modal.show:not(.modal-suporte):not(.modal-slots):not(.modal-deposito):not(.modal-retirada):not(.modal-auth):not(.modal-auth-recover):not(.modal-licenca),
  body.has-ref-header .modal.show:not(.modal-suporte):not(.modal-slots):not(.modal-deposito):not(.modal-retirada):not(.modal-auth):not(.modal-auth-recover):not(.modal-licenca) {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.vita-clone #mySidebar.app-sidebar,
  body.home-ref #mySidebar.app-sidebar,
  body.has-ref-header #mySidebar.app-sidebar {
    left: 0 !important;
  }
  body.vita-clone .vita-fab-stack,
  body.home-ref .vita-fab-stack,
  body.has-ref-header .vita-fab-stack {
    right: 6px !important;
  }
  body.vita-clone .vita-fab-stack.is-expanded,
  body.home-ref .vita-fab-stack.is-expanded,
  body.has-ref-header .vita-fab-stack.is-expanded {
    right: 4px !important;
  }
  body.vita-clone .vita-tg-fab,
  body.home-ref .vita-tg-fab {
    right: 6px !important;
  }
}