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

/* Fundo fora do aparelho */
html {
  background: #05020f !important;
}

body.vita-clone,
body.home-ref,
body.has-ref-header {
  background: #05020f !important;
  display: flex !important;
  justify-content: center !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

/* Coluna do “celular” */
body.vita-clone .app,
body.home-ref .vita-app,
body.has-ref-header .vita-app {
  width: 100% !important;
  max-width: var(--phone-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #280058 !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 .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;
}

/* Overlay escuro só na coluna */
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 #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.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.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 {
  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.vita-clone .modal-retirada.show,
body.vita-clone .modal-suporte.show,
body.home-ref .modal-deposito.show,
body.home-ref .modal-retirada.show,
body.home-ref .modal-suporte.show,
body.has-ref-header .modal-deposito.show,
body.has-ref-header .modal-retirada.show,
body.has-ref-header .modal-suporte.show {
  top: 0 !important;
  bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !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;
}

/* 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;
}

/* Manutenção / PWA / lembrete registro */
body.vita-clone .modal-manutencao-jogo,
body.home-ref .modal-manutencao-jogo,
body.vita-clone .pwa-install,
body.home-ref .pwa-install,
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 colado no shell */
body.vita-clone .vita-tg-fab,
body.home-ref .vita-tg-fab {
  right: max(4px, calc(50% - var(--phone-half) + 8px)) !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.vita-clone .modal-slots,
  body.home-ref .modal-slots,
  body.vita-clone .auth,
  body.vita-clone .registro-lembrete {
    left: 0 !important;
    transform: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.vita-clone .modal.show:not(.modal-suporte):not(.modal-slots),
  body.home-ref .modal.show:not(.modal-suporte):not(.modal-slots) {
    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-tg-fab,
  body.home-ref .vita-tg-fab {
    right: 8px !important;
  }
}