:root {
    --android-app-min: 320px;
    --android-app-max: 480px;
    --android-app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --android-app-safe-top: env(safe-area-inset-top, 0px);
    --android-app-chrome-bottom: calc(78px + var(--android-app-safe-bottom));
    --android-app-content-bottom: calc(var(--android-app-chrome-bottom) + 16px);
    --android-keyboard-inset: 0px;
    --android-app-outer: #030405;
}

html.android-app-root {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 100%;
    overscroll-behavior-y: none;
    touch-action: manipulation;
    overflow-x: clip;
    scroll-padding-top: calc(68px + var(--android-app-safe-top));
    scroll-padding-bottom: calc(88px + var(--android-app-safe-bottom));
    background: var(--android-app-outer);
}

body.android-app-only {
    position: relative;
    width: 100% !important;
    min-width: 0 !important;
    max-width: var(--android-app-max) !important;
    min-height: 100dvh;
    min-height: 100dvh;
    margin: 0 auto !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    overscroll-behavior-y: none;
    overflow-x: clip !important;
    box-shadow: 0 0 56px rgba(0, 0, 0, 0.56);
    isolation: isolate;
    overscroll-behavior-x: none;
}

body.android-app-only.has-user-tabbar {
    padding-bottom: var(--android-app-content-bottom) !important;
}

body.android-app-only,
body.android-app-only * {
    box-sizing: border-box;
}

body.android-app-only :is(#app, .wrapper, main, .main, .mian, .content, .container, .container-fluid, .page-wrapper, .page-content, .provider-category-shell, .slots-shell, .game-play) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0 !important;
    max-width: 100% !important;
}

body.android-app-only.has-user-tabbar :is(#app, main, .main, .mian, .content, .page-wrapper, .page-content, .provider-category-shell, .slots-shell, .game-play) {
    padding-bottom: max(24px, var(--android-app-content-bottom)) !important;
}

body.android-app-only :is(img, video, canvas, svg) {
    max-width: 100%;
}

body.android-app-only :is(input, select, textarea) {
    max-width: 100%;
    font-size: max(16px, 1em);
    scroll-margin-top: calc(72px + var(--android-app-safe-top));
    scroll-margin-bottom: calc(24px + var(--android-keyboard-inset));
}

/* Wrapper legacy dinetralkan agar transform halaman tidak menggeser tabbar. */
body.android-app-only .nav.user-navigation {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: 0 !important;
    transform: none !important;
}

/* Navigasi publik menggunakan satu tampilan pada seluruh halaman aplikasi. */
body.android-app-only .user-navigation .user-tabbar {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    right: auto !important;
    left: 50% !important;
    width: min(100%, var(--android-app-max)) !important;
    max-width: var(--android-app-max) !important;
    height: calc(68px + var(--android-app-safe-bottom)) !important;
    padding: 6px 8px calc(6px + var(--android-app-safe-bottom)) !important;
    background: rgb(18 24 32 / 96%) !important;
    border: 1px solid rgb(217 176 90 / 24%) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -12px 28px rgb(0 0 0 / 42%) !important;
    backdrop-filter: blur(14px);
    transform: translateX(-50%) !important;
}

body.android-app-only .user-navigation .user-tabbar__item {
    min-width: 44px !important;
    min-height: 56px !important;
    color: #93a9c4 !important;
}

body.android-app-only .user-navigation .user-tabbar__icon {
    width: 30px !important;
    height: 28px !important;
    margin: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.android-app-only .user-navigation .user-tabbar__item--primary .user-tabbar__icon {
    width: 34px !important;
    height: 30px !important;
    color: #181208 !important;
    background: linear-gradient(180deg, #ffe7a4, #d9ad54) !important;
    border: 1px solid rgb(255 231 164 / 42%) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgb(217 173 84 / 20%) !important;
}

body.android-app-only .user-navigation .user-tabbar__item.active {
    color: #ffe7a4 !important;
}

body.android-app-only .user-navigation .user-tabbar__label {
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

body.android-app-only iframe {
    max-width: 100%;
}

body.android-app-only :is(.wd-navbar__action, .member-forgot__header-action) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
}

body.android-app-only :is(.modal-dialog, .van-dialog, .dialog, .popup:not(.van-popup)) {
    width: calc(100% - 24px) !important;
    max-width: 456px !important;
    max-height: calc(100dvh - var(--android-app-safe-top) - var(--android-app-safe-bottom) - 24px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

body.android-app-only :is(.table-responsive, .card-body, .content-wrapper, .content, .container-fluid) {
    scrollbar-width: thin;
}

body.android-app-only :is(.table-responsive, .card-body):has(table) {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

body.android-app-only table {
    max-width: none;
}

body.android-app-only :is(.navbar:not(:has(.navbar-fixed)), .van-nav-bar, .page-header, .category-header, .slots-header, .game-play__header) {
    right: auto !important;
    left: 50% !important;
    width: min(100%, var(--android-app-max)) !important;
    max-width: var(--android-app-max) !important;
    transform: translateX(-50%) !important;
}

body.android-app-only .public-home .navbar,
body.android-app-only .navbar:has(.navbar-fixed) {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
}

body.android-app-only :is(.navbar, .van-nav-bar, .page-header, .category-header, .provider-category-header, .slots-header, .game-play__header) {
    padding-top: max(8px, var(--android-app-safe-top)) !important;
}

body.android-app-only :is(.navbar-title, .navbar__content-title, .page-header__title, .category-header__title, .provider-category-heading, .slots-title, .game-play__title) {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.android-app-only :is(.van-popup--bottom, .bottom-sheet, .sheet-modal) {
    bottom: 0 !important;
    padding-bottom: max(16px, var(--android-app-safe-bottom)) !important;
}

body.android-app-only :is(.van-popup--bottom, .bottom-sheet, .sheet-modal, .modal, .public-dialog) :is(button, a, [role="button"]) {
    min-width: 44px;
    min-height: 44px;
}

body.android-app-only :is(.van-empty, .empty-state, .public-state, .promo-empty) {
    max-width: calc(100% - 24px);
    margin-right: auto;
    margin-left: auto;
}

body.android-app-only :is(.game-list, .game-history, .list-orders, .list_order, .records-list, .table, .promotion .table) {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* AdminLTE/manager diperlakukan sebagai drawer Android, termasuk pada preview desktop. */
body.android-app-only.sidebar-mini :is(.content-wrapper, .main-header, .main-footer),
body.android-app-only.daily-operator :is(.content-wrapper, .main-header, .main-footer) {
    width: 100% !important;
    max-width: var(--android-app-max) !important;
    margin-left: 0 !important;
}

body.android-app-only.sidebar-mini .main-header,
body.android-app-only.daily-operator .main-header {
    right: auto !important;
    left: max(0px, calc(50% - 240px)) !important;
}

body.android-app-only.sidebar-mini .content-wrapper,
body.android-app-only.daily-operator .content-wrapper {
    min-height: calc(100dvh - var(--android-app-safe-top));
    overflow-x: clip;
}

body.android-app-only.sidebar-mini .main-sidebar,
body.android-app-only.daily-operator .main-sidebar {
    right: auto !important;
    left: max(0px, calc(50% - 240px)) !important;
    width: min(82vw, 280px) !important;
    max-width: 280px !important;
    margin-left: 0 !important;
    transform: translateX(-105%) !important;
    transition: transform 180ms ease !important;
    z-index: 1045 !important;
}

body.android-app-only.sidebar-open .main-sidebar {
    transform: translateX(0) !important;
}

body.android-app-only #sidebar-overlay {
    right: auto !important;
    left: max(0px, calc(50% - 240px)) !important;
    width: min(100%, var(--android-app-max)) !important;
}

body.android-app-only.sidebar-mini .row > [class*="col-md-"],
body.android-app-only.sidebar-mini .row > [class*="col-lg-"],
body.android-app-only.sidebar-mini .row > [class*="col-xl-"],
body.android-app-only.daily-operator .row > [class*="col-md-"],
body.android-app-only.daily-operator .row > [class*="col-lg-"],
body.android-app-only.daily-operator .row > [class*="col-xl-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

body.android-app-only.sidebar-mini :is(.content-header, .content),
body.android-app-only.daily-operator :is(.content-header, .content) {
    padding-right: 12px !important;
    padding-left: 12px !important;
}

body.android-app-only.sidebar-mini .info-box,
body.android-app-only.daily-operator .info-box {
    min-height: 82px !important;
}

body.android-app-only.sidebar-mini .card,
body.android-app-only.daily-operator .card {
    max-width: 100%;
}

/* Popup bawah game tetap berada di dalam kanvas aplikasi tanpa merusak translateY state. */
body.android-app-only .van-popup--bottom {
    right: auto !important;
    left: max(0px, calc(50% - 240px)) !important;
    width: min(100%, var(--android-app-max)) !important;
    max-width: var(--android-app-max) !important;
    max-height: min(86dvh, calc(100dvh - var(--android-app-safe-top) - 12px)) !important;
    padding-bottom: max(12px, var(--android-app-safe-bottom));
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

body.android-app-only.has-open-overlay {
    overflow: hidden !important;
}

body.android-app-only.android-keyboard-open .user-navigation .user-tabbar {
    pointer-events: none;
    transform: translateX(-50%) translateY(calc(100% + var(--android-app-safe-bottom))) !important;
}

body.android-app-only.android-keyboard-open :is(.modal-dialog, .van-dialog, .dialog, .popup:not(.van-popup), .van-popup--bottom) {
    max-height: calc(100dvh - 16px) !important;
}

/* ============================================
   ANDROID NETWORK CONNECTIVITY BANNER
   ============================================ */
.android-network-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, var(--android-app-max));
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: max(8px, var(--android-app-safe-top)) 16px 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: slideDownBanner 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.android-network-banner--offline {
    background: #e34b5f;
    color: #ffffff;
}

.android-network-banner--online {
    background: #32d583;
    color: #0b1510;
}

@keyframes slideDownBanner {
    from { transform: translate(-50%, -100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* Active touch feedback for Android gaming feel */
body.android-app-only :is(.btn, .van-button, .public-button, .game-card-launch, .filter-chip, .provider-chip, .user-tabbar__item):active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

@media (min-width: 481px) {
    body.android-app-only {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 340px) {
    body.android-app-only.sidebar-mini :is(.content-header, .content),
    body.android-app-only.daily-operator :is(.content-header, .content) {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.android-app-only *,
    body.android-app-only *::before,
    body.android-app-only *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Pengecualian form & pencegahan drag pada gambar */
body.android-app-only :is(input, textarea, select, [contenteditable="true"]) {
    user-select: auto;
    -webkit-user-select: auto;
    font-size: max(16px, 1em) !important;
}
body.android-app-only :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    appearance: none;
    -webkit-appearance: none;
}
body.android-app-only img {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important;
    pointer-events: none;
}

/* ============================================
   NATIVE APP PAGE TRANSITIONS
   ============================================ */
@keyframes native-page-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes native-page-exit {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

body.android-app-only :is(main.page-content, .mian) {
    animation: native-page-enter 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

body.android-app-only.app-page-exiting :is(main.page-content, .mian) {
    animation: native-page-exit 0.25s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

/* Sembunyikan seketika untuk navigasi internal */
.public-app-loading {
    display: var(--splash-display, grid) !important;
}

/* Mencegah overlay/loading/modal bawaan Vue yang bocor keluar dari 480px shell */
body.android-app-only .van-overlay,
body.android-app-only .Loading,
body.android-app-only .msg {
    width: min(100%, var(--android-app-max, 480px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Khusus .msg (toast) biasanya butuh Y translate juga untuk centering */
body.android-app-only .msg {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}