/* =========================================================
   DEFAULT THEME — DARK / CLEAN / PREMIUM
   ---------------------------------------------------------
   Semua warna utama dikontrol dari token di bawah.
   Client/WL cukup override variable, tanpa edit component CSS.
   ========================================================= */
:root{
    /* Base */
    --bg-body:#08090a;
    --bg-page:#0d0e10;
    --bg-header:#0a0b0c;
    --bg-sidebar:#101113;
    --bg-footer:#090a0b;

    /* Surface hierarchy */
    --bg-home-section-one:#0e0f11;
    --bg-home-section-two:#15171a;
    --bg-section-one:#0e0f11;
    --bg-section-two:#15171a;
    --bg-section-three:#1b1d20;
    --bg-card:#121315;
    --bg-soft:#191b1e;
    --bg-input:#090a0b;
    --bg-auth-modal:#101113;

    /* Overlay */
    --bg-overlay:rgba(0,0,0,.58);
    --bg-overlay-soft:rgba(0,0,0,.38);

    /* Brand */
    --bg-primary:var(--primary);
    --text-primary:var(--primary);
    --color-second:var(--primary);
    --primary-hover:color-mix(in srgb, var(--primary) 72%, #ffffff 28%);
    --color-second-hover:color-mix(in srgb, var(--primary) 72%, #ffffff 28%);

    /* Text */
    --text-main:#f3f4f6;
    --text-heading:#ffffff;
    --text-secondary:rgba(255,255,255,.62);
    --text-muted:rgba(255,255,255,.42);
    --text-disabled:rgba(255,255,255,.28);
    --text-dark:#08090a;

    /* Borders / shadows */
    --border-color:#202226;
    --border-soft:#17191c;
    --border-strong:#292b30;
    --shadow-color:rgba(0,0,0,.52);

    /* Icons */
    --icon-color:#f1f2f3;
    --icon-text-color:#f1f2f3;
    --icon-active-color:var(--primary);
    --icon-text-active-color:var(--primary);
    --icon-second-color:var(--primary);
    --icon-text-second-color:var(--primary);

    /* Navigation cards */
    --home-nav-bg:linear-gradient(145deg,#1b1d20 0%,#0b0c0e 100%);
    --home-nav-bg-hover:linear-gradient(145deg,#282a2d 0%,#121315 100%);
    --home-nav-active-bg:var(--bg-primary);
    --home-nav-text:#e7e8ea;
    --home-nav-active-text:#ffffff;
    --home-nav-border:#232529;
    --home-nav-active-border:color-mix(in srgb, var(--primary) 78%, #ffffff 22%);
    --home-nav-shadow:0 5px 14px rgba(0,0,0,.30);

    /* Inputs / controls */
    --bg-control:rgba(255,255,255,.055);
    --bg-control-hover:rgba(255,255,255,.09);
    --bg-control-active:var(--bg-primary);

    /* Footer */
    --bg-footer-guest:#0d0e10;
    --border-footer-guest:rgba(255,255,255,.07);
    --bg-footer-auth-base-top:#26282b;
    --bg-footer-auth-base-mid:#141518;
    --bg-footer-auth-base-bottom:#08090a;
    --bg-footer-auth-spot-center:#3a3d41;
    --bg-footer-auth-spot-mid:#1b1d20;
    --border-footer-auth:#45484d;

    /* Deposit */
    --deposit-bg:var(--bg-primary);
    --deposit-inner-bg:#ffffff;
    --deposit-inner-text:#17181a;
    --deposit-divider:rgba(255,255,255,.28);

    /* Toast */
    --bg-toast:#ffffff;

    /* Home background hook: none by default.
       Override this from client/theme CSS when needed. */
    --home-background-image:none;
    --home-background-color:var(--bg-body);

    /* Misc */
    --radius-card:10px;
    --radius-control:8px;
    --radius-pill:999px;
    --focus-ring:color-mix(in srgb, var(--primary) 45%, transparent);
}

/* Optional light theme hook — no component CSS needs changing. */
[data-theme="light"]{
    --bg-body:#f4f5f7;
    --bg-page:#f7f7f8;
    --bg-header:#ffffff;
    --bg-sidebar:#ffffff;
    --bg-footer:#ffffff;
    --bg-home-section-one:#ffffff;
    --bg-home-section-two:#f1f2f4;
    --bg-section-one:#ffffff;
    --bg-section-two:#f1f2f4;
    --bg-section-three:#e7e9ec;
    --bg-card:#ffffff;
    --bg-soft:#f0f1f3;
    --bg-input:#f3f4f6;
    --bg-auth-modal:#ffffff;
    --bg-overlay:rgba(0,0,0,.35);
    --bg-overlay-soft:rgba(0,0,0,.12);
    --text-main:#202225;
    --text-heading:#111214;
    --text-secondary:rgba(17,18,20,.62);
    --text-muted:rgba(17,18,20,.45);
    --text-disabled:rgba(17,18,20,.28);
    --text-dark:#111214;
    --border-color:#dfe1e4;
    --border-soft:#e9eaec;
    --border-strong:#d5d7da;
    --shadow-color:rgba(0,0,0,.12);
    --icon-color:#25272a;
    --icon-text-color:#25272a;
    --home-nav-bg:linear-gradient(145deg,#ffffff 0%,#eceef1 100%);
    --home-nav-bg-hover:linear-gradient(145deg,#ffffff 0%,#e4e6e9 100%);
    --home-nav-text:#25272a;
    --home-nav-shadow:0 4px 12px rgba(0,0,0,.10);
    --bg-control:rgba(0,0,0,.045);
    --bg-control-hover:rgba(0,0,0,.075);
    --bg-footer-guest:#ffffff;
    --border-footer-guest:#e1e2e5;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

html,
body{
    width:100%;
    min-height:100%;
    font-family:'Inter',sans-serif;
}

body{
    background:var(--bg-body);
    color:var(--text-primary);
    font-family:'Inter',sans-serif;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    user-select:none;
    pointer-events:none;
}

.header{
    background:var(--bg-header);
    border-color:var(--border-color);
}

.sidebar{
    background:var(--bg-sidebar);
}

.auth-modal{
    background:var(--bg-auth-modal);
}

.footer{
    background:var(--bg-footer);
    border-color:var(--border-color);
}

.footer-guest-menu{
    background: var(--bg-footer-guest);
    border-top: 1px solid var(--border-footer-guest);
}

.footer-auth-menu{
    background: var(--bg-footer-auth-base-bottom);
}

.card{
    background:var(--bg-card);
}

.soft-bg{
    background:var(--bg-soft);
}

.input-bg{
    background:var(--bg-input);
    color:var(--text-primary);
}

.btn-primary{
    background:var(--primary);
    color:var(--text-dark);
}

.btn-primary:hover{
    background:var(--primary-hover);
}

.btn-second{
    background:var(--color-second);
    color:var(--text-primary);
}

.btn-second:hover{
    background:var(--color-second-hover);
}

.text-brand{
    color:var(--primary);
}

.text-secondary-color{
    color:var(--text-secondary);
}

.icon{
    color:var(--icon-color);
}

.icon svg{
    stroke:var(--icon-color);
    fill:var(--icon-color);
}

.icon-text{
    color:var(--icon-text-color);
}

.icon-active{
    color:var(--icon-active-color);
}

.icon-active svg{
    stroke:currentColor;
    fill:currentColor;
}

.icon-text-active{
    color:var(--icon-text-active-color);
}

.icon-second{
    color:var(--icon-second-color);
}

.icon-second svg{
    stroke:var(--icon-second-color);
    fill:var(--icon-second-color);
}

.icon-text-second{
    color:var(--icon-text-second-color);
}

.overlay-bg{
    background:var(--bg-overlay);
}

/* Sidebar drawer positioning is controlled by the mobile-app wrapper. */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
    box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    transition: background-color 9999s ease-in-out 0s;
}

.tab-btn .tab-icon-box{
    background-color: rgba(255,255,255,0.08);
}

.tab-btn .tab-icon{
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

.tab-btn .tab-label{
    color: rgba(255,255,255,0.6);
}

.tab-btn.active-tab .tab-icon-box{
    background-color: var(--bg-primary, var(--icon-second-color, #f59e0b));
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.tab-btn.active-tab .tab-icon{
    filter: brightness(0) invert(1);
    opacity: 1;
}

.tab-btn.active-tab .tab-label{
    color: #ffffff;
}

.nav-menu-item .nav-svg{
    color: #ffffff;
}

.nav-menu-item .nav-label{
    color: #ffffff;
}

.nav-menu-item.active-nav .nav-svg{
    color: var(--text-primary);
}

.nav-menu-item.active-nav .nav-label{
    color: var(--text-primary);
}

.footer-active { color: var(--text-primary) !important; }
.footer-active i, .footer-active span { color: var(--text-primary) !important; }

.login-blink { animation: loginBlink 1.8s ease-in-out infinite; }
@keyframes loginBlink {
    0%,100% { opacity:1; color:var(--text-primary); }
    50%      { opacity:.45; color:var(--text-heading); }
}

.footer-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10px;
    gap: 4px;
    font-size: 11px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.deposit-btn-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10px;
    gap: 4px;
    cursor: pointer;
}
.deposit-circle-outer {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 4px solid var(--bg-body);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transform: translateY(-28px);
    margin-bottom: -28px;
}
.deposit-circle-inner {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
}

#depositPopup {
    position: fixed;
    background: var(--bg-primary, #e00000);
    border-radius: 14px;
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 500;
    overflow: visible;
    opacity: 0; pointer-events: none;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}
#depositPopup.open { opacity:1; pointer-events:auto; transform:translateY(0); }
.deposit-popup-inner { display:flex; align-items:stretch; border-radius:14px; overflow:hidden; }
#depositPopup a {
    color:var(--text-heading); font-weight:800; font-size:13px; letter-spacing:.04em;
    padding:13px 22px; text-decoration:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-primary,#e00000); transition:background .15s;
}
#depositPopup a:hover { background:rgba(255,255,255,.15); }
.popup-divider { width:1.5px; background:rgba(255,255,255,.30); align-self:stretch; margin:8px 0; }
#depositPopupArrow {
    position:absolute; bottom:-7px;
    transform:translateX(-50%);
    width:0; height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:7px solid var(--bg-primary,#e00000);
    pointer-events:none;
}

#deposit-overlay { display:none; position:fixed; inset:0; z-index:490; }
#deposit-overlay.active { display:block; }
#float-overlay { display:none; position:fixed; inset:0; z-index:590; background:rgba(0,0,0,.4); backdrop-filter:blur(2px); }
#float-overlay.active { display:block; }

#floatMenuBtn {
    position: fixed;
    left: 14px;
    bottom: 30%;
    width: 54px; height: 54px;
    border-radius: 18px;
    border: none; outline: none;
    cursor: pointer;
    z-index: 600;
    overflow: hidden;
    background: var(--bg-primary, #e00000);
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.18),
        0 0 20px 4px rgba(var(--bg-primary-rgb, 200,0,0),.45),
        0 6px 24px rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    transition: border-radius .35s ease, box-shadow .3s ease, transform .2s ease;
}
#floatMenuBtn:active { transform: scale(.92); }
#floatMenuBtn.open {
    border-radius: 50%;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.3),
        0 0 28px 6px rgba(var(--bg-primary-rgb,200,0,0),.6),
        0 6px 24px rgba(0,0,0,.55);
}
#floatMenuBtn::before {
    content:'';
    position:absolute; inset:-6px;
    border-radius: inherit;
    border:2px solid var(--bg-primary,#e00000);
    opacity:0;
    animation: floatPulse 2.4s ease-out infinite;
}
@keyframes floatPulse {
    0%   { transform:scale(.85); opacity:.7; }
    70%  { transform:scale(1.35); opacity:0; }
    100% { opacity:0; }
}
.fham {
    position: absolute;
    display: flex; flex-direction: column; gap: 5px;
    transition: opacity .25s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
.fham span {
    display: block;
    width: 24px; height: 2.5px;
    border-radius: 2px;
    background: #ffffff;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
#floatMenuBtn.open .fham span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
#floatMenuBtn.open .fham span:nth-child(2) { opacity:0; transform: scaleX(0); }
#floatMenuBtn.open .fham span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

#floatMenu {
    position: fixed;
    left: 14px;
    z-index: 595;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.float-item {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-20px) scale(.7) rotate(-120deg);
    transform-origin: 27px center;
    transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.float-item.visible { opacity:1; transform:translateX(0) scale(1) rotate(0deg); pointer-events:auto; }
#floatMenu .float-item:nth-child(5).visible { transition-delay:.00s; }
#floatMenu .float-item:nth-child(4).visible { transition-delay:.07s; }
#floatMenu .float-item:nth-child(3).visible { transition-delay:.14s; }
#floatMenu .float-item:nth-child(2).visible { transition-delay:.21s; }
#floatMenu .float-item:nth-child(1).visible { transition-delay:.28s; }
#floatMenu .float-item:nth-child(1) { transition-delay:.00s; }
#floatMenu .float-item:nth-child(2) { transition-delay:.05s; }
#floatMenu .float-item:nth-child(3) { transition-delay:.10s; }
#floatMenu .float-item:nth-child(4) { transition-delay:.15s; }
#floatMenu .float-item:nth-child(5) { transition-delay:.20s; }
.float-item-icon {
    width: 50px; height: 50px;
    border-radius: 15px;
    background: rgba(10,10,10,.92);
    border: 2px solid var(--bg-primary,#e00000);
    box-shadow: 0 4px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.float-item-icon::after {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background: radial-gradient(ellipse at 30% 30%, var(--bg-control), transparent 70%);
    pointer-events:none;
}
.float-item-icon i { font-size:22px; color:var(--text-heading); position:relative; z-index:1; }
.float-item-icon.ic-fb { border-color:#1877f2; }
.float-item-icon.ic-fb i { color:#1877f2; }
.float-item-icon.ic-tg { border-color:#229ed9; }
.float-item-icon.ic-tg i { color:#229ed9; }
.float-item-icon.ic-wa { border-color:#25d366; }
.float-item-icon.ic-wa i { color:#25d366; }
.float-item-icon.ic-apk { border-color:#a4c639; }
.float-item-icon.ic-apk i { color:#a4c639; }
.float-item-icon.ic-rtp { border-color:var(--bg-primary,#e00000); background:var(--bg-primary,#e00000); }
.float-item-icon.ic-rtp i { color:var(--text-heading); }
.float-item-label {
    background: rgba(10,10,10,.82);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

@media (min-width: 1024px) {
    /* Keep the mobile-app UI visible on desktop browsers. */
    .footer-auth-menu,
    .footer-guest-menu { display: flex !important; }
    #floatMenuBtn { display: flex !important; }
}


/* =========================================================
   MOBILE APP OVERRIDE
   FORCE ENTIRE WEBSITE INTO MOBILE APP LAYOUT
   ========================================================= */

html,
body {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
}

/* MOBILE APP CANVAS */
#mobile-app-shell {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    display: flex !important;
    justify-content: center !important;
    overflow-x: hidden !important;
}

#mobile-app {
    position: relative;
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    min-height: 100vh;
    margin: 0 auto !important;
    overflow-x: hidden !important;
}

/* CONTENT */
#mobile-app main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-bottom: 90px !important;
}

/* REMOVE DESKTOP SIDEBAR */
#sidebar-desktop,
.sidebar-desktop {
    display: none !important;
}

#mobile-app > .flex > aside:not(#sidebar) {
    display: none !important;
}

/* MOBILE SIDEBAR */
#mobile-app #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(320px, 86vw) !important;
    height: 100dvh !important;
    margin: 0 !important;
    z-index: 10001 !important;
    transform: translate3d(-105%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition:
        transform .28s cubic-bezier(.4,0,.2,1),
        visibility 0s linear .28s;
}

#mobile-app #sidebar.active {
    transform: translate3d(0,0,0);
    visibility: visible;
    pointer-events: auto;
    transition:
        transform .28s cubic-bezier(.4,0,.2,1),
        visibility 0s linear 0s;
}

/* OVERLAY */
#mobile-app #overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10000 !important;
    background: rgba(0,0,0,.58) !important;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .25s ease,
        visibility .25s ease;
}

#mobile-app #overlay.active {
    opacity: 1;
    visibility: visible;
}

/* HEADER */
#mobile-app .header,
#mobile-app .mobile-header {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    width: 100% !important;
    max-width: 430px !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
}

/* FOOTER */
#mobile-app .footer-auth-menu,
#mobile-app .footer-guest-menu {
    position: fixed !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 430px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    z-index: 9998 !important;
}

/* FLOATING MENU */
#mobile-app #floatMenuBtn {
    display: flex !important;
    position: fixed !important;
    z-index: 9997 !important;
}

#mobile-app #floatMenu {
    z-index: 9996 !important;
}

/* POPUPS */
#mobile-app #depositPopup,
#mobile-app #deposit-overlay,
#mobile-app #float-overlay {
    z-index: 10002 !important;
}

/* PREVENT DESKTOP WIDTHS */
#mobile-app .container,
#mobile-app .container-fluid {
    width: 100%;
    max-width: 100%;
}

#mobile-app .w-screen {
    width: 100% !important;
}

#mobile-app .max-w-screen-xl,
#mobile-app .max-w-screen-2xl,
#mobile-app .max-w-\[2000px\] {
    max-width: 100% !important;
}

/* IMAGES / MEDIA */
#mobile-app img,
#mobile-app video,
#mobile-app iframe {
    max-width: 100%;
}

/* BODY LOCK WHEN SIDEBAR OPEN */
body.sidebar-open {
    overflow: hidden !important;
}

/* DESKTOP BROWSER:
   KEEP APP CENTERED BUT STILL MOBILE */
@media (min-width: 431px) {
    body {
        background-color: #050505 !important;
    }

    #mobile-app-shell {
        min-height: 100vh;
        background: #080808;
    }

    #mobile-app {
        background: var(--bg-body);
        box-shadow:
            0 0 0 1px rgba(255,255,255,.04),
            0 0 50px rgba(0,0,0,.45);
    }
}

/* DESKTOP BREAKPOINT MUST NOT HIDE MOBILE UI */
@media (min-width: 1024px) {
    .footer-auth-menu,
    .footer-guest-menu {
        display: flex !important;
    }

    #mobile-app .footer-auth-menu,
    #mobile-app .footer-guest-menu {
        display: flex !important;
    }

    #floatMenuBtn {
        display: flex !important;
    }

    #mobile-app #floatMenuBtn {
        display: flex !important;
    }
}


/* =========================================================
   FINAL WRAPPER LOCK
   ========================================================= */

#mobile-app {
    position: relative !important;
}

#mobile-app .mobile-header,
#mobile-app .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 430px !important;
    z-index: 9999 !important;
}

#mobile-app .footer-auth-menu,
#mobile-app .footer-guest-menu {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 430px !important;
    display: flex !important;
    z-index: 9998 !important;
}

#mobile-app #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(320px, 86vw) !important;
    max-width: 320px !important;
    height: 100dvh !important;
    transform: translate3d(-105%,0,0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 10001 !important;
}

#mobile-app #sidebar.active {
    left: 0 !important;
    transform: translate3d(0,0,0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#mobile-app #overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 430px !important;
    height: 100dvh !important;
    z-index: 10000 !important;
}

#mobile-app #floatMenuBtn {
    position: fixed !important;
    z-index: 9997 !important;
}

#mobile-app #floatMenu {
    position: fixed !important;
    z-index: 9996 !important;
}


/* =========================================================
   FINAL MOBILE APP SYSTEM
   ========================================================= */

html,
body {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#mobile-app-shell {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
}

#mobile-app {
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

/* Only the application content scrolls. */
#mobile-app > main,
#mobile-app main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 10px !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
}

/* Standard mobile fixed header. */
#mobile-app .mobile-header,
#mobile-app .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 430px !important;
    transform: none !important;
    z-index: 9999 !important;
}

/* Standard mobile fixed bottom navigation.
   The safe-area is handled automatically by the browser/OS when available. */
#mobile-app .footer-auth-menu,
#mobile-app .footer-guest-menu {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: 430px !important;
    min-height: 60px !important;

    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;

    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9998 !important;
}

/* Sidebar drawer stays inside the app canvas. */
#mobile-app #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(320px, 86vw) !important;
    max-width: 320px !important;
    height: 100dvh !important;

    transform: translate3d(-105%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 10001 !important;
}

#mobile-app #sidebar.active {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Sidebar overlay stays inside the 430px app canvas. */
#mobile-app #overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 430px !important;
    height: 100dvh !important;
    z-index: 10000 !important;
}

/* Floating controls remain inside the app canvas. */
#mobile-app #floatMenuBtn {
    position: fixed !important;
    z-index: 9997 !important;
}

#mobile-app #floatMenu {
    position: fixed !important;
    z-index: 9996 !important;
}



/* =========================================================
   THEME COMPONENT LAYER
   Components consume variables; do not hardcode client colors here.
   ========================================================= */

#mobile-app,
#mobile-app-shell {
    background:var(--bg-body);
    color:var(--text-main);
}

#mobile-app .header,
#mobile-app .mobile-header {
    background:var(--bg-header);
    border-color:var(--border-color);
}

#mobile-app #mobile-home {
    background-color:var(--home-background-color);
    background-image:var(--home-background-image);
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
}

#mobile-app .home-main-layout,
#mobile-app .home-side-menu,
#mobile-app main.home-main-content,
#mobile-app .home-game-scroll,
#mobile-app .home-game-search-wrap {
    background:transparent;
}

#mobile-app .home-nav-card {
    background:var(--home-nav-bg);
    color:var(--home-nav-text);
    border-color:var(--home-nav-border);
    box-shadow:var(--home-nav-shadow);
}

#mobile-app .home-nav-card:hover {
    background:var(--home-nav-bg-hover);
}

#mobile-app .home-nav-card.active-nav {
    background:var(--home-nav-active-bg);
    color:var(--home-nav-active-text);
    border-color:var(--home-nav-active-border);
}

#mobile-app .home-nav-label {
    color:currentColor;
}

#mobile-app .home-game-search {
    background:var(--bg-control);
    border-color:var(--border-color);
    color:var(--text-secondary);
}

#mobile-app .home-game-search input {
    color:var(--text-main);
}

#mobile-app .home-game-search input::placeholder {
    color:var(--text-muted);
}

#mobile-app .home-user-card {
    background:var(--bg-control);
    border-color:var(--border-color);
}

#mobile-app .home-announcement-bar {
    background:var(--bg-overlay-soft);
    border-color:var(--border-color);
}

#mobile-app .home-announcement-icon {
    background:var(--bg-overlay);
    color:var(--text-secondary);
}

#mobile-app .footer-auth-menu,
#mobile-app .footer-guest-menu {
    border-color:var(--border-color);
}

#mobile-app .footer-nav-item {
    color:var(--text-heading);
}

#mobile-app .footer-active,
#mobile-app .footer-active i,
#mobile-app .footer-active span {
    color:var(--text-primary) !important;
}

#mobile-app .deposit-circle-outer {
    background:var(--deposit-bg);
    border-color:var(--bg-body);
}

#mobile-app .deposit-circle-inner {
    background:var(--deposit-inner-bg);
    color:var(--deposit-inner-text);
}

#mobile-app #depositPopup {
    background:var(--deposit-bg);
    box-shadow:0 8px 32px var(--shadow-color);
}

#mobile-app #depositPopup a {
    background:var(--deposit-bg);
    color:#fff;
}

#mobile-app #depositPopup a:hover {
    background:var(--bg-control-hover);
}

#mobile-app .popup-divider {
    background:var(--deposit-divider);
}

#mobile-app #depositPopupArrow {
    border-top-color:var(--deposit-bg);
}

#mobile-app .float-item-icon {
    background:var(--bg-card);
    border-color:var(--bg-primary);
    box-shadow:0 4px 18px var(--shadow-color);
}

#mobile-app .float-item-label {
    background:color-mix(in srgb, var(--bg-card) 92%, transparent);
    border-color:var(--border-color);
    color:var(--text-heading);
}

#mobile-app .card {
    background:var(--bg-card);
}

#mobile-app .soft-bg {
    background:var(--bg-soft);
}

#mobile-app .input-bg {
    background:var(--bg-input);
    color:var(--text-main);
    border-color:var(--border-color);
}

#mobile-app .auth-modal {
    background:var(--bg-auth-modal);
}

#mobile-app .overlay-bg {
    background:var(--bg-overlay);
}

/* Utility tokens for future client overrides. */
.theme-surface { background:var(--bg-card) !important; }
.theme-surface-soft { background:var(--bg-soft) !important; }
.theme-border { border-color:var(--border-color) !important; }
.theme-text { color:var(--text-main) !important; }
.theme-muted { color:var(--text-muted) !important; }
.theme-brand { color:var(--text-primary) !important; }
.theme-brand-bg { background:var(--bg-primary) !important; }




/* =========================================================
   HOME THEME TOKENS
   Home.php consumes these variables only.
   Client overrides can be placed on :root or a WL scope.
   ========================================================= */

:root{
    --home-background-color:var(--bg-body);
    --home-background-image:none;

    --home-nav-bg:linear-gradient(145deg,#1b1d20 0%,#0b0c0e 100%);
    --home-nav-bg-hover:linear-gradient(145deg,#222428 0%,#101114 100%);
    --home-nav-active-bg:var(--bg-primary);
    --home-nav-text:var(--text-main);
    --home-nav-active-text:#ffffff;
    --home-nav-border:#232529;
    --home-nav-active-border:color-mix(in srgb,var(--primary) 78%,#ffffff 22%);
    --home-nav-shadow:0 5px 14px rgba(0,0,0,.30);

    --home-search-bg:var(--bg-control);
    --home-search-border:var(--border-color);
    --home-search-text:var(--text-secondary);
    --home-search-placeholder:var(--text-muted);

    --home-announcement-bg:var(--bg-overlay-soft);
    --home-announcement-icon-bg:var(--bg-overlay);
    --home-announcement-text:var(--text-main);

    --home-user-bg:var(--bg-control);
    --home-user-border:var(--border-color);
}

[data-theme="light"]{
    --home-nav-bg:linear-gradient(145deg,#ffffff 0%,#eceef1 100%);
    --home-nav-bg-hover:linear-gradient(145deg,#ffffff 0%,#e4e6e9 100%);
    --home-nav-text:var(--text-main);
    --home-nav-active-text:#ffffff;
    --home-nav-shadow:0 4px 12px rgba(0,0,0,.10);
}


/* Final global theme ownership */
#mobile-app #mobile-home{
    background-color:var(--home-background-color,var(--bg-body));
    background-image:var(--home-background-image,none);
    color:var(--text-main);
}




/* =========================================================
   HEADER + FOOTER THEME TOKENS
   ---------------------------------------------------------
   Components only consume these variables.
   Override these from a client/WL theme layer.
   ========================================================= */
:root{
    --header-surface:var(--bg-header);
    --header-border:var(--border-color);
    --header-logo-height:30px;

    --footer-surface-top:#191b1e;
    --footer-surface-mid:#101113;
    --footer-surface-bottom:#08090a;
    --footer-spot-center:#303338;
    --footer-spot-mid:#181a1d;
    --footer-border:#202226;
    --footer-text:var(--text-main);
    --footer-text-muted:var(--text-secondary);

    --footer-active:var(--bg-primary);
    --footer-active-text:#ffffff;

    --footer-deposit-bg:var(--bg-primary);
    --footer-deposit-inner:#ffffff;
    --footer-deposit-icon:#17181a;

    --footer-popup-bg:var(--bg-primary);
    --footer-popup-text:#ffffff;
    --footer-popup-divider:rgba(255,255,255,.24);
}

[data-theme="light"]{
    --header-surface:var(--bg-header);
    --header-border:var(--border-color);

    --footer-surface-top:#f2f3f5;
    --footer-surface-mid:#e7e9ec;
    --footer-surface-bottom:#dfe1e4;
    --footer-spot-center:#ffffff;
    --footer-spot-mid:#eceef1;
    --footer-border:#d7d9dd;
    --footer-text:var(--text-main);
    --footer-text-muted:var(--text-secondary);

    --footer-deposit-inner:#ffffff;
    --footer-deposit-icon:#17181a;
    --footer-popup-text:#ffffff;
}



/* =========================================================
   HEADER + FOOTER GLOBAL THEME BRIDGE
   ========================================================= */

#mobile-app .mobile-header-lite,
#mobile-app .header,
#mobile-app .mobile-header {
    background:var(--header-surface) !important;
    border-color:var(--header-border) !important;
    color:var(--text-main);
}

#mobile-app .mobile-header-logo-lite img {
    height:var(--header-logo-height);
}

#mobile-app .footer-auth-menu,
#mobile-app .footer-guest-menu {
    color:var(--footer-text);
    border-color:var(--footer-border);
}

#mobile-app .footer-nav-item,
#mobile-app .deposit-btn-wrap {
    color:var(--footer-text);
}

#mobile-app .footer-active,
#mobile-app .footer-active i,
#mobile-app .footer-active span {
    color:var(--footer-active) !important;
}

#mobile-app .deposit-circle-outer {
    background:var(--footer-deposit-bg);
    border-color:var(--bg-body);
}

#mobile-app .deposit-circle-inner {
    background:var(--footer-deposit-inner);
}

#mobile-app .deposit-circle-inner i {
    color:var(--footer-deposit-icon) !important;
}

#mobile-app #depositPopup,
#mobile-app #depositPopup a {
    background:var(--footer-popup-bg);
    color:var(--footer-popup-text);
}

#mobile-app .popup-divider {
    background:var(--footer-popup-divider);
}

#mobile-app #depositPopupArrow {
    border-top-color:var(--footer-popup-bg);
}


/* =========================================================
   TRANSACTION FINAL OVERRIDE
   - no nested heavy compositing
   - global content spacing 10px
   - footer stays visible
   ========================================================= */

body:has(.transaction-page-app) {
    overflow: hidden !important;
}

body:has(.transaction-page-app) #mobile-app {
    transform: none !important;
    isolation: auto !important;
}

/* Transaction content is the only scrolling surface. */
body:has(.transaction-page-app) #mobile-app > main,
body:has(.transaction-page-app) #mobile-app main {
    padding-top: 0 !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Footer must remain visible on Transaction. */
body:has(.transaction-page-app) #mobile-app .footer-auth-menu,
body:has(.transaction-page-app) #mobile-app .footer-guest-menu,
body:has(.transaction-page-app) #mobile-app .footer-guest-unified {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Since #mobile-app no longer creates a fixed-position containing block,
   center the footer on desktop while keeping it full width on mobile. */
body:has(.transaction-page-app) #mobile-app .footer-auth-menu,
body:has(.transaction-page-app) #mobile-app .footer-guest-menu {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 430px !important;
    transform: translateX(-50%) !important;
    z-index: 9998 !important;
}

/* Avoid unnecessary animation/compositing on the transaction page. */
body:has(.transaction-page-app) .transaction-app-bar {
    box-shadow: 0 2px 8px var(--shadow-color) !important;
}

body:has(.transaction-page-app) .transaction-back-btn:active {
    transform: scale(.97) !important;
}


/* Global desktop outer background:
   The BODY keeps the Thumbnail 6 image from layout.php.
   This gradient affects only the area outside #mobile-app-shell. */
@media (min-width: 431px) {
    body {
        background-color: #050505 !important;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(0,0,0,.10) 0%,
            rgba(0,0,0,.38) 52%,
            rgba(0,0,0,.72) 100%
        );
    }

    #mobile-app-shell {
        position: relative;
        z-index: 1;
    }
}

/* FINAL FIX — Thumbnail 6 is visible OUTSIDE the 430px app only. */
@media (min-width: 431px) {
    #mobile-app-shell {
        background: transparent !important;
    }

    #mobile-app {
        background: var(--bg-body) !important;
    }
}

/* Desktop: subtle shadow around the centered app shell */
@media (min-width: 431px) {
    #mobile-app {
        box-shadow:
            0 0 0 1px rgba(255,255,255,.035),
            0 0 28px rgba(0,0,0,.55),
            0 14px 45px rgba(0,0,0,.38);
    }
}
/* =========================================================
   FINAL — DARK GLASS SHELL + ELEGANT BLACK GRADIENT
   ---------------------------------------------------------
   Background image stays visible through the app shell.
   Solid UI surfaces use subtle black gradients.
   ========================================================= */

/* APP SHELL — slightly transparent so body background remains visible */
#mobile-app {
    background:
        linear-gradient(
            180deg,
            rgba(10,10,11,.78) 0%,
            rgba(5,5,6,.68) 48%,
            rgba(2,2,3,.78) 100%
        ) !important;

    backdrop-filter: blur(9px) saturate(112%) !important;
    -webkit-backdrop-filter: blur(9px) saturate(112%) !important;

    border-left: 1px solid rgba(255,255,255,.035) !important;
    border-right: 1px solid rgba(255,255,255,.035) !important;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.018),
        0 0 45px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(255,255,255,.018),
        inset 0 0 45px rgba(0,0,0,.18) !important;
}

/* SHELL OUTSIDE AREA — transparent */
#mobile-app-shell {
    background: transparent !important;
}

/* HEADER — elegant black gradient, intentionally solid */
#mobile-app .header,
#mobile-app .mobile-header,
#mobile-app .mobile-header-lite {
    background:
        linear-gradient(
            180deg,
            rgba(18,18,20,.98) 0%,
            rgba(10,10,11,.96) 52%,
            rgba(4,4,5,.98) 100%
        ) !important;

    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    box-shadow:
        0 4px 18px rgba(0,0,0,.28),
        inset 0 -1px 0 rgba(255,255,255,.015) !important;
}

/* FOOTER — elegant black gradient */
#mobile-app .footer-auth-menu,
#mobile-app .footer-guest-menu,
#mobile-app .footer-guest-unified {
    background:
        linear-gradient(
            180deg,
            rgba(24,24,26,.97) 0%,
            rgba(12,12,14,.98) 45%,
            rgba(3,3,4,.99) 100%
        ) !important;

    border-top: 1px solid rgba(255,255,255,.055) !important;
    box-shadow:
        0 -8px 24px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.015) !important;
}

/* CARDS / MAIN SURFACES — dark gradient, NOT transparent */
#mobile-app .card,
#mobile-app .game-card,
#mobile-app .game-item,
#mobile-app .section-box,
#mobile-app .section-card {
    background:
        linear-gradient(
            145deg,
            rgba(24,24,27,.96) 0%,
            rgba(12,12,14,.97) 55%,
            rgba(5,5,6,.98) 100%
        );
}

/* Common soft surfaces */
#mobile-app .soft-bg {
    background:
        linear-gradient(
            180deg,
            rgba(25,25,28,.88) 0%,
            rgba(9,9,11,.94) 100%
        );
}

/* Inputs remain dark */
#mobile-app .input-bg {
    background:
        linear-gradient(
            180deg,
            rgba(15,15,17,.96) 0%,
            rgba(6,6,7,.98) 100%
        );
}

/* Desktop: keep the BODY background visible around and through the shell */
@media (min-width: 431px) {
    body {
        background-color: #050505 !important;
    }

    #mobile-app-shell {
        background: transparent !important;
    }

    #mobile-app {
        background:
            linear-gradient(
                180deg,
                rgba(10,10,11,.78) 0%,
                rgba(5,5,6,.68) 48%,
                rgba(2,2,3,.78) 100%
            ) !important;

        backdrop-filter: blur(9px) saturate(112%) !important;
        -webkit-backdrop-filter: blur(9px) saturate(112%) !important;

        box-shadow:
            0 0 0 1px rgba(255,255,255,.035),
            0 0 42px rgba(0,0,0,.52),
            0 14px 45px rgba(0,0,0,.38),
            inset 0 0 45px rgba(0,0,0,.18) !important;
    }
}

/* Home canvas itself stays transparent so shell/background can show */
#mobile-app #mobile-home {
    background-color: transparent !important;
    background-image: var(--home-background-image, none);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}