* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body{
    --page-background-overlay: rgba(198, 198, 198, 0.58);
    color:#fff;
    font-family:Arial,sans-serif;
    background-image:
        linear-gradient(var(--page-background-overlay), var(--page-background-overlay)),
        url('../custom/images/background.png');
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    background-attachment:fixed;
    min-height:100vh;
    background-color:#000;
    background-blend-mode:normal;
}


.top-header {
    height: 69px;
    background: linear-gradient(#565656, #111);
    border-bottom: 2px solid #b47812;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}


/* Prevent the fallback/static logo from flashing before the current BO header is ready. */
html:not(.naga-header-ready) .top-header .site-logo,
html:not(.naga-header-ready) .top-header .logo-box img {
    visibility: hidden !important;
}

.site-logo{
    height: 55px;
    width:auto;
    display:block;
}

.logo-box {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: Georgia, serif;
    font-size: 29px;
    letter-spacing: 2px
}

.logo-icon {
    width: 41px;
    height: 41px;
    background: linear-gradient(135deg, #ff642a, #741600);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: #181818;
    font-weight: 900
}

.lang-btn {
    position: absolute;
    right: 30px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-btn img {
    width: 28px;
    height: 28px;
    display: block;
    object-fit: contain;
}

/* .main-layout{
    display:grid;
    grid-template-columns:300px minmax(0, 1fr) 300px;
    gap:0;
    max-width:1400px;
    margin:0 auto;
} */

.main-layout{
    display:grid;
    grid-template-columns:400px minmax(0, 1fr) 400px;
    min-height:calc(100vh - 130px);
    align-items:stretch;
}

.content-area{
    min-width:0;
    overflow:hidden;
    padding:14px;
}

.left-sidebar{
    border-right:1px solid rgba(255,255,255,.15);
}

.left-sidebar, .center-content, .right-panel {
    padding: 14px;
    border-right: 1px solid rgba(255, 255, 255, .25);
    min-width: 0
}

.left-sidebar,
.content-area,
.right-panel{
    height:100%;
}

/* .center-content {
    background: rgba(0, 0, 0, .12)
} */

.side-slider {
    width: 100%;
    aspect-ratio: 371/197;
    position: relative;
    overflow: hidden;
    margin-bottom: 17px;
    background: transparent;
    cursor: pointer
}

/* Keep the banner transparent while API images are loading/replacing the defaults. */
.side-slider,
.side-slider::before,
.side-slider::after{
    box-shadow:none !important;
}
.side-slider .slide{
    background:transparent;
}

.slider-track {
    width: 100%;
    height: 100%;
    display: flex;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition: transform .35s ease;
}

.side-slider.is-dragging .slider-track {
    transition: none;
}

.slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: none;
}

.slide.active {
    opacity: 1
}

.dots {
    position: absolute;
    bottom: 7px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 4
}

.dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    margin: 0 4px;
    opacity: .55;
    cursor: pointer
}

.dots .active {
    opacity: 1;
    background: #fff
}

.slider-timer{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    z-index:5;
    background:rgba(255,255,255,.16);
    pointer-events:none;
}

.slider-timer span{
    display:block;
    width:0;
    height:100%;
    background:#ffd200;
    box-shadow:0 0 8px rgba(255,210,0,.75);
}

@keyframes sliderTimer{
    from{width:0%}
    to{width:100%}
}

.side-slider,
.side-slider .slide{
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
}

.side-slider img{
    -webkit-user-drag:none;
    user-select:none;
}

.side-slider.is-dragging{
    cursor:grabbing;
}


.promo-img {
    width: 100%;
    display: block;
    margin: 0 0 12px
}

.action-row {
    display: flex;
    gap: 6px;
    margin: 8px 10px 10px
}

.action-row button, .copy-btn {
    background: #173923;
    border: 3px solid #295d3e;
    color: #ddd;
    font-family: Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    border-radius: 7px;
    padding: 5px;
    box-shadow: inset 0 0 5px #000;
    text-shadow: 1px 1px #000;
    white-space: nowrap
}

.action-row button {
    flex: 1;
    min-width: 0
}

.action-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:6px;
}

.action-btn{
    display:block;
}

.action-btn.full-width{
    grid-column:1 / -1;
}

.copy-btn {
    margin-left: 10px;
    display: block;
    width: 55%;
    min-width: 160px
}

.social {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: #2b251d;
    background: linear-gradient(#b2a486, #6e6049);
    border: 5px solid #42382a;
    margin: 12px 0;
    border-radius: 3px;
    height: 80px;
    padding: 0 24px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: inset 0 0 8px #000;
    white-space: nowrap
}

.social span {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2293e8;
    color: #fff;
    font-size: 32px
}

.telegram span {
    background: #2bc2e8;
    font-size: 24px
}

.category-row {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 2px solid #bbb;
    padding-bottom: 15px;
    margin-bottom: 9px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 10px;
    overflow: visible;
}

.category-row::-webkit-scrollbar {
    display: none
}

.cat {
    min-width: 112px;
    background: linear-gradient(#9a927d, #4d493f);
    border-radius: 8px;
    border: 2px solid #837c69;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    text-shadow: 1px 1px #000;
    color: #eee;
    cursor: pointer
}

.cat .gem {
    font-size: 39px;
    filter: drop-shadow(0 0 8px currentColor)
}

.sub-tab-row {
    display: flex;
    gap: 5px;
    margin: 0 0 15px
}

.sub-tab-row button {
    height: 36px;
    border: 2px solid #333;
    background: #000;
    color: #fff;
    font-family: Georgia, serif;
    font-weight: 800;
    border-radius: 4px;
    flex: 1;
    cursor: pointer
}

.sub-tab-row button.active {
    background: #ff9709;
    border-color: #ff9709;
    color: #fff
}

.game-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:28px 34px;
    width:100%;
    align-items:start;
}

.game-card{
    width:100%;
    max-width:170px;
    margin:0 auto;
    overflow:hidden;
}

.game-card img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:10px;
    display:block;
}

.game-card-name{
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
    font-size:16px;
    font-weight:700;
    margin-top:6px;
    color:#fff;
    text-shadow:2px 2px #000;
}

.game-img {
    height: 126px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    border: 2px solid rgba(255, 190, 90, .7);
    box-shadow: inset 0 -25px 40px rgba(0, 0, 0, .25), 0 2px 5px rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.game-img:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 15%, rgba(255, 255, 255, .45), transparent 30%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .2), transparent 35%)
}

.game-img span {
    position: relative;
    font-size: 72px;
    filter: drop-shadow(0 6px 6px #000)
}

.new-badge {
    position: absolute;
    top: 7px;
    left: -10px;
    transform: rotate(-45deg);
    background: #e91826;
    color: #fff;
    font-weight: 900;
    font-size: 11px;
    width: 50px;
    text-align: center;
    padding: 3px 0;
    z-index: 2
}

.game-title {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 7px;
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 900;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    z-index: 2;
    white-space: nowrap
}

.play-btn {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 8px;
    border-radius: 14px;
    border: 1px solid #9c6b27;
    background: linear-gradient(#151515, #030303);
    color: #fff;
    font-weight: 800;
    font-size: 12px
}

.game-grid.provider-grid {
    gap: 32px 36px
}

.provider-grid .game-img {
    height: 150px;
    background: radial-gradient(circle at 50% 18%, #33464c, #131817 70%);
    border-color: #9d7644
}

.provider-grid .game-img span {
    font-size: 64px
}

.provider-grid .play-btn {
    display: none
}

.provider-grid .game-title {
    font-size: 18px;
    bottom: 10px
}

.right-panel {
    padding: 30px 15px;
    background: rgba(0, 0, 0, .25);
    border-left:1px solid rgba(255,255,255,.15);
}

.login-row {
    display: flex;
    gap: 12px
}

.login-row button, .money-btns button {
    background: linear-gradient(#6b1306, #1a0501);
    border: 1px solid #461206;
    color: #ff8e18;
    border-radius: 10px;
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 900;
    padding: 8px 18px
}

.balance-box {
    /* margin-top: 22px; */
    display: grid;
    grid-template-columns: 1fr 145px;
    column-gap: 18px;
    align-items: start
}

.balance-text {
    min-width: 0
}

.balance-box h3 {
    color: #ffe600;
    font-size: 24px;
    margin: 12px 0
}

.balance-box p {
    font-size: 15px;
    line-height: 1.45;
    margin: 8px 0
}

.money-btns {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 24px
}

.money-btns button {
    font-size: 17px;
    padding: 5px 14px;
    border-radius: 7px;
    width: 100%
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 57px;
    background: linear-gradient(#333, #141414);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 20
}

.bottom-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    min-width: 70px
}

.bottom-nav span {
    display: block;
    font-size: 26px;
    line-height: 23px;
    position: relative;
    filter: drop-shadow(0 0 2px #ff7b00)
}

.bottom-nav em {
    position: absolute;
    top: -8px;
    right: 17px;
    background: #ff7b00;
    border-radius: 50%;
    font-style: normal;
    font-size: 10px;
    width: 18px;
    height: 18px;
    line-height: 18px
}

@media(max-width:900px) {
    body {
        background: #101010
    }

    .top-header {
        height: 57px
    }

    .logo-box {
        font-size: 27px
    }

    .logo-icon {
        width: 39px;
        height: 39px
    }

    .main-layout{
        grid-template-columns:285px minmax(0, 1fr) 285px;
    }

    .left-sidebar, .center-content {
        border-right: 0;
        padding: 14px
    }

    .right-panel {
        display: none
    }

    .side-slider {
        margin-bottom: 16px
    }

    .promo-img {
        margin-top: 0
    }

    .action-row {
        margin: 8px 10px;
        gap: 6px
    }

    .action-row button, .copy-btn {
        font-size: 23px;
        padding: 6px 8px
    }

    .copy-btn {
        margin-left: 10px;
        width: 52%;
        min-width: 180px
    }

    .social {
        height: 89px;
        font-size: 26px;
        padding: 0 24px;
        margin: 13px 2px;
        gap: 15px
    }

    .center-content {
        display: block;
        padding-top: 6px;
        padding-bottom: 90px
    }

    .category-row {
        gap: 11px;
        padding-bottom: 14px;
        margin-bottom: 8px
    }

    .cat {
        min-width: 100px;
        height: 100px;
        align-items: flex-start;
        padding-left: 10px
    }

    .cat .gem {
        font-size: 34px;
        margin: auto auto 4px
    }

    .cat span {
        font-size: 16px;
        line-height: 1.05
    }

    .sub-tab-row {
        margin-bottom: 15px
    }

    .sub-tab-row button {
        height: 34px;
        font-size: 13px
    }

    .game-grid{
        grid-template-columns:repeat(auto-fit, minmax(105px, 1fr));
        gap:26px 26px;
    }

    .game-grid, .game-grid.provider-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px
    }

    .game-img, .provider-grid .game-img {
        height: 138px
    }

    .game-img span, .provider-grid .game-img span {
        font-size: 65px
    }

    .game-title, .provider-grid .game-title {
        font-size: 15px
    }

    .bottom-nav a {
        min-width: 58px;
        font-size: 10px
    }

    .bottom-nav span {
        font-size: 24px
    }

    .action-grid {
        padding: 0 10px;
    }
}

@media(min-width:901px) and (max-width:1400px) {
    .main-layout {
        grid-template-columns: 300px minmax(620px, 1fr) 300px
    }

    .game-grid {
        grid-template-columns: repeat(6, minmax(100px, 1fr));
        gap: 24px 28px
    }

    .game-img {
        height: 126px
    }

    .provider-grid .game-img {
        height: 148px
    }

    .social {
        font-size: 17px;
        padding: 0 12px;
        gap: 10px
    }

    .login-row button {
        font-size: 20px;
        padding: 7px 13px
    }

    .right-panel {
        padding: 34px 20px
    }

    .balance-box {
        grid-template-columns: 1fr 130px;
        column-gap: 12px
    }

    .balance-box p {
        font-size: 14px
    }

    .money-btns button {
        font-size: 15px;
        padding: 5px 10px
    }
}

/* ===== Latest responsive alignment fix ===== */
html, body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
}
body{
    padding-bottom:57px;
    background:url('../custom/images/background.png') center top / cover fixed no-repeat #000 !important;
}
.main-layout{
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:400px minmax(0, 1fr) 400px;
    margin:0;
}
.left-sidebar,.center-content,.right-panel{
    min-width:0;
}
.center-content{
    overflow:hidden;
    padding:14px;
}
.category-row{
    width:100%;
    justify-content:flex-start;
}
.sub-tab-row{
    width:100%;
}
.game-grid,
.game-grid.provider-grid{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:28px 34px;
    width:100%;
    overflow:hidden;
    align-items:start;
}
.game-card{
    width:100%;
    max-width:150px;
    min-width:0;
    margin:0 auto;
    overflow:visible;
}
.game-card-img-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:10px;
    overflow:hidden;
}
.game-card-img-wrap img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.game-card-name{
    position:absolute;
    left:5px;
    right:5px;
    bottom:8px;
    margin:0;
    font-family:Georgia,serif;
    font-size:clamp(12px, 1.1vw, 18px);
    line-height:1.05;
    font-weight:900;
    color:#fff;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow:2px 2px 0 #000, -1px -1px 0 #6b3c24;
    z-index:2;
}
.game-card .play-btn{
    width:100%;
    height:25px;
    margin-top:7px;
}
.provider-grid .play-btn{
    display:none;
}
.game-card .game-img{display:none;}

.right-panel{
    overflow:hidden;
    padding:34px 20px;
}
.login-row{
    display:flex;
    gap:10px;
    flex-wrap:nowrap;
}
.login-row button{
    flex:1;
    min-width:0;
    font-size:clamp(18px, 1.55vw, 26px);
    padding:8px 10px;
    white-space:nowrap;
}
.balance-box{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 130px;
    gap:12px;
    align-items:start;
    width:100%;
}
.balance-text{
    min-width:0;
    overflow-wrap:anywhere;
}
.money-btns{
    width:130px;
    margin-top:24px;
    gap:14px;
}
.money-btns button{
    width:100%;
    white-space:nowrap;
    font-size:15px;
    padding:6px 8px;
}

@media (min-width:901px) and (max-width:1280px){
    .main-layout{
        grid-template-columns:400px minmax(0, 1fr) 400px;
    }
    .game-grid,
    .game-grid.provider-grid{
        grid-template-columns:repeat(6, minmax(0, 1fr));
        gap:26px 28px;
    }
    .game-card{max-width:128px;}
    .balance-box{
        grid-template-columns:1fr;
    }
    .money-btns{
        width:100%;
        margin-top:6px;
    }
}

@media (max-width:1100px) and (min-width:901px){
    .game-grid,
    .game-grid.provider-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
    .game-card{max-width:145px;}
}

@media (max-width:900px){
    body{
        padding-bottom:57px;
        background:url('../custom/images/background.png') center top / cover fixed no-repeat #000 !important;
    }
    .main-layout{
        display:block;
        width:100%;
    }
    .left-sidebar,
    .center-content{
        width:100%;
        padding:14px;
        border-right:0;
    }
    .right-panel{display:none;}
    .category-row{
        display:flex;
        overflow-x:auto;
        gap:11px;
        padding-bottom:14px;
    }
    /* .cat{
        flex:0 0 112px;
        min-width:112px;
        height:104px;
        align-items:center;
        padding-left:0;
    } */
     .cat{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

    .cat-icon{
        width:48px;
        height:48px;
        object-fit:contain;
        margin-bottom:8px;
    }
    .sub-tab-row button{
        font-size:13px;
    }
    .game-grid,
    .game-grid.provider-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:16px 14px;
        overflow:visible;
    }
    .game-card{
        max-width:100%;
    }
    .game-card-name{
        font-size:clamp(14px, 4.2vw, 18px);
    }
    .social{
        height:76px;
        font-size:clamp(19px, 6vw, 26px);
    }
}

/* ===== Gaming animation layer only ===== */
@keyframes nagaPulseScale{
    0%,100%{transform:scale(1); filter:brightness(1)}
    45%{transform:scale(1.035); filter:brightness(1.12)}
    70%{transform:scale(.985); filter:brightness(1)}
}
@keyframes nagaFloatY{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-4px)}
}
@keyframes nagaActiveGlow{
    0%,100%{box-shadow:0 2px 0 #ffe400, 0 0 0 rgba(255,228,0,0)}
    50%{box-shadow:0 2px 0 #ffe400, 0 0 18px rgba(255,228,0,.75)}
}
@keyframes nagaSoftGlow{
    0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,148,0,0))}
    50%{filter:brightness(1.14) drop-shadow(0 0 10px rgba(255,148,0,.45))}
}
@keyframes nagaIconBounce{
    0%,100%{transform:translateY(0) scale(1)}
    45%{transform:translateY(-5px) scale(1.08)}
    70%{transform:translateY(1px) scale(.98)}
}
@keyframes nagaSlidePop{
    0%{transform:scale(1.02); opacity:.35}
    100%{transform:scale(1); opacity:1}
}
@keyframes nagaButtonShine{
    0%{left:-80%; opacity:0}
    35%{opacity:.7}
    100%{left:120%; opacity:0}
}

/* .side-slider .slide.active{
    animation:nagaSlidePop .45s ease both;
} */

.social{
    animation:nagaPulseScale 1.9s ease-in-out infinite;
    transform-origin:center;
    transition:filter .2s ease, transform .2s ease;
}
.social:nth-of-type(2){
    animation-delay:.35s;
}
.social:hover{
    animation-play-state:paused;
    transform:scale(1.055);
    filter:brightness(1.18) drop-shadow(0 0 12px rgba(255,164,34,.55));
}
.social span{
    animation:nagaIconBounce 1.65s ease-in-out infinite;
}
.telegram span{
    animation-delay:.25s;
}

.cat{
    animation:nagaFloatY 2.35s ease-in-out infinite;
    transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
    will-change:transform;
}
.cat:nth-child(2){animation-delay:.12s}
.cat:nth-child(3){animation-delay:.24s}
.cat:nth-child(4){animation-delay:.36s}
.cat:nth-child(5){animation-delay:.48s}
.cat.active{
    animation:nagaFloatY 2.35s ease-in-out infinite, nagaActiveGlow 1.55s ease-in-out infinite;
}
.cat:hover{
    transform:translateY(-9px) scale(1.035);
    filter:brightness(1.18);
}
.cat .gem{
    animation:nagaSoftGlow 1.8s ease-in-out infinite;
}

.game-card{
    transition:transform .22s ease, filter .22s ease;
}
.game-card:hover{
    transform:translateY(-7px) scale(1.025);
    filter:brightness(1.12) drop-shadow(0 0 13px rgba(255,153,0,.35));
}
.game-card-img-wrap{
    transition:box-shadow .22s ease;
}
.game-card:hover .game-card-img-wrap{
    box-shadow:0 0 16px rgba(255,153,0,.55);
}

.play-btn,
.login-row button,
.money-btns button,
.action-row button,
.copy-btn,
.sub-tab-row button{
    position:relative;
    overflow:hidden;
    transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.play-btn::after,
.login-row button::after,
.money-btns button::after,
.action-row button::after,
.copy-btn::after,
.sub-tab-row button::after{
    content:"";
    position:absolute;
    top:-40%;
    left:-80%;
    width:45%;
    height:180%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
    transform:rotate(18deg);
    animation:nagaButtonShine 3.2s ease-in-out infinite;
    pointer-events:none;
}
.play-btn:hover,
.login-row button:hover,
.money-btns button:hover,
.action-row button:hover,
.copy-btn:hover,
.sub-tab-row button:hover{
    transform:translateY(-2px) scale(1.025);
    filter:brightness(1.18);
    box-shadow:0 0 12px rgba(255,132,0,.45);
}

.bottom-nav a span{
    animation:nagaIconBounce 2.2s ease-in-out infinite;
}
.bottom-nav a:nth-child(2) span{animation-delay:.12s}
.bottom-nav a:nth-child(3) span{animation-delay:.24s}
.bottom-nav a:nth-child(4) span{animation-delay:.36s}
.bottom-nav a:nth-child(5) span{animation-delay:.48s}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation:none !important;
        transition:none !important;
    }
}


/* ===== Category animation only after click + complete game image ===== */
.cat{
    animation:none !important;
    transform:translateY(0) scale(1);
}
.cat .gem{
    animation:none !important;
}
.cat.clicked-tab.active{
    animation:nagaFloatY 1.35s ease-in-out infinite, nagaActiveGlow 1.55s ease-in-out infinite !important;
    transform-origin:center bottom;
}
.cat.clicked-tab.active .gem{
    animation:nagaSoftGlow 1.8s ease-in-out infinite !important;
}

.center-content,
.game-grid,
.game-grid.provider-grid,
.game-card{
    overflow:visible !important;
}
.game-card-img-wrap img{
    object-fit:contain !important;
}
.game-card-img-wrap{
    background:transparent;
}

/* 防止 active tab 飘动时被切掉 */
.category-tabs,
.game-category,
.category-list{
    overflow: visible !important;
    padding-top: 10px;
}

/* 只让当前 active 的 tab 飘 */
.category-tab.active,
.category.active{
    animation: activeTabFloatSafe 1.4s ease-in-out infinite !important;
    transform-origin: center bottom;
    will-change: transform;
}

/* 其他 tab 完全不动 */
.category-tab:not(.active),
.category:not(.active){
    animation: none !important;
    transform: none !important;
}

@keyframes activeTabFloatSafe{
    0%, 100%{
        transform: translateY(0) scale(1);
    }
    50%{
        transform: translateY(-4px) scale(1.02);
    }
}


/* ===== Safe active category animation + no tab overflow ===== */
.category-row{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0, 112px)) !important;
    gap:5px !important;
    justify-content:start !important;
    align-items:center !important;
    overflow:hidden !important;
    padding-top:10px !important;
    padding-right:0 !important;
    padding-left:15px !important;
}

.cat{
    width:100% !important;
    max-width:112px !important;
    min-width:0 !important;
    animation:none !important;
    transform:none !important;
    overflow:visible !important;
}

.cat.active,
.cat.clicked-tab.active,
.category-tab.active,
.category.active{
    animation:none !important;
    transform:none !important;
    will-change:auto !important;
}

.cat:not(.active),
.category-tab:not(.active),
.category:not(.active){
    animation:none !important;
    transform:none !important;
}

.cat .gem{
    animation:none !important;
    transform-origin:center center !important;
}

.cat.active .gem{
    animation:activeGemPulseSafe 1.45s ease-in-out infinite !important;
    filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #ffe400);
}

@keyframes activeGemPulseSafe{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.12);
    }
}

/* Game image complete display */
.game-grid,
.game-grid.provider-grid,
.game-card,
.game-card-img-wrap{
    overflow:visible !important;
}

.game-card-img-wrap img,
.game-card img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
}

/* Responsive tab width: never cross the right border */
@media(max-width:1200px){
    .category-row{
        grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
        gap:10px !important;
    }

    .cat{
        max-width:none !important;
        height:96px !important;
    }

    .cat .gem{
        font-size:34px !important;
    }

    .cat span{
        font-size:12px !important;
    }
}

@media(max-width:992px){
    .category-row{
        overflow-x:auto !important;
        grid-template-columns:repeat(5, 96px) !important;
        padding-bottom:12px !important;
    }

    .cat{
        max-width:96px !important;
        height:90px !important;
    }
}


/* ===== Mobile right panel + image category tabs ===== */

/* category buttons use image, not emoji */
.cat-icon{
    width:52px;
    height:52px;
    object-fit:contain;
    object-position:center;
    margin-bottom:7px;
    display:block;
    filter:drop-shadow(0 0 8px rgba(255,255,255,.25));
}

.cat .gem{
    display:none !important;
}

/* active tab animation only on image icon, no layout overflow */
.cat.active .cat-icon{
    animation:activeCatImagePulse 1.45s ease-in-out infinite !important;
    filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #ffe400);
}

@keyframes activeCatImagePulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.12);}
}

/* category slider wrapper */
.category-slider{
    position:relative;
    width:100%;
}

.cat-arrow{
    display:none;
}

/* make image game cards never crop */
.game-card-img-wrap{
    overflow:visible !important;
}

.game-card-img-wrap img{
    object-fit:contain !important;
}

/* mobile layout same as screenshot: balance first, category + games below */
@media(max-width:900px){
    .main-layout{
        display:flex !important;
        flex-direction:column !important;
        min-height:auto !important;
    }

    .right-panel{
        display:block !important;
        order:1;
        width:100%;
        padding:18px 14px 16px !important;
        border-left:0 !important;
        border-right:0 !important;
        background:rgba(0,0,0,.28);
    }

    .center-content{
        order:2;
        width:100%;
        padding:10px 8px 85px !important;
        border-right:0 !important;
    }

    .left-sidebar{
        order:3;
        display:none !important;
    }

    .login-row{
        display:none !important;
    }

    .balance-box{
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) 145px !important;
        gap:10px !important;
        margin-top:0 !important;
        align-items:start !important;
    }

    .balance-box h3{
        font-size:22px !important;
        margin:8px 0 12px !important;
    }

    .balance-box p{
        font-size:14px !important;
        line-height:1.35 !important;
        margin:6px 0 !important;
    }

    .money-btns{
        width:145px !important;
        margin-top:18px !important;
        gap:12px !important;
    }

    .money-btns button{
        height:30px !important;
        font-size:15px !important;
        padding:4px 8px !important;
        border-radius:7px !important;
    }

    .category-slider{
        padding:0 34px;
        margin:0 0 8px;
    }

    .cat-arrow{
        display:flex !important;
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        z-index:5;
        width:28px;
        height:28px;
        border-radius:50%;
        border:0;
        background:rgba(255,255,255,.75);
        color:#333;
        align-items:center;
        justify-content:center;
        font-size:30px;
        line-height:1;
        font-weight:900;
        cursor:pointer;
    }

    .cat-prev{left:0;}
    .cat-next{right:0;}

    .category-row{
        display:flex !important;
        grid-template-columns:none !important;
        gap:8px !important;
        overflow-x:auto !important;
        overflow-y:visible !important;
        scroll-behavior:smooth;
        scrollbar-width:none;
        padding-top:8px !important;
        padding-bottom:8px !important;
        border-bottom:2px solid rgba(255,255,255,.75);
        margin-bottom:7px;
    }

    .category-row::-webkit-scrollbar{
        display:none;
    }

    .cat{
        flex:0 0 88px !important;
        width:88px !important;
        min-width:88px !important;
        max-width:88px !important;
        height:88px !important;
        padding:5px 4px !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .cat-icon{
        width:48px !important;
        height:48px !important;
        margin-bottom:3px !important;
    }

    .cat span{
        font-size:11px !important;
        line-height:1.05 !important;
        white-space:normal !important;
        text-align:center !important;
    }

    .sub-tab-row{
        margin:0 0 12px !important;
        gap:4px !important;
    }

    .sub-tab-row button{
        height:36px !important;
        font-size:13px !important;
    }

    .game-grid,
    .game-grid.provider-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
        gap:14px 10px !important;
        overflow:visible !important;
    }

    .game-card{
        max-width:100% !important;
    }

    .game-card .play-btn{
        height:27px !important;
        margin-top:7px !important;
        font-size:11px !important;
    }
}

@media(max-width:380px){
    .balance-box{
        grid-template-columns:minmax(0, 1fr) 135px !important;
    }

    .money-btns{
        width:135px !important;
    }

    .game-grid,
    .game-grid.provider-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
        gap:12px 8px !important;
    }

    .category-slider{
        padding:0 30px;
    }

    .cat{
        flex-basis:84px !important;
        width:84px !important;
        min-width:84px !important;
        height:84px !important;
    }
}

/* ===== Mobile restore top slider + login panel + bottom promo/social ===== */
.mobile-top-area,
.mobile-bottom-area{
    display:none;
}

@media(max-width:900px){
    .main-layout{
        display:flex !important;
        flex-direction:column !important;
    }

    .mobile-top-area{
        display:block !important;
        order:1;
        width:100%;
        padding:14px 14px 0;
    }

    .mobile-top-area .side-slider{
        margin-bottom:10px;
    }

    .right-panel{
        order:2;
        display:block !important;
        width:100%;
        padding:12px 18px 16px !important;
        border-left:0 !important;
        border-right:0 !important;
        background:rgba(0,0,0,.28);
    }

    .login-row{
        display:flex !important;
        flex-direction:column;
        align-items:flex-start;
        gap:8px !important;
        margin-bottom:14px;
    }

    .login-row button{
        flex:0 0 auto !important;
        width:145px;
        height:54px;
        font-size:22px !important;
        padding:7px 12px !important;
    }

    .balance-box{
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) 145px !important;
        gap:10px !important;
        margin-top:0 !important;
        align-items:start !important;
    }

    .center-content{
        order:3;
        width:100%;
        padding:10px 8px 18px !important;
        border-right:0 !important;
    }

    .left-sidebar{
        display:none !important;
    }

    .mobile-bottom-area{
        display:block !important;
        order:4;
        width:100%;
        padding:8px 14px 30px;
    }

    .mobile-bottom-area .promo-img{
        width:100%;
        display:block;
        margin:0 0 12px;
    }

    .mobile-bottom-area .action-row{
        margin:8px 10px;
        gap:6px;
    }

    .mobile-bottom-area .action-row button,
    .mobile-bottom-area .copy-btn{
        font-size:23px;
        padding:6px 8px;
    }

    .mobile-bottom-area .copy-btn{
        margin-left:10px;
        width:52%;
        min-width:180px;
    }

    .mobile-bottom-area .social{
        height:76px;
        font-size:clamp(19px, 6vw, 26px);
        margin:13px 2px;
    }
}

/* ===== Game row + share alignment + full image category tabs ===== */
/* Category buttons: use the PNG as the full button image */
.cat{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    overflow:visible !important;
}

.cat span{
    display:none !important;
}

.cat-icon{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
}

.cat.active .cat-icon{
    animation:activeCatImagePulse 1.45s ease-in-out infinite !important;
    filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #ffe400);
}

@media(max-width:900px){
    /* login/register same row on mobile */
    .login-row{
        flex-direction:row !important;
        align-items:center !important;
        /* justify-content:flex-start !important; */
        gap:10px !important;
        width:100% !important;
        margin-bottom:14px !important;
    }

    .login-row button{
        width:auto !important;
        min-width:138px !important;
        max-width:160px !important;
        flex:0 1 150px !important;
        height:54px !important;
        white-space:nowrap !important;
    }

    /* share/downline stay aligned inside the screen */
    .mobile-bottom-area .action-row,
    .action-row{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:6px !important;
        margin:8px 6px 10px !important;
        width:auto !important;
    }

    .mobile-bottom-area .action-row button,
    .action-row button{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        font-size:clamp(17px, 5.4vw, 22px) !important;
        line-height:1.05 !important;
        padding:6px 4px !important;
        overflow:hidden !important;
        text-overflow:clip !important;
        white-space:nowrap !important;
    }

    .mobile-bottom-area .copy-btn,
    .copy-btn{
        margin-left:6px !important;
        width:52% !important;
        min-width:180px !important;
    }

    /* mobile category tab becomes pure full image button */
    .cat{
        flex:0 0 106px !important;
        width:106px !important;
        min-width:106px !important;
        max-width:106px !important;
        height:106px !important;
    }

    .cat-icon{
        width:100% !important;
        height:100% !important;
    }
}

@media(max-width:380px){
    .login-row button{
        min-width:0 !important;
        flex:1 1 0 !important;
        font-size:20px !important;
    }

    .cat{
        flex-basis:96px !important;
        width:96px !important;
        min-width:96px !important;
        max-width:96px !important;
        height:96px !important;
    }

    .mobile-bottom-area .action-row button,
    .action-row button{
        font-size:18px !important;
    }
}

.auth-gif{display:block;width:100%;max-width:150px;height:auto;cursor:pointer;}
.login-row{display:flex;gap:10px;align-items:center;justify-content:center;}


/* ===== Mobile carousel + image buttons ===== */

/* right balance buttons use image files */
.money-btns button{
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    height:auto !important;
}

.money-btns button::after{
    display:none !important;
}

.money-btns button img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}

.money-btns button:hover{
    transform:translateY(-2px) scale(1.03);
    filter:brightness(1.15) drop-shadow(0 0 8px rgba(255,132,0,.45));
}

/* bottom menu uses images */
.bottom-nav{
    height:57px;
    padding:0 6px;
}

.bottom-nav a{
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-width:0 !important;
    width:20%;
    height:100%;
}

.bottom-nav a img{
    display:block;
    max-width:54px;
    width:78%;
    height:auto;
    object-fit:contain;
    animation:nagaIconBounce 2.2s ease-in-out infinite;
    filter:drop-shadow(0 0 2px #ff7b00);
}

.bottom-nav a:nth-child(2) img{animation-delay:.12s}
.bottom-nav a:nth-child(3) img{animation-delay:.24s}
.bottom-nav a:nth-child(4) img{animation-delay:.36s}
.bottom-nav a:nth-child(5) img{animation-delay:.48s}

/* prevent old emoji span rules from affecting image nav */
.bottom-nav span,
.bottom-nav em{
    display:none !important;
}

@media(max-width:900px){
    /* mobile category carousel: exactly 3 tabs visible, no half cut */
    .category-slider{
        display:grid !important;
        grid-template-columns:28px minmax(0, 1fr) 28px;
        align-items:center;
        gap:4px;
        padding:0 !important;
        margin:0 0 8px !important;
        width:100%;
    }

    .cat-prev,
.cat-next{
    width:36px;
    height:36px;
    flex:0 0 36px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
}

    .category-row{
        width:100% !important;
        min-width:0 !important;
        display:flex !important;
        gap:8px !important;
        overflow-x:auto !important;
        overflow-y:visible !important;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        padding:8px 0 9px !important;
        margin:0 !important;
        border-bottom:2px solid rgba(255,255,255,.75) !important;
    }

    .category-row::-webkit-scrollbar{
        display:none;
    }

    .cat{
        flex:0 0 calc((100% - 16px) / 3) !important;
        width:calc((100% - 16px) / 3) !important;
        min-width:calc((100% - 16px) / 3) !important;
        max-width:calc((100% - 16px) / 3) !important;
        height:auto !important;
        aspect-ratio:1 / 1 !important;
        scroll-snap-align:start;
    }

    .cat-icon{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
    }

    /* mobile game grid alignment */
    .game-grid,
    .game-grid.provider-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
        gap:14px 10px !important;
        align-items:start !important;
    }

    .game-card{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
    }

    .game-card-img-wrap{
        width:100% !important;
        aspect-ratio:1 / 1 !important;
    }

    .game-card-img-wrap img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
    }

    .play-btn{
        width:100% !important;
    }

    /* right panel image buttons fit like original */
    .balance-box{
        grid-template-columns:minmax(0, 1fr) 135px !important;
        gap:8px !important;
    }

    .money-btns{
        width:135px !important;
        gap:9px !important;
        margin-top:19px !important;
    }

    .money-btns button img{
        width:135px;
    }

    .bottom-nav a img{
        max-width:46px;
        width:86%;
    }
}

@media(max-width:380px){
    .category-slider{
        grid-template-columns:26px minmax(0, 1fr) 26px;
        gap:3px;
    }

    .cat-prev,
    .cat-next{
        width:26px !important;
        height:26px !important;
        font-size:28px !important;
    }

    .category-row{
        gap:7px !important;
    }

    .cat{
        flex-basis:calc((100% - 14px) / 3) !important;
        width:calc((100% - 14px) / 3) !important;
        min-width:calc((100% - 14px) / 3) !important;
        max-width:calc((100% - 14px) / 3) !important;
    }

    .balance-box{
        grid-template-columns:minmax(0, 1fr) 124px !important;
    }

    .money-btns,
    .money-btns button img{
        width:124px !important;
    }
}


.image-actions{display:flex;gap:10px}
.image-actions img{width:48%;height:auto;display:block;cursor:pointer}
.copy-image{display:block;width:48%;max-width:180px;margin-top:10px;cursor:pointer}
.social-image{display:block;margin-top:12px}
.social-image img{width:100%;height:auto;display:block}

/* ===== Restore animation for image social buttons ===== */
.social-image img{
    animation:nagaPulseScale 1.9s ease-in-out infinite;
    transform-origin:center;
    transition:transform .18s ease, filter .18s ease;
    will-change:transform, filter;
}

.image-actions img:nth-child(2),
.social-image:nth-of-type(2) img{
    animation-delay:.25s;
}

.image-actions img:hover,
.copy-image:hover,
.social-image img:hover{
    animation-play-state:paused;
    transform:scale(1.055);
    filter:brightness(1.18) drop-shadow(0 0 12px rgba(255,164,34,.55));
}

@media (prefers-reduced-motion:reduce){
    .image-actions img,
    .copy-image,
    .social-image img{
        animation:none !important;
    }
}

/* ===== Mobile share / downline / copy image alignment ===== */
.left-sidebar .image-actions,
.mobile-bottom-area .image-actions{
    display:flex !important;
    grid-template-columns:none !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    width:calc(100% - 20px) !important;
    margin:8px 10px 10px !important;
}

.left-sidebar .image-actions img,
.mobile-bottom-area .image-actions img{
    flex:1 1 0 !important;
    width:0 !important;
    max-width:none !important;
    height:auto !important;
    display:block !important;
    object-fit:contain !important;
}

.left-sidebar .copy-image,
.mobile-bottom-area .copy-image{
    display:block !important;
    width:52% !important;
    max-width:190px !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 0 12px 10px !important;
    object-fit:contain !important;
}

@media(max-width:900px){
    .mobile-bottom-area .image-actions{
        gap:6px !important;
        width:calc(100% - 20px) !important;
        margin:8px 10px 10px !important;
    }

    .mobile-bottom-area .image-actions img{
        flex:1 1 0 !important;
        width:0 !important;
    }

    .mobile-bottom-area .copy-image{
        width:52% !important;
        max-width:190px !important;
        margin-left:10px !important;
    }
}
/* ===== Arrow icon alignment fix ===== */
@media(max-width:900px){
    .category-slider{
        display:grid !important;
        grid-template-columns:32px minmax(0, 1fr) 32px !important;
        align-items:center !important;
        gap:4px !important;
        padding:0 !important;
        margin:0 0 8px !important;
        width:100% !important;
    }

    .cat-arrow,
    .cat-prev,
    .cat-next{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
        min-height:28px !important;
        margin:0 auto !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border:0 !important;
        border-radius:50% !important;
        background:rgba(255,255,255,.78) !important;
        color:transparent !important;
        font-size:0 !important;
        line-height:0 !important;
        overflow:hidden !important;
        z-index:5 !important;
    }

    .cat-arrow::before{
        content:'';
        display:block;
        width:0;
        height:0;
    }

    .cat-prev::before{
        border-top:7px solid transparent;
        border-bottom:7px solid transparent;
        border-right:9px solid #333;
        margin-left:-2px;
    }

    .cat-next::before{
        border-top:7px solid transparent;
        border-bottom:7px solid transparent;
        border-left:9px solid #333;
        margin-right:-2px;
    }

    .category-row{
        min-width:0 !important;
        width:100% !important;
        align-self:center !important;
    }
}


/* ===== Language selector popup ===== */
.lang-btn{
    cursor:pointer;
    z-index:80;
}

.lang-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.68);
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
}

.lang-overlay.show{
    display:flex;
}

.lang-modal{
    width:min(275px, calc(100vw - 42px));
    background:#000;
    border:1px solid #ffcc00;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 0 22px rgba(0,0,0,.9);
    animation:langPop .18s ease-out both;
}

.lang-option{
    width:100%;
    height:50px;
    background:#000;
    color:#fff;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    font-family:Arial, sans-serif;
}

.lang-option + .lang-option{
    border-top:1px solid #ffcc00;
}

.lang-option span{
    color:#ffcc00;
    font-size:17px;
    line-height:1;
}

.lang-option:hover{
    background:rgba(255,204,0,.08);
}

@keyframes langPop{
    from{transform:scale(.94); opacity:0;}
    to{transform:scale(1); opacity:1;}
}

@media(max-width:900px){
    .lang-overlay{
        align-items:flex-start;
        padding-top:365px;
    }

    .lang-modal{
        width:min(300px, calc(100vw - 42px));
    }

    .lang-option{
        height:54px;
        font-size:18px;
    }
}

@media(max-width:380px){
    .lang-overlay{
        padding-top:365px;
    }
}

/* ===== Home action image buttons + share/copy popup ===== */
.image-action-btn,
.copy-image-btn{
    border:0;
    background:transparent;
    padding:0;
    margin:0;
    display:block;
    cursor:pointer;
    line-height:0;
    text-decoration:none;
}
.image-actions .image-action-btn{
    width:48%;
    flex:0 0 calc(50% - 5px);
}
.image-actions .image-action-btn img{
    width:100%;
    height:auto;
    display:block;
}
.copy-image-btn{
    width:55%;
    margin:0 0 0 10px;
}
.copy-image-btn .copy-image{
    width:100%;
    display:block;
    margin:0;
}
.share-overlay,
.copy-overlay{
    position:fixed;
    inset:0;
    z-index:5000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(2px);
}
.share-overlay.show,
.copy-overlay.show{display:flex;}
.share-modal{
    position:relative;
    width:min(340px, calc(100vw - 34px));
    max-height:calc(100vh - 120px);
    overflow:auto;
    background:linear-gradient(180deg,#050505,#000);
    border:2px solid #ffd200;
    border-radius:6px;
    padding:18px 18px 22px;
    color:#fff;
    box-shadow:0 0 30px rgba(0,0,0,.85), inset 0 0 30px rgba(255,193,7,.06);
}
.modal-x{
    position:absolute;
    right:10px;
    top:8px;
    width:30px;
    height:30px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:22px;
    cursor:pointer;
}
.share-head{
    border-bottom:1px solid #ffd200;
    padding:0 28px 10px 0;
    margin-bottom:14px;
}
.share-head h3{
    color:#ffe600;
    font-size:15px;
    margin-bottom:8px;
}
.share-head strong{font-size:13px;}
.qr-box{
    width:178px;
    height:178px;
    margin:0 auto 13px;
    padding:10px;
    border-radius:9px;
    background:#fff;
    box-shadow:0 0 16px rgba(255,210,0,.18);
}
.qr-fake{
    width:100%;
    height:100%;
    background:
      linear-gradient(90deg,#000 10px,transparent 10px 20px,#000 20px 30px,transparent 30px 40px,#000 40px 50px,transparent 50px 60px,#000 60px 70px,transparent 70px 80px,#000 80px 90px,transparent 90px 100px,#000 100px 110px,transparent 110px 120px,#000 120px 130px,transparent 130px),
      linear-gradient(#000 10px,transparent 10px 20px,#000 20px 30px,transparent 30px 40px,#000 40px 50px,transparent 50px 60px,#000 60px 70px,transparent 70px 80px,#000 80px 90px,transparent 90px 100px,#000 100px 110px,transparent 110px 120px,#000 120px 130px,transparent 130px);
    background-blend-mode:difference;
    background-size:35px 35px,35px 35px;
    border:10px solid #000;
}
.share-desc{
    color:#d9e7ed;
    text-align:center;
    font-size:12px;
    line-height:1.35;
    margin:0 0 13px;
}
.share-list{display:grid;gap:10px;}
.share-list a{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
    font-weight:800;
    font-size:15px;
    transition:.18s ease;
}
.share-list a:hover{transform:translateX(4px);color:#ffd200;}
.share-list span{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    font-weight:900;
    box-shadow:inset 0 1px rgba(255,255,255,.28),0 2px 8px rgba(0,0,0,.35);
}
.share-list .wa{background:#2bd769}.share-list .tg{background:#24a9e9}.share-list .ln{background:#00c94d;font-size:10px}.share-list .vb{background:#5d237f}.share-list .ms{background:linear-gradient(135deg,#ff38d4,#4a63ff)}
.copy-modal{
    width:min(460px, calc(100vw - 32px));
    background:linear-gradient(180deg,#080808,#000);
    border:1px solid rgba(255,210,0,.5);
    box-shadow:0 0 35px rgba(0,0,0,.8), 0 0 20px rgba(255,210,0,.12);
    border-radius:8px;
    color:#fff;
    text-align:center;
    padding:42px 24px 30px;
}
.copy-check{
    width:74px;
    height:74px;
    border-radius:50%;
    border:4px solid #9bea84;
    color:#9bea84;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    margin:0 auto 22px;
    text-shadow:0 0 8px rgba(155,234,132,.3);
}
.copy-modal h3{
    font-size:28px;
    margin-bottom:16px;
    color:#ddd;
}
.copy-modal p{
    color:#777;
    margin-bottom:28px;
    word-break:break-all;
}
.copy-ok{
    min-width:64px;
    height:38px;
    background:linear-gradient(#222,#050505);
    border:1px solid #b47812;
    border-radius:7px;
    color:#fff;
    cursor:pointer;
    box-shadow:0 0 10px rgba(255,180,0,.2);
}

.left-sidebar .action-row.image-actions,
.mobile-bottom-area .action-row.image-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:calc(100% - 20px) !important;
    max-width:none !important;
    margin:10px 10px 8px !important;
    padding:0 !important;
    overflow:visible !important;
    height:auto !important;
    line-height:0 !important;
}

.left-sidebar .image-action-btn,
.mobile-bottom-area .image-action-btn{
    display:block !important;
    flex:1 1 0 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    line-height:0 !important;
    overflow:visible !important;
}

.left-sidebar .image-action-btn img:not(.naga-effect-managed),
.mobile-bottom-area .image-action-btn img:not(.naga-effect-managed){
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    animation:none !important;
}

.left-sidebar .copy-image-btn,
.mobile-bottom-area .copy-image-btn{
    display:block !important;
    width:52% !important;
    max-width:190px !important;
    min-width:130px !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 0 12px 10px !important;
    border:0 !important;
    background:transparent !important;
    line-height:0 !important;
    overflow:visible !important;
}

.left-sidebar .copy-image-btn .copy-image,
.mobile-bottom-area .copy-image-btn .copy-image{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    animation:none !important;
}

@media(max-width:900px){
    .mobile-bottom-area{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .mobile-bottom-area .promo-img{
        width:calc(100% - 20px) !important;
        margin-left:10px !important;
        margin-right:10px !important;
        display:block !important;
    }

    .mobile-bottom-area .action-row.image-actions{
        width:calc(100% - 20px) !important;
        margin:10px 10px 8px !important;
        gap:8px !important;
    }

    .mobile-bottom-area .copy-image-btn{
        width:52% !important;
        max-width:190px !important;
        margin-left:10px !important;
    }

    .mobile-bottom-area .social-image{
        width:calc(100% - 20px) !important;
        margin-left:10px !important;
        margin-right:10px !important;
        display:block !important;
    }
}

.qr-box{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.qr-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:4px;
}

/* ===== Desktop grid spacing ===== */
@media (min-width:901px){
    .main-layout{
        grid-template-columns:400px minmax(0, 1fr) 400px !important;
    }

    .center-content{
        padding-left:15px !important;
        padding-right:15px !important;
    }

    .game-grid,
    .game-grid.provider-grid{
        grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
        column-gap:8px !important;
        row-gap:8px !important;
        justify-items:center !important;
    }

    .game-card{
        max-width:180px !important;
        width:100% !important;
        margin:0 auto !important;
    }
}

@media (min-width:901px) and (max-width:1280px){
    .main-layout{
        grid-template-columns:400px minmax(0, 1fr) 400px !important;
    }

    .center-content{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .game-grid,
    .game-grid.provider-grid{
        column-gap:12px !important;
        row-gap:24px !important;
    }

    .game-card{
        max-width:138px !important;
    }
}

@media (min-width:901px){
    .game-grid,
    .game-grid.provider-grid{
        display:grid;
        grid-template-columns:repeat(6, 330px);
        justify-content:center;
        gap:18px 12px;
    }
}

/* Right sidebar shadow panel */
.right-panel{
    background: transparent !important;
}

.right-content-box{
    background-image: url(../images/background-right.png);
    border-radius: 8px;
    padding: 18px 14px 18px;
    box-shadow: 0 0 5px #000;
}

/* ===== Bonus page ===== */
body.bonus-page{
    padding-bottom:57px !important;
    min-height:100vh;
    background:url('../custom/images/background.png') center top / cover fixed no-repeat #000 !important;
}

.bonus-main{
    min-height:calc(100vh - 69px - 57px);
    padding:24px 16px 86px;
    display:flex;
    justify-content:center;
}

.bonus-container{
    width:min(820px, 100%);
}

.bonus-section{
    margin-bottom:24px;
}

.bonus-title{
    font-family:Georgia, serif;
    font-size:28px;
    line-height:1;
    color:#f7eee4;
    letter-spacing:.5px;
    text-shadow:0 0 6px rgba(255,150,80,.75), 2px 2px 0 #000;
    margin:0 0 12px 4px;
    padding-bottom:8px;
    border-bottom:3px solid rgba(255,238,224,.9);
    width:310px;
    max-width:100%;
}

.bonus-title-img{
    display:block;
    width:330px;
    max-width:100%;
    height:auto;
    margin:0 0 12px 0px;
}

.bonus-grid{
    display:grid;
    grid-auto-flow:row;
    gap:12px;
    align-items:start;
    width:100%;
}

/*
  BONUS LAYOUT CONTROL - edit class in bonus.html only, no CSS change needed.

  On .bonus-grid:
  d-cols-1 / d-cols-2 / d-cols-3 / d-cols-4 / d-cols-5 / d-cols-6 = desktop item per row
  m-cols-1 / m-cols-2 / m-cols-3 = mobile item per row

  On .bonus-card:
  d-span-2 / d-span-3 / d-span-4 / d-span-5 / d-span-6 = desktop card width
  m-span-2 / m-span-3 = mobile card width
*/

/* Desktop columns */
.bonus-grid.d-cols-1{
    grid-template-columns:repeat(1, minmax(0, 1fr));
    /* max-width:330px; */
}

/* Keep single bonus image same size as a 2-column item on desktop, left side with empty space beside it */
@media(min-width:901px){
    .bonus-grid.single-left{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}
.bonus-grid.d-cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}
.bonus-grid.d-cols-3{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}
.bonus-grid.d-cols-4{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}
.bonus-grid.d-cols-5{
    grid-template-columns:repeat(5, minmax(0, 1fr));
}
.bonus-grid.d-cols-6{
    grid-template-columns:repeat(6, minmax(0, 1fr));
}

.bonus-card{
    display:block;
    border-radius:8px;
    overflow:hidden;
    border:0;
    text-decoration:none;
    transition:transform .2s ease, filter .2s ease;
}

.bonus-card img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    border-radius:8px;
}

.bonus-card:hover{
    transform:translateY(-4px) scale(1.015);
    filter:brightness(1.12) drop-shadow(0 0 10px rgba(0,165,255,.55));
}

/* Desktop span */
@media(min-width:901px){
    .bonus-card.d-span-2{
        grid-column:span 2;
    }
    .bonus-card.d-span-3{
        grid-column:span 3;
    }
    .bonus-card.d-span-4{
        grid-column:span 4;
    }
    .bonus-card.d-span-5{
        grid-column:span 5;
    }
    .bonus-card.d-span-6{
        grid-column:span 6;
    }
}

@media(max-width:900px){
    .bonus-main{
        min-height:auto;
        padding:0px 8px 78px;
        display:block;
    }

    .bonus-container{
        width:100%;
    }

    .bonus-section{
        margin-bottom:26px;
    }

    .bonus-title{
        font-size:25px;
        margin-left:4px;
        width:100%;
    }

    .bonus-grid{
        max-width:none !important;
        gap:8px;
    }

    /* Mobile columns */
    .bonus-grid.m-cols-1{
        grid-template-columns:repeat(1, minmax(0, 1fr));
    }
    .bonus-grid.m-cols-2{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .bonus-grid.m-cols-3{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    /* Mobile span */
    .bonus-card.m-span-2{
        grid-column:span 2;
    }
    .bonus-card.m-span-3{
        grid-column:span 3;
    }

    .bonus-card img{
        width:100%;
    }
}

/* ===== Bonus detail popup ===== */
.bonus-detail-overlay{
    position:fixed;
    inset:0;
    z-index:3000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:74px 18px 74px;
    background:rgba(0,0,0,.72);
}

.bonus-detail-overlay.show{
    display:flex;
}

.bonus-detail-modal{
    width:min(760px, 100%);
    max-height:calc(100vh - 132px);
    overflow:auto;
    background:#000;
    border:2px solid #ffd400;
    border-radius:6px;
    color:#fff;
    box-shadow:0 0 22px rgba(0,0,0,.95);
}

.bonus-detail-header{
    padding:16px 18px 10px;
}

.bonus-detail-header h3{
    margin:0;
    color:#ffe500;
    font-size:15px;
    font-weight:800;
    padding-bottom:12px;
    border-bottom:2px solid #ffd400;
}

.bonus-detail-content{
    padding:0 18px 18px;
    font-weight:700;
}

.require-title{
    margin:8px 0 12px;
    font-size:15px;
}

.bonus-detail-content h2{
    margin:0 0 18px;
    text-align:center;
    color:#ffe500;
    font-size:30px;
    line-height:1.1;
}

.require-table{
    width:88%;
    margin:0 auto 14px;
    border-radius:4px;
    overflow:hidden;
    font-size:13px;
}

.require-row{
    display:grid;
    grid-template-columns:40px 1fr;
    background:#666;
    border-bottom:1px solid #222;
    min-height:32px;
}

.require-row > div{
    display:flex;
    align-items:center;
    padding:7px 10px;
}

.require-icon{
    justify-content:center;
    padding:0 !important;
    background:#777;
    border-right:1px solid #333;
    font-size:17px;
}

.require-icon.check{
    color:#20ff20;
}

.require-icon.warn{
    color:#ffc244;
    font-size:14px;
}

.require-row.note{
    color:#fff200;
}

.bonus-detail-content hr{
    border:0;
    border-top:2px solid #fff;
    margin:12px 0 14px;
}

.terms{
    font-size:10px;
    line-height:1.35;
}

.terms strong{
    display:block;
    margin-bottom:8px;
}

.terms p{
    margin:0 0 8px;
}

.license-row{
    display:flex;
    gap:28px;
    align-items:center;
    flex-wrap:wrap;
    font-size:14px;
    font-style:italic;
}

.license-badge{
    margin-top:8px;
    width:44px;
    height:30px;
    border-radius:50%;
    background:linear-gradient(135deg,#ff005a,#006bff);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-style:normal;
}

.cert-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
    align-items:center;
    font-style:normal;
}

.cert-list span{
    background:#fff;
    color:#333;
    padding:4px 7px;
    border-radius:2px;
    font-size:11px;
    white-space:nowrap;
}

.bonus-close-btn{
    display:block;
    min-width:105px;
    height:36px;
    margin:18px auto 0;
    border:0;
    border-radius:4px;
    color:#fff;
    font-size:14px;
    cursor:pointer;
    background:linear-gradient(#ff5147,#d91616);
}

@media(max-width:768px){
    .bonus-detail-overlay{
        padding:50px 8px 54px;
        align-items:flex-start;
    }

    .bonus-detail-modal{
        max-height:calc(100vh - 82px);
        width:100%;
        border-radius:5px;
    }

    .bonus-detail-header{
        padding:14px 14px 8px;
    }

    .bonus-detail-header h3{
        font-size:15px;
    }

    .bonus-detail-content{
        padding:0 14px 14px;
    }

    .bonus-detail-content h2{
        font-size:28px;
        margin-bottom:16px;
    }

    .require-table{
        width:92%;
        font-size:12px;
    }

    .require-row{
        grid-template-columns:34px 1fr;
        min-height:36px;
    }

    .require-row > div{
        padding:7px 8px;
    }

    .terms{
        font-size:9px;
    }

    .license-row{
        gap:16px;
        font-size:9px;
        flex-wrap:nowrap;
        overflow:hidden;
    }

    .license-badge{
        width:34px;
        height:24px;
        font-size:10px;
    }

    .cert-list{
        gap:4px;
    }

    .cert-list span{
        padding:3px 4px;
        font-size:8px;
    }

    .bonus-close-btn{
        height:38px;
        min-width:110px;
        margin-top:18px;
    }
}

@media(max-width:390px){
    .bonus-detail-content h2{
        font-size:27px;
    }

    .require-table{
        width:94%;
    }
}

/* ===== Downline page ===== */
body.downline-page,
body.deposit-page{
    padding-bottom:57px !important;
    min-height:100vh;
    background:url('../custom/images/background.png') center top / cover fixed no-repeat #000 !important;
}
.downline-main,
.deposit-main{
    min-height:calc(100vh - 69px - 57px);
    padding:22px 18px 90px;
}
.downline-card,
.deposit-card{
    width:min(1100px,100%);
    margin:0 auto;
    border:1px solid rgba(255,210,0,.35);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(18,28,35,.86),rgba(0,0,0,.68));
    box-shadow:0 12px 35px rgba(0,0,0,.55), inset 0 0 35px rgba(255,210,0,.05);
    overflow:hidden;
}
.downline-head,
.deposit-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:22px 24px;
    background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(255,151,0,.18),rgba(0,0,0,.5));
    border-bottom:1px solid rgba(255,210,0,.3);
}
.mini-label{
    display:block;
    color:#ffd200;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.5px;
    margin-bottom:6px;
}
.downline-head h1,
.deposit-head h1{
    font-size:30px;
    font-family:Georgia,serif;
    text-shadow:2px 2px #000,0 0 14px rgba(255,210,0,.25);
}
.downline-code,
.deposit-balance{
    border:1px solid rgba(255,210,0,.4);
    border-radius:12px;
    padding:11px 14px;
    background:rgba(0,0,0,.38);
    color:#ffd200;
    font-weight:900;
}
.deposit-balance{display:grid;text-align:right;gap:3px;}
.deposit-balance span{color:#fff;font-size:12px;}
.downline-toolbar{
    display:flex;
    gap:14px;
    align-items:end;
    padding:18px 24px 10px;
}
.downline-toolbar label{flex:1;display:grid;gap:7px;color:#ffd200;font-weight:800;font-size:13px;}
.downline-toolbar select,
.deposit-field input{
    height:45px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:8px;
    background:rgba(255,255,255,.92);
    color:#18313b;
    padding:0 14px;
    outline:0;
    font-size:15px;
}
.gold-btn,
.submit-btn{
    border:0;
    border-radius:8px;
    background:linear-gradient(#ffd24a,#d68100);
    color:#fff;
    text-shadow:1px 1px #7b3900;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 3px 12px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.3);
}
.gold-btn{height:45px;padding:0 18px;}
.downline-summary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    padding:14px 24px;
}
.downline-summary div{
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(0,0,0,.35);
    padding:15px;
    display:grid;
    gap:5px;
}
.downline-summary b{color:#ffe600;font-size:20px;}
.downline-summary span{color:#d9e7ed;font-size:12px;}
.downline-table-wrap{padding:10px 24px 24px;overflow-x:auto;}
.downline-table{width:100%;border-collapse:separate;border-spacing:0 8px;color:#fff;}
.downline-table th{
    text-align:left;
    background:rgba(13,26,39,.95);
    padding:11px 12px;
    color:#fff;
    border-top:1px solid rgba(255,255,255,.25);
    border-bottom:1px solid rgba(255,255,255,.25);
}
.downline-table td{
    background:rgba(0,0,0,.35);
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
    padding:16px 12px;
}
.empty-state{text-align:center;padding:46px 18px;color:#d9e7ed;}
.empty-icon{font-size:44px;margin-bottom:8px;filter:drop-shadow(0 0 12px rgba(255,210,0,.5));}
.empty-state h3{color:#ffd200;margin-bottom:6px;}

/* ===== Deposit page ===== */
.deposit-card{max-width:820px;}
.deposit-field{display:grid;gap:8px;padding:20px 24px 10px;color:#ffd200;font-weight:900;}
.quick-amounts{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:10px 24px 18px;}
.quick-amounts button{
    height:40px;
    border:1px solid rgba(255,210,0,.35);
    border-radius:8px;
    background:rgba(0,0,0,.5);
    color:#ffd200;
    font-weight:900;
    cursor:pointer;
}
.quick-amounts button:hover{background:rgba(255,154,0,.22);}
.payment-title{padding:0 24px 10px;color:#fff;font-weight:900;}
.payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 24px 18px;}
.pay-method{
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(25,44,55,.86),rgba(0,0,0,.62));
    color:#fff;
    padding:16px 10px;
    display:grid;
    gap:5px;
    cursor:pointer;
}
.pay-method span{font-size:30px;}.pay-method b{color:#ffd200}.pay-method em{font-style:normal;color:#cbd5e1;font-size:12px;}
.pay-method.active{border-color:#ffd200;box-shadow:0 0 15px rgba(255,210,0,.2);}
.deposit-note{margin:0 24px 20px;padding:13px 15px;border-left:4px solid #ffd200;background:rgba(255,210,0,.09);color:#fff;line-height:1.4;}
.deposit-note b{color:#ffd200}.deposit-note p{font-size:13px;margin-top:5px;color:#d9e7ed;}
.deposit-actions{display:flex;gap:12px;padding:0 24px 24px;}
.cancel-btn,.submit-btn{
    flex:1;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:900;
}
.cancel-btn{
    border:1px solid #ff2a2a;
    border-radius:8px;
    color:#fff;
    background:rgba(0,0,0,.45);
}
.submit-btn{font-size:15px;}

@media(max-width:900px){
    .copy-image-btn{width:50%;margin-left:13px;}
    .share-modal{max-height:calc(100vh - 92px);padding:17px 16px 20px;}
    .qr-box{width:176px;height:176px;}
    .downline-main,.deposit-main{padding:12px 8px 74px;min-height:auto;}
    .downline-card,.deposit-card{border-radius:10px;}
    .downline-head,.deposit-head{padding:17px 15px;align-items:flex-start;}
    .downline-head h1,.deposit-head h1{font-size:25px;}
    .downline-code,.deposit-balance{font-size:12px;padding:9px 10px;}
    .downline-toolbar{padding:14px 14px 8px;display:grid;grid-template-columns:1fr auto;gap:10px;}
    .downline-summary{grid-template-columns:1fr;gap:8px;padding:12px 14px;}
    .downline-table-wrap{padding:8px 14px 16px;}
    .downline-table,.downline-table thead,.downline-table tbody,.downline-table tr,.downline-table th,.downline-table td{display:block;width:100%;}
    .downline-table thead{display:none;}
    .downline-table tr{border:1px solid rgba(255,210,0,.25);border-radius:10px;overflow:hidden;margin-bottom:10px;background:rgba(0,0,0,.42);}
    .downline-table td{border:0;background:transparent;}
    .empty-state{padding:32px 12px;}
    .deposit-field{padding:17px 15px 8px;}
    .quick-amounts{grid-template-columns:repeat(3,1fr);padding:8px 15px 16px;}
    .payment-title{padding:0 15px 10px;}
    .payment-grid{grid-template-columns:1fr;padding:0 15px 16px;}
    .deposit-note{margin:0 15px 17px;}
    .deposit-actions{padding:0 15px 18px;}
}

/* ===== Referrer action image buttons alignment ===== */
.left-sidebar .action-row.image-actions,
.mobile-bottom-area .action-row.image-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:calc(100% - 20px) !important;
    max-width:none !important;
    margin:10px 10px 8px !important;
    padding:0 !important;
    overflow:visible !important;
    height:auto !important;
    line-height:0 !important;
}

.left-sidebar .image-action-btn,
.mobile-bottom-area .image-action-btn{
    display:block !important;
    flex:1 1 0 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    line-height:0 !important;
    overflow:visible !important;
}

.left-sidebar .image-action-btn img:not(.naga-effect-managed),
.mobile-bottom-area .image-action-btn img:not(.naga-effect-managed){
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    animation:none !important;
}

.left-sidebar .copy-image-btn,
.mobile-bottom-area .copy-image-btn{
    display:block !important;
    width:52% !important;
    max-width:190px !important;
    min-width:130px !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 0 12px 10px !important;
    border:0 !important;
    background:transparent !important;
    line-height:0 !important;
    overflow:visible !important;
}

.left-sidebar .copy-image-btn .copy-image,
.mobile-bottom-area .copy-image-btn .copy-image{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    animation:none !important;
}

@media(max-width:900px){
    .mobile-bottom-area{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .mobile-bottom-area .promo-img{
        width:calc(100% - 20px) !important;
        margin-left:10px !important;
        margin-right:10px !important;
        display:block !important;
    }

    .mobile-bottom-area .action-row.image-actions{
        width:calc(100% - 20px) !important;
        margin:10px 10px 8px !important;
        gap:8px !important;
    }

    .mobile-bottom-area .copy-image-btn{
        width:52% !important;
        max-width:190px !important;
        margin-left:10px !important;
    }

    .mobile-bottom-area .social-image{
        width:calc(100% - 20px) !important;
        margin-left:10px !important;
        margin-right:10px !important;
        display:block !important;
    }
}

/* ===== Login page ===== */
html:has(body.login-page),
body.login-page{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden !important;
}

body.login-page{
    padding-bottom:57px !important;
    background:
        linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.34)),
        url('../custom/images/background.png') center center / cover no-repeat #000 !important;
}

.login-main{
    height:calc(100vh - 69px - 57px);
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    overflow:hidden;
}

.login-card{
    width:min(385px, 92vw);
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.55);
    background:rgba(190,190,190,.55);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
    box-shadow:0 18px 45px rgba(0,0,0,.55);
}

.login-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    height:55px;
}

.login-tab{
    border:0;
    color:#fff;
    font-size:18px;
    font-weight:900;
    background:#7a7a7a;
    cursor:pointer;
}

.login-tab.active{
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
}

.login-form{
    display:none;
    padding:36px 18px 38px;
    backdrop-filter: blur(12px);
}

.login-form.active{
    display:block;
}

.field-wrap{
    height:40px;
    border:1px solid #1e4650;
    background:rgba(255,255,255,.95);
    border-radius:22px;
    display:flex;
    align-items:center;
    margin-bottom:15px;
    padding:0 15px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
}

.field-icon{
    flex:0 0 24px;
    color:#183541;
    font-size:18px;
    line-height:1;
}

.field-wrap input{
    border:0;
    outline:0;
    background:transparent;
    width:100%;
    color:#214755;
    font-size:14px;
    padding-left:8px;
}

.field-wrap input::placeholder{
    color:#345966;
    opacity:1;
}

.forgot-link{
    display:block;
    text-align:right;
    color:#214755;
    font-size:12px;
    text-decoration:none;
    margin:-4px 4px 15px;
}

.submit-login{
    width:100%;
    height:42px;
    border:0;
    border-radius:22px;
    background:linear-gradient(to right, #0f2027, #203a43, #2c5364);
    color:#fff;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 5px 12px rgba(0,0,0,.25);
}

.submit-login:hover{
    filter:brightness(1.12);
    transform:translateY(-1px);
}

@media(max-width:900px){
    body.login-page{
        padding-bottom:57px !important;
        background:
            linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.28)),
            url('../custom/images/background.png') center center / cover no-repeat #000 !important;
    }

    .login-main{
        height:calc(100vh - 57px - 57px);
        align-items:center;
        padding:14px 28px;
    }

    .login-card{
        width:100%;
        max-width:370px;
        border-radius:18px;
    }

    .login-tabs{
        height:59px;
    }

    .login-tab{
        font-size:20px;
    }

    .login-form{
        padding:40px 20px 52px;
    }

    .field-wrap{
        height:40px;
        margin-bottom:18px;
    }

    .forgot-link{
        font-size:12px;
        margin-top:-6px;
        margin-bottom:16px;
    }

    .submit-login{
        height:44px;
        font-size:15px;
    }
}

@media(max-width:380px){
    .login-main{
        padding:12px 28px;
    }

    .login-card{
        max-width:330px;
    }

    .login-form{
        padding:34px 20px 42px;
    }

    .login-tabs{
        height:56px;
    }
}

.auth-link{display:block;max-width:140px;width:100%;}
.auth-link .auth-gif{max-width:100%;}

/* verification code row */
.verify-row{
    display:flex;
    width:100%;
    margin-top:14px;
    margin-bottom:14px;
    border-radius:28px;
    overflow:hidden;
    /* border:1px solid rgba(34,64,80,.8); */
}
.verify-row input{
    flex:1;
    border:0;
    padding:16px 0px;
    padding-left:15px;
    background:#e7e7ea;
    font-size:14px;
    outline:none;
}
.verify-btn{
    width:160px;
    border:0;
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    color:#fff;
    font-weight:700;
    font-size:16px;
    cursor:pointer;
}
@media(max-width:768px){
    .verify-btn{width:130px;font-size:14px;}
}

/* ===== Deposit page ===== */
.deposit-card{max-width:820px;}
.deposit-field{display:grid;gap:8px;padding:20px 24px 10px;color:#ffd200;font-weight:900;}
.quick-amounts{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:10px 24px 18px;}
.quick-amounts button{
    height:40px;
    border:1px solid rgba(255,210,0,.35);
    border-radius:8px;
    background:rgba(0,0,0,.5);
    color:#ffd200;
    font-weight:900;
    cursor:pointer;
}
.quick-amounts button:hover{background:rgba(255,154,0,.22);}
.payment-title{padding:0 24px 10px;color:#fff;font-weight:900;}
.payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 24px 18px;}
.pay-method{
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(25,44,55,.86),rgba(0,0,0,.62));
    color:#fff;
    padding:16px 10px;
    display:grid;
    gap:5px;
    cursor:pointer;
}
.pay-method span{font-size:30px;}.pay-method b{color:#ffd200}.pay-method em{font-style:normal;color:#cbd5e1;font-size:12px;}
.pay-method.active{border-color:#ffd200;box-shadow:0 0 15px rgba(255,210,0,.2);}
.deposit-note{margin:0 24px 20px;padding:13px 15px;border-left:4px solid #ffd200;background:rgba(255,210,0,.09);color:#fff;line-height:1.4;}
.deposit-note b{color:#ffd200}.deposit-note p{font-size:13px;margin-top:5px;color:#d9e7ed;}
.deposit-actions{display:flex;gap:12px;padding:0 24px 24px;}
.cancel-btn,.submit-btn{
    flex:1;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:900;
}
.cancel-btn{
    border:1px solid #ff2a2a;
    border-radius:8px;
    color:#fff;
    background:rgba(0,0,0,.45);
}
.submit-btn{font-size:15px;}

@media(max-width:900px){
    .copy-image-btn{width:50%;margin-left:13px;}
    .share-modal{max-height:calc(100vh - 92px);padding:17px 16px 20px;}
    .qr-box{width:176px;height:176px;}
    .downline-main,.deposit-main{padding:12px 8px 74px;min-height:auto;}
    .downline-card,.deposit-card{border-radius:10px;}
    .downline-head,.deposit-head{padding:17px 15px;align-items:flex-start;}
    .downline-head h1,.deposit-head h1{font-size:25px;}
    .downline-code,.deposit-balance{font-size:12px;padding:9px 10px;}
    .downline-toolbar{padding:14px 14px 8px;display:grid;grid-template-columns:1fr auto;gap:10px;}
    .downline-summary{grid-template-columns:1fr;gap:8px;padding:12px 14px;}
    .downline-table-wrap{padding:8px 14px 16px;}
    .downline-table,.downline-table thead,.downline-table tbody,.downline-table tr,.downline-table th,.downline-table td{display:block;width:100%;}
    .downline-table thead{display:none;}
    .downline-table tr{border:1px solid rgba(255,210,0,.25);border-radius:10px;overflow:hidden;margin-bottom:10px;background:rgba(0,0,0,.42);}
    .downline-table td{border:0;background:transparent;}
    .empty-state{padding:32px 12px;}
    .deposit-field{padding:17px 15px 8px;}
    .quick-amounts{grid-template-columns:repeat(3,1fr);padding:8px 15px 16px;}
    .payment-title{padding:0 15px 10px;}
    .payment-grid{grid-template-columns:1fr;padding:0 15px 16px;}
    .deposit-note{margin:0 15px 17px;}
    .deposit-actions{padding:0 15px 18px;}
}

/* ===== FINAL FIX: referrer action image buttons alignment ===== */
.left-sidebar .action-row.image-actions,
.mobile-bottom-area .action-row.image-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:calc(100% - 20px) !important;
    max-width:none !important;
    margin:10px 10px 8px !important;
    padding:0 !important;
    overflow:visible !important;
    height:auto !important;
    line-height:0 !important;
}

.left-sidebar .image-action-btn,
.mobile-bottom-area .image-action-btn{
    display:block !important;
    flex:1 1 0 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    line-height:0 !important;
    overflow:visible !important;
}

.left-sidebar .image-action-btn img:not(.naga-effect-managed),
.mobile-bottom-area .image-action-btn img:not(.naga-effect-managed){
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    animation:none !important;
}

.left-sidebar .copy-image-btn,
.mobile-bottom-area .copy-image-btn{
    display:block !important;
    width:52% !important;
    max-width:190px !important;
    min-width:130px !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 0 12px 10px !important;
    border:0 !important;
    background:transparent !important;
    line-height:0 !important;
    overflow:visible !important;
}

.left-sidebar .copy-image-btn .copy-image,
.mobile-bottom-area .copy-image-btn .copy-image{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    animation:none !important;
}

@media(max-width:900px){
    .mobile-bottom-area{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .mobile-bottom-area .promo-img{
        width:calc(100% - 20px) !important;
        margin-left:10px !important;
        margin-right:10px !important;
        display:block !important;
    }

    .mobile-bottom-area .action-row.image-actions{
        width:calc(100% - 20px) !important;
        margin:10px 10px 8px !important;
        gap:8px !important;
    }

    .mobile-bottom-area .copy-image-btn{
        width:52% !important;
        max-width:190px !important;
        margin-left:10px !important;
    }

    .mobile-bottom-area .social-image{
        width:calc(100% - 20px) !important;
        margin-left:10px !important;
        margin-right:10px !important;
        display:block !important;
    }
}

/* =========================
   Withdraw Page
========================= */
.withdraw-main{
    min-height:calc(100vh - 120px);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:34px 14px 100px;
}

.withdraw-card{
    width:min(760px, 94vw);
    border:1px solid rgba(255,190,53,.75);
    border-radius:18px;
    background:
        linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.88)),
        rgba(0,0,0,.82);
    box-shadow:0 0 30px rgba(0,0,0,.75), inset 0 0 30px rgba(255,155,0,.08);
    padding:22px;
}

.withdraw-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    border-bottom:1px solid rgba(255,190,53,.5);
    padding-bottom:16px;
    margin-bottom:16px;
}

.withdraw-head h1{
    margin:4px 0 0;
    color:#ffd500;
    font-size:30px;
    text-transform:uppercase;
    text-shadow:0 0 10px rgba(255,162,0,.45);
}

.withdraw-balance{
    min-width:180px;
    padding:12px 16px;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    text-align:right;
}

.withdraw-balance span,
.withdraw-info-grid span,
.withdraw-field span{
    display:block;
    color:#ddd;
    font-size:13px;
}

.withdraw-balance strong{
    color:#fff200;
    font-size:22px;
}

.withdraw-info-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin:0 0 16px;
}

.withdraw-info-grid div{
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.1);
}

.withdraw-info-grid b{
    color:#fff;
    font-size:15px;
}

.withdraw-field{
    display:block;
    margin:14px 0;
}

.withdraw-field input{
    width:100%;
    height:46px;
    margin-top:7px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.2);
    outline:none;
    padding:0 18px;
    font-size:15px;
    color:#102c38;
    background:rgba(255,255,255,.95);
}

.withdraw-bank-box{
    border-radius:14px;
    background:rgba(15,45,57,.72);
    border:1px solid rgba(255,255,255,.12);
    overflow:hidden;
    margin:14px 0;
}

.bank-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.bank-row:last-child{
    border-bottom:0;
}

.bank-row span{
    color:#d8e8ef;
}

.bank-row b{
    color:#fff;
}

.withdraw-note{
    border-left:4px solid #ffba00;
    background:rgba(255,181,0,.12);
    color:#fff;
    padding:12px 14px;
    border-radius:10px;
    margin:14px 0 18px;
    line-height:1.45;
}

@media(max-width:1024px){
    .detail-game-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

@media(max-width:768px){
    .game-detail-page,
    .withdraw-page{
        padding-bottom:66px;
        background-attachment:scroll;
    }

    .game-detail-main{
        padding-top:4px;
        padding-bottom:80px;
    }

    .game-type-tabs{
        grid-template-columns:repeat(5, minmax(0, 1fr));
        gap:4px;
        overflow-x:auto;
        scrollbar-width:none;
        padding:6px 3px;
    }

    .game-type-tabs::-webkit-scrollbar{
        display:none;
    }

    .game-type-tab{
        min-width:72px;
        height:52px;
        font-size:12px;
        padding:0 8px;
    }

    .detail-game-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:18px 10px;
        padding:14px 8px 18px;
    }

    .detail-play-btn{
        height:27px;
        font-size:12px;
        margin-top:7px;
    }

    .withdraw-main{
        min-height:calc(100vh - 120px);
        padding:22px 10px 30px;
        align-items:flex-start;
    }

    .withdraw-card{
        width:100%;
        padding:16px 14px;
        border-radius:16px;
    }

    .withdraw-head{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .withdraw-head h1{
        font-size:25px;
    }

    .withdraw-balance{
        width:100%;
        text-align:left;
    }

    .withdraw-info-grid{
        grid-template-columns:1fr;
    }

    .bank-row{
        flex-direction:column;
        gap:4px;
    }

    .deposit-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:10px;
    }
}

/* ===== History page ===== */
body.history-page{
    padding-bottom:57px !important;
    min-height:100vh;
    background:url('../custom/images/background.png') center top / cover fixed no-repeat #000 !important;
}

.history-main{
    min-height:calc(100vh - 69px - 57px);
    padding:22px 18px 90px;
}

.history-panel{
    width:min(1100px,100%);
    margin:0 auto;
    border:1px solid rgba(255,210,0,.35);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(18,28,35,.86),rgba(0,0,0,.68));
    box-shadow:0 12px 35px rgba(0,0,0,.55), inset 0 0 35px rgba(255,210,0,.05);
    overflow:hidden;
}

.history-tabs{
    display:flex;
    gap:10px;
    padding:18px 24px 12px;
    background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(255,151,0,.12),rgba(0,0,0,.5));
    border-bottom:1px solid rgba(255,210,0,.22);
}

.history-tab{
    border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(#637d8d,#344b58);
    color:#fff;
    font-weight:800;
    border-radius:6px;
    padding:11px 18px;
    cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px rgba(0,0,0,.35);
    transition:.18s ease;
}

.history-tab:hover,
.history-tab.active{
    background:linear-gradient(#ffb11b,#d87500);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 0 12px rgba(255,145,0,.42);
}

.history-content{display:none;}
.history-content.active{display:block;}

.history-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:16px 24px 8px;
    background:transparent;
    border:0;
}

.history-title-row h2{
    font-size:18px;
    line-height:1;
    margin:0;
    color:#fff;
    text-shadow:1px 1px 0 #000;
}

.history-title-row span{
    font-size:12px;
    color:#ffd64a;
    font-weight:800;
}

.history-table-wrap{
    padding:10px 24px 24px;
    overflow-x:auto;
}

.history-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;
    color:#fff;
    font-size:14px;
    table-layout:fixed;
}

.history-table thead th{
    background:rgba(13,26,39,.95);
    color:#fff;
    text-align:left;
    padding:11px 12px;
    border-top:1px solid rgba(255,255,255,.25);
    border-bottom:1px solid rgba(255,255,255,.25);
    font-weight:800;
}

.history-table thead th:first-child{border-radius:8px 0 0 8px;}
.history-table thead th:last-child{border-radius:0 8px 8px 0;}

.history-table tbody td{
    padding:16px 12px;
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.35);
    vertical-align:top;
}

.history-table tbody td:first-child{
    border-left:1px solid rgba(255,255,255,.12);
    border-radius:10px 0 0 10px;
}

.history-table tbody td:last-child{
    border-right:1px solid rgba(255,255,255,.12);
    border-radius:0 10px 10px 0;
}

.history-table tbody tr:hover td{
    background:rgba(255,145,0,.09);
}

.txn-name{
    color:#ffe600;
    font-weight:900;
    margin-bottom:3px;
}

.txn-name.deposit{color:#4cff6b;}
.txn-name.withdraw{color:#ffb13b;}

.txn-id,
.txn-amount{
    font-weight:700;
    margin-bottom:2px;
}

.txn-date{
    color:#d8d8d8;
    font-size:12px;
}

.status-badge,
.result-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.status-badge i{
    width:10px;
    height:10px;
    border-radius:50%;
    display:block;
}

.status-badge.completed{background:rgba(57,190,57,.14);color:#ecffec;}
.status-badge.completed i{background:#39c739;}
.status-badge.pending{background:rgba(255,173,45,.14);color:#ffe0a8;}
.status-badge.pending i{background:#ffad2d;}
.result-badge.win{background:rgba(43,202,83,.15);color:#53ff7d;}
.result-badge.loss{background:rgba(255,59,59,.15);color:#ff6868;}

@media(min-width:901px){
    .transaction-table th:first-child,
    .transaction-table td:first-child{width:65%;}
}

@media(max-width:900px){
    .history-main{
        min-height:auto;
        padding:10px 8px 78px;
    }

    .history-panel{
        width:100%;
        border-radius:10px;
    }

    .history-tabs{
        padding:14px 14px 10px;
        gap:8px;
    }

    .history-tab{
        flex:1;
        padding:11px 8px;
        font-size:13px;
    }

    .history-title-row{
        padding:14px 14px 4px;
    }

    .history-title-row h2{font-size:14px;}

    .history-title-row span{
        font-size:11px;
        text-align:right;
    }

    .history-table-wrap{padding:8px 14px 16px;}

    .history-table,
    .history-table thead,
    .history-table tbody,
    .history-table tr,
    .history-table th,
    .history-table td{
        display:block;
        width:100%;
    }

    .history-table{border-spacing:0;}
    .history-table thead{display:none;}

    .history-table tbody tr{
        margin:10px 0 12px;
        border:1px solid rgba(255,199,65,.35);
        border-radius:10px;
        overflow:hidden;
        background:linear-gradient(180deg, rgba(17,27,38,.92), rgba(0,0,0,.72));
        box-shadow:0 4px 14px rgba(0,0,0,.35);
    }

    .history-table tbody td,
    .history-table tbody td:first-child,
    .history-table tbody td:last-child{
        border:0;
        border-bottom:1px solid rgba(255,255,255,.1);
        border-radius:0;
        background:transparent;
        padding:10px 12px;
    }

    .history-table tbody td:last-child{border-bottom:0;}

    .bet-table tbody td{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        font-size:13px;
    }

    .bet-table tbody td::before{
        content:attr(data-label);
        color:#ffd64a;
        font-weight:900;
        flex:0 0 auto;
    }

    .transaction-table tbody td[data-label="Status"]{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        padding-top:12px;
        padding-bottom:12px;
    }

    .transaction-table tbody td[data-label="Status"]::before{
        content:none;
        display:none;
    }

    .status-badge,
    .result-badge{
        font-size:11px;
        padding:5px 9px;
    }

    .transaction-table .txn-name{
        font-size:14px;
        margin-bottom:4px;
    }

    .transaction-table .txn-id,
    .transaction-table .txn-amount{
        font-size:13px;
        line-height:1.25;
    }

    .transaction-table .txn-date{
        font-size:11px;
    }
}

/* =========================
   Game Detail Page
========================= */
.game-detail-page,
.withdraw-page{
    min-height:100vh;
    background:
        linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)),
        url('../custom/images/background.png') center center / cover fixed no-repeat;
    color:#fff;
    padding-bottom:70px;
}

.game-detail-main{
    width:100%;
    padding:8px 4px 85px;
}

.game-type-tabs{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:4px;
    padding:4px;
    border-top:1px solid rgba(255,170,0,.45);
    border-bottom:1px solid rgba(255,255,255,.2);
    background:rgba(0,0,0,.55);
    box-shadow:0 0 18px rgba(0,0,0,.7) inset;
}

.game-type-tab{
    height:48px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:5px;
    background:linear-gradient(#050505,#000);
    color:#fff;
    font-weight:900;
    font-size:13px;
    cursor:pointer;
    text-shadow:0 1px 2px #000;
    transition:.18s ease;
}

.game-type-tab.active,
.game-type-tab:hover{
    background:linear-gradient(#ffa10c,#ff8b00);
    color:#fff;
    border-color:#ffbd30;
    box-shadow:0 0 12px rgba(255,151,0,.45);
}

.detail-game-grid{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:20px 10px;
    padding:16px 8px;
}

@media (max-width: 768px) {
    .detail-game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

.detail-game-card{
    min-width:0;
    overflow:visible;
}

.detail-game-img-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:8px;
    overflow:hidden;
    background:rgba(0,0,0,.35);
    box-shadow:0 5px 14px rgba(0,0,0,.45);
}

.detail-game-img-wrap img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.new-ribbon{
    position:absolute;
    top:0;
    left:0;
    padding:5px 8px;
    background:#ed1c24;
    color:#fff;
    font-size:12px;
    font-weight:900;
    transform:rotate(-45deg) translate(-22px,-7px);
    width:72px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.5);
}

.detail-play-btn{
    width:96%;
    height:24px;
    margin:8px auto 0;
    display:block;
    border-radius:999px;
    border:1px solid #a66a22;
    background:linear-gradient(90deg,#040404,#1b1b1b,#040404);
    color:#fff;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    box-shadow:inset 0 0 8px rgba(255,164,36,.2);
}

.detail-play-btn:hover{
    box-shadow:0 0 12px rgba(255,152,0,.5), inset 0 0 10px rgba(255,164,36,.25);
    transform:translateY(-1px);
}

/* ===== Setting Page ===== */
body.setting-page{
    min-height:100vh;
    padding-bottom:57px;
    background:
        linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.34)),
        url('../custom/images/background.png') center center / cover no-repeat fixed #000;
}

.setting-main{
    min-height:calc(100vh - 69px - 57px);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:26px 16px 30px;
}

.setting-shell{
    width:min(470px, 94vw);
    display:flex;
    flex-direction:column;
    gap:22px;
}

.game-glass-card{
    border-radius:18px;
    background:linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
    color:#16313b;
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 18px 42px rgba(0,0,0,.42), inset 0 0 28px rgba(255,255,255,.18);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    overflow:hidden;
}

.profile-card{
    padding:24px 28px 26px;
}

.card-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.card-heading h1{
    font-size:22px;
    line-height:1;
    color:#071a22;
    text-shadow:0 1px rgba(255,255,255,.45);
}

.card-heading p{
    margin-top:5px;
    font-size:12px;
    color:#345b67;
}

.profile-badge{
    padding:7px 12px;
    border-radius:999px;
    background:linear-gradient(180deg,#ffdc59,#b46b00);
    color:#2b1200;
    font-weight:900;
    font-size:12px;
    box-shadow:0 0 12px rgba(255,207,54,.5);
}

.profile-list{
    margin-top:4px;
}

.profile-row{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(20,61,74,.56);
    font-size:14px;
}

.profile-row:last-child{
    border-bottom:0;
}

.profile-row span{
    color:#16313b;
}

.profile-row strong{
    color:#183743;
    font-weight:600;
    text-align:right;
    word-break:break-word;
}

.setting-card{
    padding:0;
}

.setting-toggle{
    width:100%;
    min-height:78px;
    border:0;
    background:transparent;
    color:#16313b;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 28px;
    font-size:20px;
    font-weight:900;
    cursor:pointer;
}

.setting-toggle i{
    font-style:normal;
    font-size:18px;
    transition:.22s;
}

.setting-card.open .setting-toggle i{
    transform:rotate(180deg);
}

.setting-menu{
    display:none;
    padding:0 28px 24px;
}

.setting-card.open .setting-menu{
    display:block;
    animation:settingDrop .24s ease-out;
}

@keyframes settingDrop{
    from{opacity:0; transform:translateY(-8px)}
    to{opacity:1; transform:translateY(0)}
}

.setting-item{
    width:100%;
    min-height:43px;
    border:0;
    border-bottom:1px solid rgba(20,61,74,.6);
    background:transparent;
    color:#183743;
    display:grid;
    grid-template-columns:30px 1fr 20px;
    align-items:center;
    gap:8px;
    text-decoration:none;
    font-size:14px;
    text-align:left;
    cursor:pointer;
}

.setting-item:hover{
    color:#7a3200;
    transform:translateX(2px);
}

.setting-ico{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(0,0,0,.08);
    font-size:14px;
}

.setting-item em{
    font-style:normal;
    font-size:22px;
    justify-self:end;
    opacity:.65;
}

.setting-item.logout span:nth-child(2){
    color:#b81717;
    font-weight:800;
}

@media(max-width:900px){
    body.setting-page{
        background:
            linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.28)),
            url('../custom/images/background.png') center center / cover no-repeat fixed #000;
        overflow-x:hidden;
    }

    .setting-main{
        min-height:calc(100vh - 74px - 57px);
        align-items:flex-start;
        padding:20px 14px 24px;
    }

    .setting-shell{
        width:100%;
        max-width:420px;
        gap:20px;
    }

    .profile-card{
        padding:22px 20px 20px;
        border-radius:17px;
    }

    .card-heading h1{
        font-size:21px;
    }

    .profile-row{
        grid-template-columns:1fr;
        gap:5px;
        padding:10px 0;
        font-size:14px;
    }

    .profile-row strong{
        text-align:left;
        font-size:14px;
    }

    .setting-toggle{
        min-height:66px;
        padding:0 20px;
        font-size:20px;
    }

    .setting-menu{
        padding:0 20px 20px;
    }

    .setting-item{
        min-height:44px;
        font-size:14px;
    }
}

@media(max-width:380px){
    .setting-main{
        padding:16px 10px 22px;
    }

    .profile-card{
        padding:20px 18px;
    }
}


/* ===== Setting Form Pages: Mobile Number + Password ===== */
body.setting-form-page{
    padding-bottom:57px;
    overflow-x:hidden;
}

.setting-form-main{
    min-height:calc(100vh - 69px - 57px);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:28px 16px 34px;
}

.setting-form-card{
    width:min(760px, 94vw);
    padding:24px 28px 30px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
}

.setting-form-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(20,61,74,.42);
}

.setting-form-head h1{
    color:#071a22;
    font-size:24px;
    line-height:1.1;
    text-shadow:0 1px rgba(255,255,255,.55);
}

.setting-form-head p{
    margin-top:5px;
    color:#345b67;
    font-size:13px;
}

.back-link{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#201000;
    font-size:34px;
    font-weight:900;
    line-height:1;
    background:linear-gradient(180deg,#ffe083,#b77410);
    box-shadow:0 0 14px rgba(255,200,52,.45), inset 0 1px rgba(255,255,255,.6);
}

.theme-form{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.form-label{
    color:#082936;
    font-weight:800;
    font-size:14px;
    margin-bottom:-6px;
}

.theme-input-wrap{
    min-height:50px;
    display:grid;
    grid-template-columns:42px 1fr;
    align-items:center;
    border:1px solid rgba(10,44,57,.6);
    border-radius:999px;
    background:linear-gradient(180deg,#fff,#e9edf0);
    box-shadow:inset 0 2px 5px rgba(0,0,0,.11), 0 8px 18px rgba(0,0,0,.12);
    overflow:hidden;
}

.input-ico{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#173744;
    font-size:17px;
}

.theme-input-wrap input,
.verify-row input{
    width:100%;
    min-width:0;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#173744;
    font-size:15px;
    padding:0 16px 0 0;
}

.theme-input-wrap input::placeholder,
.verify-row input::placeholder{
    color:#777;
}

.password-wrap{
    grid-template-columns:42px 1fr 46px;
}

.eye-btn{
    height:100%;
    border:0;
    background:transparent;
    color:#173744;
    cursor:pointer;
    font-size:17px;
    opacity:.85;
}

.eye-btn.showing{
    color:#b77410;
}

.verification-panel{
    margin-top:6px;
    padding:16px;
    border-radius:12px;
    background:linear-gradient(135deg, rgba(9,47,63,.92), rgba(44,73,84,.9));
    color:#fff;
    box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 0 18px rgba(255,255,255,.05);
}

.verification-panel p{
    font-size:13px;
    margin-bottom:12px;
    line-height:1.35;
}

.verify-row{
    display:grid;
    grid-template-columns:1fr 130px;
    gap:10px;
}

.verify-row input{
    height:46px;
    border-radius:7px;
    background:#f4f5f7;
    padding:0 16px;
}

.verify-row button{
    border:0;
    border-radius:7px;
    color:#fff;
    font-weight:900;
    font-size:14px;
    background:linear-gradient(180deg,#ffd32c,#d39400);
    box-shadow:inset 0 1px rgba(255,255,255,.45), 0 6px 14px rgba(0,0,0,.24);
    cursor:pointer;
}

.gold-ring-btn,
.green-submit-btn{
    width:100%;
    height:48px;
    border:0;
    border-radius:999px;
    color:#fff;
    font-weight:900;
    font-size:15px;
    cursor:pointer;
    text-shadow:0 1px 2px rgba(0,0,0,.8);
}

.gold-ring-btn{
    margin-top:4px;
    background:radial-gradient(ellipse at center, rgba(255,202,102,.45) 0%, rgba(42,25,8,.1) 48%, transparent 58%), linear-gradient(180deg,#1c1c1c,#050505);
    /* border:2px solid #c48a38; */
    /* box-shadow:0 0 13px rgba(252,178,71,.75), inset 0 0 14px rgba(0,0,0,.88); */
}

.green-submit-btn{
    margin-top:8px;
    border-radius:8px;
    background:linear-gradient(180deg,#20c20d,#118900);
    box-shadow:0 10px 20px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.35);
}

@media(max-width:900px){
    .setting-form-main{
        min-height:calc(100vh - 74px - 57px);
        padding:18px 12px 22px;
    }

    .setting-form-card{
        width:100%;
        max-width:430px;
        padding:20px 18px 22px;
        border-radius:18px;
    }

    .setting-form-head{
        margin-bottom:18px;
        padding-bottom:14px;
    }

    .setting-form-head h1{
        font-size:21px;
    }

    .setting-form-head p{
        font-size:12px;
    }

    .back-link{
        width:38px;
        height:38px;
        font-size:31px;
        flex:0 0 38px;
    }

    .theme-input-wrap{
        min-height:45px;
        border-radius:9px;
    }

    .password-wrap{
        grid-template-columns:39px 1fr 42px;
    }

    .verify-row{
        grid-template-columns:1fr 120px;
        gap:8px;
    }

    .verify-row input,
    .verify-row button{
        height:43px;
    }

    .gold-ring-btn,
    .green-submit-btn{
        height:45px;
    }
}

@media(max-width:380px){
    .setting-form-main{
        padding:16px 8px 18px;
    }

    .setting-form-card{
        padding:18px 10px 20px;
    }

    .verify-row{
        grid-template-columns:1fr 112px;
    }

    .verify-row button{
        font-size:13px;
    }
}

body.login-page #registerForm .verify-row{
    display:flex !important;
    grid-template-columns:none !important;
    gap:0 !important;
    width:100% !important;
    height:50px !important;
    margin:14px 0 14px !important;
    border-radius:28px !important;
    overflow:hidden !important;
    /* border:1px solid rgba(34,64,80,.8) !important; */
    background:#e7e7ea !important;
    box-shadow:none !important;
}
body.login-page #registerForm .verify-row input{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    height:100% !important;
    border:0 !important;
    border-radius:0 !important;
    background:#e7e7ea !important;
    padding:0 0 0 18px !important;
    color:#173744 !important;
    font-size:14px !important;
    outline:none !important;
}
body.login-page #registerForm .verify-row input::placeholder{
    color:#777 !important;
}
body.login-page #registerForm .verify-row .verify-btn,
body.login-page #registerForm .verify-row button{
    flex:0 0 132px !important;
    width:132px !important;
    height:100% !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(to right,#0f2027,#203a43,#2c5364) !important;
    box-shadow:none !important;
    color:#fff !important;
    font-weight:900 !important;
    font-size:14px !important;
    cursor:pointer;
}
@media(max-width:480px){
    body.login-page #registerForm .verify-row{height:48px !important;}
    body.login-page #registerForm .verify-row .verify-btn,
    body.login-page #registerForm .verify-row button{
        flex-basis:112px !important;
        width:112px !important;
        font-size:12px !important;
    }
    body.login-page #registerForm .verify-row input{font-size:13px !important;padding-left:14px !important;}
}

.member-name{color:#fff;font-weight:900;letter-spacing:.2px;}
.commission-amount{color:#ffe600;font-weight:900;}
.downline-table tbody tr:not(.empty-row):hover td{
    background:rgba(255,210,0,.08);
}
@media(max-width:900px){
    .downline-table tr:not(.empty-row) td{
        display:grid !important;
        grid-template-columns:120px 1fr;
        gap:10px;
        align-items:center;
        padding:10px 12px !important;
        border-bottom:1px solid rgba(255,255,255,.08) !important;
    }
    .downline-table tr:not(.empty-row) td::before{
        content:attr(data-label);
        color:#ffd200;
        font-weight:900;
        font-size:12px;
    }
    .downline-table tr:not(.empty-row) td:last-child{border-bottom:0 !important;}
}

/* ===== Live Chat Page ===== */
.chat-page{
    overflow:hidden;
}

.chat-main{
    height:calc(100vh - 69px - 57px);
    /* padding:12px 18px 10px; */
    background:rgba(0,0,0,.08);
}

.chat-shell{
    height:100%;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(255,196,58,.35);
    /* border-radius:14px; */
    overflow:hidden;
    background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12));
    box-shadow:0 0 22px rgba(0,0,0,.45), inset 0 0 18px rgba(255,173,34,.08);
    backdrop-filter:blur(1px);
}

.chat-top-card{
    min-height:62px;
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:linear-gradient(90deg, rgba(16,35,47,.95), rgba(5,7,8,.78));
    border-bottom:1px solid rgba(255,196,58,.35);
}

.chat-title-box{
    display:flex;
    align-items:center;
    gap:12px;
}

.chat-flame{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,157,0,.34), rgba(0,0,0,.35));
    filter:drop-shadow(0 0 8px rgba(255,122,0,.8));
    animation:nagaIconBounce 2.2s ease-in-out infinite;
}

.chat-title-box h1{
    font-size:20px;
    line-height:1;
    color:#ffd64a;
    text-shadow:2px 2px 0 #000;
}

.chat-title-box p{
    margin-top:4px;
    font-size:12px;
    color:#d7f6ff;
    opacity:.9;
}

.chat-status-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(16,64,46,.75);
    color:#b8ff93;
    border:1px solid rgba(138,255,98,.3);
    font-size:12px;
    font-weight:900;
}

.chat-status-pill i{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#5cff31;
    box-shadow:0 0 8px #5cff31;
}

.chat-messages{
    flex:1;
    overflow-y:auto;
    padding:20px 18px 18px;
    position:relative;
    scrollbar-width:thin;
    scrollbar-color:#ffad22 rgba(0,0,0,.25);
}

.chat-date,
.chat-time{
    width:max-content;
    margin:8px auto 18px;
    padding:5px 12px;
    border-radius:999px;
    background:rgba(0,0,0,.42);
    border:1px solid rgba(255,255,255,.16);
    font-size:12px;
    font-weight:900;
    color:#fff;
    text-shadow:1px 1px #000;
}

.chat-time{
    margin:18px auto;
    background:transparent;
    border:0;
}

.chat-bubble{
    width:max-content;
    max-width:min(720px, 75%);
    margin:10px 0;
    padding:12px 16px;
    border-radius:16px;
    line-height:1.45;
    font-size:14px;
    font-weight:700;
    color:#fff;
    position:relative;
    box-shadow:0 4px 12px rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.16);
    word-break:break-word;
}

.chat-bubble p + p{
    margin-top:6px;
}

.chat-bubble.system,
.chat-bubble.admin{
    margin-right:auto;
    background:linear-gradient(180deg, rgba(78,74,67,.95), rgba(51,48,44,.95));
    border-color:rgba(255,255,255,.12);
}

.chat-bubble.notice{
    max-width:min(760px, 78%);
}

.chat-bubble.user{
    margin-left:auto;
    background:linear-gradient(180deg, rgba(171,121,70,.96), rgba(120,76,38,.96));
    border-color:rgba(255,215,103,.35);
}

.chat-bubble.medium{
    max-width:460px;
}

.bubble-name{
    color:#9ce860;
    font-size:12px;
    font-weight:900;
    margin-bottom:4px;
}

.chat-bubble.user .bubble-name{
    color:#ffe600;
}

.green{color:#00ff4c;}
.yellow{color:#fff200;}
.red{color:#ff241b;}

.warning-box{
    display:inline-block;
    margin-top:10px;
    background:linear-gradient(90deg,#ff8a00,#ff4b13);
    color:#000;
    padding:6px 8px;
    border-radius:4px;
    font-weight:900;
}

.chat-compose{
    min-height:58px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    background:linear-gradient(90deg, rgba(20,77,92,.95), rgba(4,19,24,.95));
    border-top:1px solid rgba(255,255,255,.2);
}

.chat-input-wrap{
    flex:1;
    min-width:0;
    min-height:40px;
    display:flex;
    align-items:center;
    gap:6px;
    border-radius:22px;
    padding:0 10px;
    background:rgba(255,255,255,.95);
    color:#12303b;
    box-shadow:inset 0 1px 4px rgba(0,0,0,.35);
}

.chat-input-wrap.has-files{
    min-height:46px;
}

.chat-compose textarea{
    flex:1;
    min-width:90px;
    min-height:40px;
    max-height:96px;
    border:0;
    outline:0;
    border-radius:18px;
    padding:10px 6px 8px;
    font-size:14px;
    line-height:20px;
    background:transparent;
    color:#12303b;
    resize:none;
    overflow-y:auto;
    font-family:inherit;
}

.chat-paste-preview{
    display:none;
    align-items:center;
    gap:6px;
    max-width:55%;
    overflow-x:auto;
    scrollbar-width:none;
}

.chat-paste-preview::-webkit-scrollbar{
    display:none;
}

.chat-paste-preview.has-files{
    display:flex;
}

.chat-paste-chip{
    height:32px;
    max-width:150px;
    display:flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    padding:3px 5px;
    border-radius:16px;
    background:rgba(0,0,0,.1);
    border:1px solid rgba(0,0,0,.12);
}

.chat-paste-chip img{
    width:26px;
    height:26px;
    border-radius:50%;
    object-fit:cover;
    flex:0 0 auto;
}

.chat-paste-file-icon{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    font-size:14px;
}

.chat-paste-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    font-weight:700;
}

.chat-paste-remove{
    width:18px !important;
    height:18px !important;
    min-width:18px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.35) !important;
    color:#fff;
    font-size:15px !important;
    line-height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex:0 0 auto;
}

.chat-compose button{
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:22px;
    background:rgba(255,255,255,.08);
    transition:.15s;
}

.chat-send{
    color:#49d45b;
    text-shadow:0 0 8px rgba(73,212,91,.65);
}

.chat-attach{
    color:#19c8ff;
}


.chat-file-input{
    display:none !important;
}

.chat-text-message{
    white-space:pre-wrap;
    word-break:break-word;
}

.chat-attachments{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:8px;
}

.chat-attachment{
    color:#fff;
    text-decoration:none;
    border-radius:12px;
    overflow:hidden;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.18);
}

.chat-attachment.image{
    display:block;
    max-width:260px;
}

.chat-attachment.image img{
    display:block;
    width:100%;
    max-height:220px;
    object-fit:cover;
    background:rgba(0,0,0,.25);
}

.chat-attachment.image span{
    display:block;
    padding:7px 9px;
    font-size:12px;
    word-break:break-all;
}

.chat-attachment.file{
    min-width:220px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
}

.file-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:rgba(255,255,255,.12);
    flex:0 0 auto;
}

.file-info{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.file-info b{
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}

.file-info small{
    color:rgba(255,255,255,.75);
    font-size:11px;
}

.chat-compose button:hover{
    transform:scale(1.08);
    filter:brightness(1.2);
}

.bottom-nav a.active img{
    filter:drop-shadow(0 0 5px #ffce32) drop-shadow(0 0 8px #ff7b00);
}

@media(max-width:900px){
    .chat-page{
        overflow:hidden;
        background-attachment:scroll;
    }

    .chat-main{
        height:calc(100vh - 74px - 40px);
        padding:0;
    }

    .chat-shell{
        border-radius:0;
        border-left:0;
        border-right:0;
        border-bottom:0;
        background:rgba(255,255,255,.16);
        box-shadow:none;
    }

    .chat-top-card{
        min-height:54px;
        padding:8px 12px;
        background:linear-gradient(90deg, rgba(16,38,47,.92), rgba(0,0,0,.45));
    }

    .chat-flame{
        width:34px;
        height:34px;
        font-size:18px;
    }

    .chat-title-box h1{
        font-size:16px;
    }

    .chat-title-box p{
        font-size:11px;
    }

    .chat-status-pill{
        padding:6px 9px;
        font-size:11px;
    }

    .chat-messages{
        padding:12px 8px 12px;
    }

    .chat-bubble{
        max-width:82%;
        padding:10px 12px;
        border-radius:14px;
        font-size:13px;
    }

    .chat-bubble.notice{
        max-width:81%;
    }

    .chat-bubble.wide{
        max-width:86%;
    }

    .warning-box{
        display:block;
        font-size:12px;
        line-height:1.35;
    }

    .chat-date,
    .chat-time{
        font-size:12px;
        margin:10px auto 14px;
    }

    .chat-compose{
        min-height:56px;
        padding:7px 8px;
        gap:5px;
    }

    .chat-input-wrap{
        min-height:39px;
        padding:0 8px;
    }

    .chat-compose textarea{
        min-height:39px;
        padding:9px 5px 7px;
    }

    .chat-paste-preview{
        max-width:52%;
    }

    .chat-compose button{
        width:35px;
        height:35px;
        font-size:20px;
    }
}

@media(max-width:520px){
    .chat-paste-preview{max-width:48%;}
    .chat-paste-chip{max-width:115px;}
    .chat-paste-name{max-width:58px;}
    .chat-attachment.image{max-width:210px;}
    .chat-attachment.file{min-width:190px;}
    .file-info b{max-width:150px;}
}

@media(max-width:420px){
    .chat-top-card{
        gap:8px;
    }

    .chat-status-pill{
        display:none;
    }

    .chat-bubble{
        max-width:84%;
    }

    .chat-bubble.notice{
        max-width:82%;
    }

    .chat-bubble.medium{
        max-width:82%;
    }
}

.bonus-loading,
.bonus-empty{
    color:#fff;
    text-align:center;
    padding:32px 12px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
    text-shadow:0 1px 2px rgba(0,0,0,.8);
}

.bonus-retry-btn{
    margin-top:12px;
    padding:8px 18px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.3);
    background:rgba(0,0,0,.45);
    color:#fff;
    cursor:pointer;
}

.auth-message{font-size:12px;text-align:center;margin:8px 0 0;color:#123847}.auth-message.error{color:#b00020}.auth-message.success{color:#087a2f}


/* ===== Member login welcome card ===== */
.member-welcome-card{
    width:100%;
    border:1px solid rgba(255, 172, 45, .35);
    border-radius:14px;
    padding:12px;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,176,39,.18), transparent 38%),
        linear-gradient(135deg, rgba(34,12,5,.92), rgba(8,8,8,.88));
    box-shadow:0 0 14px rgba(255,136,0,.12), inset 0 0 0 1px rgba(255,255,255,.05);
}

.member-welcome-top{
    display:flex;
    align-items:center;
    gap:11px;
}

.member-welcome-avatar{
    width:44px;
    height:44px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    color:#fff3cf;
    font-size:22px;
    font-weight:900;
    font-family:Georgia, serif;
    background:linear-gradient(145deg, #ff9d00, #8b2608 55%, #240600);
    border:1px solid rgba(255,205,92,.7);
    box-shadow:0 0 12px rgba(255,123,0,.35);
}

.member-welcome-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.18;
}

.member-welcome-label{
    color:#ffb33c;
    font-size:13px;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.member-welcome-name{
    color:#fff;
    font-size:20px;
    font-weight:900;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 1px 6px rgba(0,0,0,.7);
}

.member-welcome-sub{
    color:#d9d9d9;
    font-size:12px;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.member-welcome-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:12px;
}

.member-welcome-actions a,
.member-welcome-actions button{
    height:34px;
    border-radius:10px;
    border:1px solid rgba(255,160,44,.45);
    background:linear-gradient(#631908, #180402);
    color:#ffb23c;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:13px;
    font-family:Arial, sans-serif;
    cursor:pointer;
}

.member-welcome-actions a:hover,
.member-welcome-actions button:hover{
    filter:brightness(1.15);
}

@media (max-width: 900px){
    .member-welcome-card{
        max-width:360px;
        margin:0 auto;
    }
}

/* Firebase live chat states */
.chat-bubble a{word-break:break-word}.chat-bubble.system a{text-decoration:none}.chat-attachment.image img{background:#111}.chat-attachment.file small{display:block;opacity:.7;font-size:11px}.chat-bubble.admin .chat-attachment.file{background:rgba(255,255,255,.12)}.chat-bubble.user .chat-attachment.file{background:rgba(0,0,0,.14)}

/* ===== Floating live chat widget for every Naga page ===== */
.livechat-widget{position:fixed;right:16px;bottom:86px;z-index:9999;font-family:Arial,sans-serif}
.livechat-float-btn{height:52px;border:0;border-radius:999px;padding:0 16px;background:linear-gradient(135deg,#ff9d00,#7a1b05);color:#fff;display:flex;align-items:center;gap:8px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.2);cursor:pointer}
.livechat-float-icon{font-size:22px}.livechat-float-text{font-size:14px;text-transform:uppercase;letter-spacing:.3px}.livechat-float-btn b{position:absolute;right:-5px;top:-6px;min-width:22px;height:22px;border-radius:999px;background:#ef4444;color:#fff;align-items:center;justify-content:center;font-size:12px;border:2px solid #fff}
.livechat-mini-panel{position:absolute;right:0;bottom:64px;width:min(360px,calc(100vw - 28px));height:480px;background:#141414;border:1px solid rgba(255,170,45,.45);border-radius:18px;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.65);display:none;flex-direction:column}
.livechat-mini-panel.show{display:flex}.mini-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:linear-gradient(135deg,#311004,#090909);color:#fff;border-bottom:1px solid rgba(255,170,45,.35)}.mini-head b{display:block;color:#ffb43c}.mini-head small{display:block;color:#d7d7d7;font-size:12px}.mini-head button{border:0;background:rgba(255,255,255,.1);color:#fff;width:30px;height:30px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
.mini-messages{flex:1;overflow:auto;padding:12px;background:radial-gradient(circle at top,#252525,#090909)}.mini-system{color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;font-size:13px}.mini-msg{display:flex;margin:8px 0}.mini-msg.me{justify-content:flex-end}.mini-bubble{max-width:82%;padding:9px 11px;border-radius:14px;background:#2b2b2b;color:#fff;font-size:13px;line-height:1.35;word-break:break-word}.mini-msg.me .mini-bubble{background:#078f00}.mini-files{display:grid;gap:6px;margin-top:6px}.mini-files a{color:#fff;text-decoration:none;font-size:12px}.mini-files img{max-width:140px;max-height:100px;object-fit:cover;border-radius:10px;display:block;margin-bottom:3px}
.mini-compose{display:grid;grid-template-columns:1fr 38px 42px;gap:6px;padding:10px;background:#101010;border-top:1px solid rgba(255,255,255,.1)}.mini-compose textarea{grid-column:1/2;border:1px solid rgba(255,255,255,.18);background:#fff;color:#111;border-radius:12px;padding:9px 10px;resize:none;min-height:38px;max-height:80px}.mini-compose button{border:0;border-radius:12px;font-weight:900;cursor:pointer}.mini-compose button[type="button"]{background:#2d2d2d;color:#fff}.mini-compose button[type="submit"]{background:#09a000;color:#fff}.mini-preview{grid-column:1/4;display:none;gap:6px;flex-wrap:wrap}.mini-preview.show{display:flex}.mini-preview span{background:#fff3cd;color:#5a3500;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:800}.mini-preview button{margin-left:5px;background:transparent!important;color:#5a3500!important}
@media(max-width:600px){.livechat-widget{right:12px;bottom:76px}.livechat-float-text{display:none}.livechat-float-btn{width:54px;justify-content:center;padding:0}.livechat-mini-panel{height:430px}}

/* Provider launch state - small additive style only, does not change current layout */
.play-btn.is-launching,
.detail-play-btn.is-launching{
  opacity:.72;
  cursor:wait;
}


.provider-launch-card,
.provider-launch-img,
.provider-launch-btn{
  cursor:pointer;
}
.provider-launch-card.is-launching,
.provider-launch-img.is-launching,
.provider-launch-btn.is-launching{
  opacity:.75;
  pointer-events:none;
}

/* Provider launch transfer popup */
.provider-transfer-modal.hidden{display:none!important;}
.provider-transfer-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:18px;}
.provider-transfer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);}
.provider-transfer-panel{position:relative;width:min(420px,100%);background:#101733;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px;box-shadow:0 24px 80px rgba(0,0,0,.45);color:#fff;}
.provider-transfer-close{position:absolute;right:14px;top:10px;border:0;background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer;opacity:.75;}
.provider-transfer-title{font-size:20px;font-weight:800;margin:2px 36px 6px 0;}
.provider-transfer-subtitle{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:16px;line-height:1.4;}
.provider-transfer-game{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.provider-transfer-game>div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;min-width:0;}
.provider-transfer-game span{display:block;font-size:11px;color:rgba(255,255,255,.58);margin-bottom:4px;}
.provider-transfer-game strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.provider-transfer-balance{background:linear-gradient(135deg,rgba(255,193,7,.18),rgba(255,255,255,.06));border:1px solid rgba(255,193,7,.24);padding:12px;border-radius:12px;margin-bottom:14px;font-size:14px;}
.provider-transfer-label{display:block;font-size:13px;font-weight:700;margin:0 0 8px;}
.provider-transfer-input-row{display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:0 12px;margin-bottom:12px;color:#111;}
.provider-transfer-input-row span{font-weight:800;color:#333;}
.provider-transfer-input-row input{height:46px;flex:1;border:0;outline:0;font-size:18px;font-weight:800;background:transparent;min-width:0;}
.provider-transfer-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;}
.provider-transfer-quick button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;height:36px;font-weight:800;cursor:pointer;}
.provider-transfer-note{font-size:12px;color:rgba(255,255,255,.66);line-height:1.4;margin-bottom:10px;}
.provider-transfer-error{min-height:18px;color:#ff7777;font-size:13px;font-weight:700;margin-bottom:8px;}
.provider-transfer-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;}
.provider-transfer-actions button{height:44px;border:0;border-radius:12px;font-weight:900;cursor:pointer;}
.provider-transfer-cancel{background:rgba(255,255,255,.1);color:#fff;}
.provider-transfer-confirm{background:linear-gradient(135deg,#ffcc33,#ff8a00);color:#17120a;}
.provider-transfer-confirm:disabled{opacity:.68;cursor:not-allowed;}
@media(max-width:480px){.provider-transfer-panel{padding:18px;border-radius:16px}.provider-transfer-game{grid-template-columns:1fr}.provider-transfer-quick{grid-template-columns:repeat(3,1fr)}}

/* Dynamic promotion bonus cards */
.promo-dynamic-section{margin-top:18px}.promo-card{position:relative;display:block;text-decoration:none;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#1b1f55,#111827);border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 28px rgba(0,0,0,.24);min-height:150px;color:#fff;padding:18px}.promo-card h3{margin:0 0 8px;font-size:18px;color:#fff}.promo-card p{margin:0;color:rgba(255,255,255,.78);font-size:13px;line-height:1.4}.promo-card .promo-amount{margin-top:14px;font-weight:900;font-size:22px;color:#ffe68a}.promo-card .promo-condition{position:absolute;right:12px;top:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}.promo-claim-btn{width:100%;margin-top:16px;border:0;border-radius:14px;padding:12px 14px;background:#ffcb3d;color:#351b00;font-weight:900}.promo-base-input{width:100%;margin-top:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;border-radius:12px;padding:10px}.promo-base-input::placeholder{color:rgba(255,255,255,.65)}.promo-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:10px 14px;border-radius:999px;z-index:9999;font-size:13px;max-width:92%;text-align:center}.promo-toast[hidden]{display:none}
.promo-rule-text{margin-top:10px;color:#ffe68a;font-size:12px;font-weight:800;line-height:1.35}

/* Dynamic promotion admin textarea detail popup */
.promo-btn-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.promo-detail-btn,.promo-claim-btn{flex:1;min-width:110px;border:0;border-radius:8px;padding:9px 12px;font-weight:800;cursor:pointer}
.promo-detail-btn{background:#222;color:#ffd35a;border:1px solid rgba(255,211,90,.55)}
.promo-detail-admin-content{color:#fff;font-size:14px;line-height:1.55}
.promo-detail-admin-content h1,.promo-detail-admin-content h2,.promo-detail-admin-content h3{color:#ffd35a;margin:0 0 10px;font-weight:900}
.promo-detail-admin-content p{margin:7px 0}
.promo-detail-admin-content table{width:100%;border-collapse:collapse;margin:10px 0}
.promo-detail-admin-content td,.promo-detail-admin-content th{border:1px solid rgba(255,255,255,.25);padding:9px;background:rgba(255,255,255,.12)}
.promo-detail-admin-content hr{border:0;border-top:1px solid rgba(255,255,255,.8);margin:14px 0}
.promo-detail-actions{text-align:center;margin-top:18px}

/* Promotion category grouping from BO category title */
.promo-category-wrapper{display:block;width:100%}
.bonus-text-title{font-family:Georgia,serif;color:#fff3e3;text-transform:uppercase;letter-spacing:.5px;font-size:30px;margin:0 0 15px;text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 8px rgba(255,120,60,.6);position:relative;display:inline-block;padding-bottom:8px}
.bonus-text-title:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:linear-gradient(90deg,#ffe7cf,#f08d68,transparent);box-shadow:0 0 5px #fff}
.promo-image-card{padding:0;min-height:0;background:none;border:0;box-shadow:none;border-radius:9px;overflow:hidden;position:relative;cursor:pointer}
.promo-image-card>img{display:block;width:100%;height:auto;border-radius:9px;border:4px solid #048df4;box-shadow:0 4px 0 #050505,0 10px 18px rgba(0,0,0,.4);background:#111}
.promo-card-overlay{position:absolute;inset:0;padding:10px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.78));opacity:0;transition:.18s ease;color:#fff}
.promo-image-card:hover .promo-card-overlay{opacity:1}
.promo-card-overlay h3{font-size:16px;margin:0 0 4px;color:#fff}.promo-card-overlay p{font-size:12px;margin:0;color:rgba(255,255,255,.82)}
@media(max-width:700px){.promo-card-overlay{position:relative;opacity:1;background:#080808;border:1px solid rgba(255,255,255,.12);border-top:0;border-radius:0 0 9px 9px}.promo-image-card>img{border-radius:9px 9px 0 0}.bonus-text-title{font-size:23px}}

/* Promotion image-only cards: click image to open detail modal */
.promo-image-card.promo-card{
  padding:0;
  min-height:0;
  background:transparent;
  border:0;
  box-shadow:none;
  cursor:pointer;
}
.promo-image-card.promo-card img{
  display:block;
  width:100%;
  height:auto;
}
.promo-image-card.promo-card:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
.promo-image-card .promo-card-overlay,
.promo-image-card .promo-btn-row,
.promo-image-card .promo-detail-btn,
.promo-image-card .promo-claim-btn,
.promo-image-card .promo-base-input{
  display:none!important;
}
.promo-modal-claim-line{
  border-top:2px solid #ffd400;
  margin:18px 0 14px;
}
.promo-modal-base-input{
  width:100%;
  max-width:260px;
  display:block;
  margin:0 auto 12px;
  border:1px solid #ffd400;
  background:#080808;
  color:#fff;
  border-radius:8px;
  padding:10px 12px;
  text-align:center;
  font-weight:700;
}
.promo-modal-base-input::placeholder{color:rgba(255,255,255,.65)}
.promo-detail-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
.promo-modal-claim-btn{
  min-width:160px;
  border:0;
  border-radius:8px;
  padding:11px 18px;
  background:#ffcf26;
  color:#351b00;
  font-weight:900;
  cursor:pointer;
}
.promo-modal-claim-btn:disabled{opacity:.7;cursor:not-allowed}

/* Promotion detail modal buttons: same size and centered */
.promo-detail-actions .promo-modal-claim-btn,
.promo-detail-actions .bonus-close-btn{
  width:160px;
  min-width:160px;
  height:48px;
  margin:0;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 160px;
  border-radius:8px;
  font-weight:900;
  box-sizing:border-box;
}

.promo-detail-actions .bonus-close-btn{
  font-size:14px;
}

@media(max-width:520px){
  .promo-detail-actions .promo-modal-claim-btn,
  .promo-detail-actions .bonus-close-btn{
    width:150px;
    min-width:150px;
    flex-basis:150px;
  }
}

/* Deposit payment proof upload */
.deposit-proof-field{padding-top:8px;}
.payment-proof-upload{
  display:block;
  border:1px dashed rgba(255,210,0,.65);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(13,34,42,.92), rgba(5,10,12,.9));
  padding:18px;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.payment-proof-upload:hover,.payment-proof-upload.is-dragover{
  border-color:#ffd200;
  box-shadow:0 0 18px rgba(255,210,0,.22);
  transform:translateY(-1px);
}
.payment-proof-upload input[type="file"]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.payment-proof-empty{
  min-height:118px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  color:#fff;
}
.payment-proof-empty i{
  font-size:34px;
  color:#ffd200;
  filter:drop-shadow(0 0 8px rgba(255,210,0,.35));
}
.payment-proof-empty b{font-size:17px;color:#fff;}
.payment-proof-empty em{font-style:normal;font-size:13px;color:#b9c8cf;font-weight:600;}
.payment-proof-preview{
  display:flex;
  gap:14px;
  align-items:center;
  color:#fff;
}
.payment-proof-preview[hidden]{display:none!important;}
.payment-proof-preview img{
  width:92px;
  height:92px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,210,0,.75);
  background:#050505;
}
.payment-proof-preview div{display:grid;gap:7px;min-width:0;}
.payment-proof-preview b{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#ffd200;
}
.payment-proof-preview em{font-style:normal;color:#c9d6dc;font-size:13px;font-weight:600;}
.payment-proof-remove{
  width:max-content;
  border:1px solid #ff4545;
  background:rgba(255,0,0,.06);
  color:#fff;
  border-radius:10px;
  padding:8px 14px;
  font-weight:900;
  cursor:pointer;
}
.payment-proof-remove:hover{background:rgba(255,0,0,.18);}
@media(max-width:640px){
  .payment-proof-upload{padding:14px;}
  .payment-proof-preview img{width:74px;height:74px;}
  .payment-proof-empty{min-height:100px;}
}

/* Payment method config display */
.payment-config-box{border-left:4px solid #ffd400;background:rgba(255,212,0,.08)}
.payment-config-list{margin-top:10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;background:rgba(10,30,36,.72)}
.payment-config-list div{display:flex;justify-content:space-between;gap:15px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12);color:#fff}
.payment-config-list div:last-child{border-bottom:0}
.payment-config-list b{color:#dff8ff;font-weight:800}.payment-config-list span{text-align:right;font-weight:900;color:#fff}
.payment-config-qr{margin-top:12px;text-align:center}.payment-config-qr img{max-width:180px;max-height:180px;border:2px solid #ffd400;border-radius:14px;background:#fff;padding:8px}

/* transaction failed/rejected status */
.status-badge.failed,
.status-badge.rejected{
  background:rgba(255,75,75,.14);
  color:#ffd6d6;
}
.status-badge.failed i,
.status-badge.rejected i{
  background:#ff4b4b;
}


/* Active bonus progress on index right panel */
.bonus-progress-widget{
    margin-top:16px;
    padding:12px 12px 13px;
    border:1px solid rgba(255,210,0,.55);
    border-radius:12px;
    background:linear-gradient(180deg, rgba(30,22,5,.9), rgba(2,6,8,.92));
    box-shadow:0 0 14px rgba(255,170,0,.18);
}

.bonus-progress-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:#ffd400;
    font-weight:900;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.3px;
}

.bonus-progress-head strong{
    color:#7dff6b;
    font-size:13px;
    white-space:nowrap;
}

.bonus-progress-name{
    margin-top:8px;
    color:#fff;
    font-size:13px;
    font-weight:900;
    line-height:1.25;
}

.bonus-progress-bar{
    height:11px;
    margin-top:10px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);
}

.bonus-progress-bar span{
    display:block;
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, #ff9d00, #ffe600, #45ff45);
    box-shadow:0 0 10px rgba(255,230,0,.65);
    transition:width .35s ease;
}

.bonus-progress-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:7px;
    color:#fff;
    font-size:12px;
    font-weight:800;
}

.bonus-progress-note{
    margin-top:6px;
    color:#ffdf72;
    font-size:11px;
    font-weight:800;
}

@media(max-width: 900px){
    .bonus-progress-widget{
        margin:14px 0;
    }
}

/* Page splash loader: full screen, spinner only */
html.page-loading,
html.page-loading body {
  overflow: hidden !important;
}

html.page-loading::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #050505;
  opacity: 1;
  transition: opacity .18s ease;
  will-change: opacity;
}

html.page-loading::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2147483647;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: pageLoaderSpin 0.65s linear infinite;
  will-change: transform;
}

@keyframes pageLoaderSpin {
  to { transform: rotate(360deg); }
}

/* Provider-first game lobby */
.provider-first-grid .provider-card{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  color:#fff;
}
.provider-card-face{
  width:100%;
  aspect-ratio:1/1;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:linear-gradient(145deg, rgba(8,18,40,.96), rgba(0,0,0,.94));
  border:2px solid rgba(80,210,255,.65);
  box-shadow:0 0 18px rgba(0,170,255,.45), inset 0 0 25px rgba(0,0,0,.7);
  text-align:center;
  font-family:Georgia,serif;
}
.provider-card-face b{
  font-size:clamp(13px,1.15vw,18px);
  max-width:90%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:2px 2px 0 #000;
}
.provider-card-face span{
  font-size:12px;
  color:#ffe59b;
  font-weight:800;
}
.provider-card-face.has-provider-image{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:hidden;
}
.provider-card-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:16px;
}
.provider-card-glow{
  width:58%;
  aspect-ratio:1/1;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(22px,2.5vw,38px);
  font-weight:1000;
  color:#fff;
  background:radial-gradient(circle, rgba(0,220,255,.95), rgba(26,55,160,.75) 58%, rgba(0,0,0,.75));
  border:2px solid rgba(255,255,255,.35);
  box-shadow:0 0 18px rgba(0,220,255,.75), inset 0 0 18px rgba(255,255,255,.18);
}
.provider-game-head{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:-10px;
  color:#fff;
  font-family:Georgia,serif;
}
.provider-game-head strong{
  font-size:18px;
  text-shadow:2px 2px 0 #000;
}
.provider-back-btn{
  border:1px solid rgba(255,151,9,.85);
  border-radius:8px;
  background:#ff9709;
  color:#fff;
  font-weight:900;
  padding:7px 12px;
  cursor:pointer;
}
@media (max-width:768px){
  .provider-card-face{border-radius:12px;}
  .provider-card-face span{font-size:10px;}
  .provider-game-head strong{font-size:15px;}
}

/* ===== Mobile style header + side menu ===== */
.top-header{
    justify-content:space-between;
    padding:0 28px;
}
.top-header .logo-box{
    margin-right:auto;
}
.top-header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
}
.top-auth-actions,
.top-member-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.top-login-btn,
.top-register-btn,
.top-wallet-pill{
    min-width:104px;
    height:40px;
    padding:0 18px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:900;
    font-size:14px;
    border:1.5px solid #42ff85;
}
.top-login-btn{
    color:#51ff8e;
    background:rgba(15,17,24,.82);
}
.top-register-btn,
.top-wallet-pill{
    color:#06130a;
    background:linear-gradient(135deg,#37ff82,#62ff92);
    border-color:transparent;
}
.top-wallet-pill{
    color:#fff;
    background:rgba(15,17,24,.82);
    border-color:#42ff85;
    min-width:132px;
}
.top-lang-btn.lang-btn{
    position:static;
    width:44px;
    height:44px;
    border:1.5px solid rgba(255,255,255,.45);
    border-radius:12px;
    background:rgba(15,17,24,.7);
}
.top-lang-btn img{width:25px;height:25px;}
.top-member-actions{display:none;}
body.member-logged-in .top-auth-actions{display:none;}
body.member-logged-in .top-member-actions{display:flex;}
.mobile-menu-overlay{display:none;}
.mobile-menu-open{overflow:hidden;}

@media (max-width: 768px){
    .top-header{
        height:72px;
        padding:0 14px;
        background:#191922;
        border-bottom:1px solid rgba(255,255,255,.06);
        justify-content:space-between;
    }
    .top-header .logo-box{justify-content:flex-start;}
    .top-header .site-logo{height:40px;max-width:112px;object-fit:contain;}
    .top-header-actions{gap:10px;}
    .top-login-btn,.top-register-btn,.top-wallet-pill{
        min-width:104px;
        height:40px;
        border-radius:11px;
        font-size:14px;
        padding:0 18px;
    }
    .top-wallet-pill{min-width:132px;font-size:14px;}
    .top-lang-btn.lang-btn{width:42px;height:42px;}
    .top-lang-btn img{width:24px;height:24px;}
    .gift-dot{font-size:19px;margin-left:2px;}

    .mobile-menu-overlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:2147482000;
        opacity:0;
        pointer-events:none;
        transition:opacity .24s ease;
    }
    .mobile-menu-overlay.open{
        opacity:1;
        pointer-events:auto;
    }
    .mobile-menu-backdrop{
        position:absolute;
        inset:0;
        background:rgba(0,0,0,.66);
    }
    .mobile-menu-panel{
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        width:86vw;
        max-width:385px;
        background:linear-gradient(180deg,rgba(35,36,45,.98),rgba(27,28,36,.98));
        padding:15px 14px 14px;
        transform:translateX(-102%);
        transition:transform .25s ease;
        box-shadow:18px 0 30px rgba(0,0,0,.5);
        overflow-y:auto;
        display:flex;
        flex-direction:column;
    }
    .mobile-menu-overlay.open .mobile-menu-panel{transform:translateX(0);}
    .mobile-menu-head{
        display:flex;
        align-items:center;
        gap:12px;
        margin-bottom:18px;
        flex-wrap:nowrap;
        min-height:76px;
    }
    .mobile-avatar{
        width:50px;height:50px;border-radius:50%;
        flex:0 0 50px;
        display:flex;align-items:center;justify-content:center;
        background:linear-gradient(#9aa0aa,#616773);
        border:2px solid rgba(255,255,255,.32);
        font-size:20px;color:#f2f2f2;
    }
    .mobile-menu-auth{
        display:flex;
        gap:10px;
        flex:1 1 auto;
        min-width:0;
        justify-content:flex-end;
        align-items:center;
    }
    .mobile-login-btn,.mobile-register-btn{
        height:36px;
        min-width:0;
        width:104px;
        border-radius:11px;
        display:flex;align-items:center;justify-content:center;
        font-size:12px;font-weight:900;text-decoration:none;
        white-space:nowrap;
    }
    .mobile-login-btn{border:1.5px solid #42ff85;color:#4cff8b;background:rgba(20,22,30,.8);}
    .mobile-register-btn{color:#06130a;background:linear-gradient(135deg,#37ff82,#62ff92);}
    .mobile-menu-wallet{
        display:none;
        flex:1 1 auto;
        color:#4cff8b;
        font-size:20px;
        font-weight:900;
        text-align:right;
        white-space:nowrap;
    }
    body.member-logged-in .mobile-menu-auth{display:none;}
    body.member-logged-in .mobile-menu-wallet{display:block;}
    .mobile-menu-list{display:flex;flex-direction:column;gap:11px;}
    .mobile-menu-list a{
        min-height:45px;
        display:flex;align-items:center;gap:16px;
        padding:0 14px;
        border-radius:8px;
        color:#fff;text-decoration:none;
        font-size:16px;font-weight:900;
        background:linear-gradient(135deg,rgba(78,82,95,.9),rgba(47,48,57,.92));
        box-shadow:inset 0 1px rgba(255,255,255,.08);
    }
    .mobile-menu-list a:nth-child(3){background:linear-gradient(135deg,rgba(75,73,98,.9),rgba(50,49,60,.92));}
    .mobile-menu-list a img{width:38px;height:38px;object-fit:contain;}
    .mobile-menu-list a b{margin-left:auto;font-size:38px;color:rgba(255,255,255,.45);font-weight:400;}
    .menu-emoji{font-size:33px;width:38px;text-align:center;}
    .mobile-menu-lang{
        margin-top:auto;
        min-height:45px;
        display:flex;align-items:center;justify-content:space-between;
        padding:0 16px;
        border-radius:8px;
        background:linear-gradient(135deg,rgba(70,72,84,.9),rgba(45,46,55,.92));
        color:#fff;font-size:16px;font-weight:900;
        cursor:pointer;
        position:relative;
    }
    .mobile-menu-lang:before{
        content:"";
        position:absolute;
        left:0;
        right:0;
        top:-18px;
        height:1px;
        background:rgba(255,255,255,.08);
    }
    .mobile-menu-version{margin-top:18px;color:rgba(255,255,255,.38);font-size:16px;font-weight:800;}
    @media (max-width: 360px){
        .mobile-menu-panel{width:90vw;padding-left:12px;padding-right:12px;}
        .mobile-avatar{width:62px;height:62px;flex-basis:62px;font-size:36px;}
        .mobile-login-btn,.mobile-register-btn{width:92px;font-size:16px;}
        .mobile-menu-auth{gap:8px;}
    }
}

@media (max-width: 430px){
    .top-header{padding:0 14px;}
    .top-header .site-logo{height:34px;max-width:94px;}
    .top-header-actions{gap:8px;}
    .top-login-btn,.top-register-btn{min-width:104px;height:40px;font-size:14px;padding:0 15px;}
    .top-wallet-pill{min-width:122px;height:40px;font-size:13px;padding:0 12px;}
    .top-lang-btn.lang-btn{width:40px;height:40px;}
}

@media (max-width: 380px){
    .top-login-btn,.top-register-btn{min-width:90px;font-size:15px;padding:0 12px;}
    .top-wallet-pill{min-width:110px;font-size:12px;}
}

/* ===== Provider rail game lobby update ===== */
.game-grid.provider-with-rail,
.game-grid:has(.provider-lobby-shell),
.game-grid:has(.direct-games-list){
    display:block;
}
.provider-lobby-shell{
    width:100%;
    display:grid;
    grid-template-columns:116px minmax(0,1fr);
    gap:16px;
    align-items:start;
}
.provider-side-rail{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:calc(100vh - 220px);
    overflow-y:auto;
    padding:2px 2px 8px;
    scrollbar-width:none;
}
.provider-side-rail::-webkit-scrollbar{display:none;}
.provider-rail-card{
    width:100%;
    min-height:68px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:9px;
    background:linear-gradient(145deg, rgba(43,43,53,.95), rgba(29,29,38,.96));
    box-shadow:inset 0 1px rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    /* padding:8px; */
}
.provider-rail-card.active{
    border-color:#4dff7b;
    box-shadow:0 0 0 1px rgba(77,255,123,.55), 0 0 14px rgba(77,255,123,.22), inset 0 1px rgba(255,255,255,.08);
}
.provider-rail-card img{
    width:100%;
    max-height:68px;
    object-fit:contain;
    display:block;
}
.provider-rail-card span{
    font-size:10px;
    line-height:1;
    color:rgba(255,255,255,.7);
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.provider-rail-initial{
    width:42px;
    height:42px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:1000;
    background:radial-gradient(circle, rgba(0,220,255,.95), rgba(26,55,160,.7) 60%, rgba(0,0,0,.75));
    box-shadow:0 0 12px rgba(0,220,255,.55);
}
.provider-games-panel{
    min-width:0;
}
.provider-games-list,
.direct-games-list{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
    gap:18px 14px;
    align-items:start;
}
.provider-games-list .game-card,
.direct-games-list .game-card{
    max-width:156px;
    width:100%;
}
.provider-games-list .game-card-img-wrap,
.direct-games-list .game-card-img-wrap{
    width:100%;
}
.provider-games-list .provider-launch-img,
.direct-games-list .provider-launch-img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}
.provider-games-list .play-btn,
.direct-games-list .play-btn{
    display:none!important;
}
.provider-select-hint{
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.7);
    font-size:15px;
    font-weight:800;
    text-align:center;
}

/* make the same mobile lobby available on desktop */
@media (min-width:769px){
    .mobile-menu-overlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:2147482000;
        opacity:0;
        pointer-events:none;
        transition:opacity .24s ease;
    }
    .mobile-menu-overlay.open{
        opacity:1;
        pointer-events:auto;
    }
    .mobile-menu-backdrop{
        position:absolute;
        inset:0;
        background:rgba(0,0,0,.66);
    }
    .mobile-menu-panel{
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        width:385px;
        background:linear-gradient(180deg,rgba(35,36,45,.98),rgba(27,28,36,.98));
        padding:15px 14px 14px;
        transform:translateX(-102%);
        transition:transform .25s ease;
        box-shadow:18px 0 30px rgba(0,0,0,.5);
        overflow-y:auto;
        display:flex;
        flex-direction:column;
    }
    .mobile-menu-overlay.open .mobile-menu-panel{transform:translateX(0);}
    .mobile-menu-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;min-height:76px;}
    .mobile-avatar{width:70px;height:70px;border-radius:50%;flex:0 0 70px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#9aa0aa,#616773);border:2px solid rgba(255,255,255,.32);font-size:42px;color:#f2f2f2;}
    .mobile-menu-auth{display:flex;gap:10px;flex:1 1 auto;justify-content:flex-end;align-items:center;}
    .mobile-login-btn,.mobile-register-btn{height:36px;width:104px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;text-decoration:none;white-space:nowrap;}
    .mobile-login-btn{border:1.5px solid #42ff85;color:#4cff8b;background:rgba(20,22,30,.8);}
    .mobile-register-btn{color:#06130a;background:linear-gradient(135deg,#37ff82,#62ff92);}
    .mobile-menu-wallet{display:none;flex:1 1 auto;color:#4cff8b;font-size:20px;font-weight:900;text-align:right;white-space:nowrap;}
    body.member-logged-in .mobile-menu-auth{display:none;}
    body.member-logged-in .mobile-menu-wallet{display:block;}
    .mobile-menu-list{display:flex;flex-direction:column;gap:11px;}
    .mobile-menu-list a{min-height:45px;display:flex;align-items:center;gap:16px;padding:0 14px;border-radius:8px;color:#fff;text-decoration:none;font-size:16px;font-weight:900;background:linear-gradient(135deg,rgba(78,82,95,.9),rgba(47,48,57,.92));box-shadow:inset 0 1px rgba(255,255,255,.08);}
    .mobile-menu-list a:nth-child(3){background:linear-gradient(135deg,rgba(75,73,98,.9),rgba(50,49,60,.92));}
    .mobile-menu-list a img{width:38px;height:38px;object-fit:contain;}
    .mobile-menu-list a b{margin-left:auto;font-size:38px;color:rgba(255,255,255,.45);font-weight:400;}
    .menu-emoji{font-size:33px;width:38px;text-align:center;}
    .mobile-menu-lang{margin-top:auto;min-height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-radius:8px;background:linear-gradient(135deg,rgba(70,72,84,.9),rgba(45,46,55,.92));color:#fff;font-size:16px;font-weight:900;cursor:pointer;position:relative;}
    .mobile-menu-lang:before{content:"";position:absolute;left:0;right:0;top:-18px;height:1px;background:rgba(255,255,255,.08);}
    .mobile-menu-version{margin-top:18px;color:rgba(255,255,255,.38);font-size:16px;font-weight:800;}
}

@media (max-width:768px){
    .center-content{padding:14px 14px 80px;}
    .category-row{
        gap:8px;
        padding:6px 0 12px;
        margin-bottom:8px;
        overflow-x:auto;
        overflow-y:visible;
        flex-wrap:nowrap;
        border-bottom:2px solid rgba(255,255,255,.8);
    }
    .cat{min-width:82px;border:0;background:transparent;box-shadow:none;}
    .cat img.cat-icon{width:82px;height:82px;object-fit:contain;}
    .cat span{display:none;}
    .sub-tab-row{gap:6px;margin-bottom:10px;}
    .sub-tab-row button{height:36px;font-size:14px;min-width:88px;flex:1 0 auto;}
    .provider-lobby-shell{grid-template-columns:100px minmax(0,1fr);gap:12px;}
    .provider-side-rail{max-height:calc(100vh - 215px);gap:11px;}
    .provider-rail-card{
        min-height:72px;border-radius:9px;
        /* padding:8px 5px; */
    }
    .provider-rail-card img{width:100%;max-height:68px;}
    .provider-games-list,.direct-games-list{grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px 10px;}
    .provider-games-list .game-card,.direct-games-list .game-card{max-width:none;}
}

@media (max-width:430px){
    .provider-lobby-shell{grid-template-columns:92px minmax(0,1fr);gap:10px;}
    .provider-rail-card{min-height:68px;}
    .provider-rail-card img{max-height:36px;}
    .provider-rail-card span{font-size:9px;}
    .provider-games-list,.direct-games-list{gap:10px 9px;}
}


/* ===== Mobile lobby final layout: chips top + provider rail left + games right ===== */
.mobile-all-cat{display:none;}
.provider-rail-all-icon{
    min-width:48px;
    min-height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:#fff;
    font-weight:1000;
    font-size:18px;
    background:linear-gradient(145deg,rgba(35,75,55,.95),rgba(25,35,32,.95));
}
@media (max-width:768px){
    .cat-prev,
    .cat-next{display:none!important;}
    .category-row{
        border-bottom:0!important;
        gap:10px!important;
        padding:8px 0 10px!important;
        margin-bottom:2px!important;
        overflow-x:auto!important;
        scroll-snap-type:x proximity;
    }
    .mobile-all-cat{display:inline-flex!important;}
    .cat{
        flex:0 0 auto!important;
        min-width:100px!important;
        height:48px!important;
        padding:0 14px!important;
        border-radius:10px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        flex-direction:row!important;
        gap:8px!important;
        background:rgba(29,29,38,.92)!important;
        border:1px solid rgba(255,255,255,.08)!important;
        box-shadow:none!important;
        color:#bfc4d7!important;
        scroll-snap-align:start;
    }
    .cat.active{
        color:#54ff8b!important;
        border-color:#3eff75!important;
        background:linear-gradient(145deg,rgba(34,76,48,.96),rgba(30,34,43,.96))!important;
        box-shadow:0 0 0 1px rgba(62,255,117,.25)!important;
    }
    .cat img.cat-icon{
        width:26px!important;
        height:26px!important;
        object-fit:contain!important;
        filter:none!important;
    }
    .cat span{
        display:inline!important;
        font-size:14px!important;
        font-weight:900!important;
        white-space:nowrap!important;
        line-height:1!important;
    }
    .mobile-cat-emoji{font-size:20px!important;}
    .center-content{padding:8px 14px 80px!important;}
    .provider-lobby-shell{
        grid-template-columns:100px minmax(0,1fr)!important;
        gap:14px!important;
        align-items:start!important;
    }
    .provider-side-rail{
        gap:10px!important;
        max-height:calc(100vh - 170px)!important;
        padding-top:0!important;
    }
    .provider-rail-card{
        min-height:68px!important;
        border-radius:10px!important;
        background:linear-gradient(145deg, rgba(47,48,58,.96), rgba(31,31,40,.96))!important;
    }
    .provider-rail-card.active{
        border-color:#43ff78!important;
        background:linear-gradient(145deg,rgba(37,70,53,.98),rgba(30,34,43,.98))!important;
    }
    .provider-rail-card img{max-height:68px!important;width:100%!important;}
    .provider-rail-card span{font-size:10px!important;color:rgba(255,255,255,.72)!important;}
    .sub-tab-row{
        display:flex;
        overflow-x:auto;
        gap:8px!important;
        margin:0 0 10px 114px!important;
        padding:0!important;
    }
    .sub-tab-row button{
        flex:0 0 auto!important;
        height:34px!important;
        min-width:84px!important;
        border-radius:8px!important;
        font-size:13px!important;
    }
    .provider-games-list,
    .direct-games-list{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:12px 10px!important;
    }
    .provider-select-hint{display:none!important;}
}
@media (max-width:430px){
    .provider-lobby-shell{grid-template-columns:94px minmax(0,1fr)!important;gap:12px!important;}
    .sub-tab-row{margin-left:106px!important;}
    .provider-games-list,
    .direct-games-list{gap:10px 9px!important;}
}


/* ===== Patch: mobile provider lobby fit + direct sidebar language switch ===== */
html, body{max-width:100%; overflow-x:hidden;}
@media (max-width:768px){
    .main-layout,
    .center-content,
    .category-slider,
    .game-grid,
    .provider-lobby-shell,
    .provider-games-panel{
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }

    .center-content{
        overflow:hidden!important;
        padding-left:8px!important;
        padding-right:8px!important;
    }

    /* mobile keeps clean top category chips, no desktop image carousel */
    .category-slider{
        display:block!important;
        width:100%!important;
        padding:0!important;
        margin:0 0 8px!important;
        overflow:hidden!important;
    }

    .category-row{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
        display:flex!important;
        flex-wrap:nowrap!important;
        gap:10px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        padding:8px 0 10px!important;
        margin:0!important;
        border-bottom:0!important;
        scroll-snap-type:x proximity!important;
        -webkit-overflow-scrolling:touch!important;
    }

    .category-row::-webkit-scrollbar,
    .sub-tab-row::-webkit-scrollbar,
    .provider-side-rail::-webkit-scrollbar{display:none!important;}

    .cat{
        flex:0 0 auto!important;
        width:auto!important;
        min-width:100px!important;
        max-width:none!important;
        height:48px!important;
        aspect-ratio:auto!important;
        margin:0!important;
        padding:0 14px!important;
        border-radius:10px!important;
        overflow:hidden!important;
    }

    /* sub category tab appears under category and scrolls horizontally when provider has filters */
    .sub-tab-row{
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
        margin:0 0 10px 0!important;
        padding:0 0 2px 0!important;
        gap:8px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        white-space:nowrap!important;
        -webkit-overflow-scrolling:touch!important;
    }

    .sub-tab-row button{
        flex:0 0 auto!important;
        min-width:92px!important;
        height:36px!important;
        border-radius:8px!important;
        padding:0 14px!important;
    }

    .provider-lobby-shell{
        width:100%!important;
        grid-template-columns:96px minmax(0,1fr)!important;
        gap:10px!important;
        align-items:start!important;
        overflow:hidden!important;
    }

    .provider-side-rail{
        width:96px!important;
        max-width:96px!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        max-height:calc(100vh - 185px)!important;
        padding-right:0!important;
    }

    .provider-games-panel{
        overflow:hidden!important;
        width:100%!important;
    }

    .provider-games-list,
    .direct-games-list{
        width:100%!important;
        max-width:100%!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:10px 8px!important;
        overflow:visible!important;
    }

    .game-card{
        min-width:0!important;
        max-width:100%!important;
    }
}

@media (max-width:430px){
    .provider-lobby-shell{grid-template-columns:90px minmax(0,1fr)!important;gap:8px!important;}
    .provider-side-rail{width:90px!important;max-width:90px!important;}
    .provider-games-list,
    .direct-games-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px 7px!important;}
    .cat{min-width:96px!important;height:46px!important;padding:0 12px!important;}
}


/* ===== Patch: mobile category active auto-centre + sidebar language feedback ===== */
@media (max-width:768px){
    .category-row{scroll-behavior:smooth!important;scroll-padding-left:42%!important;scroll-padding-right:42%!important;}
    .category-row .cat{scroll-snap-align:center!important;}
    .mobile-menu-lang.switching{opacity:.72!important;pointer-events:none!important;}
    .mobile-menu-lang.changed{border:1px solid #42ff78!important;box-shadow:0 0 14px rgba(66,255,120,.35)!important;background:linear-gradient(135deg,rgba(33,90,57,.95),rgba(45,46,55,.92))!important;}
}


/* ===== Patch: fixed mobile lobby height, subcategory auto-center support ===== */
@media (max-width:768px){
    html, body{
        height:100%;
        overflow:hidden!important;
    }

    .content-area,
    .main-layout,
    .center-content{
        height:calc(100dvh - 58px)!important;
        max-height:calc(100dvh - 58px)!important;
        min-height:0!important;
        overflow:hidden!important;
    }

    .main-layout{
        display:block!important;
    }

    .center-content{
        display:flex!important;
        flex-direction:column!important;
        padding-bottom:78px!important;
    }

    .category-slider{
        flex:0 0 auto!important;
    }

    .sub-tab-row{
        flex:0 0 auto!important;
        scroll-behavior:smooth!important;
        scroll-padding-left:42%!important;
        scroll-padding-right:42%!important;
    }

    .sub-tab-row button{
        scroll-snap-align:center!important;
    }

    .game-grid{
        flex:1 1 auto!important;
        min-height:0!important;
        overflow:hidden!important;
        display:block!important;
    }

    .provider-lobby-shell{
        height:100%!important;
        max-height:100%!important;
        min-height:0!important;
        overflow:hidden!important;
    }

    .provider-side-rail{
        height:100%!important;
        max-height:100%!important;
        overflow-y:auto!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
    }

    .provider-games-panel{
        height:100%!important;
        max-height:100%!important;
        min-height:0!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        padding-bottom:18px!important;
    }

    .provider-games-list,
    .direct-games-list{
        overflow:visible!important;
        padding-bottom:18px!important;
    }
}

/* ===== Patch: mobile scroll bottom fix ===== */
@media (max-width:768px){
    html, body{
        height:auto!important;
        min-height:100%!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
    }

    .content-area,
    .main-layout,
    .center-content{
        height:auto!important;
        max-height:none!important;
        overflow:visible!important;
        min-height:calc(100dvh - 58px)!important;
    }

    .center-content{
        display:block!important;
        padding-bottom:100px!important;
    }

    .game-grid{
        display:block!important;
        height:auto!important;
        max-height:none!important;
        overflow:visible!important;
        min-height:0!important;
    }

    .provider-lobby-shell{
        height:auto!important;
        max-height:none!important;
        min-height:0!important;
        overflow:visible!important;
        align-items:start!important;
    }

    .provider-side-rail{
        max-height:calc(100dvh - 185px)!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        position:sticky!important;
        top:104px!important;
    }

    .provider-games-panel{
        height:auto!important;
        max-height:none!important;
        min-height:0!important;
        overflow:visible!important;
        padding-bottom:110px!important;
    }

    .provider-games-list,
    .direct-games-list{
        overflow:visible!important;
        padding-bottom:110px!important;
    }
}

/* ===== Final viewport scroll control patch ===== */
.naga-scroll-top-btn{
    position:fixed;
    right:18px;
    bottom:82px;
    width:54px;
    height:54px;
    border:0;
    border-radius:50%;
    z-index:2147481000;
    background:linear-gradient(145deg,#ff9f16,#bd5600);
    color:#fff;
    font-size:24px;
    font-weight:1000;
    box-shadow:0 8px 22px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.22);
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity .18s ease, transform .18s ease;
}
.naga-scroll-top-btn.show{opacity:1;pointer-events:auto;transform:translateY(0);}

@media (min-width:769px){
    html,body{
        width:100%;
        height:100vh!important;
        max-height:100vh!important;
        overflow:hidden!important;
    }
    body{
        display:flex!important;
        flex-direction:column!important;
    }
    .top-header{
        flex:0 0 69px!important;
        height:69px!important;
    }
    .main-layout{
        flex:1 1 auto!important;
        height:calc(100vh - 69px - 57px)!important;
        min-height:0!important;
        max-height:calc(100vh - 69px - 57px)!important;
        overflow:hidden!important;
        display:grid!important;
        grid-template-columns:400px minmax(0,1fr) 400px!important;
        align-items:stretch!important;
    }
    .left-sidebar,
    .right-panel,
    .center-content{
        height:100%!important;
        min-height:0!important;
        max-height:100%!important;
        overflow:hidden!important;
        box-sizing:border-box!important;
    }
    .left-sidebar,
    .right-panel{
        overflow-y:auto!important;
        overscroll-behavior:contain!important;
        scrollbar-width:none!important;
    }
    .left-sidebar::-webkit-scrollbar,
    .right-panel::-webkit-scrollbar{display:none!important;}
    .center-content{
        display:flex!important;
        flex-direction:column!important;
        /* padding-bottom:12px!important; */
    }
    .category-slider,
    .sub-tab-row{
        flex:0 0 auto!important;
    }
    .game-grid{
        flex:1 1 auto!important;
        min-height:0!important;
        height:auto!important;
        max-height:none!important;
        overflow:hidden!important;
        display:block!important;
    }
    .game-grid:not(.provider-with-rail){
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        padding-bottom:18px!important;
    }
    .provider-lobby-shell{
        height:100%!important;
        max-height:100%!important;
        min-height:0!important;
        overflow:hidden!important;
        align-items:stretch!important;
    }
    .provider-side-rail{
        height:100%!important;
        max-height:100%!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
    }
    .provider-games-panel{
        height:100%!important;
        max-height:100%!important;
        min-height:0!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        padding-bottom:18px!important;
    }
    .provider-games-list,
    .direct-games-list{
        padding-bottom:18px!important;
    }
    .bottom-nav{flex:0 0 57px!important;}
}

@media (max-width:768px){
    html,body{
        height:auto!important;
        min-height:100%!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
    }
    body{
        display:block!important;
        padding-bottom:57px!important;
    }
    .main-layout,
    .center-content,
    .game-grid{
        height:auto!important;
        max-height:none!important;
        overflow:visible!important;
    }
    .center-content{
        display:block!important;
        padding-bottom:12px!important;
    }
    .category-slider{
        position:relative!important;
        z-index:4!important;
    }
    .sub-tab-row{
        position:relative!important;
        z-index:4!important;
        scroll-behavior:smooth!important;
        scroll-padding-left:42%!important;
        scroll-padding-right:42%!important;
    }
    .sub-tab-row button{scroll-snap-align:center!important;}
    .provider-lobby-shell{
        height:calc(100dvh - 190px)!important;
        max-height:620px!important;
        min-height:390px!important;
        overflow:hidden!important;
        align-items:stretch!important;
    }
    .provider-side-rail{
        position:static!important;
        height:100%!important;
        max-height:100%!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        padding-bottom:8px!important;
    }
    .provider-games-panel{
        height:100%!important;
        max-height:100%!important;
        min-height:0!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        padding-bottom:72px!important;
    }
    .provider-games-list,
    .direct-games-list{
        overflow:visible!important;
        padding-bottom:72px!important;
    }
    .provider-games-panel:after{
        content:"";
        display:block;
        height:1px;
        clear:both;
    }
    .mobile-bottom-area{
        margin-top:14px!important;
        padding-bottom:12px!important;
    }
    .naga-scroll-top-btn{
        right:18px;
        bottom:76px;
        width:52px;
        height:52px;
        font-size:22px;
    }
}

@media (max-width:430px){
    .provider-lobby-shell{
        height:calc(100dvh - 184px)!important;
        min-height:360px!important;
        max-height:590px!important;
    }
}

/* ===== Final patch: restore desktop side panels + compact mobile game area ===== */
@media (min-width:769px){
  html,body{
    height:100vh!important;
    max-height:100vh!important;
    overflow:hidden!important;
  }
  body{
    display:flex!important;
    flex-direction:column!important;
    padding-bottom:0!important;
  }
  .top-header{
    flex:0 0 69px!important;
    height:69px!important;
  }
  .bottom-nav{
    flex:0 0 57px!important;
    height:57px!important;
  }
  .main-layout{
    flex:1 1 auto!important;
    width:100%!important;
    height:calc(100vh - 69px - 57px)!important;
    max-height:calc(100vh - 69px - 57px)!important;
    min-height:0!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-columns:400px minmax(0,1fr) 400px!important;
    align-items:stretch!important;
    margin:0!important;
  }
  .left-sidebar,
  .right-panel{
    width:auto!important;
    max-width:none!important;
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:14px!important;
    box-sizing:border-box!important;
    scrollbar-width:none!important;
  }
  .left-sidebar::-webkit-scrollbar,
  .right-panel::-webkit-scrollbar{display:none!important;}
  .center-content{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    padding:14px!important;
    box-sizing:border-box!important;
  }
  .category-slider,
  .sub-tab-row{
    flex:0 0 auto!important;
    min-height:0!important;
  }
  .game-grid{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  .provider-lobby-shell{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    display:grid!important;
    align-items:stretch!important;
  }
  .provider-side-rail{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    padding-bottom:12px!important;
  }
  .provider-games-panel{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    padding-right:8px!important;
    padding-bottom:18px!important;
  }
  .provider-games-list,
  .direct-games-list{
    padding-bottom:18px!important;
  }
  .side-slider,
  .promo-img,
  .social-image img{
    max-width:100%!important;
  }
  .right-panel .balance-box{
    grid-template-columns:minmax(0,1fr) 130px!important;
    column-gap:12px!important;
  }
  .right-panel .money-btns img{
    max-width:125px!important;
  }
}

@media (max-width:768px){
  html,body{
    height:auto!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  body{
    display:block!important;
    padding-bottom:57px!important;
  }
  .main-layout,
  .center-content,
  .game-grid{
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .provider-lobby-shell{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    align-items:start!important;
  }
  .provider-side-rail{
    height:auto!important;
    min-height:0!important;
    max-height:min(58dvh,520px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:8px!important;
  }
  .provider-games-panel{
    height:auto!important;
    min-height:0!important;
    max-height:min(58dvh,520px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:12px!important;
  }
  .provider-games-list,
  .direct-games-list{
    overflow:visible!important;
    padding-bottom:12px!important;
  }
  .mobile-bottom-area{
    margin-top:16px!important;
    padding-bottom:12px!important;
  }
  .category-slider,
  .sub-tab-row{
    position:relative!important;
    z-index:4!important;
  }
  .sub-tab-row{
    overflow-x:auto!important;
    scroll-behavior:smooth!important;
    scroll-padding-left:42%!important;
    scroll-padding-right:42%!important;
  }
  .sub-tab-row button{scroll-snap-align:center!important;}
  .naga-scroll-top-btn{
    right:18px!important;
    bottom:76px!important;
  }
}


/* ===== Patch: logged-in logout buttons in mobile header/sidebar ===== */
.top-logout-btn{
    min-width:96px;
    height:44px;
    padding:0 16px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1.5px solid #ffb13b;
    background:linear-gradient(135deg,rgba(96,34,12,.95),rgba(169,75,12,.95));
    color:#fff;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
    text-shadow:1px 1px 0 #000;
}
.top-logout-btn:hover{filter:brightness(1.08);}
.mobile-menu-member{
    display:none;
    flex:1 1 auto;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    min-width:0;
}
body.member-logged-in .mobile-menu-member{display:flex;}
body.member-logged-in .mobile-menu-wallet{display:block;}
.mobile-menu-logout{
    height:36px;
    min-width:82px;
    padding:0 14px;
    border-radius:11px;
    border:1.5px solid #ffb13b;
    background:linear-gradient(135deg,rgba(96,34,12,.95),rgba(169,75,12,.95));
    color:#fff;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    text-shadow:1px 1px 0 #000;
    white-space:nowrap;
}
@media (max-width:768px){
    .top-member-actions{gap:8px;}
    .top-logout-btn{min-width:82px;height:42px;padding:0 12px;font-size:14px;}
    .top-wallet-pill{min-width:118px!important;}
    .mobile-menu-member{flex-direction:column;align-items:flex-end;gap:8px;}
    .mobile-menu-wallet{font-size:20px;text-align:right;}
    .mobile-menu-logout{width:104px;}
}
@media (max-width:430px){
    .top-logout-btn{min-width:72px;height:40px;font-size:12px;padding:0 10px;}
    .top-wallet-pill{min-width:108px!important;font-size:12px!important;}
}
@media (max-width:370px){
    .top-logout-btn{min-width:64px;font-size:11px;padding:0 8px;}
    .top-wallet-pill{min-width:96px!important;font-size:11px!important;}
    .top-header-actions{gap:6px!important;}
}

/* ===== Patch: sidebar logout as menu item + safer bottom nav menu ===== */
.mobile-menu-list-logout{
    min-height:45px;
    display:none;
    align-items:center;
    gap:16px;
    padding:0 14px;
    border-radius:8px;
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:900;
    background:linear-gradient(135deg,rgba(96,34,12,.95),rgba(169,75,12,.95));
    box-shadow:inset 0 1px rgba(255,255,255,.10);
    border:0;
    width:100%;
    cursor:pointer;
    text-align:left;
    font-family:inherit;
}
.mobile-menu-list-logout b{margin-left:auto;font-size:38px;color:rgba(255,255,255,.45);font-weight:400;line-height:1;}
body.member-logged-in .mobile-menu-list-logout{display:flex;}
body.member-logged-in .mobile-menu-member{align-items:center;justify-content:flex-end;}
body.member-logged-in .mobile-menu-member .mobile-menu-wallet{text-align:right;}
.mobile-menu-member .mobile-menu-logout{display:none!important;}
@media (max-width:768px){
    body.member-logged-in .mobile-menu-member{flex-direction:row;align-items:center;justify-content:flex-end;}
    .mobile-menu-list-logout{min-height:45px;}
}

/* ===== Chat fixed viewport + hidden internal scrollbar fix ===== */
html:has(body.chat-page),
body.chat-page{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    overflow:hidden !important;
    overscroll-behavior:none;
}
body.chat-page{
    display:flex;
    flex-direction:column;
}
body.chat-page .top-header,
body.chat-page header,
body.chat-page .site-header,
body.chat-page .main-header{
    flex:0 0 auto;
}
body.chat-page .chat-main{
    flex:1 1 auto;
    min-height:0;
    height:auto !important;
    max-height:none !important;
    overflow:hidden !important;
    padding:0 !important;
}
body.chat-page .chat-shell{
    height:100% !important;
    max-height:100% !important;
    min-height:0;
    overflow:hidden !important;
}
body.chat-page .chat-top-card,
body.chat-page .chat-compose{
    flex:0 0 auto;
}
body.chat-page .chat-messages{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
}
body.chat-page .chat-messages::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
}
body.chat-page .bottom-nav{
    flex:0 0 auto;
}
@media(max-width:900px){
    body.chat-page .chat-main{
        height:auto !important;
        min-height:0 !important;
    }
    body.chat-page .chat-messages{
        padding-bottom:14px !important;
    }
}

/* ===== Final chat page fix: fixed viewport, visible composer, hidden message scrollbar, message actions ===== */
html:has(body.chat-page),
body.chat-page{
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
}
body.chat-page{
    --chat-header-h:66px;
    --chat-nav-h:57px;
    display:block !important;
    padding:0 !important;
}
body.chat-page .top-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:var(--chat-header-h) !important;
    z-index:80 !important;
}
body.chat-page .bottom-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:var(--chat-nav-h) !important;
    z-index:80 !important;
}
body.chat-page .chat-main{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:var(--chat-header-h) !important;
    bottom:var(--chat-nav-h) !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding:0 !important;
    display:block !important;
}
body.chat-page .chat-shell{
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
}
body.chat-page .chat-top-card,
body.chat-page .chat-compose{
    flex:0 0 auto !important;
}
body.chat-page .chat-compose{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:5 !important;
}
body.chat-page .chat-messages{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
}
body.chat-page .chat-messages::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
}
.chat-msg-more{
    position:absolute;
    top:6px;
    right:8px;
    width:26px !important;
    height:26px !important;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.22);
    color:#fff;
    font-size:20px !important;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3;
}
.chat-bubble.user{padding-right:38px;}
.chat-msg-menu{
    position:absolute;
    top:34px;
    right:8px;
    min-width:150px;
    padding:6px;
    border-radius:10px;
    background:rgba(16,16,22,.96);
    border:1px solid rgba(255,196,58,.35);
    box-shadow:0 10px 26px rgba(0,0,0,.45);
    z-index:20;
}
.chat-msg-menu[hidden]{display:none!important;}
.chat-msg-menu button{
    width:100%;
    min-height:34px;
    padding:7px 9px;
    border:0;
    border-radius:7px;
    color:#fff;
    background:transparent;
    text-align:left;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}
.chat-msg-menu button:hover{background:rgba(255,255,255,.12);}
.chat-edit-box{display:flex;flex-direction:column;gap:7px;min-width:220px;}
.chat-edit-box textarea{
    width:100%;
    min-height:70px;
    border:1px solid rgba(255,196,58,.45);
    border-radius:10px;
    padding:8px;
    color:#fff;
    background:rgba(0,0,0,.28);
    resize:vertical;
    font-family:inherit;
    font-weight:700;
}
.chat-edit-actions{display:flex;gap:8px;justify-content:flex-end;}
.chat-edit-actions button{
    width:auto!important;
    height:30px!important;
    border-radius:8px!important;
    padding:0 12px!important;
    color:#fff!important;
    background:linear-gradient(135deg,#ff9d16,#8f3d00)!important;
    font-size:12px!important;
    font-weight:900!important;
}
.chat-recalled{opacity:.72;font-style:italic;}
@media(max-width:900px){
    body.chat-page{--chat-header-h:74px;--chat-nav-h:56px;}
    body.chat-page .chat-main{top:var(--chat-header-h)!important;bottom:var(--chat-nav-h)!important;}
    body.chat-page .chat-compose{min-height:56px!important;padding:7px 8px!important;}
    .chat-msg-menu{right:4px;min-width:138px;}
}

/* Chat edit uses compose box instead of editing inside bubble */
.chat-edit-compose-bar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  margin:0 0 6px 0;
  border:1px solid rgba(251,191,36,.65);
  border-radius:12px;
  background:rgba(30,41,59,.95);
  color:#fff;
  box-shadow:0 0 14px rgba(251,146,60,.18);
}
.chat-edit-compose-bar[hidden]{display:none!important;}
.chat-edit-compose-bar b{
  display:block;
  color:#facc15;
  font-size:13px;
  line-height:1.15;
}
.chat-edit-compose-bar span{
  display:block;
  color:#cbd5e1;
  font-size:12px;
  max-width:70vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-edit-compose-bar button{
  border:1px solid rgba(251,146,60,.8);
  background:linear-gradient(180deg,#fb923c,#a33b00);
  color:#fff;
  border-radius:10px;
  font-weight:900;
  padding:7px 12px;
  cursor:pointer;
}
.chat-attach:disabled{opacity:.45;pointer-events:none;filter:grayscale(1);}

/* Fix chat edit compose alignment: edit label takes full row, input/actions stay below */
.chat-compose{
  flex-wrap:wrap !important;
  align-items:center !important;
  align-content:center !important;
}
.chat-edit-compose-bar{
  flex:0 0 100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  order:-1 !important;
  margin:0 0 6px 0 !important;
  min-height:42px !important;
}
.chat-edit-compose-bar > div{
  min-width:0 !important;
  flex:1 1 auto !important;
}
.chat-edit-compose-bar button{
  flex:0 0 auto !important;
  position:static !important;
  white-space:nowrap !important;
}
.chat-compose .chat-input-wrap{
  flex:1 1 0 !important;
}
.chat-compose .chat-attach,
.chat-compose .chat-send{
  flex:0 0 auto !important;
  position:static !important;
}
@media(max-width:900px){
  body.chat-page .chat-compose{
    flex-wrap:wrap !important;
    gap:6px !important;
    padding:7px 7px !important;
  }
  body.chat-page .chat-edit-compose-bar{
    min-height:38px !important;
    padding:6px 8px !important;
    border-radius:10px !important;
  }
  body.chat-page .chat-edit-compose-bar b{font-size:12px!important;}
  body.chat-page .chat-edit-compose-bar span{font-size:11px!important;max-width:calc(100vw - 120px)!important;}
  body.chat-page .chat-edit-compose-bar button{padding:6px 10px!important;font-size:12px!important;}
  body.chat-page .chat-input-wrap{min-width:0!important;}
}

/* Chat edit mode: use the normal bottom input only, no extra edit preview bar */
.chat-edit-compose-bar{display:none!important;}
.chat-compose.is-editing-message .chat-input-wrap,
.chat-compose.is-editing-message textarea#chatInput{
  border-color:#ff9800!important;
  box-shadow:0 0 0 1px rgba(255,152,0,.55),0 0 10px rgba(255,152,0,.35)!important;
}


/* ===== Patch: setting mobile wallet + promos, main mobile promo hide, nav/sidebar behavior ===== */
.setting-mobile-wallet,
.setting-mobile-promos{
    display:none;
}
@media(max-width:900px){
    body:not(.setting-page) .mobile-bottom-area{
        display:none !important;
    }
    body.setting-page .setting-main{
        padding-top:18px !important;
        padding-bottom:84px !important;
    }
    body.setting-page .setting-shell{
        gap:20px !important;
    }
    body.setting-page .profile-card{
        display:block !important;
    }
    body.setting-page .setting-mobile-wallet{
        display:block !important;
        background:rgba(0,7,22,.72) !important;
        border:1px solid rgba(0,168,255,.35) !important;
        box-shadow:0 0 18px rgba(0,168,255,.16), inset 0 0 22px rgba(0,0,0,.35) !important;
        color:#fff !important;
        border-radius:16px !important;
        padding:14px 14px 18px !important;
    }
    body.setting-page .setting-wallet-auth .member-welcome-card{
        margin:0 0 12px !important;
        border-radius:14px !important;
    }
    body.setting-page .setting-wallet-auth .login-row{
        display:none !important;
    }
    body.setting-page .setting-wallet-balance{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 132px !important;
        gap:10px !important;
        align-items:center !important;
        background:transparent !important;
        box-shadow:none !important;
        padding:0 !important;
        margin:0 !important;
    }
    body.setting-page .setting-wallet-balance .balance-text p{
        color:#fff !important;
        font-size:14px !important;
        line-height:1.35 !important;
        margin:0 0 8px !important;
    }
    body.setting-page .setting-wallet-balance .balance-text h3{
        color:#fff200 !important;
        font-size:25px !important;
        line-height:1.05 !important;
        margin:0 0 14px !important;
        text-shadow:0 0 8px rgba(255,218,0,.55) !important;
    }
    body.setting-page .setting-wallet-balance .money-btns{
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
        align-items:stretch !important;
    }
    body.setting-page .setting-wallet-balance .money-btns button{
        border:0 !important;
        background:transparent !important;
        padding:0 !important;
        width:100% !important;
    }
    body.setting-page .setting-wallet-balance .money-btns img{
        width:128px !important;
        max-width:100% !important;
        height:auto !important;
        display:block !important;
    }
    body.setting-page .setting-mobile-promos{
        display:block !important;
        width:100% !important;
        margin-top:0 !important;
    }
    body.setting-page .setting-mobile-promos .promo-img,
    body.setting-page .setting-mobile-promos .social-image{
        display:block !important;
        width:100% !important;
        margin:0 0 10px !important;
    }
    body.setting-page .setting-mobile-promos .promo-img,
    body.setting-page .setting-mobile-promos .social-image img{
        width:100% !important;
        height:auto !important;
        border-radius:6px !important;
    }
    body.setting-page .setting-mobile-promos .action-grid{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        margin:8px 0 10px !important;
    }
    body.setting-page .setting-mobile-promos .action-grid .image-action-btn:nth-child(3){
        grid-column:1 / 2 !important;
    }
    body.setting-page .setting-mobile-promos .image-action-btn{
        border:0 !important;
        background:transparent !important;
        padding:0 !important;
        display:block !important;
    }
    body.setting-page .setting-mobile-promos .copy-image{
        width:100% !important;
        height:auto !important;
        display:block !important;
    }
}
@media(max-width:380px){
    body.setting-page .setting-wallet-balance{
        grid-template-columns:minmax(0,1fr) 118px !important;
    }
    body.setting-page .setting-wallet-balance .balance-text h3{font-size:22px !important;}
    body.setting-page .setting-wallet-balance .balance-text p{font-size:13px !important;}
}


/* ===== Patch: setting mobile order + index mobile promo hide + compact guest header ===== */
@media(max-width:900px){
  body.setting-page .setting-shell{
    display:flex !important;
    flex-direction:column !important;
  }
  body.setting-page .profile-card{order:1;}
  body.setting-page .setting-mobile-wallet{order:2;}
  body.setting-page .setting-mobile-promos{order:3;}
  body.setting-page .setting-card{order:4;margin-top:0!important;}
  body:not(.setting-page) .mobile-bottom-area,
  body:not(.setting-page) .right-panel .bonus-container,
  body:not(.setting-page) .right-panel .bonus-section,
  body:not(.setting-page) .promo-static-fallback{
    display:none !important;
  }
  body.setting-page .setting-kickstart-promo{
    display:block !important;
    margin:0 0 18px !important;
  }
  body.setting-page .setting-kickstart-promo .bonus-title-img{
    display:block !important;
    width:100% !important;
    max-height:54px !important;
    object-fit:contain !important;
    margin:0 0 8px !important;
  }
  body.setting-page .setting-kickstart-promo .bonus-card{
    display:block !important;
    width:100% !important;
    border-radius:10px !important;
    overflow:hidden !important;
  }
  body.setting-page .setting-kickstart-promo .bonus-card img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    border-radius:10px !important;
  }
}
@media(max-width:430px){
  .top-header{padding:0 10px!important;}
  .top-header .site-logo{max-width:80px!important;height:34px!important;}
  .top-header-actions{gap:7px!important;}
  .top-login-btn,.top-register-btn{
    min-width:100px!important;
    height:40px!important;
    font-size:16px!important;
    padding:0 12px!important;
  }
  .top-lang-btn.lang-btn{width:40px!important;height:40px!important;min-width:40px!important;}
}
@media(max-width:390px){
  .top-header .site-logo{max-width:72px!important;}
  .top-login-btn,.top-register-btn{min-width:88px!important;font-size:14px!important;padding:0 9px!important;}
  .gift-dot{font-size:15px!important;}
}
@media(max-width:360px){
  .top-header .site-logo{max-width:58px!important;}
  .top-login-btn,.top-register-btn{min-width:78px!important;font-size:13px!important;padding:0 7px!important;}
  .top-lang-btn.lang-btn{width:36px!important;height:36px!important;min-width:36px!important;}
}


/* ===== Patch: mobile index hide wallet/promo bottom + nav fix helpers ===== */
@media (max-width:900px){
  body.home-page .mobile-bottom-area,
  body.home-page .right-panel{
    display:none !important;
  }
  body.home-page .main-layout{
    grid-template-columns:1fr !important;
  }
  body.home-page .center-content{
    width:100% !important;
    max-width:100% !important;
  }
}

/* ===== Patch: mobile sidebar logged-out auth alignment fix ===== */
@media (max-width: 768px){
  .mobile-menu-panel{
    width: min(86vw, 360px) !important;
    max-width: 360px !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .mobile-menu-head{
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 74px !important;
  }
  .mobile-avatar{
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    font-size: 36px !important;
  }
  .mobile-menu-auth{
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: stretch !important;
  }
  .mobile-login-btn,
  .mobile-register-btn{
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 38px !important;
    padding: 0 6px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .mobile-register-btn span:first-child,
  .mobile-login-btn span:first-child{
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.member-logged-in .mobile-menu-head{
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }
  body.member-logged-in .mobile-menu-member{
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
}
@media (max-width: 390px){
  .mobile-menu-panel{
    width: 84vw !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .mobile-menu-head{
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .mobile-avatar{
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
    font-size: 32px !important;
  }
  .mobile-menu-auth{
    gap: 7px !important;
  }
  .mobile-login-btn,
  .mobile-register-btn{
    height: 36px !important;
    font-size: 13px !important;
    padding: 0 4px !important;
  }
}


/* ===== Patch: hide sidebar member wallet/logout unless logged in ===== */
.mobile-menu-member{display:none !important;}
.mobile-menu-list-logout{display:none !important;}
body.member-logged-in .mobile-menu-member{display:flex !important;}
body.member-logged-in .mobile-menu-list-logout{display:flex !important;}
body:not(.member-logged-in) .mobile-menu-wallet,
body:not(.member-logged-in) #mobileSideMenu [data-main-wallet-balance]{display:none !important;}
body:not(.member-logged-in) .mobile-menu-auth{display:grid !important;}
@media (min-width:769px){body:not(.member-logged-in) .mobile-menu-auth{display:flex !important;}}

/* ===== Final patch: sidebar logged-in balance alignment ===== */
@media (max-width: 768px){
  #mobileSideMenu .mobile-menu-panel{
    width: min(86vw, 360px) !important;
    max-width: 360px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  #mobileSideMenu .mobile-menu-head{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body.member-logged-in #mobileSideMenu .mobile-menu-auth{
    display: none !important;
  }
  body.member-logged-in #mobileSideMenu .mobile-menu-member{
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100% - 74px) !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }
  body.member-logged-in #mobileSideMenu .mobile-menu-wallet{
    display: inline-flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #4cff8b !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: right !important;
    justify-content: flex-end !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body.member-logged-in #mobileSideMenu .mobile-menu-wallet [data-main-wallet-balance]{
    display: inline !important;
    white-space: nowrap !important;
  }
  body:not(.member-logged-in) #mobileSideMenu .mobile-menu-member,
  body:not(.member-logged-in) #mobileSideMenu .mobile-menu-wallet,
  body:not(.member-logged-in) #mobileSideMenu .mobile-menu-list-logout{
    display: none !important;
  }
}
@media (max-width: 390px){
  body.member-logged-in #mobileSideMenu .mobile-menu-member{
    max-width: calc(100% - 66px) !important;
  }
  body.member-logged-in #mobileSideMenu .mobile-menu-wallet{
    font-size: 20px !important;
  }
}

/* ===== Patch: show setting wallet + promo/social content on desktop too ===== */
@media (min-width:901px){
  body.setting-page{
    overflow:hidden !important;
    padding-bottom:0 !important;
  }
  body.setting-page .setting-main{
    height:calc(100vh - 69px - 57px) !important;
    min-height:0 !important;
    overflow-y:auto !important;
    padding:24px 18px 34px !important;
    align-items:flex-start !important;
  }
  body.setting-page .setting-shell{
    width:min(1180px, 96vw) !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:minmax(360px, 470px) minmax(360px, 430px) !important;
    justify-content:center !important;
    align-items:start !important;
    gap:22px 28px !important;
  }
  body.setting-page .profile-card{grid-column:1; grid-row:1;}
  body.setting-page .setting-card{grid-column:1; grid-row:2;}
  body.setting-page .setting-mobile-wallet,
  body.setting-page .setting-mobile-promos{
    display:block !important;
    grid-column:2;
    width:100% !important;
  }
  body.setting-page .setting-mobile-wallet{
    grid-row:1;
    background:rgba(0,7,22,.72) !important;
    border:1px solid rgba(0,168,255,.35) !important;
    box-shadow:0 0 18px rgba(0,168,255,.16), inset 0 0 22px rgba(0,0,0,.35) !important;
    color:#fff !important;
    border-radius:16px !important;
    padding:14px 14px 18px !important;
  }
  body.setting-page .setting-mobile-promos{
    grid-row:2 / span 3;
    margin-top:0 !important;
  }
  body.setting-page .setting-wallet-auth .member-welcome-card{
    margin:0 0 12px !important;
    border-radius:14px !important;
  }
  body.setting-page .setting-wallet-auth .login-row{display:none !important;}
  body.setting-page .setting-wallet-balance{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 132px !important;
    gap:10px !important;
    align-items:center !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
  }
  body.setting-page .setting-wallet-balance .balance-text p{
    color:#fff !important;
    font-size:14px !important;
    line-height:1.35 !important;
    margin:0 0 8px !important;
  }
  body.setting-page .setting-wallet-balance .balance-text h3{
    color:#fff200 !important;
    font-size:25px !important;
    line-height:1.05 !important;
    margin:0 0 14px !important;
    text-shadow:0 0 8px rgba(255,218,0,.55) !important;
  }
  body.setting-page .setting-wallet-balance .money-btns{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    align-items:stretch !important;
    margin-top:0 !important;
  }
  body.setting-page .setting-wallet-balance .money-btns button{
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
    width:100% !important;
  }
  body.setting-page .setting-wallet-balance .money-btns img{
    width:128px !important;
    max-width:100% !important;
    height:auto !important;
    display:block !important;
  }
  body.setting-page .setting-kickstart-promo,
  body.setting-page .setting-info-promo{
    display:block !important;
    margin:0 0 18px !important;
  }
  body.setting-page .setting-mobile-promos .bonus-title-img{
    display:block !important;
    width:100% !important;
    max-height:54px !important;
    object-fit:contain !important;
    object-position:left center !important;
    margin:0 0 8px !important;
  }
  body.setting-page .setting-mobile-promos .bonus-card,
  body.setting-page .setting-mobile-promos .promo-img,
  body.setting-page .setting-mobile-promos .social-image{
    display:block !important;
    width:100% !important;
    margin:0 0 10px !important;
  }
  body.setting-page .setting-mobile-promos .bonus-card img,
  body.setting-page .setting-mobile-promos .promo-img,
  body.setting-page .setting-mobile-promos .social-image img{
    width:100% !important;
    height:auto !important;
    border-radius:8px !important;
  }
  body.setting-page .setting-mobile-promos .action-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:8px 0 10px !important;
  }
  body.setting-page .setting-mobile-promos .action-grid .image-action-btn:nth-child(3){
    grid-column:1 / 2 !important;
  }
  body.setting-page .setting-mobile-promos .image-action-btn{
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
    display:block !important;
    cursor:pointer !important;
  }
  body.setting-page .setting-mobile-promos .copy-image{
    width:100% !important;
    height:auto !important;
    display:block !important;
  }
}

/* ===== Patch: desktop setting page 3-column layout (left promo / center profile / right wallet) ===== */
@media (min-width:901px){
  body.setting-page{
    overflow:hidden !important;
    padding-bottom:0 !important;
  }
  body.setting-page .setting-main{
    height:calc(100vh - 69px - 57px) !important;
    min-height:0 !important;
    overflow-y:auto !important;
    padding:24px 16px 34px !important;
    align-items:flex-start !important;
  }
  body.setting-page .setting-shell{
    width:min(1240px, 96vw) !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:minmax(250px,340px) minmax(320px,470px) minmax(300px,430px) !important;
    gap:20px 18px !important;
    justify-content:center !important;
    align-items:start !important;
  }
  body.setting-page .setting-mobile-promos{
    grid-column:1 !important;
    grid-row:1 / span 4 !important;
    width:100% !important;
    max-width:340px !important;
    display:block !important;
    margin:0 !important;
  }
  body.setting-page .profile-card{
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:none !important;
  }
  body.setting-page .setting-card{
    grid-column:2 !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:none !important;
    margin-top:0 !important;
  }
  body.setting-page .setting-mobile-wallet{
    grid-column:3 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:430px !important;
    display:block !important;
    justify-self:start !important;
  }
  body.setting-page .setting-kickstart-promo,
  body.setting-page .setting-info-promo{
    display:block !important;
    margin:0 0 16px !important;
  }
  body.setting-page .setting-mobile-promos .bonus-title-img{
    display:block !important;
    width:100% !important;
    max-height:50px !important;
    object-fit:contain !important;
    object-position:left center !important;
    margin:0 0 8px !important;
  }
  body.setting-page .setting-mobile-promos .bonus-card,
  body.setting-page .setting-mobile-promos .promo-img,
  body.setting-page .setting-mobile-promos .social-image{
    display:block !important;
    width:100% !important;
    margin:0 0 10px !important;
  }
  body.setting-page .setting-mobile-promos .bonus-card img,
  body.setting-page .setting-mobile-promos .promo-img,
  body.setting-page .setting-mobile-promos .social-image img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    border-radius:8px !important;
  }
  body.setting-page .setting-mobile-promos .action-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:8px 0 10px !important;
  }
  body.setting-page .setting-mobile-promos .action-grid .image-action-btn:nth-child(3){
    grid-column:1 / 2 !important;
  }
  body.setting-page .setting-mobile-promos .image-action-btn{
    display:block !important;
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
  }
  body.setting-page .setting-mobile-promos .copy-image{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }
}

/* ===== Fix: History page must scroll normally on desktop/mobile ===== */
html:has(body.history-page),
html:has(body.history-page) body.history-page{
  height:auto!important;
  max-height:none!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

body.history-page{
  display:block!important;
  min-height:100vh!important;
  padding-bottom:57px!important;
}

body.history-page .top-header{
  height:69px!important;
  flex:initial!important;
}

body.history-page .history-main{
  min-height:calc(100vh - 69px - 57px)!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

body.history-page .history-panel,
body.history-page .history-content,
body.history-page .history-table-wrap{
  max-height:none!important;
  overflow-y:visible!important;
}

body.history-page .bottom-nav{
  height:57px!important;
  flex:initial!important;
}

/* ===== Policies & Responsible Gambling page ===== */
html:not(.page-loading), body.policy-page{
  min-height:100%;
  overflow-y:auto!important;
}
body.policy-page{
  margin:0;
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
  background-image:linear-gradient(var(--page-background-overlay),var(--page-background-overlay)),url('../custom/images/background.png');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  background-attachment:fixed;
  background-color:#050505;
}
.policy-main{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg,rgba(16,23,34,.88),rgba(9,15,24,.88));
  box-shadow:none;
  padding-bottom:34px;
}
.policy-topbar{
  position:sticky;
  top:0;
  z-index:20;
  height:62px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 18px;
  background:#171d27;
  box-shadow:0 1px 0 rgba(255,255,255,.03);
}
.policy-back{
  color:#fff;
  font-size:24px;
  text-decoration:none;
  width:26px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.policy-topbar h1{
  margin:0;
  font-size:20px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.policy-tab-shell{
  position:sticky;
  top:62px;
  z-index:19;
  background:#1a202b;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.policy-tabs{
  display:flex;
  gap:28px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:16px 14px 0;
  scrollbar-width:none;
}
.policy-tabs::-webkit-scrollbar{display:none;}
.policy-tab{
  flex:0 0 auto;
  appearance:none;
  border:0;
  background:transparent;
  color:#c6c9d4;
  padding:0 0 14px;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  position:relative;
  white-space:nowrap;
}
.policy-tab.active{color:#39ff6c;}
.policy-tab.active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,#31ff68,transparent);
  box-shadow:0 0 10px #31ff68;
}
.policy-content{
  padding:44px 6vw 20px;
  max-width:1120px;
}
.policy-panel{display:none;}
.policy-panel.active{display:block;}
.policy-panel h2{
  margin:0 0 26px;
  color:#fff;
  font-size:34px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:.2px;
}
.policy-panel h3{
  margin:42px 0 16px;
  color:#fff;
  font-size:26px;
  line-height:1.7;
  font-weight:900;
}
.policy-panel p{
  margin:0 0 12px;
  color:#a9bbd8;
  font-size:21px;
  line-height:1.32;
  font-weight:500;
}
.policy-muted{
  color:#a9bbd8!important;
  margin-bottom:24px!important;
}
@media (max-width: 680px){
  .policy-main{width:100%;box-shadow:none;}
  .policy-topbar{height:62px;padding:0 18px;}
  .policy-topbar h1{font-size:20px;}
  .policy-tab-shell{top:62px;}
  .policy-tabs{gap:34px;padding-left:14px;padding-right:14px;}
  .policy-tab{font-size:20px;}
  .policy-content{padding:47px 19px 24px;}
  .policy-panel h2{font-size:34px;}
  .policy-panel h3{font-size:26px;}
  .policy-panel p{font-size:21px;line-height:1.32;}
}
@media (max-width: 380px){
  .policy-panel h2{font-size:30px;}
  .policy-panel h3{font-size:23px;}
  .policy-panel p{font-size:18px;}
  .policy-tab{font-size:18px;}
}

/* ===== Policy page final mobile text + scroll fix ===== */
body.policy-page,
html:not(.page-loading) body.policy-page{
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body.policy-page .policy-main{
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:24px!important;
  background:linear-gradient(180deg,rgba(8,13,22,.72),rgba(8,13,22,.72))!important;
}
body.policy-page .policy-content{
  padding-bottom:24px!important;
}
@media (max-width:680px){
  body.policy-page .policy-tabs{gap:28px!important;padding:14px 14px 0!important;}
  body.policy-page .policy-tab{font-size:16px!important;padding-bottom:12px!important;}
  body.policy-page .policy-content{padding:34px 17px 0px!important;}
  body.policy-page .policy-panel h2{font-size:26px!important;line-height:1.2!important;margin-bottom:20px!important;}
  body.policy-page .policy-panel h3{font-size:20px!important;line-height:1.35!important;margin:30px 0 14px!important;}
  body.policy-page .policy-panel p{font-size:16px!important;line-height:1.45!important;margin-bottom:14px!important;}
  body.policy-page .policy-muted{font-size:16px!important;margin-bottom:20px!important;}
}
@media (max-width:380px){
  body.policy-page .policy-topbar h1{font-size:18px!important;}
  body.policy-page .policy-tab{font-size:15px!important;}
  body.policy-page .policy-panel h2{font-size:24px!important;}
  body.policy-page .policy-panel h3{font-size:19px!important;}
  body.policy-page .policy-panel p{font-size:15px!important;line-height:1.43!important;}
}
@media (min-width:769px){
  html:not(.page-loading),
  html:not(.page-loading) body.policy-page{
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body.policy-page{display:block!important;}
  body.policy-page .policy-main{
    min-height:100dvh!important;
    width:100%!important;
  }
}

/* ===== Policy page desktop center + mobile bottom cleanup ===== */
body.policy-page{
  background-color:#090f18!important;
  background-image:linear-gradient(180deg,rgba(8,13,22,.82),rgba(8,13,22,.9)),url('../custom/images/background.png')!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}
body.policy-page .policy-main{
  min-height:100vh!important;
  padding-bottom:0!important;
  background:linear-gradient(180deg,rgba(16,23,34,.88),rgba(9,15,24,.94))!important;
}
body.policy-page .policy-topbar{
  background:linear-gradient(180deg,rgba(34,43,59,.94),rgba(17,24,36,.94))!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(8px);
}
body.policy-page .policy-tab-shell{
  background:linear-gradient(180deg,rgba(24,31,45,.94),rgba(16,23,34,.94))!important;
  box-shadow:0 12px 24px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(8px);
}
@media (min-width:769px){
  body.policy-page .policy-topbar,
  body.policy-page .policy-tab-shell{
    padding-left:max(18px,calc((100vw - 1120px) / 2))!important;
    padding-right:max(18px,calc((100vw - 1120px) / 2))!important;
    box-sizing:border-box!important;
  }
  body.policy-page .policy-tabs{
    max-width:1120px!important;
    margin:0 auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body.policy-page .policy-content{
    max-width:1040px!important;
    margin:0 auto!important;
    padding:46px 26px 70px!important;
    box-sizing:border-box!important;
  }
  body.policy-page .policy-panel h2{
    font-size:36px!important;
    line-height:1.18!important;
  }
  body.policy-page .policy-panel h3{
    font-size:26px!important;
    line-height:1.35!important;
  }
  body.policy-page .policy-panel p{
    font-size:21px!important;
    line-height:1.32!important;
    max-width:920px!important;
  }
}
@media (max-width:680px){
  html:not(.page-loading),
  html:not(.page-loading) body.policy-page{
    min-height:100vh!important;
    background-color:#090f18!important;
  }
  body.policy-page .policy-main{
    min-height:100vh!important;
    padding-bottom:0!important;
  }
  body.policy-page .policy-content{
    min-height:calc(100vh - 114px)!important;
    box-sizing:border-box!important;
  }
  body.policy-page .naga-scroll-top-btn{
    bottom:26px!important;
  }
}

/* ===== Policy page full gradient cover fix ===== */
body.policy-page{
  position:relative!important;
  background-color:#090f18!important;
  background-image:linear-gradient(var(--page-background-overlay),var(--page-background-overlay)),url('../custom/images/background.png')!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}
body.policy-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,18,.90) 0%,rgba(7,12,21,.94) 50%,rgba(7,12,21,.98) 100%)!important;
}
body.policy-page .policy-main{
  position:relative!important;
  z-index:1!important;
  background:transparent!important;
  min-height:100vh!important;
}
body.policy-page .policy-content{
  position:relative!important;
  z-index:1!important;
  background:transparent!important;
}
body.policy-page .policy-topbar,
body.policy-page .policy-tab-shell,
body.policy-page .naga-scroll-top-btn{
  position:sticky;
  z-index:2!important;
}
body.policy-page .naga-scroll-top-btn{
  position:fixed!important;
}
@media (max-width:680px){
  html:not(.page-loading),
  html:not(.page-loading) body.policy-page{
    background-color:#090f18!important;
    background-image:linear-gradient(var(--page-background-overlay),var(--page-background-overlay)),url('../custom/images/background.png')!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:cover!important;
    background-attachment:fixed!important;
  }
  body.policy-page::before{
    background:linear-gradient(180deg,rgba(7,12,22,.78) 0%,rgba(7,12,22,.92) 38%,rgba(7,12,22,.98) 100%)!important;
  }
  body.policy-page .policy-main,
  body.policy-page .policy-content{
    background:transparent!important;
  }
}

/* ===== Patch v1.0.37: cleaner mobile setting/password form pages ===== */
body.setting-form-page{
  background:
    linear-gradient(180deg, rgba(5,10,16,.20), rgba(5,10,16,.32)),
    url('../custom/images/background.png') center top / cover fixed no-repeat !important;
  color:#edf7ff !important;
}
body.setting-form-page .top-header{
  background:rgba(10,12,20,.82) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.setting-form-main{
  align-items:flex-start !important;
  padding-top:18px !important;
}
.setting-form-card.game-glass-card,
.setting-form-card{
  position:relative !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg, rgba(15,25,34,.88), rgba(10,16,24,.86)) !important;
  border:1px solid rgba(120,210,255,.28) !important;
  border-radius:18px !important;
  box-shadow:0 18px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:blur(9px) !important;
  -webkit-backdrop-filter:blur(9px) !important;
}
.setting-form-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 20% 0%, rgba(72,192,255,.18), transparent 38%), radial-gradient(circle at 90% 10%, rgba(255,180,58,.10), transparent 32%);
}
.setting-form-card > *{
  position:relative;
  z-index:1;
}
.setting-form-head{
  gap:12px !important;
  margin-bottom:18px !important;
  padding-bottom:14px !important;
  border-bottom:1px solid rgba(170,220,245,.22) !important;
}
.setting-form-head h1{
  color:#f7fbff !important;
  font-size:22px !important;
  line-height:1.15 !important;
  letter-spacing:.1px !important;
  text-shadow:0 2px 6px rgba(0,0,0,.55) !important;
}
.setting-form-head p{
  color:#a9c9d8 !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
.back-link{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  color:#ffe9a6 !important;
  background:linear-gradient(180deg, rgba(74,50,20,.95), rgba(24,18,13,.95)) !important;
  border:1px solid rgba(255,198,90,.55) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.12) !important;
}
.back-link i{
  font-size:17px !important;
}
.form-label{
  color:#dcefff !important;
  font-size:13px !important;
  letter-spacing:.2px !important;
  margin-bottom:-4px !important;
}
.theme-form{
  gap:13px !important;
}
.theme-input-wrap{
  min-height:46px !important;
  grid-template-columns:40px 1fr !important;
  border-radius:12px !important;
  border:1px solid rgba(153,211,238,.34) !important;
  background:rgba(245,250,255,.94) !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.18) !important;
}
.password-wrap{
  grid-template-columns:40px 1fr 42px !important;
}
.input-ico{
  color:#24414f !important;
  font-size:15px !important;
}
.theme-input-wrap input,
.verify-row input{
  color:#142d38 !important;
  font-size:14px !important;
}
.theme-input-wrap input::placeholder,
.verify-row input::placeholder{
  color:#6d7a82 !important;
}
.eye-btn{
  color:#24414f !important;
  font-size:15px !important;
}
.verification-panel{
  margin-top:2px !important;
  padding:14px !important;
  border-radius:14px !important;
  background:rgba(7,22,31,.72) !important;
  border:1px solid rgba(153,211,238,.22) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.20) !important;
}
.verification-panel p{
  color:#d9ebf3 !important;
  font-size:12px !important;
  line-height:1.45 !important;
  margin-bottom:10px !important;
}
.verify-row{
  grid-template-columns:1fr !important;
  gap:8px !important;
}
.verify-row input{
  height:42px !important;
  border-radius:11px !important;
  background:rgba(245,250,255,.95) !important;
  border:1px solid rgba(153,211,238,.25) !important;
  padding:0 13px !important;
}
.verify-row button{
  height:42px !important;
  border-radius:11px !important;
  color:#fff !important;
  font-size:12px !important;
  background:linear-gradient(180deg, #c9912c, #8e5515) !important;
  border:1px solid rgba(255,219,131,.30) !important;
  box-shadow:0 8px 14px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.20) !important;
}
.gold-ring-btn,
.green-submit-btn{
  height:46px !important;
  margin-top:6px !important;
  border-radius:12px !important;
  font-size:14px !important;
  letter-spacing:.2px !important;
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.65) !important;
  border:1px solid rgba(255,210,120,.28) !important;
  background:linear-gradient(180deg, #bd8224, #704112) !important;
  box-shadow:0 10px 20px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.18) !important;
}
.green-submit-btn{
  background:linear-gradient(180deg, #2f9d58, #176536) !important;
  border-color:rgba(139,255,185,.22) !important;
}
.auth-message{
  min-height:0 !important;
  font-size:12px !important;
}
@media(max-width:900px){
  body.setting-form-page{
    padding-bottom:56px !important;
    min-height:100vh !important;
  }
  .setting-form-main{
    min-height:calc(100vh - 69px - 56px) !important;
    padding:16px 8px 24px !important;
  }
  .setting-form-card.game-glass-card,
  .setting-form-card{
    width:calc(100vw - 16px) !important;
    max-width:430px !important;
    padding:18px 13px 20px !important;
  }
  .setting-form-head h1{
    font-size:21px !important;
  }
  .theme-form{
    gap:12px !important;
  }
}
@media(max-width:380px){
  .setting-form-card.game-glass-card,
  .setting-form-card{
    padding:16px 11px 18px !important;
  }
  .verify-row{
    grid-template-columns:1fr 108px !important;
  }
  .verify-row button{
    font-size:11px !important;
  }
}


/* Spin bonus page */
body.spin-page{
  min-height:100vh;
  margin:0;
  color:#fff;
  font-family:Inter, Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 12%, rgba(174,68,255,.24), transparent 28%),
    linear-gradient(180deg, rgba(24,14,42,.96) 0%, rgba(14,20,34,.96) 62%, rgba(8,31,28,.98) 100%),
    url('../custom/images/background.png') center top/cover fixed no-repeat;
  overflow-x:hidden;
}
body.spin-page:before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 38%, rgba(244,50,225,.18), transparent 34%), linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.38));
  z-index:-1;
}
.spin-main{
  width:min(530px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:70px 16px 28px;
  box-sizing:border-box;
  position:relative;
}
.spin-topbar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(530px,100%);
  height:70px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 16px;
  box-sizing:border-box;
  background:linear-gradient(180deg, rgba(34,23,52,.98), rgba(27,18,45,.96));
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:20;
}
.spin-back,.spin-actions button,.spin-actions a{
  width:42px;height:42px;border:0;border-radius:14px;display:grid;place-items:center;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:20px;
}
.spin-back{background:transparent;font-size:24px;width:34px;box-shadow:none;}
.spin-title{font-weight:900;font-size:22px;line-height:1.1;flex:1;text-shadow:0 2px 0 rgba(0,0,0,.35);}
.spin-actions{display:flex;gap:10px;}
.spin-hero{position:relative;text-align:center;}
.more-bonus-btn{position:absolute;right:0;top:16px;border:0;border-radius:18px;padding:9px 13px;color:#fff;font-weight:900;background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.spin-wheel-card{padding-top:20px;display:flex;justify-content:center;}
.wheel-rim{position:relative;width:min(430px,94vw);aspect-ratio:1/.64;border-radius:50%;background:radial-gradient(circle at 50% 45%, #4c126b 0 18%, #aa37f4 19% 20%, #38214c 21% 54%, #8b73da 55% 58%, #211533 59% 100%);box-shadow:0 0 35px rgba(202,49,255,.65), inset 0 0 24px rgba(255,255,255,.36);border:5px solid rgba(193,181,236,.55);transform:perspective(900px) rotateX(56deg);margin:4px auto 0;}
.wheel-rim:before,.wheel-rim:after{content:'';position:absolute;inset:12%;border-radius:50%;border:2px solid rgba(255,255,255,.26);}
.wheel-rim:after{inset:30%;background:radial-gradient(circle,#ff4bdf,#581b86 60%,#d9acff 61%);box-shadow:0 0 22px #ff4bdf;}
.wheel-slice{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:900;color:#ffd657;text-shadow:0 2px 0 #54185e;transform:rotateX(-56deg);font-size:15px;}
.wheel-slice b{font-size:34px;line-height:1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45));}
.slice-1{left:45%;top:2%;}.slice-2{right:13%;top:22%;}.slice-3{right:15%;bottom:18%;}.slice-4{left:43%;bottom:6%;}.slice-5{left:15%;bottom:18%;}.slice-6{left:12%;top:24%;}
.wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(-56deg);font-size:26px;color:#fff09e;z-index:3;}
.spin-ticket{margin:-2px auto 2px;width:min(300px,78vw);height:74px;border-radius:16px;display:grid;place-items:center;font-size:39px;font-weight:1000;color:#fff;text-shadow:0 3px 0 rgba(160,25,140,.65);background:linear-gradient(180deg,#ffb6ff,#ff39d7 55%,#bb24bb);box-shadow:0 0 26px rgba(255,82,232,.85), inset 0 0 0 5px rgba(255,255,255,.2);}
.spin-expire{font-size:16px;font-weight:600;text-shadow:0 2px 3px #000;}
.treasure-summary{margin:8px 0 22px;padding:18px 17px 20px;border-radius:18px;background:linear-gradient(135deg,rgba(96,34,122,.86),rgba(25,29,44,.93));box-shadow:0 18px 50px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.08);display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;}
.treasure-summary p{margin:0 0 4px;color:#e9d8ee;font-weight:800;font-size:18px;}.treasure-summary strong{font-size:31px;color:#ffd069;text-shadow:0 2px 0 rgba(112,38,23,.7);}.treasure-summary>button{border:0;border-radius:25px;padding:14px 24px;color:#fff;background:linear-gradient(180deg,#85808f,#5f5a67);font-weight:900;font-size:17px;}
.treasure-progress{grid-column:1/-1;height:10px;border-radius:20px;background:rgba(255,255,255,.22);position:relative;margin:4px 0 10px;}.treasure-progress span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#9454ff,#ff56de,#ffd7ba);}.treasure-progress em{position:absolute;right:-8px;top:18px;background:#ffd369;color:#5e4200;font-weight:900;border-radius:14px;padding:4px 10px;font-style:normal;font-size:13px;}
.cashout-note{grid-column:1/-1;font-size:18px;font-weight:800;}.cashout-note b{color:#00ff77;}.invite-spin-btn{grid-column:1/-1!important;width:100%;border:0!important;border-radius:34px!important;background:#00f56d!important;color:#071a11!important;font-size:22px!important;padding:18px!important;margin-top:14px;}
.spin-info-card{border-radius:14px;background:rgba(255,255,255,.05);padding:16px;margin-bottom:20px;color:#d9e4ff;}.spin-info-card h3{margin:0 0 8px;color:#fff;}.spin-info-card p{margin:0;line-height:1.55;}
.lucky-overlay{position:fixed;inset:0;background:radial-gradient(circle at 50% 34%,rgba(105,46,126,.95),rgba(28,20,45,.97) 44%,rgba(8,10,16,.99) 100%);z-index:9999;display:none;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;}
.lucky-overlay.show{display:flex;}.lucky-panel{width:min(500px,100%);min-height:min(860px,100vh);position:relative;text-align:center;padding:42px 8px 30px;box-sizing:border-box;overflow:hidden;}.lucky-panel:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 52% 38%,rgba(255,53,230,.2),transparent 34%),radial-gradient(circle at 50% 95%,rgba(0,255,120,.24),transparent 25%);pointer-events:none;}
.lucky-logo{position:relative;display:inline-block;font-size:64px;font-weight:1000;letter-spacing:-4px;line-height:.95;transform:skew(-8deg) rotate(1deg);background:linear-gradient(180deg,#ff4fab,#ffe18f 72%,#ff7b30);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(255,90,238,.66);filter:drop-shadow(0 5px 0 rgba(55,31,112,.95));}
.lucky-subtitle{position:relative;margin:30px 0 28px;font-size:28px;font-weight:900;color:#ffc8ff;text-shadow:0 0 13px rgba(255,126,255,.85);display:flex;justify-content:center;align-items:center;gap:11px;}.lucky-subtitle span{width:30px;height:6px;background:radial-gradient(circle,#ffe493 0 35%,transparent 38%);}
.lucky-box-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:58px 34px;padding:0 38px 78px;transition:opacity .3s,transform .3s;}.lucky-box{height:154px;border:0;background:transparent;position:relative;cursor:pointer;filter:drop-shadow(0 18px 16px rgba(0,0,0,.42));animation:boxFloat 2.2s ease-in-out infinite;}.lucky-box:nth-child(2){animation-delay:.25s}.lucky-box:nth-child(3){animation-delay:.45s}.lucky-box:nth-child(4){animation-delay:.7s}
.lucky-box span,.open-chest{display:block;position:absolute;left:50%;top:50%;width:146px;height:98px;transform:translate(-50%,-40%);border-radius:18px 18px 22px 22px;background:linear-gradient(135deg,#211d76,#7d2df0 38%,#f45ddc 82%,#2a1468);box-shadow:inset 0 -20px 25px rgba(0,0,0,.35), inset 0 0 0 5px rgba(255,255,255,.07);}
.lucky-box span:before,.open-chest:before{content:'';position:absolute;left:7px;right:7px;top:-43px;height:66px;border-radius:42px 42px 14px 14px;background:linear-gradient(135deg,#2e2a8f,#7530db 55%,#e04df2);transform:skew(-15deg);box-shadow:inset 0 -14px 18px rgba(0,0,0,.34);}
.lucky-box span:after,.open-chest:after{content:'◇';position:absolute;left:50%;top:22px;transform:translateX(-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font-size:34px;color:#ffe68d;background:rgba(25,18,70,.78);box-shadow:0 0 14px rgba(255,136,255,.8);}.lucky-box:hover{transform:scale(1.06)}@keyframes boxFloat{50%{transform:translateY(-9px)}}
.lucky-result{display:none;position:relative;padding-top:42px;min-height:390px;}.lucky-result .open-chest{position:relative;left:auto;top:auto;margin:118px auto 26px;transform:none;width:178px;height:112px;opacity:.82;animation:openPop .5s ease both;}.lucky-result .open-chest:before{transform:translate(-10px,-26px) rotate(-18deg);top:-24px;}.coin-stack{position:absolute;left:50%;top:-32px;transform:translateX(-50%);font-size:54px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.5));}.lucky-result strong{font-size:29px;color:#c9a15b;letter-spacing:1px;text-shadow:0 3px 10px rgba(255,219,96,.36);}.lucky-panel.opened .lucky-box-grid{display:none}.lucky-panel.opened .lucky-result{display:block}@keyframes openPop{0%{transform:scale(.7);opacity:.2}100%{transform:scale(1);opacity:.82}}
.lucky-close{position:absolute;left:50%;bottom:0px;transform:translateX(-50%);width:54px;height:54px;border:0;border-radius:50%;background:rgba(95,143,108,.9);color:#fff;font-size:28px;display:grid;place-items:center;box-shadow:0 14px 30px rgba(0,0,0,.35);}
@media (min-width:720px){.spin-main,.spin-topbar{width:min(760px,100%)}.spin-main{padding-top:84px}.spin-topbar{height:76px}.wheel-rim{width:520px}.lucky-panel{min-height:780px}.lucky-logo{font-size:76px}}
@media (max-width:420px){.spin-main{padding-left:16px;padding-right:16px}.spin-title{font-size:21px}.spin-actions button,.spin-actions a{width:25px;height:25px}.lucky-logo{font-size:58px}.lucky-subtitle{font-size:26px}.lucky-box-grid{gap:48px 20px;padding-left:28px;padding-right:28px}.lucky-box span{width:132px;height:88px}.lucky-box span:before{height:59px}.treasure-summary strong{font-size:29px}.invite-spin-btn{font-size:20px!important}}

/* Spin page image asset upgrade v1.0.38 */
body.spin-page{
  min-height:100vh !important;
  color:#fff !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(150, 58, 255, .24), transparent 30%),
    radial-gradient(circle at 50% 48%, rgba(255, 31, 211, .14), transparent 34%),
    linear-gradient(180deg, #12071d 0%, #11091d 44%, #071013 100%) !important;
}
.spin-main{
  width:min(560px,100%) !important;
  max-width:560px !important;
  padding:78px 16px 30px !important;
}
.spin-topbar{
  width:min(560px,100%) !important;
  height:70px !important;
  background:linear-gradient(180deg,rgba(47,27,70,.98),rgba(31,21,48,.98)) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.25) !important;
}
.spin-back,.spin-actions button,.spin-actions a{
  color:#fff !important;
}
.spin-back{width:42px !important;border-radius:15px !important;}
.spin-title{font-size:21px !important;letter-spacing:-.3px !important;}
.more-bonus-btn{
  font-size:10px !important;
  right:4px !important;
  top:15px !important;
  z-index:3 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08)) !important;
}
.spin-wheel-card{
  position:relative !important;
  min-height:310px !important;
  align-items:center !important;
  padding-top:24px !important;
}
.spin-wheel-img{
  width:min(500px,95vw) !important;
  display:block !important;
  filter:drop-shadow(0 0 30px rgba(205,64,255,.72)) drop-shadow(0 18px 28px rgba(0,0,0,.5)) !important;
  animation:spinWheelGlow 3.4s ease-in-out infinite !important;
}
.spin-pointer-img{
  position:absolute !important;
  left:50% !important;
  top:48% !important;
  width:min(94px,18vw) !important;
  transform:translate(-50%,-50%) !important;
  filter:drop-shadow(0 0 12px rgba(255,100,238,.9)) !important;
  z-index:2 !important;
}
@keyframes spinWheelGlow{50%{filter:drop-shadow(0 0 42px rgba(235,82,255,.9)) drop-shadow(0 20px 32px rgba(0,0,0,.55));}}
.spin-ticket{display:none !important;}
.spin-ticket-img-wrap{
  width:min(330px,82vw) !important;
  margin:-22px auto 2px !important;
  position:relative !important;
  z-index:2 !important;
}
.spin-ticket-img-wrap img{
  display:block !important;
  width:100% !important;
  filter:drop-shadow(0 0 18px rgba(255,70,225,.85)) drop-shadow(0 10px 18px rgba(0,0,0,.45)) !important;
}
.spin-expire{margin-top:-4px !important;}
.treasure-summary{
  margin:10px auto 22px !important;
  background:linear-gradient(135deg,rgba(101,41,125,.95),rgba(29,30,51,.97)) !important;
  border:1px solid rgba(255,255,255,.1) !important;
}
.spin-info-card{background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.07) !important;}
.lucky-overlay{
  background:radial-gradient(circle at 50% 35%,rgba(110,44,128,.93),rgba(41,24,61,.98) 48%,rgba(8,8,16,.99) 100%) !important;
  overflow:hidden !important;
}
.lucky-overlay:before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 95%,rgba(0,255,125,.28),transparent 23%), radial-gradient(circle at 22% 18%,rgba(255,190,68,.13),transparent 12%), radial-gradient(circle at 75% 22%,rgba(255,161,50,.12),transparent 13%);
  pointer-events:none;
}
.lucky-overlay.loading .lucky-panel{opacity:0 !important;transform:scale(.96) !important;pointer-events:none !important;}
.lucky-overlay:not(.loading) .lucky-loading-effect{opacity:0 !important;pointer-events:none !important;}
.lucky-loading-effect{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(2,128px);
  grid-auto-rows:128px;
  gap:82px 58px;
  place-content:center;
  transition:opacity .35s ease;
  z-index:3;
}
.lucky-loading-effect span{
  width:126px;height:126px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 23%, rgba(255,255,255,.95) 26% 34%, transparent 38% 58%, rgba(255,255,255,.8) 62% 70%, transparent 74% 100%);
  filter:drop-shadow(0 0 10px rgba(255,255,255,.55));
  animation:magicSpin .8s linear infinite;
  opacity:.95;
}
.lucky-loading-effect span:after{content:'';display:block;inset:18px;position:absolute;border-radius:50%;background:#12091d;}
@keyframes magicSpin{to{transform:rotate(360deg)}}
.lucky-panel{
  width:min(520px,100%) !important;
  min-height:min(860px,100vh) !important;
  padding:42px 8px 30px !important;
  transition:opacity .35s ease, transform .35s ease !important;
}
.lucky-panel:before{display:none !important;}
.lucky-logo{display:none !important;}
.lucky-logo-img{
  position:relative !important;
  width:min(470px,96%) !important;
  display:block !important;
  margin:0 auto 16px !important;
  filter:drop-shadow(0 0 22px rgba(255,74,232,.75)) !important;
}
.lucky-subtitle{
  margin:2px 0 28px !important;
  font-size:27px !important;
  color:#ffd6ff !important;
}
.lucky-box-grid{
  gap:58px 28px !important;
  padding:0 30px 84px !important;
}
.lucky-box{
  height:160px !important;
  display:grid !important;
  place-items:center !important;
  transition:transform .28s ease, opacity .28s ease, filter .28s ease !important;
}
.lucky-box span,.open-chest,.lucky-box span:before,.lucky-box span:after,.open-chest:before,.open-chest:after{display:none !important;}
.lucky-box img{
  width:min(190px,39vw) !important;
  display:block !important;
  filter:drop-shadow(0 22px 18px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(198,64,255,.5)) !important;
}
.lucky-box:hover,.lucky-box.chosen{transform:scale(1.09) !important;}
.lucky-box.chosen img{animation:treasureOpen .72s ease both !important;}
@keyframes treasureOpen{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.12) rotate(-5deg)}70%{transform:scale(.96) rotate(4deg)}100%{transform:scale(1.05) rotate(0)}}
.lucky-result{
  min-height:430px !important;
  padding-top:18px !important;
}
.lucky-result-box{
  width:min(230px,56vw) !important;
  display:block !important;
  margin:110px auto 20px !important;
  opacity:.78 !important;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(255,82,232,.5)) !important;
  animation:resultBoxPop .52s ease both !important;
}
@keyframes resultBoxPop{from{transform:scale(.65);opacity:.18}to{transform:scale(1);opacity:.78}}
.lucky-result strong{
  font-size:30px !important;
  color:#e2bb65 !important;
  text-shadow:0 0 14px rgba(255,220,118,.45) !important;
}
.lucky-close{
  background:rgba(86,139,103,.92) !important;
  color:#fff !important;
}
@media (min-width:900px){
  body.spin-page{background:radial-gradient(circle at 50% 18%,rgba(127,40,173,.35),transparent 30%),linear-gradient(180deg,#09050d,#020203 70%) !important;}
  .spin-main{width:100% !important;max-width:1180px !important;padding:92px 28px 44px !important;}
  .spin-topbar{width:min(720px,100%) !important;height:68px !important;}
  .spin-hero{max-width:760px !important;margin:0 auto !important;}
  .spin-wheel-card{min-height:330px !important;}
  .spin-wheel-img{width:620px !important;max-width:70vw !important;}
  .spin-pointer-img{width:96px !important;}
  .spin-ticket-img-wrap{width:330px !important;margin-top:-36px !important;}
  .treasure-summary,.spin-info-card{max-width:760px !important;margin-left:auto !important;margin-right:auto !important;}
  .lucky-panel{width:min(520px,100%) !important;}
}
@media (max-width:430px){
  .spin-main{padding-left:16px !important;padding-right:16px !important;}
  .spin-title{font-size:14px !important;}
  .spin-actions button,.spin-actions a,.spin-back{width:25px !important;height:25px !important;}
  .spin-wheel-card{min-height:250px !important;padding-top:32px !important;}
  .spin-wheel-img{width:108vw !important;max-width:520px !important;}
  .spin-pointer-img{width:70px !important;top:50% !important;}
  .spin-ticket-img-wrap{margin-top:-18px !important;}
  .lucky-panel{padding-top:38px !important;}
  .lucky-logo-img{width:96% !important;margin-bottom:18px !important;}
  .lucky-subtitle{font-size:26px !important;margin-bottom:26px !important;}
  .lucky-box-grid{gap:52px 18px !important;padding:0 20px 84px !important;}
  .lucky-box{height:146px !important;}
  .lucky-box img{width:154px !important;max-width:42vw !important;}
  .lucky-result-box{margin-top:106px !important;width:190px !important;}
  .lucky-loading-effect{grid-template-columns:repeat(2,120px);grid-auto-rows:120px;gap:82px 48px;}
  .lucky-loading-effect span{width:120px;height:120px;}
}

/* Spin page upgrade: effect, treasure spacing, wheel stage background, desktop friendly */
body.spin-page{
  background:#05030a !important;
  min-height:100vh !important;
  overflow-x:hidden !important;
}
body.spin-page:before{
  background:
    radial-gradient(circle at 50% 18%,rgba(130,47,198,.28),transparent 28%),
    radial-gradient(circle at 50% 80%,rgba(0,255,142,.13),transparent 23%) !important;
}
.spin-main{
  max-width:1120px !important;
  width:min(100%,1120px) !important;
  margin:0 auto !important;
  padding-left:20px !important;
  padding-right:20px !important;
  box-sizing:border-box !important;
}
.spin-topbar{
  width:min(100%,1120px) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(180deg,rgba(42,27,65,.96),rgba(23,18,34,.94)) !important;
  border-bottom:1px solid rgba(190,121,255,.2) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.3) !important;
}
.spin-hero{
  position:relative !important;
  max-width:860px !important;
  margin:0 auto !important;
}
.spin-stage-card{
  position:relative !important;
  width:min(100%,760px) !important;
  margin:0 auto -4px !important;
  min-height:430px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.spin-stage-bg{
  position:absolute !important;
  left:50% !important;
  top:44% !important;
  width:min(100vw,760px) !important;
  height:560px !important;
  transform:translate(-50%,-50%) !important;
  object-fit:cover !important;
  opacity:.58 !important;
  filter:saturate(1.12) contrast(1.06) brightness(.72) !important;
  border-radius:0 0 26px 26px !important;
  mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 76%,transparent 100%) !important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 76%,transparent 100%) !important;
}
.spin-wheel-card{
  position:relative !important;
  padding:0 !important;
  min-height:360px !important;
  width:min(100%,720px) !important;
  display:grid !important;
  place-items:center !important;
  filter:drop-shadow(0 0 28px rgba(222,66,255,.35)) !important;
}
.spin-wheel-img{
  width:min(92vw,650px) !important;
  max-width:none !important;
  transform-origin:center center !important;
  will-change:transform !important;
}
.spin-pointer-img{
  position:absolute !important;
  top:calc(50% - 58px) !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:116px !important;
  z-index:4 !important;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.45)) !important;
}
.wheel-reward{
  position:absolute !important;
  z-index:5 !important;
  display:grid !important;
  place-items:center !important;
  gap:2px !important;
  color:#ffd85c !important;
  font-weight:1000 !important;
  text-shadow:0 2px 3px rgba(48,20,91,.9),0 0 12px rgba(255,208,58,.36) !important;
  font-size:15px !important;
  pointer-events:none !important;
}
.wheel-reward i{font-size:28px !important;color:#ffce26 !important;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)) !important;}
.reward-top{top:80px;left:50%;transform:translateX(-50%)}
.reward-right{top:145px;right:145px}.reward-cash{top:245px;right:124px}.reward-bottom{bottom:68px;left:50%;transform:translateX(-50%)}
.reward-left{top:245px;left:126px}.reward-coin{top:146px;left:136px}
.spin-ticket-img-wrap{
  position:relative !important;
  display:block !important;
  border:0 !important;
  background:transparent !important;
  margin:-36px auto 8px !important;
  width:min(360px,70vw) !important;
  padding:0 !important;
  cursor:pointer !important;
  transform:translateZ(0) !important;
  transition:transform .13s ease,filter .13s ease !important;
  filter:drop-shadow(0 12px 22px rgba(255,42,224,.42)) !important;
}
.spin-ticket-img-wrap img{width:100% !important;display:block !important;}
.spin-ticket-img-wrap:hover{transform:translateY(-2px) scale(1.02) !important;}
.spin-ticket-img-wrap:active,.spin-ticket-img-wrap.pressed{transform:translateY(7px) scale(.95) !important;filter:drop-shadow(0 4px 8px rgba(255,42,224,.24)) brightness(.86) !important;}
.spin-button-shine{position:absolute;inset:15% 10%;border-radius:22px;background:linear-gradient(110deg,transparent 0 38%,rgba(255,255,255,.5) 48%,transparent 58%);transform:translateX(-140%);animation:spinBtnShine 2.4s ease-in-out infinite;pointer-events:none;}
@keyframes spinBtnShine{50%,100%{transform:translateX(140%)}}
.spin-result-toast{min-height:32px;text-align:center;font-size:18px;font-weight:900;color:#ffe176;text-shadow:0 0 14px rgba(255,146,0,.65);opacity:0;transform:translateY(-8px);transition:.25s ease;}
.spin-result-toast.show{opacity:1;transform:translateY(0)}
.treasure-summary{
  max-width:820px !important;
  margin:12px auto 22px !important;
  background:linear-gradient(135deg,rgba(91,40,122,.94),rgba(30,25,43,.96)) !important;
  border:1px solid rgba(229,132,255,.14) !important;
}
.spin-info-card{max-width:820px !important;margin-left:auto !important;margin-right:auto !important;}
.lucky-overlay{
  background:rgba(18,8,30,.88) !important;
  backdrop-filter:blur(3px) !important;
}
.lucky-overlay:before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(180deg,rgba(86,31,112,.36),rgba(24,16,38,.72) 58%,rgba(0,74,44,.42)),
    radial-gradient(circle at 50% 34%,rgba(242,70,255,.28),transparent 38%) !important;
  pointer-events:none !important;
}
.lucky-panel{
  min-height:0 !important;
  height:auto !important;
  max-height:100vh !important;
  padding:24px 12px 84px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
.lucky-logo-img{width:min(92%,470px) !important;margin:0 auto 18px !important;filter:drop-shadow(0 0 22px rgba(249,89,255,.55)) !important;}
.lucky-subtitle{margin:4px 0 12px !important;font-size:28px !important;}
.lucky-box-grid{gap:30px 26px !important;padding:8px 42px 34px !important;}
.lucky-box{height:142px !important;}
.lucky-box img{width:165px !important;max-width:42vw !important;}
.lucky-result{min-height:0 !important;padding-top:8px !important;}
.lucky-result-box{width:188px !important;margin:28px auto 14px !important;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)) drop-shadow(0 0 24px rgba(239,76,255,.4)) !important;}
.lucky-result strong{display:block !important;font-size:30px !important;color:#ffd36a !important;text-shadow:0 0 18px rgba(255,190,65,.75),0 3px 8px rgba(0,0,0,.6) !important;}
.lucky-close{background:rgba(94,146,107,.92) !important;}
@media (min-width:900px){
  .spin-main{padding-top:92px !important;}
  .spin-hero{max-width:940px !important;}
  .spin-stage-card{min-height:500px !important;width:900px !important;max-width:100% !important;}
  .spin-stage-bg{width:900px !important;height:640px !important;opacity:.5 !important;}
  .spin-wheel-card{min-height:450px !important;width:860px !important;}
  .spin-wheel-img{width:760px !important;max-width:78vw !important;}
  .spin-pointer-img{width:130px !important;top:calc(50% - 68px) !important;}
  .reward-top{top:96px}.reward-right{top:174px;right:162px}.reward-cash{top:294px;right:145px}.reward-bottom{bottom:74px}.reward-left{top:294px;left:146px}.reward-coin{top:174px;left:154px}
  .wheel-reward{font-size:16px !important}.wheel-reward i{font-size:34px !important;}
  .lucky-panel{width:min(560px,100%) !important;}
}
@media (max-width:520px){
  .spin-main{padding-left:0 !important;padding-right:0 !important;}
  .spin-topbar{width:100% !important;height:50px !important;}
  .spin-title{font-size:20px !important;}
  .spin-hero{max-width:100% !important;overflow:hidden !important;}
  .spin-stage-card{min-height:360px !important;width:100vw !important;margin-top:-6px !important;}
  .spin-stage-bg{width:100vw !important;height:520px !important;top:49% !important;opacity:.72 !important;}
  .spin-wheel-card{min-height:330px !important;width:100vw !important;}
  .spin-wheel-img{width:128vw !important;max-width:610px !important;}
  .spin-pointer-img{width:92px !important;top:calc(50% - 45px) !important;}
  .wheel-reward{font-size:14px !important;}
  .wheel-reward i{font-size:27px !important;}
  .reward-top{top:50px}.reward-right{top:102px;right:66px}.reward-cash{top:202px;right:48px}.reward-bottom{bottom:52px}.reward-left{top:202px;left:50px}.reward-coin{top:104px;left:62px}
  .spin-ticket-img-wrap{margin-top:-34px !important;width:72vw !important;}
  .treasure-summary,.spin-info-card{margin-left:16px !important;margin-right:16px !important;}
  .lucky-panel{padding:16px 4px 78px !important;justify-content:flex-start !important;}
  .lucky-logo-img{width:94% !important;margin-top:16px !important;margin-bottom:12px !important;}
  .lucky-subtitle{font-size:26px !important;margin-bottom:8px !important;}
  .lucky-box-grid{gap:24px 18px !important;padding:6px 22px 24px !important;}
  .lucky-box{height:126px !important;}
  .lucky-box img{width:145px !important;max-width:42vw !important;}
  .lucky-result-box{width:174px !important;margin-top:32px !important;}
}


/* Spin page responsive alignment fix: centered wheel, pointer spin, contained labels */
.spin-title #topSpinCount{color:#ffe472;text-shadow:0 0 10px rgba(255,214,75,.45)}
.spin-stage-card{
  aspect-ratio:752/720 !important;
  min-height:0 !important;
  height:auto !important;
  width:min(100%,760px) !important;
  overflow:hidden !important;
}
.spin-stage-bg{
  width:100% !important;
  height:100% !important;
  top:50% !important;
  object-fit:cover !important;
  opacity:.9 !important;
  mask-image:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%) !important;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%) !important;
}
.spin-wheel-card{
  width:100% !important;
  min-height:0 !important;
  aspect-ratio:750/550 !important;
  align-self:center !important;
  justify-self:center !important;
  margin-top:3% !important;
}
.spin-wheel-img{
  width:100% !important;
  max-width:100% !important;
  transform:none !important;
}
.spin-pointer-img{
  width:15.5% !important;
  top:43.2% !important;
  left:50% !important;
  transform-origin:50% 50% !important;
}
.wheel-reward{
  font-size:clamp(11px,2.9vw,16px) !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}
.wheel-reward i{font-size:clamp(18px,5vw,34px) !important;}
.reward-top{top:13.5% !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translateX(-50%) !important;}
.reward-right{top:28.5% !important;right:19.5% !important;left:auto !important;bottom:auto !important;}
.reward-cash{top:51.5% !important;right:17.5% !important;left:auto !important;bottom:auto !important;}
.reward-bottom{bottom:29.5% !important;left:44% !important;right:auto !important;top:auto !important;transform:translateX(-50%) !important;}
.reward-left{top:51.5% !important;left:18% !important;right:auto !important;bottom:auto !important;}
.reward-coin{top:29% !important;left:20% !important;right:auto !important;bottom:auto !important;}
.spin-count-pill{
  width:max-content;
  margin:-22px auto 2px;
  padding:7px 16px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  font-size:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 18px rgba(255,72,229,.25);
  position:relative;
  z-index:6;
}
.spin-count-pill b{color:#ffe86b;}
.spin-ticket-img-wrap.disabled{opacity:.55;filter:grayscale(.25) brightness(.7) !important;cursor:not-allowed !important;}
@media (min-width:900px){
  .spin-stage-card{width:min(100%,900px) !important;aspect-ratio:752/650 !important;}
  .spin-stage-bg{height:100% !important;}
  .spin-wheel-card{width:82% !important;margin-top:5% !important;}
  .spin-pointer-img{width:15.2% !important;top:43% !important;}
  .spin-ticket-img-wrap{margin-top:-22px !important;}
  .spin-count-pill{margin-top:-16px !important;}
}
@media (max-width:520px){
  .spin-stage-card{width:100vw !important;aspect-ratio:752/720 !important;min-height:0 !important;margin-top:0 !important;}
  .spin-stage-bg{width:100% !important;height:100% !important;top:50% !important;}
  .spin-wheel-card{width:112vw !important;max-width:520px !important;aspect-ratio:750/550 !important;margin-top:6% !important;}
  .spin-wheel-img{width:100% !important;max-width:100% !important;}
  .spin-pointer-img{width:15% !important;top:43% !important;}
  .wheel-reward{font-size:clamp(12px,3.55vw,15px) !important;}
  .wheel-reward i{font-size:clamp(20px,6vw,30px) !important;}
  .reward-top{top:15% !important;}
  .reward-right{top:28.5% !important;right:20.5% !important;}
  .reward-cash{top:51.5% !important;right:18.5% !important;}
  .reward-bottom{bottom:14% !important;}
  .reward-left{top:51.5% !important;left:19% !important;}
  .reward-coin{top:29% !important;left:21% !important;}
  .spin-count-pill{margin-top:-26px !important;font-size:13px !important;padding:6px 13px !important;}
  .spin-ticket-img-wrap{margin-top:0 !important;width:74vw !important;}
  .lucky-panel{align-items:center !important;}
  .lucky-logo-img{width:min(88vw,400px) !important;}
  .lucky-box-grid{width:100% !important;max-width:390px !important;grid-template-columns:repeat(2,1fr) !important;gap:34px 22px !important;padding-left:26px !important;padding-right:26px !important;box-sizing:border-box !important;}
  .lucky-box{height:118px !important;display:grid !important;place-items:center !important;}
  .lucky-box img{width:min(38vw,145px) !important;max-width:100% !important;}
}
@media (max-width:375px){
  .spin-title{font-size:14px !important;}
  .spin-wheel-card{width:116vw !important;}
  .wheel-reward{font-size:11px !important;}
  .wheel-reward i{font-size:21px !important;}
}


/* Spin final fix: pointer rotates, labels contained, compact treasure panel */
.spin-stage-card{
  overflow:visible !important;
  padding-top:4px !important;
}
.spin-wheel-card{
  position:relative !important;
  width:min(96vw, 520px) !important;
  max-width:520px !important;
  aspect-ratio:750/560 !important;
  margin:0 auto !important;
  transform:none !important;
}
.spin-wheel-img{
  width:100% !important;
  height:auto !important;
  display:block !important;
}
.spin-pointer-img{
  width:14.2% !important;
  top:42.5% !important;
  left:50% !important;
  z-index:7 !important;
  transform:translate(-50%,-50%) rotate(var(--pointer-deg, 0deg)) !important;
  transform-origin:50% 50% !important;
  transition:transform 3.2s cubic-bezier(.12,.72,.08,1) !important;
}
.spin-pointer-img.spinning{
  filter:drop-shadow(0 0 14px rgba(255,225,87,.85)) drop-shadow(0 8px 12px rgba(0,0,0,.45)) !important;
}
.wheel-reward{
  transform:none !important;
  font-size:clamp(10px,3.1vw,14px) !important;
  line-height:1 !important;
}
.wheel-reward i{font-size:clamp(18px,5.6vw,28px) !important;}
.reward-top{top:13% !important;left:50% !important;transform:translateX(-50%) !important;}
.reward-right{top:26% !important;right:23% !important;}
.reward-cash{top:49% !important;right:22.5% !important;}
.reward-left{top:49% !important;left:24% !important;}
.reward-coin{top:26% !important;left:25% !important;}
.reward-bottom{display:none !important;}
.spin-lucky-range{
  width:max-content;
  max-width:92%;
  margin:-18px auto 4px;
  padding:6px 16px;
  border-radius:999px;
  background:rgba(28,13,43,.62);
  border:1px solid rgba(255,215,91,.35);
  color:#ffdb62;
  font-weight:1000;
  font-size:14px;
  text-shadow:0 0 10px rgba(255,220,80,.45);
  position:relative;
  z-index:8;
}
.spin-count-pill{
  margin:0 auto 4px !important;
  font-size:13px !important;
}
.spin-ticket-img-wrap{
  margin:2px auto 3px !important;
  width:min(300px,72vw) !important;
}
.spin-expire{
  margin-top:0 !important;
  font-size:13px !important;
}
.treasure-summary{
  margin:10px 14px 16px !important;
  padding:14px 16px 16px !important;
  border-radius:14px !important;
  max-width:820px !important;
  grid-template-columns:1fr auto !important;
  gap:6px 10px !important;
}
.treasure-summary p{font-size:14px !important;margin-bottom:2px !important;}
.treasure-summary strong{font-size:28px !important;line-height:1 !important;}
.treasure-summary>button{
  padding:10px 22px !important;
  font-size:15px !important;
  min-width:104px !important;
}
.treasure-progress{height:8px !important;margin:5px 0 8px !important;}
.treasure-progress em{top:15px !important;right:-4px !important;font-size:12px !important;padding:3px 9px !important;}
.cashout-note{font-size:15px !important;line-height:1.25 !important;}
.cashout-note strong{font-size:15px !important;display:inline !important;}
.invite-spin-btn{
  font-size:18px !important;
  line-height:1.15 !important;
  padding:14px 16px !important;
  margin-top:9px !important;
  border-radius:28px !important;
}
.spin-info-card{
  display:none !important;
}
.spin-record-card{
  display:block;
  margin:0 14px 18px;
  padding:10px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(35,35,46,.92), rgba(24,24,33,.94));
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
}
.spin-record-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;}
.spin-record-tabs button{height:38px;border:0;border-radius:7px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.55);font-weight:800;}
.spin-record-tabs button.active{background:rgba(255,255,255,.12);color:#00ff86;}
.spin-record-row{display:flex;align-items:center;justify-content:space-between;padding:10px 8px;border-radius:8px;background:rgba(255,255,255,.03);font-weight:900;}
.spin-record-user{display:flex;align-items:center;gap:8px;}
.spin-record-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#7446d8,#1b1730);border:1px solid rgba(255,255,255,.18);}
@media (max-width:520px){
  .spin-main{padding-top:50px !important;padding-bottom:16px !important;}
  .spin-stage-card{width:100vw !important;aspect-ratio:752/650 !important;margin-top:-4px !important;}
  .spin-stage-bg{height:100% !important;opacity:.88 !important;}
  .spin-wheel-card{width:100vw !important;max-width:430px !important;margin-top:5px !important;}
  .spin-pointer-img{width:14.5% !important;top:42.7% !important;}
  .reward-top{top:15% !important;}
  .reward-right{top:26% !important;right:20.8% !important;}
  .reward-cash{top:52.8% !important;right:19% !important;}
  .reward-left{top:52.8% !important;left:19.5% !important;}
  .reward-coin{top:25.5% !important;left:23.2% !important;}
  .spin-lucky-range{margin-top:-14px;font-size:13px;}
  .treasure-summary,.spin-record-card{margin-left:14px !important;margin-right:14px !important;}
}
@media (min-width:900px){
  .spin-page-layout{display:grid;grid-template-columns:minmax(520px, 680px) minmax(320px, 420px);gap:28px;align-items:start;max-width:1120px;margin:0 auto;}
  .spin-hero{max-width:680px !important;margin:0 !important;}
  .spin-stage-card{width:100% !important;aspect-ratio:752/650 !important;}
  .spin-wheel-card{width:96% !important;max-width:650px !important;}
  .treasure-summary{margin-top:72px !important;}
  .spin-record-card{max-width:820px;margin-left:0 !important;margin-right:0 !important;}
  .spin-ticket-img-wrap{width:340px !important;}
  .spin-lucky-range{margin-top:-24px;}
}

/* Spin reward icon + pointer result alignment fix */
.wheel-reward img{
  width:clamp(24px,6vw,42px) !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(255,204,28,.35)) !important;
}
.wheel-reward i{display:none !important;}
.reward-bottom{display:grid !important;}
.spin-lucky-range{
  margin-top:-8px !important;
  background:rgba(37,19,50,.78) !important;
  backdrop-filter:blur(4px) !important;
}
.spin-pointer-img{
  transition:transform 3.35s cubic-bezier(.08,.78,.08,1) !important;
}
.treasure-summary{
  overflow:hidden !important;
}
@media (max-width:520px){
  .spin-stage-card{aspect-ratio:752/675 !important;}
  .spin-wheel-card{width:98vw !important;max-width:410px !important;margin-top:0 !important;}
  .spin-stage-bg{opacity:.9 !important;}
  .wheel-reward img{width:clamp(22px,6vw,30px) !important;}
  .wheel-reward{font-size:clamp(10px,3.2vw,13px) !important;}
  .reward-top{top:13.5% !important;}
  .reward-right{top:26.5% !important;right:20.2% !important;}
  .reward-cash{top:48.3% !important;right:19.7% !important;}
  .reward-bottom{bottom:29.2% !important;left:42%!important;}
  .reward-left{top:48.3% !important;left:22.9% !important;}
  .reward-coin{top:25.5% !important;left:23.2% !important;}
  .spin-lucky-range{margin-top:-18px !important;font-size:12.5px !important;padding:5px 13px !important;}
  .spin-count-pill{font-size:12.5px !important;margin-top:0 !important;}
  .spin-ticket-img-wrap{width:min(74vw,300px) !important;}
  .treasure-summary{margin-top:10px !important;padding:12px 12px 14px !important;border-radius:13px !important;}
  .treasure-summary strong{font-size:26px !important;}
  .treasure-summary>button{min-width:98px !important;padding:9px 18px !important;font-size:14px !important;}
  .cashout-note{font-size:14px !important;white-space:normal !important;}
  .cashout-note strong{font-size:22px !important;}
  .invite-spin-btn{font-size:16px !important;padding:12px 12px !important;}
  .spin-record-card{margin-top:10px !important;}
}

/* Spin bonus layout refinement: result spacing + compact mobile amount card */
.lucky-panel.opened{
  justify-content:flex-start !important;
  padding-top:clamp(18px, 5vh, 42px) !important;
  padding-bottom:92px !important;
}
.lucky-panel.opened .lucky-logo-img{
  width:min(82vw, 420px) !important;
  margin-top:0 !important;
  margin-bottom:8px !important;
}
.lucky-panel.opened .lucky-subtitle{
  margin:0 0 10px !important;
}
.lucky-panel.opened .lucky-result{
  padding-top:0 !important;
  padding-bottom:72px !important;
  min-height:0 !important;
}
.lucky-panel.opened .lucky-result-box{
  width:min(38vw, 170px) !important;
  max-width:170px !important;
  margin:12px auto 10px !important;
}
.lucky-panel.opened .lucky-result strong{
  font-size:clamp(24px, 6.2vw, 31px) !important;
  line-height:1.05 !important;
}
.lucky-panel.opened .lucky-close{
  bottom:22px !important;
}

.treasure-summary{
  box-sizing:border-box !important;
}
@media (max-width:520px){
  .lucky-panel.opened{
    padding-top:18px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .lucky-panel.opened .lucky-logo-img{
    width:min(84vw, 360px) !important;
    margin-bottom:8px !important;
  }
  .lucky-panel.opened .lucky-subtitle{
    font-size:22px !important;
    line-height:1.08 !important;
    margin-bottom:6px !important;
  }
  .lucky-panel.opened .lucky-result-box{
    width:min(40vw, 155px) !important;
    margin-top:8px !important;
    margin-bottom:9px !important;
  }
  .lucky-panel.opened .lucky-close{
    width:52px !important;
    height:52px !important;
    bottom:18px !important;
  }

  .spin-side-panel{
    width:100% !important;
    box-sizing:border-box !important;
  }
  .treasure-summary{
    margin:8px 12px 14px !important;
    padding:12px 12px 14px !important;
    border-radius:12px !important;
    grid-template-columns:1fr auto !important;
    gap:6px 10px !important;
    max-width:none !important;
    overflow:visible !important;
  }
  .treasure-summary p{
    font-size:13px !important;
    line-height:1.05 !important;
    margin:0 0 2px !important;
  }
  .treasure-summary strong{
    font-size:27px !important;
    line-height:1.5 !important;
    letter-spacing:-.5px !important;
  }
  .treasure-summary>button{
    min-width:96px !important;
    height:42px !important;
    padding:0 16px !important;
    border-radius:24px !important;
    font-size:14px !important;
    align-self:center !important;
  }
  .treasure-progress{
    height:7px !important;
    margin:4px 0 8px !important;
  }
  .treasure-progress em{
    top:14px !important;
    right:-2px !important;
    font-size:11px !important;
    padding:3px 8px !important;
  }
  .cashout-note{
    font-size:13.5px !important;
    line-height:1.15 !important;
    white-space:normal !important;
  }
  .cashout-note b{
    font-size:14px !important;
  }
  .cashout-note strong{
    font-size:14px !important;
    line-height:1 !important;
    display:inline !important;
    letter-spacing:-.4px !important;
  }
  .invite-spin-btn{
    min-height:50px !important;
    padding:12px 14px !important;
    margin-top:9px !important;
    border-radius:26px !important;
    font-size:16px !important;
    line-height:1.1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    white-space:normal !important;
  }
  .spin-record-card{
    margin:10px 12px 16px !important;
    border-radius:12px !important;
  }
}

@media (max-width:380px){
  .treasure-summary strong{font-size:24px !important;}
  .treasure-summary>button{min-width:88px !important;font-size:13px !important;padding:0 12px !important;}
  .cashout-note{font-size:10px !important;}
  .cashout-note strong{font-size:14px !important;}
  .invite-spin-btn{font-size:14px !important;}
  .lucky-panel.opened .lucky-result-box{width:min(38vw, 140px) !important;}
}


/* ===== Spin button count overlay fix ===== */
.spin-count-pill{display:none !important;}
.spin-ticket-img-wrap{
  position:relative !important;
  display:block !important;
  isolation:isolate !important;
}
.spin-ticket-img-wrap img{
  width:100% !important;
  display:block !important;
  pointer-events:none !important;
}
.spin-button-label{
  position:absolute !important;
  left:50% !important;
  top:22% !important;
  transform:translate(-50%,-50%) skew(-5deg) !important;
  z-index:3 !important;
  pointer-events:none !important;
  white-space:nowrap !important;
  font-size:clamp(25px,8vw,30px) !important;
  line-height:1 !important;
  font-weight:1000 !important;
  font-family:Inter,Arial,sans-serif !important;
  color:#fff4ff !important;
  letter-spacing:-1.5px !important;
  text-shadow:
    -2px -2px 0 #ff5adf,
     2px -2px 0 #ff5adf,
    -2px  2px 0 #ff5adf,
     2px  2px 0 #ff5adf,
     0 4px 0 rgba(127,17,129,.72),
     0 0 16px rgba(255,255,255,.75) !important;
}
.spin-button-label::first-letter{
  color:#ffe248;
  text-shadow:
    -2px -2px 0 #ff4fd8,
     2px -2px 0 #ff4fd8,
    -2px  2px 0 #ff4fd8,
     2px  2px 0 #ff4fd8,
     0 4px 0 rgba(127,17,129,.72),
     0 0 16px rgba(255,231,62,.75);
}
.spin-ticket-img-wrap:active .spin-button-label,
.spin-ticket-img-wrap.pressed .spin-button-label{
  transform:translate(-50%,-43%) skew(-5deg) scale(.96) !important;
}
@media (max-width:520px){
  .spin-ticket-img-wrap{width:min(78vw,310px) !important;margin-top:-8px !important;}
  .spin-button-label{font-size:clamp(28px,9.2vw,38px) !important;top:21.5% !important;}
}
@media (max-width:360px){
  .spin-ticket-img-wrap{width:82vw !important;}
  .spin-button-label{font-size:clamp(24px,8.6vw,28px) !important;}
}

/* ===== Spin header + record/helper tab polish ===== */
.spin-topbar{
  height:60px !important;
  padding:0 14px !important;
  background:linear-gradient(180deg,rgba(42,28,62,.98),rgba(31,21,48,.98)) !important;
  border-bottom:1px solid rgba(191,91,255,.35) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.24) !important;
}
.spin-back{
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  background:transparent !important;
  border:0 !important;
  color:#fff !important;
  font-size:22px !important;
}
.spin-title{
  flex:1 !important;
  text-align:left !important;
  font-size:18px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  color:#fff !important;
  text-shadow:0 2px 6px rgba(0,0,0,.5) !important;
  padding-left:6px !important;
}
.spin-actions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.spin-action-btn,
.spin-actions button,
.spin-actions a{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  text-decoration:none !important;
  color:#fff !important;
  font-size:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 10px rgba(0,0,0,.22) !important;
}
.spin-action-btn:active,
.spin-actions button:active,
.spin-actions a:active{transform:scale(.94) !important;}

.spin-record-card{
  padding:8px !important;
  background:rgba(31,30,43,.92) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
}
.spin-record-tabs{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:6px !important;
  padding:0 !important;
  margin:0 0 8px !important;
}
.spin-record-tabs button{
  height:38px !important;
  border:0 !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.06) !important;
  color:rgba(255,255,255,.58) !important;
  font-weight:900 !important;
}
.spin-record-tabs button.active{
  background:rgba(255,255,255,.12) !important;
  color:#00ff86 !important;
  text-shadow:0 0 8px rgba(0,255,134,.35) !important;
}
.spin-tab-panel{display:none !important;}
.spin-tab-panel.active{display:block !important;}
.spin-record-row,
.spin-helper-row{
  min-height:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)) !important;
}
.spin-record-user,
.spin-helper-row{justify-content:flex-start !important;}
.spin-helper-row div{display:flex;flex-direction:column;gap:3px;color:#fff;}
.spin-helper-row small{color:rgba(255,255,255,.68);font-weight:700;line-height:1.25;}
.spin-record-row strong{color:#fff !important;font-size:15px !important;text-shadow:0 1px 4px rgba(0,0,0,.5) !important;}
@media (max-width:520px){
  .spin-topbar{height:60px !important;padding:0 14px !important;}
  .spin-title{font-size:18px !important;}
  .spin-actions{gap:10px !important;}
  .spin-action-btn,.spin-actions button,.spin-actions a{width:38px !important;height:38px !important;min-width:38px !important;}
}
@media (max-width:360px){
  .spin-title{font-size:16px !important;}
  .spin-action-btn,.spin-actions button,.spin-actions a{width:34px !important;height:34px !important;min-width:34px !important;font-size:16px !important;}
  .spin-actions{gap:7px !important;}
}


/* ===== Spin Rule / Help popup ===== */
body.spin-rule-open{overflow:hidden !important;}
.spin-rule-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:10050 !important;
  background:rgba(8,9,16,.72) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .22s ease !important;
}
.spin-rule-overlay.show{
  opacity:1 !important;
  pointer-events:auto !important;
}
.spin-rule-panel{
  width:min(100%,420px) !important;
  height:100dvh !important;
  margin:0 auto !important;
  background:#1b1c23 !important;
  color:#fff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.55) !important;
  transform:translateX(22px) !important;
  opacity:.3 !important;
  transition:transform .26s cubic-bezier(.2,.85,.2,1),opacity .26s ease !important;
  display:flex !important;
  flex-direction:column !important;
  font-family:Inter,Arial,sans-serif !important;
}
.spin-rule-overlay.show .spin-rule-panel{
  transform:translateX(0) !important;
  opacity:1 !important;
}
.spin-rule-topbar{
  height:52px !important;
  min-height:52px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:0 16px !important;
  background:#1b1c23 !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.spin-rule-back,
.spin-rule-refresh{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  color:#fff !important;
  background:transparent !important;
  font-size:21px !important;
}
.spin-rule-refresh{
  margin-left:auto !important;
  background:rgba(255,255,255,.06) !important;
  font-size:15px !important;
}
.spin-rule-topbar h2{
  margin:0 !important;
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;
}
.spin-rule-content{
  flex:1 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  padding:30px 28px 38px 34px !important;
  font-size:14px !important;
  line-height:1.32 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.9) !important;
}
.spin-rule-content ul{
  margin:0 !important;
  padding-left:16px !important;
}
.spin-rule-content li{
  margin:0 0 4px !important;
  padding-left:2px !important;
}
.spin-rule-content li::marker{color:rgba(255,255,255,.45) !important;}
@media (min-width:721px){
  .spin-rule-overlay{
    display:grid !important;
    place-items:center !important;
    background:rgba(0,0,0,.68) !important;
  }
  .spin-rule-panel{
    height:min(720px,calc(100dvh - 48px)) !important;
    border-radius:18px !important;
    overflow:hidden !important;
    transform:translateY(18px) scale(.98) !important;
  }
  .spin-rule-overlay.show .spin-rule-panel{transform:translateY(0) scale(1) !important;}
}
@media (max-width:420px){
  .spin-rule-panel{width:100vw !important;}
  .spin-rule-content{padding:30px 25px 36px 31px !important;}
}


/* Lucky box asset/effect upgrade */
.lucky-loading-effect{
  display:grid !important;
  place-items:center !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:auto !important;
  gap:0 !important;
  z-index:5 !important;
}
.lucky-loading-effect span{display:none !important;}
.lucky-loading-effect img{
  width:min(68vw,280px) !important;
  height:auto !important;
  display:block !important;
  filter:drop-shadow(0 0 26px rgba(255,80,230,.9)) drop-shadow(0 0 58px rgba(255,40,198,.45)) !important;
  animation:luckyFlashIntro 1.05s ease both !important;
}
@keyframes luckyFlashIntro{
  0%{opacity:0;transform:scale(.35) rotate(-22deg)}
  35%{opacity:1;transform:scale(1.08) rotate(0)}
  100%{opacity:0;transform:scale(1.45) rotate(8deg)}
}
.lucky-box{position:relative !important;overflow:visible !important;}
.lucky-box img{
  content:url('../images/spin/lucky-box-selected.png') !important;
  width:min(178px,40vw) !important;
}
.lucky-box-open-flash{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:min(190px,48vw) !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
  z-index:4 !important;
  filter:drop-shadow(0 0 22px rgba(255,68,224,.9)) !important;
  animation:luckyBoxOpenFlash .78s ease both !important;
}
@keyframes luckyBoxOpenFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-20deg)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.42) rotate(8deg)}
}
.lucky-panel.opened .lucky-result{position:relative !important;}
.lucky-result-flash{
  position:absolute !important;
  left:50% !important;
  top:18% !important;
  width:min(220px,54vw) !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
  z-index:0 !important;
  filter:drop-shadow(0 0 25px rgba(255,73,233,.8)) !important;
  animation:luckyResultFlash 1.15s ease both !important;
}
@keyframes luckyResultFlash{
  0%{opacity:0;transform:translateX(-50%) scale(.45) rotate(-15deg)}
  35%{opacity:.95;transform:translateX(-50%) scale(1.08) rotate(0)}
  100%{opacity:.32;transform:translateX(-50%) scale(1.18) rotate(8deg)}
}
.lucky-result-box{
  content:url('../images/spin/lucky-box-selected.png') !important;
  position:relative !important;
  z-index:1 !important;
}
.lucky-result strong{position:relative !important;z-index:2 !important;}
@media (max-width:430px){
  .lucky-loading-effect img{width:min(72vw,260px) !important;}
  .lucky-box img{width:min(154px,40vw) !important;}
  .lucky-box-open-flash{width:min(170px,48vw) !important;}
}


/* Lucky box reveal sequence fix: closed -> flash -> all boxes open -> selected result */
.lucky-box img{
  content:normal !important;
  object-fit:contain !important;
}
.lucky-box.revealed img{
  width:min(188px,42vw) !important;
  animation:luckyOpenRevealPop .46s ease both !important;
}
.lucky-box-grid .lucky-box-reward-label{
  position:absolute !important;
  left:50% !important;
  bottom:-20px !important;
  transform:translateX(-50%) !important;
  min-width:112px !important;
  text-align:center !important;
  color:#ffd86f !important;
  font-weight:900 !important;
  font-size:clamp(15px,3.8vw,22px) !important;
  line-height:1 !important;
  letter-spacing:.2px !important;
  text-shadow:0 0 12px rgba(255,211,72,.65),0 3px 5px rgba(0,0,0,.85) !important;
  pointer-events:none !important;
  opacity:0 !important;
  animation:luckyRewardLabelIn .42s ease .08s forwards !important;
}
.lucky-box.chosen .lucky-box-reward-label{
  color:#ffe88b !important;
  transform:translateX(-50%) scale(1.08) !important;
}
@keyframes luckyOpenRevealPop{0%{opacity:.35;transform:scale(.82) translateY(8px)}65%{opacity:1;transform:scale(1.07) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes luckyRewardLabelIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.lucky-panel.revealing .lucky-box-grid{
  pointer-events:none !important;
}
.lucky-panel.revealing .lucky-close{
  opacity:.72 !important;
}
.lucky-result-flash{
  opacity:.35 !important;
  mix-blend-mode:screen !important;
}
.lucky-result-box{
  content:normal !important;
}
.lucky-panel.opened .lucky-result-box{
  content:normal !important;
}
.lucky-panel.opened .lucky-box-grid{display:none !important;}
.lucky-panel.opened .lucky-result{display:block !important;}
@media (max-width:430px){
  .lucky-box.revealed img{width:min(165px,43vw) !important;}
  .lucky-box-grid .lucky-box-reward-label{bottom:-16px !important;min-width:98px !important;font-size:clamp(14px,3.65vw,18px) !important;}
  .lucky-panel.revealing .lucky-box-grid{gap:42px 18px !important;}
}

/* Lucky box amount reveal + random result cleanup */
.lucky-box-grid .lucky-box-reward-label{
  min-width:120px !important;
  bottom:-24px !important;
  font-size:clamp(15px,3.7vw,21px) !important;
  white-space:nowrap !important;
}
.lucky-box.revealed img{
  content:normal !important;
}
.lucky-panel.opened .lucky-result-box{
  content:normal !important;
  width:min(190px,46vw) !important;
  margin-top:18px !important;
}
.lucky-panel.opened .lucky-result strong{
  white-space:nowrap !important;
  font-size:clamp(24px,6vw,34px) !important;
}
@media (max-width:430px){
  .lucky-box-grid .lucky-box-reward-label{
    bottom:-19px !important;
    min-width:104px !important;
    font-size:clamp(13px,3.55vw,16px) !important;
  }
  .lucky-panel.revealing .lucky-box-grid{gap:44px 18px !important;}
}


/* FINAL FIX: lucky box reveal must show all 4 amount labels, no duplicate selected box */
.lucky-panel.revealing .lucky-box-grid{
  display:grid !important;
  pointer-events:none !important;
}
.lucky-panel.revealing .lucky-box,
.lucky-box.revealed{
  position:relative !important;
  overflow:visible !important;
  height:150px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  outline:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.lucky-box.revealed img{
  content:url('../images/spin/lucky-box-open-reveal.png') !important;
  width:min(168px,41vw) !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  position:relative !important;
  z-index:1 !important;
  transform:none !important;
}
.lucky-box.selected-result img{
  filter:drop-shadow(0 0 18px rgba(255,217,91,.75)) drop-shadow(0 12px 18px rgba(0,0,0,.45)) !important;
}
.lucky-box-open-flash{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(178px,48vw) !important;
  max-width:none !important;
  pointer-events:none !important;
  z-index:3 !important;
  animation:luckyFlashPop .58s ease both !important;
}
@keyframes luckyFlashPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-20deg)}
  38%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(12deg)}
}
.lucky-box-grid .lucky-box-reward-label{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  width:100% !important;
  min-width:0 !important;
  margin-top:2px !important;
  text-align:center !important;
  white-space:nowrap !important;
  color:#ffd86f !important;
  font-weight:900 !important;
  font-size:clamp(14px,3.55vw,19px) !important;
  line-height:1.05 !important;
  letter-spacing:.2px !important;
  text-shadow:0 0 13px rgba(255,211,72,.78),0 3px 7px rgba(0,0,0,.92) !important;
  pointer-events:none !important;
  z-index:2 !important;
  animation:none !important;
}
.lucky-panel.opened .lucky-box-grid{
  display:none !important;
}
.lucky-panel.opened .lucky-result{
  display:block !important;
}
.lucky-panel.opened .lucky-result-box{
  content:url('../images/spin/lucky-box-selected.png') !important;
  width:min(170px,43vw) !important;
  margin:32px auto 12px !important;
  display:block !important;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(244,88,255,.35)) !important;
}
.lucky-panel.opened .lucky-result strong{
  display:block !important;
  font-size:clamp(25px,6vw,34px) !important;
  color:#ffd86f !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-shadow:0 0 17px rgba(255,210,80,.75),0 3px 8px rgba(0,0,0,.75) !important;
}
@media (max-width:430px){
  .lucky-panel.revealing .lucky-box-grid{gap:30px 18px !important;}
  .lucky-panel.revealing .lucky-box,
  .lucky-box.revealed{height:142px !important;}
  .lucky-box.revealed img{width:min(150px,39vw) !important;}
  .lucky-box-grid .lucky-box-reward-label{font-size:clamp(13px,3.45vw,16px) !important;margin-top:0 !important;}
}

/* FINAL OVERRIDE: consistent lucky reveal boxes + aligned amount labels */
.lucky-panel.revealing .lucky-box-grid{
  width:100% !important;
  max-width:390px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:34px 18px !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
  align-items:start !important;
}
.lucky-panel.revealing .lucky-box,
.lucky-box.revealed,
.lucky-box.revealed.selected-result{
  position:relative !important;
  width:100% !important;
  height:150px !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  overflow:visible !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  transform:none !important;
}
.lucky-box.revealed img,
.lucky-box.revealed.selected-result img{
  content:normal !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  width:min(148px,38vw) !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
  object-fit:contain !important;
  z-index:1 !important;
  animation:none !important;
}
.lucky-box.revealed.selected-result img{
  filter:drop-shadow(0 0 18px rgba(255,217,91,.78)) drop-shadow(0 12px 18px rgba(0,0,0,.45)) !important;
}
.lucky-box-grid .lucky-box-reward-label,
.lucky-box.revealed .lucky-box-reward-label,
.lucky-box.revealed.selected-result .lucky-box-reward-label{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  width:min(136px,36vw) !important;
  min-width:0 !important;
  max-width:100% !important;
  height:18px !important;
  line-height:18px !important;
  margin:0 !important;
  padding:0 8px !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  background:linear-gradient(90deg,rgba(82,38,156,.75),rgba(230,78,225,.65),rgba(82,38,156,.75)) !important;
  color:#ffde70 !important;
  font-weight:900 !important;
  font-size:clamp(12px,3.2vw,15px) !important;
  letter-spacing:.1px !important;
  text-shadow:0 0 9px rgba(255,214,80,.7),0 2px 5px rgba(0,0,0,.85) !important;
  pointer-events:none !important;
  z-index:2 !important;
  animation:none !important;
}
@media (max-width:380px){
  .lucky-panel.revealing .lucky-box-grid{gap:30px 14px !important;padding-left:20px !important;padding-right:20px !important;}
  .lucky-panel.revealing .lucky-box,.lucky-box.revealed{height:140px !important;}
  .lucky-box.revealed img,.lucky-box.revealed.selected-result img{width:min(140px,37vw) !important;}
  .lucky-box-grid .lucky-box-reward-label{width:min(126px,36vw) !important;font-size:clamp(11px,3.05vw,14px) !important;}
}

/* FINAL FIX 2026-07-08: remove duplicate/ghost treasure box behind selected lucky result */
.lucky-panel.opened .lucky-result-flash,
.lucky-panel.opened .lucky-result::before,
.lucky-panel.opened .lucky-result::after{
  display:none !important;
  content:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.lucky-panel.opened .lucky-result-box{
  content:url('../images/spin/lucky-box-open-reveal.png') !important;
  position:relative !important;
  z-index:2 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.lucky-panel.opened .lucky-result strong{
  position:relative !important;
  z-index:3 !important;
}

/* VIP PAGE 2026-07-08 - carousel level upgrade */
body.vip-page{margin:0;min-height:100vh;background:#08090f;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;}
.vip-main{min-height:100vh;background:radial-gradient(circle at 50% 0%,rgba(114,74,34,.35),transparent 34%),linear-gradient(180deg,#171820 0%,#101119 46%,#090a10 100%);}
.vip-topbar{height:50px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#191a22;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;z-index:20;}
.vip-topbar h1{font-size:16px;line-height:1;margin:0;font-weight:900;letter-spacing:.2px;}
.vip-back,.vip-menu{width:32px;height:32px;border:0;background:transparent;color:#fff;border-radius:50%;display:grid;place-items:center;font-size:20px;}
.vip-menu{margin-left:auto;background:rgba(255,255,255,.08);font-size:15px;}
.vip-hero-shell{--vip-side-shift:42%;--vip-side-scale:.74;--vip-far-side-shift:72%;--vip-far-side-scale:.56;position:relative;min-height:260px;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,rgba(255,174,93,.20),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));}
.vip-level-slider{height:252px;position:relative;perspective:900px;touch-action:pan-y;overflow:hidden;--vip-drag-x:0px;}
.vip-level-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateX(calc(105% + var(--vip-drag-x, 0px))) scale(.66);transition:transform .42s ease,opacity .42s ease,filter .42s ease;filter:blur(1px);cursor:pointer;}
.vip-level-card.active{opacity:1;transform:translateX(var(--vip-drag-x, 0px)) scale(1);filter:none;z-index:4;cursor:default;}
.vip-level-card.prev{opacity:.78;transform:translateX(calc((var(--vip-side-shift) * -1) + var(--vip-drag-x, 0px))) scale(var(--vip-side-scale)) rotateY(16deg);z-index:2;}
.vip-level-card.next{opacity:.78;transform:translateX(calc(var(--vip-side-shift) + var(--vip-drag-x, 0px))) scale(var(--vip-side-scale)) rotateY(-16deg);z-index:2;}
.vip-level-card.far-prev{opacity:.24;transform:translateX(calc((var(--vip-far-side-shift) * -1) + var(--vip-drag-x, 0px))) scale(var(--vip-far-side-scale)) rotateY(20deg);z-index:1;}
.vip-level-card.far-next{opacity:.24;transform:translateX(calc(var(--vip-far-side-shift) + var(--vip-drag-x, 0px))) scale(var(--vip-far-side-scale)) rotateY(-20deg);z-index:1;}
.vip-level-slider.dragging .vip-level-card{transition:none!important;}
.vip-level-slider.dragging{cursor:grabbing;}

.vip-orbit{position:absolute;width:320px;height:126px;top:76px;border-radius:50%;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.05);transform:perspective(420px) rotateX(67deg);}
.vip-orbit span{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffd7a2;box-shadow:0 0 12px #ffd7a2;left:50%;bottom:-4px;}
.vip-orbit span:nth-child(2){left:24%;bottom:18px;opacity:.45}.vip-orbit span:nth-child(3){left:76%;bottom:18px;opacity:.45}
.vip-medal{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;font-size:48px;position:relative;z-index:2;filter:drop-shadow(0 16px 20px rgba(0,0,0,.55));}
.vip-medal:before{content:"";position:absolute;inset:8px;border-radius:50%;border:3px solid rgba(255,255,255,.28);box-shadow:inset 0 0 18px rgba(255,255,255,.2);}
.vip-medal.bronze{background:linear-gradient(145deg,#ffe0a7 0%,#a94a10 45%,#ffb15f 72%,#63300e 100%);color:#fff2c4;}
.vip-medal.silver{background:linear-gradient(145deg,#f4fbff,#798696 48%,#d6e8f9);color:#fff;}
.vip-medal.gold{background:linear-gradient(145deg,#fff1a2,#c57400 48%,#ffd24f);color:#fff7b5;}
.vip-medal.platinum{background:linear-gradient(145deg,#ecfbff,#7bd9ff 48%,#dfffff);color:#fff;}
.vip-medal.diamond{background:linear-gradient(145deg,#f0f8ff,#875dff 45%,#62e9ff);color:#fff;}
.vip-level-card h2{font-size:26px;margin:12px 0 0;color:#ffad74;text-shadow:0 0 14px rgba(255,143,83,.45),0 3px 10px #000;font-weight:900;}
.vip-level-card p{font-size:12px;margin:3px 0 0;color:rgba(255,255,255,.65);font-weight:700;}
.vip-slide-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:34px;height:46px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(25,26,34,.72);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(6px);}
.vip-slide-btn:active{transform:translateY(-50%) scale(.94);}
.vip-prev{left:10px}.vip-next{right:10px}
.vip-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:6px;z-index:7;}
.vip-dots button{width:6px;height:6px;border:0;border-radius:50%;background:rgba(255,255,255,.25);padding:0;box-shadow:none;}
.vip-dots button.active{width:28px;border-radius:999px;background:#ffd9aa;box-shadow:0 0 12px rgba(255,188,112,.75);}
.vip-content-wrap{padding:0 10px 28px;max-width:1080px;margin:0 auto;}
.vip-tabs{height:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:3px;margin:0 0 18px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);position:sticky;top:50px;z-index:10;backdrop-filter:blur(10px);}
.vip-tabs button{border:0;border-radius:6px;background:transparent;color:rgba(255,255,255,.58);font-size:12px;font-weight:900;}
.vip-tabs button.active{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
.vip-panel{display:none;}.vip-panel.active{display:block;animation:vipFade .22s ease;}@keyframes vipFade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.vip-progress-card{position:relative;margin:0 0 12px 14px;padding:0 0 12px 0;display:grid;grid-template-columns:1fr auto;align-items:center;color:#ddd;}
.vip-progress-card:before{content:"";position:absolute;left:-12px;top:8px;bottom:-28px;width:2px;background:rgba(255,255,255,.14);}
.vip-progress-card:after{content:"";position:absolute;left:-16px;top:5px;width:8px;height:8px;border-radius:50%;background:#6e7077;}
.vip-progress-card b{font-size:14px;font-weight:900;color:#e7e9ef;font-style:italic;margin-right:8px;}
.vip-progress-card span{font-size:12px;color:#cbd7ee;font-weight:800;}
.vip-progress-card button,.vip-reward-row>button{border:0;border-radius:16px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.52);height:28px;padding:0 10px;font-size:11px;font-weight:900;}
.vip-progress-line{grid-column:1/2;height:4px;border-radius:99px;background:rgba(255,255,255,.09);margin-top:6px;overflow:hidden;max-width:150px;}.vip-progress-line span{display:block;height:100%;background:linear-gradient(90deg,#fff,#ffbd79);border-radius:inherit;}
.vip-level-list{position:relative;margin-left:14px;}.vip-level-list:before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.12);}
.vip-reward-row{position:relative;margin-bottom:22px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;}.vip-timeline-dot{position:absolute;left:-16px;top:8px;width:8px;height:8px;border-radius:50%;background:#6f7178;box-shadow:0 0 0 2px #1a1b22;}
.vip-reward-row h3{margin:0;color:#909096;font-weight:900;font-style:italic;font-size:17px;text-shadow:0 1px 1px #000;}.vip-reward-row h3:after{content:"";display:inline-block;width:16px;height:16px;margin-left:6px;vertical-align:-3px;background:radial-gradient(circle,#fff 0 18%,#84715a 20% 45%,transparent 48%);opacity:.6}.vip-reward-row.active h3{color:#dadde5;}
.vip-reward-box{grid-column:1/3;height:96px;border-radius:9px;background:#282932;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:38px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.vip-coin-stack{width:58px;height:44px;border-radius:13px;background:radial-gradient(circle at 50% 28%,#fff0c7 0 13%,#ffc54b 14% 26%,#7a3f0c 27% 34%,transparent 36%),linear-gradient(180deg,#222,#0d0d12);display:grid;place-items:end center;padding-bottom:4px;color:#ffd76d;font-size:10px;font-weight:1000;font-style:italic;box-shadow:0 7px 16px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.08);margin-bottom:8px;}
.vip-reward-box strong{font-size:12px;font-weight:1000;color:#fff;text-shadow:0 0 8px rgba(85,160,255,.8);}
.vip-perk-grid{display:grid;grid-template-columns:1fr;gap:12px}.vip-perk-grid article,.vip-faq-list details{background:#24252d;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px;color:#cfd6e6;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}.vip-perk-grid i{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#ffb26a,#6738ff);display:grid;place-items:center;margin-bottom:10px;color:#fff}.vip-perk-grid b{display:block;color:#fff;margin-bottom:5px;font-size:15px}.vip-perk-grid span,.vip-faq-list p{font-size:13px;line-height:1.45;color:#bfc6d6}.vip-faq-list{display:grid;gap:10px}.vip-faq-list summary{font-weight:900;color:#fff;cursor:pointer}.vip-faq-list p{margin:10px 0 0}
@media (max-width:420px){.vip-hero-shell{--vip-side-shift:40%;--vip-side-scale:.72;--vip-far-side-shift:70%;--vip-far-side-scale:.52}.vip-prev{left:6px}.vip-next{right:6px}.vip-slide-btn{width:30px;height:42px}.vip-medal{width:98px;height:98px;font-size:44px}.vip-level-card h2{font-size:25px}}
@media (min-width:769px){
  body.vip-page{background:#05070b url('../custom/images/background.png') center/cover fixed no-repeat;}
  .vip-main{min-height:100vh;background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(7,12,22,.40),rgba(0,0,0,.68));padding-bottom:54px;}
  .vip-topbar{height:70px;max-width:1180px;margin:0 auto;top:16px;border-radius:20px;background:linear-gradient(180deg,rgba(21,24,34,.88),rgba(12,13,20,.86));border:1px solid rgba(255,194,118,.20);box-shadow:0 20px 60px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08);padding:0 24px;}
  .vip-topbar h1{font-size:24px}.vip-back,.vip-menu{background:rgba(255,255,255,.08)}
  .vip-hero-shell{max-width:1180px;margin:34px auto 0;border-radius:28px;min-height:390px;background:radial-gradient(circle at 50% 25%,rgba(255,175,89,.22),transparent 28%),linear-gradient(180deg,rgba(23,23,32,.84),rgba(14,15,22,.78));border:1px solid rgba(255,255,255,.10);box-shadow:0 24px 70px rgba(0,0,0,.38);}
  .vip-level-slider{height:360px}.vip-medal{width:150px;height:150px;font-size:66px}.vip-orbit{width:560px;height:190px;top:108px}.vip-level-card h2{font-size:42px}.vip-level-card p{font-size:15px}.vip-hero-shell{--vip-side-shift:36%;--vip-side-scale:.76;--vip-far-side-shift:66%;--vip-far-side-scale:.58}.vip-level-card.prev{opacity:.78}.vip-level-card.next{opacity:.78}.vip-level-card.far-prev{opacity:.22}.vip-level-card.far-next{opacity:.22}.vip-slide-btn{width:44px;height:64px;font-size:18px}.vip-prev{left:24px}.vip-next{right:24px}.vip-dots{bottom:28px}
  .vip-content-wrap{display:block;margin-top:22px;padding:0}.vip-tabs{top:0;position:relative;max-width:640px;margin:0 auto 24px;height:46px;border-radius:14px;background:rgba(255,255,255,.09)}.vip-tabs button{font-size:14px;border-radius:11px}.vip-panel.active{max-width:1180px;margin:0 auto}.vip-panel[data-vip-panel="level"].active{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}.vip-progress-card{margin:0;border-radius:20px;background:rgba(35,37,48,.86);padding:22px;border:1px solid rgba(255,255,255,.08)}.vip-progress-card:before,.vip-progress-card:after,.vip-level-list:before,.vip-timeline-dot{display:none}.vip-progress-line{max-width:none;grid-column:1/3;height:8px}.vip-level-list{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.vip-reward-row{margin:0;background:rgba(35,37,48,.86);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:16px}.vip-reward-box{height:132px;border-radius:16px}.vip-reward-row h3{font-size:19px}.vip-perk-grid{grid-template-columns:repeat(4,1fr)}.vip-faq-list{max-width:900px;margin:0 auto}.vip-perk-grid article,.vip-faq-list details{background:rgba(35,37,48,.86);border-radius:18px;}
}


/* Desktop VIP scroll fix */
@media (min-width: 1024px){
  html, body.vip-page{
    height:auto !important;
    min-height:100vh !important;
    overflow-y:auto !important;
  }
  .vip-main{
    min-height:auto !important;
    overflow:visible !important;
  }
}


/* VIP header follow policies desktop topbar pattern - 2026-07-08 */
@media (min-width:769px){
  body.vip-page .vip-topbar{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    width:100%!important;
    max-width:none!important;
    height:62px!important;
    margin:0!important;
    border-radius:0!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    background:linear-gradient(180deg,rgba(34,43,59,.94),rgba(17,24,36,.94))!important;
    box-shadow:0 10px 28px rgba(0,0,0,.25)!important;
    backdrop-filter:blur(8px)!important;
    box-sizing:border-box!important;
    padding-left:max(18px,calc((100vw - 1120px) / 2))!important;
    padding-right:max(18px,calc((100vw - 1120px) / 2))!important;
  }
  body.vip-page .vip-topbar h1{
    font-size:20px!important;
    font-weight:900!important;
    line-height:1!important;
    margin:0!important;
  }
  body.vip-page .vip-back{
    width:26px!important;
    height:36px!important;
    background:transparent!important;
    border-radius:0!important;
    font-size:24px!important;
  }
  body.vip-page .vip-menu{
    width:34px!important;
    height:34px!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.08)!important;
    font-size:16px!important;
  }
}

/* ===== Premium Setting Dashboard Redesign (desktop + mobile tidy layout) ===== */
body.setting-page{
  background:
    radial-gradient(circle at 18% 12%, rgba(0,198,255,.20), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(149,56,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(2,7,18,.74), rgba(2,7,18,.86)),
    url('../custom/images/background.png') center center/cover no-repeat fixed #020712 !important;
  color:#fff !important;
  overflow-x:hidden !important;
}
body.setting-page .setting-main{
  min-height:calc(100vh - 69px - 57px) !important;
  height:auto !important;
  overflow:visible !important;
  padding:22px 18px 86px !important;
}
body.setting-page .game-glass-card,
body.setting-page .profile-card,
body.setting-page .setting-card,
body.setting-page .setting-mobile-wallet,
body.setting-page .setting-mobile-promos{
  background:linear-gradient(145deg, rgba(9,25,45,.88), rgba(2,8,20,.82)) !important;
  border:1px solid rgba(58,190,255,.24) !important;
  color:#eef9ff !important;
  box-shadow:0 18px 44px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px rgba(0,140,255,.10) !important;
  backdrop-filter:blur(12px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(130%) !important;
}
body.setting-page .profile-card,
body.setting-page .setting-card,
body.setting-page .setting-mobile-wallet{
  border-radius:18px !important;
}
body.setting-page .card-heading h1,
body.setting-page .setting-toggle,
body.setting-page .profile-row strong{
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.34) !important;
}
body.setting-page .card-heading p,
body.setting-page .profile-row span{
  color:#aee8ff !important;
}
body.setting-page .profile-row{
  border-bottom:1px solid rgba(144,218,255,.16) !important;
}
body.setting-page .profile-badge{
  background:linear-gradient(180deg,#ffe783,#f9a40a 58%,#a74f00) !important;
  color:#231100 !important;
  box-shadow:0 0 18px rgba(255,193,37,.52), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
body.setting-page .setting-toggle{
  min-height:70px !important;
  padding:0 24px !important;
  background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.01)) !important;
}
body.setting-page .setting-menu{
  padding:0 18px 18px !important;
}
body.setting-page .setting-item{
  min-height:48px !important;
  border-bottom:1px solid rgba(144,218,255,.13) !important;
  color:#eaf8ff !important;
  border-radius:12px !important;
  margin-top:4px !important;
  padding:0 10px !important;
  transition:transform .18s ease, background .18s ease, border-color .18s ease !important;
}
body.setting-page .setting-item:hover{
  transform:translateX(0) translateY(-1px) !important;
  background:rgba(67,184,255,.10) !important;
  border-color:rgba(67,184,255,.28) !important;
  color:#fff !important;
}
body.setting-page .setting-ico{
  background:linear-gradient(145deg, rgba(0,190,255,.18), rgba(255,175,38,.14)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#ffd66e !important;
}
body.setting-page .setting-item.logout span:nth-child(2){color:#ffb3a9 !important;}

@media (min-width:901px){
  body.setting-page .top-header{position:relative !important; z-index:5 !important;}
  body.setting-page .setting-main{
    padding:26px 24px 44px !important;
  }
  body.setting-page .setting-shell{
    width:min(1240px, calc(100vw - 48px)) !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:minmax(280px,330px) minmax(390px,440px) minmax(330px,390px) !important;
    grid-template-areas:
      "promos profile wallet"
      "promos setting wallet" !important;
    gap:22px !important;
    align-items:start !important;
    justify-content:center !important;
  }
  body.setting-page .setting-mobile-promos{
    grid-area:promos !important;
    display:grid !important;
    gap:14px !important;
    align-content:start !important;
    width:100% !important;
    max-width:none !important;
    padding:14px !important;
    border-radius:20px !important;
    max-height:calc(100vh - 140px) !important;
    overflow-y:auto !important;
    scrollbar-width:thin !important;
  }
  body.setting-page .setting-mobile-promos:before{
    content:'Rewards & Community';
    display:block;
    color:#fff;
    font-weight:900;
    font-size:18px;
    letter-spacing:.2px;
    margin:2px 2px 0;
  }
  body.setting-page .profile-card{
    grid-area:profile !important;
    padding:24px 26px 22px !important;
  }
  body.setting-page .setting-card{
    grid-area:setting !important;
    margin-top:0 !important;
  }
  body.setting-page .setting-mobile-wallet{
    grid-area:wallet !important;
    width:100% !important;
    max-width:none !important;
    padding:14px !important;
    position:sticky !important;
    top:86px !important;
  }
  body.setting-page .setting-kickstart-promo,
  body.setting-page .setting-info-promo{
    margin:0 !important;
    padding:10px !important;
    border-radius:16px !important;
    background:rgba(0,0,0,.20) !important;
    border:1px solid rgba(116,207,255,.16) !important;
  }
  body.setting-page .setting-mobile-promos .bonus-title-img{
    width:100% !important;
    height:30px !important;
    object-fit:contain !important;
    object-position:left center !important;
    margin:0 0 8px !important;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) !important;
  }
  body.setting-page .setting-mobile-promos .bonus-card,
  body.setting-page .setting-mobile-promos .promo-img,
  body.setting-page .setting-mobile-promos .social-image{
    width:100% !important;
    margin:0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }
  body.setting-page .setting-mobile-promos .bonus-card img,
  body.setting-page .setting-mobile-promos .promo-img,
  body.setting-page .setting-mobile-promos .social-image img{
    width:100% !important;
    display:block !important;
    border-radius:14px !important;
    box-shadow:0 10px 22px rgba(0,0,0,.30) !important;
  }
  body.setting-page .setting-mobile-promos .promo-img{
    margin-top:2px !important;
  }
  body.setting-page .setting-mobile-promos .action-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:0 !important;
  }
  body.setting-page .setting-mobile-promos .action-grid .image-action-btn:nth-child(3){
    grid-column:1 / -1 !important;
    width:56% !important;
    justify-self:start !important;
  }
  body.setting-page .setting-mobile-promos .image-action-btn{
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
  }
  body.setting-page .setting-mobile-promos .copy-image{
    width:100% !important;
    display:block !important;
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.35)) !important;
  }
  body.setting-page .setting-wallet-auth .member-welcome-card{
    margin:0 0 16px !important;
  }
  body.setting-page .setting-wallet-balance{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 120px !important;
    gap:14px !important;
    align-items:center !important;
  }
  body.setting-page .setting-wallet-balance .balance-text p{
    color:#eaf8ff !important;
    margin:0 0 9px !important;
    font-size:14px !important;
  }
  body.setting-page .setting-wallet-balance .balance-text h3{
    font-size:27px !important;
    color:#fff200 !important;
    margin:0 0 14px !important;
  }
  body.setting-page .setting-wallet-balance .money-btns{gap:9px !important;}
  body.setting-page .setting-wallet-balance .money-btns img{width:118px !important;}
}

@media (max-width:900px){
  body.setting-page .setting-main{
    padding:16px 12px 84px !important;
  }
  body.setting-page .setting-shell{
    width:100% !important;
    max-width:430px !important;
    gap:14px !important;
  }
  body.setting-page .setting-mobile-wallet{order:1 !important; display:block !important; padding:13px !important; border-radius:18px !important;}
  body.setting-page .profile-card{order:2 !important; padding:20px 18px !important; border-radius:18px !important;}
  body.setting-page .setting-card{order:3 !important; border-radius:18px !important;}
  body.setting-page .setting-mobile-promos{
    order:4 !important;
    display:grid !important;
    gap:12px !important;
    padding:13px !important;
    border-radius:18px !important;
  }
  body.setting-page .setting-mobile-promos:before{
    content:'Rewards & Community';
    color:#fff;
    font-weight:900;
    font-size:17px;
    margin:0 2px;
  }
  body.setting-page .setting-mobile-promos .bonus-title-img{
    width:100% !important;
    height:28px !important;
    object-fit:contain !important;
    object-position:left center !important;
    margin:0 0 6px !important;
  }
  body.setting-page .setting-kickstart-promo,
  body.setting-page .setting-info-promo{
    padding:9px !important;
    border-radius:15px !important;
    background:rgba(0,0,0,.20) !important;
    border:1px solid rgba(116,207,255,.15) !important;
    margin:0 !important;
  }
  body.setting-page .setting-mobile-promos .bonus-card img,
  body.setting-page .setting-mobile-promos .promo-img,
  body.setting-page .setting-mobile-promos .social-image img{
    width:100% !important;
    border-radius:13px !important;
    display:block !important;
  }
  body.setting-page .setting-mobile-promos .promo-img,
  body.setting-page .setting-mobile-promos .social-image{margin:0 !important;}
  body.setting-page .setting-mobile-promos .action-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:0 !important;
  }
  body.setting-page .setting-mobile-promos .action-grid .image-action-btn:nth-child(3){grid-column:1 / -1 !important; width:58% !important;}
  body.setting-page .setting-wallet-balance{
    grid-template-columns:minmax(0,1fr) 118px !important;
  }
  body.setting-page .setting-wallet-balance .money-btns img{width:114px !important;}
  body.setting-page .setting-toggle{min-height:62px !important; padding:0 18px !important; font-size:19px !important;}
  body.setting-page .setting-menu{padding:0 12px 14px !important;}
}

@media (max-width:420px){
  body.setting-page .setting-wallet-balance{grid-template-columns:1fr !important;}
  body.setting-page .setting-wallet-balance .money-btns{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important;
  }
  body.setting-page .setting-wallet-balance .money-btns img{width:100% !important;}
}

/* ===== Setting page dashboard v2: clean premium layout + dynamic bonus API ===== */
body.setting-page .setting-main{
  padding:18px 16px 86px!important;
}
body.setting-page .setting-dashboard-shell{
  width:min(1180px, calc(100vw - 32px))!important;
  max-width:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:18px!important;
  margin:0 auto!important;
}
body.setting-page .setting-dashboard-grid{
  display:grid!important;
  grid-template-columns:1fr 1.05fr 1.8fr!important;
  gap:14px!important;
  align-items:stretch!important;
}
body.setting-page .setting-detail-grid{
  display:grid!important;
  grid-template-columns:minmax(360px, 1fr) minmax(360px, 1fr)!important;
  gap:14px!important;
  align-items:start!important;
}
body.setting-page .setting-quick-card,
body.setting-page .setting-profile-summary,
body.setting-page .setting-wallet-card,
body.setting-page .setting-bonus-panel,
body.setting-page .profile-card,
body.setting-page .setting-card{
  border-radius:14px!important;
  background:linear-gradient(145deg, rgba(9, 25, 45, .88), rgba(2, 8, 20, .82)) !important;;
  border:1px solid rgba(118,94,255,.25)!important;
  box-shadow:0 14px 35px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(12px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(135%)!important;
}
body.setting-page .setting-wallet-card{
  position:relative!important;
  overflow:hidden!important;
}
body.setting-page .setting-wallet-card:after{
  content:'';
  position:absolute;
  right:-38px;
  top:-42px;
  width:210px;
  height:180px;
  background:radial-gradient(circle, rgba(145,56,255,.48), rgba(0,225,255,.16) 42%, transparent 72%);
  filter:blur(4px);
  opacity:.75;
  pointer-events:none;
}
body.setting-page .setting-panel-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:14px!important;
  color:#fff!important;
  text-transform:uppercase!important;
  letter-spacing:.6px!important;
  font-size:11px!important;
  font-weight:900!important;
}
body.setting-page .setting-panel-head em{
  min-width:28px!important;
  height:18px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  font-style:normal!important;
  color:#3b1900!important;
  font-size:9px!important;
  background:linear-gradient(180deg,#ffe680,#ffb015)!important;
  box-shadow:0 0 12px rgba(255,188,31,.45)!important;
}
body.setting-page .setting-quick-card,
body.setting-page .setting-profile-summary,
body.setting-page .setting-wallet-card{
  padding:16px!important;
  min-height:158px!important;
}
body.setting-page .setting-quick-grid{
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  gap:10px!important;
}
body.setting-page .setting-quick-action{
  min-height:66px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border-radius:10px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03))!important;
  color:#fff!important;
  cursor:pointer!important;
  transition:transform .16s ease, border-color .16s ease, background .16s ease!important;
}
body.setting-page .setting-quick-action:hover{transform:translateY(-2px)!important;border-color:rgba(185,130,255,.45)!important;background:rgba(112,65,255,.15)!important;}
body.setting-page .setting-quick-action b{font-size:11px!important;line-height:1!important;}
body.setting-page .setting-quick-icon{
  width:28px!important;height:28px!important;border-radius:9px!important;display:grid!important;place-items:center!important;font-size:14px!important;
  box-shadow:0 8px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18)!important;
}
body.setting-page .setting-quick-icon.purple{background:linear-gradient(145deg,#9d37ff,#6224de)!important;color:#ffdcff!important;}
body.setting-page .setting-quick-icon.blue{background:linear-gradient(145deg,#2c8cff,#1a3dc8)!important;color:#dff6ff!important;}
body.setting-page .setting-quick-icon.cyan{background:linear-gradient(145deg,#2bd7ff,#5b37ff)!important;color:#fff!important;}
body.setting-page .setting-quick-icon.pink{background:linear-gradient(145deg,#d547ff,#7338ff)!important;color:#fff!important;}
body.setting-page .setting-profile-mini{display:flex!important;align-items:center!important;gap:14px!important;min-height:72px!important;}
body.setting-page .setting-profile-avatar{
  width:58px!important;height:58px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  background:radial-gradient(circle at 35% 28%, #ffcf6a, #a84403 64%, #3d1000)!important;
  border:1px solid rgba(255,202,78,.55)!important;color:#fff!important;font-size:30px!important;font-weight:900!important;
  box-shadow:0 0 18px rgba(255,123,0,.36), inset 0 1px 0 rgba(255,255,255,.32)!important;
}
body.setting-page .setting-profile-mini h2{margin:0 0 5px!important;color:#fff!important;font-size:21px!important;line-height:1!important;}
body.setting-page .setting-profile-mini p{margin:2px 0!important;color:#c8d4ee!important;font-size:12px!important;}
body.setting-page .setting-profile-mini i{width:14px!important;color:#cfc8ff!important;}
body.setting-page .setting-view-profile{
  height:38px!important;border-radius:9px!important;margin-top:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
  background:linear-gradient(90deg, rgba(113,52,255,.58), rgba(57,37,112,.72))!important;color:#fff!important;text-decoration:none!important;font-size:12px!important;font-weight:900!important;
}
body.setting-page .setting-wallet-hero{position:relative!important;z-index:1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:12px!important;}
body.setting-page .setting-wallet-hero p{margin:0 0 4px!important;color:#ffcf5c!important;font-size:12px!important;font-weight:900!important;text-transform:uppercase!important;}
body.setting-page .setting-wallet-hero h2{margin:0!important;color:#ffe300!important;font-size:30px!important;line-height:1!important;text-shadow:0 0 18px rgba(255,216,0,.30)!important;}
body.setting-page .setting-wallet-glow{width:72px!important;height:58px!important;border-radius:14px!important;display:grid!important;place-items:center!important;color:#ffce5d!important;font-size:28px!important;background:linear-gradient(145deg, rgba(116,38,255,.40), rgba(255,151,0,.12))!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 0 25px rgba(142,61,255,.38)!important;}
body.setting-page .setting-wallet-actions{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin-bottom:10px!important;}
body.setting-page .setting-wallet-actions button{height:34px!important;border:0!important;border-radius:8px!important;background:linear-gradient(180deg,#7e35ff,#4821a5)!important;color:#fff!important;font-weight:900!important;font-size:12px!important;cursor:pointer!important;box-shadow:0 8px 16px rgba(47,24,112,.42)!important;}
body.setting-page .setting-wallet-actions button:nth-child(2),
body.setting-page .setting-wallet-limits{position:relative!important;z-index:1!important;display:flex!important;gap:18px!important;flex-wrap:wrap!important;}
body.setting-page .setting-wallet-limits p{margin:0!important;color:#dbe5ff!important;font-size:12px!important;font-weight:700!important;}
body.setting-page .setting-wallet-limits b{color:#fff!important;}
body.setting-page .setting-auth-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;}
body.setting-page .setting-detail-grid .profile-card{padding:18px 20px!important;}
body.setting-page .setting-detail-grid .setting-card{overflow:hidden!important;}
body.setting-page .setting-toggle{min-height:58px!important;padding:0 20px!important;font-size:18px!important;background:transparent!important;}
body.setting-page .setting-menu{padding:0 14px 14px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
body.setting-page .setting-item{margin:0!important;min-height:44px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:10px!important;}
body.setting-page .setting-bonus-panel{padding:18px!important;}
body.setting-page .setting-bonus-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin-bottom:12px!important;}
body.setting-page .setting-bonus-head span{display:block!important;color:#fff!important;font-size:20px!important;font-weight:900!important;}
body.setting-page .setting-bonus-head p{margin:3px 0 0!important;color:#b9c7ef!important;font-size:12px!important;}
body.setting-page .setting-bonus-head a{height:34px!important;padding:0 14px!important;display:flex!important;align-items:center!important;gap:8px!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;color:#fff!important;text-decoration:none!important;font-size:12px!important;font-weight:900!important;border:1px solid rgba(255,255,255,.10)!important;white-space:nowrap!important;}
body.setting-page .setting-bonus-container .bonus-section{margin:0 0 18px!important;}
body.setting-page .setting-bonus-container .bonus-section:last-child{margin-bottom:0!important;}
body.setting-page .setting-bonus-container .bonus-title-img{max-height:42px!important;object-fit:contain!important;object-position:left center!important;margin:0 0 10px!important;}
body.setting-page .setting-bonus-container .bonus-grid{gap:12px!important;}
body.setting-page .setting-bonus-container .bonus-card{border-radius:12px!important;overflow:hidden!important;box-shadow:0 12px 26px rgba(0,0,0,.28)!important;}
body.setting-page .setting-bonus-container .bonus-card img{border-radius:12px!important;display:block!important;width:100%!important;}
body.setting-page .setting-mobile-promos,
body.setting-page .setting-mobile-wallet{display:none!important;}

@media (max-width:900px){
  body.setting-page .setting-main{padding:14px 12px 84px!important;}
  body.setting-page .setting-dashboard-shell{width:100%!important;max-width:430px!important;gap:14px!important;}
  body.setting-page .setting-dashboard-grid{grid-template-columns:1fr!important;gap:12px!important;}
  body.setting-page .setting-wallet-card{order:1!important;}
  body.setting-page .setting-profile-summary{order:2!important;}
  body.setting-page .setting-quick-card{order:3!important;}
  body.setting-page .setting-detail-grid{grid-template-columns:1fr!important;gap:12px!important;}
  body.setting-page .setting-wallet-card,
  body.setting-page .setting-profile-summary,
  body.setting-page .setting-quick-card{padding:14px!important;min-height:auto!important;border-radius:17px!important;}
  body.setting-page .setting-wallet-hero h2{font-size:28px!important;}
  body.setting-page .setting-wallet-actions{gap:7px!important;}
  body.setting-page .setting-wallet-actions button{font-size:11px!important;padding:0 6px!important;}
  body.setting-page .setting-wallet-limits{gap:6px!important;display:block!important;}
  body.setting-page .setting-wallet-limits p{margin-top:5px!important;}
  body.setting-page .setting-quick-grid{grid-template-columns:repeat(4,1fr)!important;gap:7px!important;}
  body.setting-page .setting-quick-action{min-height:64px!important;padding:7px 4px!important;}
  body.setting-page .setting-quick-action b{font-size:10px!important;}
  body.setting-page .setting-profile-mini h2{font-size:20px!important;}
  body.setting-page .setting-detail-grid .profile-card{padding:17px 16px!important;}
  body.setting-page .setting-menu{grid-template-columns:1fr!important;}
  body.setting-page .setting-bonus-panel{padding:14px!important;border-radius:17px!important;}
  body.setting-page .setting-bonus-head span{font-size:18px!important;}
  body.setting-page .setting-bonus-container .bonus-title-img{max-height:34px!important;}
}
@media (max-width:380px){
  body.setting-page .setting-quick-grid{grid-template-columns:repeat(2,1fr)!important;}
  body.setting-page .setting-wallet-actions{grid-template-columns:1fr!important;}
}

/* ===== Setting dashboard desktop row + scroll fix (desktop only) ===== */
@media (min-width:901px){
  html,
  body.setting-page{
    height:auto !important;
    min-height:100vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  body.setting-page .setting-main{
    min-height:auto !important;
    height:auto !important;
    overflow:visible !important;
    padding:22px 24px 72px !important;
  }
  body.setting-page .setting-dashboard-shell{
    width:min(1180px, calc(100vw - 48px)) !important;
    max-width:none !important;
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    margin:0 auto !important;
    overflow:visible !important;
  }
  body.setting-page .setting-dashboard-grid{
    display:grid !important;
    grid-template-columns:minmax(230px,.75fr) minmax(250px,.85fr) minmax(390px,1.35fr) !important;
    gap:14px !important;
    align-items:stretch !important;
  }
  body.setting-page .setting-detail-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:14px !important;
    align-items:stretch !important;
    width:100% !important;
    overflow:visible !important;
  }
  body.setting-page .setting-detail-grid .profile-card,
  body.setting-page .setting-detail-grid .setting-card{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    grid-column:auto !important;
    grid-row:auto !important;
  }
  body.setting-page .setting-detail-grid .profile-card{
    min-height:260px !important;
  }
  body.setting-page .setting-detail-grid .setting-card{
    align-self:start !important;
  }
  body.setting-page .setting-bonus-panel{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    overflow:visible !important;
  }
}

/* ===== Setting image buttons final fix ===== */
body.setting-page .setting-referral-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:center!important;
}
body.setting-page .setting-image-action{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  line-height:0!important;
  cursor:pointer!important;
  text-decoration:none!important;
  border-radius:8px!important;
  overflow:visible!important;
  transition:transform .16s ease, filter .16s ease!important;
}
body.setting-page .setting-image-action:hover{transform:translateY(-1px)!important;filter:brightness(1.08) drop-shadow(0 0 8px rgba(109,255,142,.16))!important;}
body.setting-page .setting-image-action img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
body.setting-page .setting-wallet-image-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
body.setting-page .setting-wallet-image-actions button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.setting-page .setting-wallet-image-actions button img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
@media(max-width:900px){
  body.setting-page .setting-referral-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
  body.setting-page .setting-image-action{height:36px!important;min-height:36px!important;}
  body.setting-page .setting-wallet-image-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}

/* ===== Final fix: provider rail and game grid are two independent scroll areas ===== */
.provider-lobby-shell{
    height:var(--provider-lobby-height, calc(100dvh - 210px))!important;
    min-height:0!important;
    max-height:none!important;
    align-items:stretch!important;
    overflow:hidden!important;
}
.provider-side-rail,
.provider-games-panel{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scroll-behavior:auto!important;
    scrollbar-gutter:stable;
}
.provider-side-rail{
    align-self:stretch!important;
    justify-content:flex-start!important;
    padding-top:0!important;
    margin-top:0!important;
}
.provider-side-rail .provider-rail-card{
    flex:0 0 auto!important;
}
.provider-games-panel{
    align-self:stretch!important;
}
.provider-games-list,
.direct-games-list{
    align-content:start!important;
}

/* The page itself must not take over swipes while the lobby is active. */
body.provider-lobby-active{
    overflow:hidden!important;
    height:100dvh!important;
}
body.provider-lobby-active .center-content{
    min-height:0!important;
    overflow:hidden!important;
}

@media (max-width:768px){
    .provider-lobby-shell{
        height:var(--provider-lobby-height, calc(100dvh - 170px))!important;
    }
    .provider-side-rail,
    .provider-games-panel{
        height:100%!important;
        max-height:none!important;
    }
}


.game-card{
 content-visibility:auto;
 contain-intrinsic-size:180px 220px;
}
.provider-games-list,.direct-games-list{
 will-change:scroll-position;
}

/* ===== Progressive game rendering / infinite batch loading ===== */
.game-load-sentinel{
  grid-column:1 / -1;
  width:100%;
  height:2px;
  pointer-events:none;
  visibility:hidden;
}
.provider-games-list,
.direct-games-list{
  contain:layout style;
}
.game-card{
  contain:layout paint style;
}


/* Game list loading indicator */
.games-loading-indicator{
  grid-column:1 / -1;
  width:100%;
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.games-loading-spinner{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:#35f486;
  border-radius:50%;
  animation:gamesLoadingSpin .65s linear infinite;
  will-change:transform;
}
@keyframes gamesLoadingSpin{
  to{transform:rotate(360deg)}
}
@media (max-width:768px){
  .games-loading-indicator{min-height:120px}
  .games-loading-spinner{width:34px;height:34px;flex-basis:34px}
}
@media (prefers-reduced-motion:reduce){
  .games-loading-spinner{animation-duration:1.4s}
}

/* ===== Natural whole-site page loading ===== */
/* Navigation is immediate. Only the newly loaded page receives a very soft
   opacity reveal, with no translate/scale movement and no outgoing delay. */
@view-transition{
  navigation:auto;
}
::view-transition-old(root){
  animation:none;
}
::view-transition-new(root){
  animation:nagaNaturalReveal .14s ease-out both;
}

html{
  background:#070707;
}
html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147483646;
  pointer-events:none;
  background:#070707;
  opacity:0;
  visibility:hidden;
}
html.page-loading::before{
  opacity:1;
  visibility:visible;
}
html.page-loaded::before{
  opacity:0;
  visibility:hidden;
  transition:opacity .14s ease-out,visibility 0s linear .14s;
}

/* Spinner appears only when the new document really takes longer to become ready. */
html::after{
  content:"";
  position:fixed;
  top:50%;
  left:50%;
  z-index:2147483647;
  width:34px;
  height:34px;
  margin:-17px 0 0 -17px;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:#35f486;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}
html.page-loading::after{
  visibility:visible;
  animation:nagaDelayedSpinner .65s linear .28s infinite;
}

html.page-loading body{
  opacity:0;
}
html.page-loaded body{
  opacity:1;
  transition:opacity .14s ease-out;
}
html.page-leaving body{
  opacity:1;
  transform:none;
}

@keyframes nagaDelayedSpinner{
  0%{opacity:0;transform:rotate(0deg)}
  1%{opacity:1}
  100%{opacity:1;transform:rotate(360deg)}
}
@keyframes nagaNaturalReveal{
  from{opacity:.94}
  to{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-new(root){animation-duration:.01ms}
  html.page-loaded body,
  html.page-loaded::before{transition-duration:.01ms!important}
}

/* ===== Final lobby bottom visibility + themed scrollbar ===== */
.provider-side-rail,
.provider-games-panel{
  box-sizing:border-box!important;
  scroll-padding-bottom:36px!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(53,244,134,.72) rgba(8,14,24,.42)!important;
}
.provider-side-rail::-webkit-scrollbar,
.provider-games-panel::-webkit-scrollbar{
  display:block!important;
  width:7px!important;
  height:7px!important;
}
.provider-side-rail::-webkit-scrollbar-track,
.provider-games-panel::-webkit-scrollbar-track{
  background:rgba(8,14,24,.42)!important;
  border-radius:999px!important;
}
.provider-side-rail::-webkit-scrollbar-thumb,
.provider-games-panel::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(53,244,134,.92),rgba(20,160,112,.78))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:999px!important;
}
.provider-side-rail::-webkit-scrollbar-thumb:hover,
.provider-games-panel::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#58ff9c,#20c786)!important;
}
.provider-games-panel{
  padding-bottom:0!important;
}
.provider-games-list,
.direct-games-list{
  box-sizing:border-box!important;
  padding-bottom:0!important;
}
.provider-games-list::after,
.direct-games-list::after{
  content:"";
  display:block;
  grid-column:1 / -1;
  width:100%;
  height:34px;
  pointer-events:none;
}
.provider-side-rail::after{
  content:"";
  display:block;
  flex:0 0 20px;
  width:100%;
  pointer-events:none;
}

@media (max-width:768px){
  .provider-side-rail,
  .provider-games-panel{
    scroll-padding-bottom:28px!important;
    scrollbar-width:none!important;
  }
  .provider-side-rail::-webkit-scrollbar,
  .provider-games-panel::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  .provider-games-list::after,
  .direct-games-list::after{height:28px;}
  .provider-side-rail::after{flex-basis:16px;}
}


/* Remove header translate button on desktop and mobile */
.top-header .lang-btn,
.top-header .top-lang-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ===== v1.0.45: index.html mobile viewport lock ===== */
@media (max-width:768px){
  html:has(body.home-page){
    height:100%;
    height:100dvh;
    overflow:hidden!important;
    overscroll-behavior:none;
  }
  body.home-page{
    width:100%;
    height:100%;
    height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
    overscroll-behavior:none;
    touch-action:none;
  }
  body.home-page .main-layout{
    min-height:0!important;
    overflow:hidden!important;
  }
  body.home-page .provider-side-rail,
  body.home-page .provider-games-panel{
    touch-action:pan-y!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

/* Mobile sidebar: standardized Font Awesome <i> icons */
.mobile-menu-list .mobile-menu-icon{
    width:38px;
    flex:0 0 38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    line-height:1;
    color:#ffffff;
    text-align:center;
}
.mobile-menu-list .mobile-menu-arrow{
    margin-left:auto;
    flex:0 0 auto;
    font-size:22px;
    color:rgba(255,255,255,.45);
}
.mobile-menu-list a span,
.mobile-menu-list button span{
    min-width:0;
}

/* ===== v1.0.47: responsive larger mobile bottom navigation ===== */
@media (max-width:768px){
  :root{
    --mobile-bottom-nav-height:clamp(62px,16vw,70px);
  }

  .bottom-nav{
    height:var(--mobile-bottom-nav-height)!important;
    min-height:var(--mobile-bottom-nav-height)!important;
    flex:0 0 var(--mobile-bottom-nav-height)!important;
    padding:0 clamp(3px,1.5vw,8px)!important;
    box-sizing:border-box!important;
  }

  .bottom-nav a{
    width:20%!important;
    min-width:0!important;
    height:100%!important;
    padding:clamp(3px,1vw,6px) clamp(1px,.7vw,4px)!important;
    box-sizing:border-box!important;
  }

  .bottom-nav a img{
    width:clamp(49px,14.5vw,62px)!important;
    max-width:100%!important;
    max-height:calc(var(--mobile-bottom-nav-height) - 8px)!important;
    height:auto!important;
    object-fit:contain!important;
  }

  body:not(.home-page){
    padding-bottom:var(--mobile-bottom-nav-height)!important;
  }

  body.home-page .main-layout{
    height:calc(100dvh - 69px - var(--mobile-bottom-nav-height))!important;
    max-height:calc(100dvh - 69px - var(--mobile-bottom-nav-height))!important;
  }

  body.chat-page{
    --chat-nav-h:var(--mobile-bottom-nav-height);
  }
}

@media (max-width:360px){
  :root{
    --mobile-bottom-nav-height:62px;
  }
  .bottom-nav a img{
    width:clamp(46px,14vw,52px)!important;
  }
}

/* ===== v1.0.48: mobile home full-width banner + tighter category spacing ===== */
@media (max-width:768px){
  body.home-page .mobile-top-area{
    width:100vw!important;
    max-width:100vw!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  body.home-page .mobile-top-area .side-slider{
    width:100vw!important;
    max-width:100vw!important;
    margin:0!important;
    border-radius:0!important;
  }

  body.home-page .mobile-top-area .side-slider,
  body.home-page .mobile-top-area .side-slider .slide,
  body.home-page .mobile-top-area .side-slider img{
    border-radius:0!important;
  }

  body.home-page .center-content{
    padding-top:3px!important;
  }

  body.home-page .category-slider{
    margin-top:0!important;
    margin-bottom:4px!important;
  }

  body.home-page .category-row{
    padding-top:15px!important;
    padding-bottom:7px!important;
  }
}

/* ===== v1.0.49: eliminate banner refresh flash ===== */
.side-slider{
  background-color:transparent !important;
  background-image:none !important;
  filter:none !important;
  isolation:isolate;
}
.side-slider .slider-track{
  background:transparent !important;
  box-shadow:none !important;
}
.side-slider .slide{
  display:block;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}
.side-slider:not(.slider-ready){
  visibility:hidden;
}

/* ===== BO Layout Section: image-based Login / Register controls ===== */
.top-auth-actions .auth-image-link,
.mobile-menu-auth .auth-image-link{
  padding:0 !important;
  overflow:hidden;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  line-height:0;
}
.top-auth-actions .header-auth-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.mobile-menu-auth .sidebar-auth-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.top-auth-actions .top-login-btn.auth-image-link,
.top-auth-actions .top-register-btn.auth-image-link{
  min-width:104px;
  height:40px;
}
.mobile-menu-auth .mobile-login-btn.auth-image-link,
.mobile-menu-auth .mobile-register-btn.auth-image-link{
  width:104px;
  height:36px;
}
@media (max-width:420px){
  .top-auth-actions .top-login-btn.auth-image-link,
  .top-auth-actions .top-register-btn.auth-image-link{
    min-width:78px !important;
    height:36px;
  }
  .mobile-menu-auth .mobile-login-btn.auth-image-link,
  .mobile-menu-auth .mobile-register-btn.auth-image-link{
    width:96px;
    height:34px;
  }
}

/* ===== v1.0.59: iPhone auth spacing + simplified setting page ===== */
body.setting-page .setting-single-column-layout{
  width:min(1180px, calc(100vw - 32px))!important;
  max-width:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  margin:0 auto!important;
}
body.setting-page .setting-single-column-layout > .setting-wallet-card,
body.setting-page .setting-single-column-layout > .setting-merged-profile,
body.setting-page .setting-single-column-layout > .setting-card{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
body.setting-page .setting-merged-profile{
  padding:18px 20px!important;
}
body.setting-page .setting-profile-mini-merged{
  position:relative!important;
  padding:0 62px 16px 0!important;
  margin-bottom:16px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
body.setting-page .setting-profile-mini-merged .profile-badge{
  position:absolute!important;
  top:0!important;
  right:0!important;
}
body.setting-page .setting-merged-profile-heading{
  margin-bottom:8px!important;
}
body.setting-page .setting-menu{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
@media (max-width:900px){
  body.setting-page .setting-single-column-layout{
    width:100%!important;
    max-width:430px!important;
    gap:12px!important;
  }
  body.setting-page .setting-merged-profile{
    padding:17px 16px!important;
  }
  body.setting-page .setting-profile-mini-merged{
    padding-right:54px!important;
  }
  body.setting-page .setting-menu{
    grid-template-columns:1fr!important;
  }
}
@media (max-width:480px){
  .top-auth-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:20px!important;
    column-gap:20px!important;
  }
  .top-auth-actions .top-login-btn.auth-image-link,
  .top-auth-actions .top-register-btn.auth-image-link{
    margin:0!important;
    padding:0!important;
    min-width:0!important;
    width:auto!important;
    height:36px!important;
    flex:0 0 auto!important;
  }
  .top-auth-actions .header-auth-image{
    width:auto!important;
    max-width:88px!important;
    height:36px!important;
    margin:0!important;
  }
}

/* ===== v1.0.60: restore compact desktop width for simplified Setting page ===== */
@media (min-width:901px){
  body.setting-page .setting-main{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  body.setting-page .setting-single-column-layout{
    width:min(620px, calc(100vw - 36px))!important;
    max-width:620px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body.setting-page .setting-single-column-layout > .setting-wallet-card,
  body.setting-page .setting-single-column-layout > .setting-merged-profile,
  body.setting-page .setting-single-column-layout > .setting-card{
    width:100%!important;
    max-width:620px!important;
  }
}


/* ===== v1.0.61: logged-in iPhone header + aligned referral action row ===== */
body.member-logged-in .top-auth-actions{display:none!important;}
body.member-logged-in .top-member-actions{display:flex!important;}
body.setting-page .setting-wallet-referral-actions{
  margin-top:8px!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
body.setting-page .setting-wallet-image-actions > button{
  width:100%!important;
  min-width:0!important;
}
body.setting-page .setting-wallet-referral-actions > button img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
@media(max-width:480px){
  body.member-logged-in .top-auth-actions{display:none!important;}
  body.member-logged-in .top-member-actions{display:flex!important;}
  body.setting-page .setting-wallet-image-actions,
  body.setting-page .setting-wallet-referral-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body.setting-page .setting-wallet-image-actions button,
  body.setting-page .setting-wallet-referral-actions button{
    height:38px!important;
    min-height:38px!important;
  }
}


/* ===== v1.0.62: iPhone guest auth images with no visual gap ===== */
@media (max-width:480px){
  .top-header-actions > .top-auth-actions{
    gap:20px!important;
    column-gap:20px!important;
    margin:0!important;
  }
  .top-header-actions > .top-auth-actions > .top-login-btn.auth-image-link,
  .top-header-actions > .top-auth-actions > .top-register-btn.auth-image-link{
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .top-header-actions > .top-auth-actions > .top-register-btn.auth-image-link{
    margin-left:-6px!important;
  }
  .top-header-actions > .top-auth-actions .header-auth-image{
    display:block!important;
    margin:0!important;
    padding:0!important;
  }
}

.top-auth-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  column-gap: 14px;
  margin: 0;
}

.top-auth-actions .auth-image-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  overflow: hidden;
}

.top-auth-actions .header-auth-image {
  display: block;
  width: auto;
  max-width: 88px;
  height: 36px;
  margin: 0;
  padding: 0;
  object-fit: contain;
}

.top-auth-actions .top-register-btn {
  margin-left: -6px;
}

body.member-logged-in .top-auth-actions {
  display: none !important;
}


/* ===== v1.0.64: deposit / withdraw full-page scrolling =====
   These transaction pages can be taller than the viewport. Override the
   lobby-only viewport lock so every field and action remains reachable while
   keeping the bottom navigation fixed. */
html.transaction-scroll-page{
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
}
html.transaction-scroll-page body.deposit-page,
html.transaction-scroll-page body.withdraw-page{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    padding-bottom:57px!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
}
html.transaction-scroll-page body.deposit-page .deposit-main,
html.transaction-scroll-page body.withdraw-page .withdraw-main{
    width:100%!important;
    height:auto!important;
    min-height:calc(100vh - 69px - 57px)!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:100px!important;
}
html.transaction-scroll-page body.deposit-page .bottom-nav,
html.transaction-scroll-page body.withdraw-page .bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    z-index:1000!important;
}
@media(max-width:768px){
    html.transaction-scroll-page body.deposit-page,
    html.transaction-scroll-page body.withdraw-page{
        padding-bottom:var(--mobile-bottom-nav-height,70px)!important;
        background-attachment:scroll!important;
    }
    html.transaction-scroll-page body.deposit-page .deposit-main,
    html.transaction-scroll-page body.withdraw-page .withdraw-main{
        min-height:calc(100dvh - 69px - var(--mobile-bottom-nav-height,70px))!important;
        padding-bottom:calc(var(--mobile-bottom-nav-height,70px) + 28px)!important;
    }
}


/* ===== Fix: settings section collapse toggle ===== */
body.setting-page .setting-toggle i{
  pointer-events:none!important;
  transform:rotate(180deg)!important;
}
body.setting-page .setting-card.open .setting-toggle i{
  transform:rotate(0deg)!important;
}
body.setting-page .setting-menu{
  display:none!important;
}
body.setting-page .setting-card.open .setting-menu{
  display:grid!important;
  animation:settingDrop .24s ease-out;
}


/* BO-controlled homepage bonus display */
html.home-bonus-disabled [data-home-bonus-display],
body.home-bonus-disabled [data-home-bonus-display] {
  display: none !important;
}

/* BO Layout Section targets for complete Login and Register page content. */
/* body.login-page .auth-page-layout-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
body.login-page .auth-page-layout-section > .login-card {
  width: 100%;
} */


/* Login/Register BO layout message compatibility */
body.login-page .login-form .auth-message {
  display:block;
  width:100%;
  min-height:0;
  margin:8px 0 0;
  padding:0 4px;
  box-sizing:border-box;
  font-size:12px;
  line-height:1.4;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}
body.login-page .login-form .auth-message:empty,
body.login-page .login-form .auth-message[hidden] { display:none !important; }
body.login-page .login-form .auth-message.error { color:#ff4d5e !important; }
body.login-page .login-form .auth-message.success { color:#20c96b !important; }


/* Category-driven provider selection and mixed provider/game landing */
.category-mixed-shell{display:flex;flex-direction:column;gap:18px;width:100%;min-width:0}
.category-provider-section,.category-direct-section{min-width:0}
.category-section-title{font-weight:800;margin:0 0 10px;color:inherit}
.category-provider-cards{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.category-provider-cards::-webkit-scrollbar{display:none}
.category-provider-card{flex:0 0 150px;min-height:150px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(15,15,15,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:12px;color:#fff;cursor:pointer;overflow:hidden}
.category-provider-card img{width:100%;height:105px;object-fit:contain;border-radius:12px}
.category-provider-card .provider-letter{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);font-weight:900;font-size:26px}
.category-provider-card span:last-child{font-weight:800;text-align:center;line-height:1.2}
@media(max-width:768px){.category-mixed-shell{gap:14px}.category-provider-cards{gap:10px}.category-provider-card{flex-basis:128px;min-height:130px;padding:9px}.category-provider-card img{height:88px}}


/* v1.0.72: immediate home lobby placeholders while early API bootstrap runs */
.category-row.is-initial-loading{display:flex;gap:12px;align-items:center;min-height:112px;overflow:hidden}
.category-skeleton{display:block;flex:0 0 108px;height:108px;border-radius:18px;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.28),rgba(255,255,255,.10));background-size:220% 100%;animation:nagaLobbyShimmer 1.05s linear infinite}
.initial-game-loading{display:flex!important;align-items:flex-start;justify-content:center;min-height:260px;}
.game-loading-inline{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.game-loading-spinner{width:22px;height:22px;border:3px solid rgba(255,255,255,.28);border-top-color:#35f486;border-radius:50%;animation:pageLoaderSpin .65s linear infinite}
@keyframes nagaLobbyShimmer{to{background-position:-220% 0}}
@media(max-width:768px){.category-row.is-initial-loading{min-height:86px}.category-skeleton{flex-basis:78px;height:78px;border-radius:14px}.initial-game-loading{padding-top:42px}}

/* API-managed VIP level images */
.vip-medal .vip-level-image{position:relative;z-index:2;width:82%;height:82%;object-fit:contain;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}.vip-perk-icon{width:42px;height:42px;display:grid;place-items:center;margin:0 auto 8px;font-size:24px}.vip-perk-icon .vip-level-image{width:100%;height:100%;object-fit:contain;display:block}
.vip-exp-history{margin-top:14px;background:rgba(35,37,48,.86);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px}.vip-exp-history-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}.vip-exp-history-head b{color:#fff;font-size:16px}.vip-exp-history-head span{color:#aeb7ca;font-size:12px}.vip-exp-history-row{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}.vip-exp-history-row:first-child{border-top:0}.vip-exp-source{font-size:11px;font-weight:900;color:#9db6ff;background:rgba(64,104,255,.14);border-radius:999px;padding:5px 8px;text-align:center}.vip-exp-history-row b{display:block;font-size:14px}.vip-exp-history-row b.positive{color:#5edb8a}.vip-exp-history-row b.negative{color:#ff7180}.vip-exp-history-row small,.vip-exp-history-row time{color:#aeb7ca;font-size:11px}.vip-exp-history-row time{text-align:right}.vip-exp-empty{text-align:center;color:#aeb7ca;padding:20px 8px}@media(max-width:600px){.vip-exp-history-row{grid-template-columns:90px 1fr}.vip-exp-history-row time{grid-column:2;text-align:left}.vip-exp-history-head{align-items:start;flex-direction:column}}


/* BO-configurable image-only social links */
.setting-social-image-links{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px;width:100%}
.setting-social-image-links[hidden],.setting-social-image-links a[hidden]{display:none!important}
.setting-social-image-links a{display:block;width:100%;text-decoration:none;border:0;background:transparent;padding:0}
.setting-social-image-links img{display:block;width:100%;height:auto;object-fit:contain;border:0}

/* v1.0.75: database/API-managed social image links */
.dynamic-social-image-links{display:block;width:100%}
.dynamic-social-image-links[hidden]{display:none!important}
.dynamic-social-image-links .social-image:first-child{margin-top:12px}
.dynamic-social-image-links .social-image img{width:100%;height:auto;object-fit:contain}
.setting-social-image-links .social-image{margin-top:0}

/* v1.0.77: remove oversized lobby bottom gap while keeping the final cards fully reachable */
@media (min-width:769px){
  .provider-side-rail,
  .provider-games-panel{
    box-sizing:border-box!important;
    padding-bottom:0!important;
    scroll-padding-bottom:34px!important;
  }
}

@media (max-width:768px){
  .provider-side-rail,
  .provider-games-panel{
    box-sizing:border-box!important;
    padding-bottom:0!important;
    scroll-padding-bottom:28px!important;
  }
}

/* v1.0.78: final lobby bottom spacing — one nav-height only, no stacked gaps */
.center-content{
  box-sizing:border-box!important;
  padding-bottom:57px!important;
}

.game-grid,
.provider-lobby-shell,
.provider-games-panel,
.provider-games-list,
.direct-games-list,
.provider-side-rail{
  box-sizing:border-box!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}

@media (max-width:768px){
  .content-area,
  .main-layout,
  .center-content{
    box-sizing:border-box!important;
  }

  .center-content{
    padding-bottom:57px!important;
  }

  .provider-games-panel,
  .provider-games-list,
  .direct-games-list,
  .provider-side-rail{
    padding-bottom:0!important;
    margin-bottom:0!important;
    scroll-padding-bottom:6px!important;
  }

  .provider-side-rail{
    max-height:calc(100dvh - 219px)!important;
  }
}

/* ===== Exact bottom-nav fit: no gap, no clipped provider/game cards ===== */
body.home-page .center-content{
  padding-bottom:0!important;
}
body.home-page .game-grid,
body.home-page .game-grid.provider-with-rail,
body.home-page .game-grid:has(.provider-lobby-shell),
body.home-page .provider-lobby-shell{
  margin-bottom:0!important;
  padding-bottom:0!important;
}
body.home-page .provider-side-rail,
body.home-page .provider-games-panel,
body.home-page .provider-games-list,
body.home-page .direct-games-list{
  box-sizing:border-box!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
}
body.home-page .provider-side-rail,
body.home-page .provider-games-panel{
  height:100%!important;
  max-height:100%!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:auto!important;
}
body.home-page .provider-games-list,
body.home-page .direct-games-list{
  align-content:start!important;
}
body.home-page .provider-games-list .game-card:last-child,
body.home-page .direct-games-list .game-card:last-child,
body.home-page .provider-side-rail .provider-rail-card:last-child{
  margin-bottom:0!important;
}
@media (max-width:768px){
  body.home-page{
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }
  body.home-page .main-layout{
    height:calc(100dvh - 57px - 57px)!important;
    max-height:calc(100dvh - 57px - 57px)!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.home-page .center-content,
  body.home-page .game-grid{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.home-page .provider-lobby-shell{
    height:var(--provider-lobby-height)!important;
    max-height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }
  body.home-page .provider-side-rail,
  body.home-page .provider-games-panel{
    height:100%!important;
    max-height:100%!important;
    padding-bottom:0!important;
  }
}

/* v1.0.79: hide the left provider scrollbar while preserving mouse, wheel and touch scrolling */
body.home-page .provider-side-rail{
  -ms-overflow-style:none!important;
  scrollbar-width:none!important;
}
body.home-page .provider-side-rail::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}


/* Hide game list scrollbar but keep scrolling */
.game-list,
.games-list,
.game-grid,
.games-grid,
.provider-games,
.provider-game-list,
.game-container,
.game-content,
#gameList,
#gamesList {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.game-list::-webkit-scrollbar,
.games-list::-webkit-scrollbar,
.game-grid::-webkit-scrollbar,
.games-grid::-webkit-scrollbar,
.provider-games::-webkit-scrollbar,
.provider-game-list::-webkit-scrollbar,
.game-container::-webkit-scrollbar,
.game-content::-webkit-scrollbar,
#gameList::-webkit-scrollbar,
#gamesList::-webkit-scrollbar {
    width:0!important;
    height:0!important;
    display:none;
}

/* v1.0.80: hide the right game panel scrollbar while preserving scrolling */
body.home-page .provider-games-panel,
body.home-page .provider-games-list,
body.home-page .direct-games-list{
  -ms-overflow-style:none!important;
  scrollbar-width:none!important;
}
body.home-page .provider-games-panel::-webkit-scrollbar,
body.home-page .provider-games-list::-webkit-scrollbar,
body.home-page .direct-games-list::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
}
body.home-page .provider-games-panel::-webkit-scrollbar-track,
body.home-page .provider-games-panel::-webkit-scrollbar-thumb{
  background:transparent!important;
  border:0!important;
}

/* v1.0.80: hide the right game panel scrollbar while preserving scrolling */
body.home-page .provider-games-panel,
body.home-page .provider-games-list,
body.home-page .direct-games-list{
  -ms-overflow-style:none!important;
  scrollbar-width:none!important;
}
body.home-page .provider-games-panel::-webkit-scrollbar,
body.home-page .provider-games-list::-webkit-scrollbar,
body.home-page .direct-games-list::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
}
body.home-page .provider-games-panel::-webkit-scrollbar-track,
body.home-page .provider-games-panel::-webkit-scrollbar-thumb{
  background:transparent!important;
  border:0!important;
}

/* Instant/progressive game loading enhancement */
.game-card-skeleton{
  pointer-events:none!important;
  overflow:hidden;
  contain:layout paint style;
}
.game-card-skeleton .game-card-img-wrap{
  position:relative;
  overflow:hidden;
  background:rgba(213,225,244,.62);
}
.game-skeleton-shimmer{
  position:absolute;
  inset:0;
  display:block;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.72) 48%,transparent 76%);
  transform:translateX(-110%);
  animation:nagaGameSkeleton 1.05s ease-in-out infinite;
}
@keyframes nagaGameSkeleton{
  to{transform:translateX(110%)}
}
.game-card-enter{
  opacity:0;
  transform:translate3d(0,5px,0);
  animation:nagaGameCardEnter .18s ease-out forwards;
  contain:layout paint style;
  content-visibility:auto;
  contain-intrinsic-size:140px 120px;
}
@keyframes nagaGameCardEnter{
  to{opacity:1;transform:translate3d(0,0,0)}
}
.provider-games-list,.direct-games-list{
  contain:layout style;
}
@media (prefers-reduced-motion:reduce){
  .game-skeleton-shimmer,.game-card-enter{animation:none!important;transform:none!important;opacity:1!important}
}

/* Instant/progressive game loading enhancement */
.game-card-skeleton{pointer-events:none!important;overflow:hidden;contain:layout paint style;}
.game-card-skeleton .game-card-img-wrap{position:relative;overflow:hidden;background:rgba(213,225,244,.62);}
.game-skeleton-shimmer{position:absolute;inset:0;display:block;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.72) 48%,transparent 76%);transform:translateX(-110%);animation:nagaGameSkeleton 1.05s ease-in-out infinite;}
@keyframes nagaGameSkeleton{to{transform:translateX(110%)}}
.game-card-enter{opacity:0;transform:translate3d(0,5px,0);animation:nagaGameCardEnter .18s ease-out forwards;contain:layout paint style;content-visibility:auto;contain-intrinsic-size:140px 120px;}
@keyframes nagaGameCardEnter{to{opacity:1;transform:translate3d(0,0,0)}}
.provider-games-list,.direct-games-list{contain:layout style;}
@media (prefers-reduced-motion:reduce){.game-skeleton-shimmer,.game-card-enter{animation:none!important;transform:none!important;opacity:1!important}}


/* v1.0.81: Facebook-style game loading placeholders */
.game-card-skeleton{
  background:#fff!important;
  border:1px solid rgba(12,56,130,.10)!important;
  border-radius:14px!important;
  box-shadow:0 2px 8px rgba(29,73,135,.10)!important;
}
.game-card-skeleton .game-card-img-wrap,
.game-image-skeleton{
  position:relative;
  width:100%;
  height:100%;
  min-height:110px;
  padding:12px;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:inherit;
  background:#fff;
}
.game-skeleton-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.game-skeleton-avatar{display:block;flex:0 0 24px;width:24px;height:24px;border-radius:7px;background:#e8edf4;}
.game-skeleton-line,.game-skeleton-block{display:block;border-radius:7px;background:#e8edf4;}
.game-skeleton-line-short{width:44%;height:9px;}
.game-skeleton-block{width:68%;height:24px;margin-bottom:10px;}
.game-skeleton-line-medium{width:58%;height:8px;}
.game-image-skeleton{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .18s ease,visibility .18s ease;}
.game-image-loading .provider-launch-img{opacity:0!important;}
.game-card-ready .game-image-skeleton{opacity:0;visibility:hidden;}
.game-card-ready .provider-launch-img{opacity:1!important;transition:opacity .18s ease;}
.game-facebook-skeleton .game-skeleton-shimmer,
.game-image-skeleton .game-skeleton-shimmer{
  position:absolute;inset:0;display:block;
  background:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.88) 48%,transparent 78%);
  transform:translateX(-115%);animation:nagaGameSkeleton 1.15s ease-in-out infinite;
}
@media(max-width:768px){
  .game-card-skeleton .game-card-img-wrap,.game-image-skeleton{min-height:92px;padding:9px;}
  .game-skeleton-avatar{flex-basis:20px;width:20px;height:20px;}
  .game-skeleton-block{height:20px;margin-bottom:8px;}
}


/* v1.0.82: game-grid-shaped skeleton placeholders
   Match the exact rendered game grid/card pattern instead of a Facebook feed card. */
body.home-page .provider-games-list .game-card-skeleton,
body.home-page .direct-games-list .game-card-skeleton{
  width:100%!important;
  max-width:156px!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
body.home-page .game-card-skeleton .game-card-img-wrap,
body.home-page .game-grid-skeleton,
body.home-page .game-image-skeleton{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  padding:0!important;
  margin:0!important;
  border-radius:10px!important;
  overflow:hidden!important;
  background:rgba(224,231,241,.82)!important;
  box-sizing:border-box!important;
}
body.home-page .game-image-skeleton{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
}
body.home-page .game-grid-skeleton .game-skeleton-shimmer,
body.home-page .game-image-skeleton .game-skeleton-shimmer{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  background:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.72) 48%,transparent 78%)!important;
  transform:translateX(-115%);
  animation:nagaGameSkeleton 1.05s ease-in-out infinite!important;
}
body.home-page .game-image-loading{
  aspect-ratio:1 / 1;
  background:rgba(224,231,241,.82);
  border-radius:10px;
  overflow:hidden;
}
body.home-page .game-image-loading .provider-launch-img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
body.home-page .game-card-ready .game-card-img-wrap{
  aspect-ratio:auto;
  background:transparent;
}
body.home-page .game-card-ready .provider-launch-img{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
}
@media(max-width:768px){
  body.home-page .provider-games-list .game-card-skeleton,
  body.home-page .direct-games-list .game-card-skeleton{border-radius:8px!important;}
  body.home-page .game-card-skeleton .game-card-img-wrap,
  body.home-page .game-grid-skeleton,
  body.home-page .game-image-skeleton,
  body.home-page .game-image-loading{border-radius:8px!important;}
}


/* v1.0.84: mobile HOT/direct game list scroll fix */
@media (max-width:768px){
  body.home-page .game-grid.mobile-direct-game-scroll{
    display:block!important;
    width:100%!important;
    height:var(--mobile-direct-game-height, calc(100dvh - 330px))!important;
    max-height:var(--mobile-direct-game-height, calc(100dvh - 330px))!important;
    min-height:220px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    padding-bottom:0!important;
    box-sizing:border-box!important;
    scrollbar-width:none!important;
  }
  body.home-page .game-grid.mobile-direct-game-scroll::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  body.home-page .game-grid.mobile-direct-game-scroll .direct-games-list{
    overflow:visible!important;
    min-height:min-content!important;
    padding-bottom:4px!important;
  }
}


/* v1.0.86: remove duplicate mobile direct-game bottom spacing.
   The viewport height already stops above the fixed bottom navigation, so
   extra padding created a visible empty band after the final game row. */
@media (max-width:768px){
  body.home-page .game-grid.mobile-direct-game-scroll{
    padding-bottom:0!important;
  }
  body.home-page .game-grid.mobile-direct-game-scroll .direct-games-list{
    padding-bottom:4px!important;
    margin-bottom:0!important;
  }
}

.bonus-progress-complete{width:100%;margin-top:10px;border:0;border-radius:10px;padding:10px 12px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#6b43f5,#8d6cff);color:#fff;box-shadow:0 7px 18px rgba(107,67,245,.28)}
.bonus-complete-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:18px}.bonus-complete-modal.show{display:flex}.bonus-complete-backdrop{position:absolute;inset:0;background:rgba(7,12,28,.64);backdrop-filter:blur(5px)}.bonus-complete-dialog{position:relative;width:min(430px,100%);border-radius:18px;background:#fff;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.3);color:#151c32}.bonus-complete-dialog h3{margin:0 42px 10px 0;font-size:22px}.bonus-complete-dialog p{margin:0;color:#667085;line-height:1.55}.bonus-complete-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:1px solid #dbe2f0;border-radius:10px;background:#fff;font-size:24px;cursor:pointer}.bonus-complete-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.bonus-complete-actions button{min-width:104px;border:1px solid #d3dbea;border-radius:10px;padding:11px 16px;background:#fff;font-weight:800;cursor:pointer}.bonus-complete-actions #bonusCompleteConfirm{border-color:#6847ef;background:#6847ef;color:#fff}


/* Full-image Provider First cards (Hot/Live/Sport/Other). */
.category-provider-card{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden;
  aspect-ratio:1/1;
}
.category-provider-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:16px;
}
.category-provider-card .provider-letter{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}


/* ===== v1.0.87: promotion page full-page scrolling =====
   Desktop lobby pages intentionally lock html/body to the viewport and scroll
   only their inner game panels. The promotion page has normal document-flow
   content instead, so that global lock prevented the page from moving. */
html.bonus-scroll-page{
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
}
html.bonus-scroll-page body.bonus-page{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    padding-bottom:57px!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
}
html.bonus-scroll-page body.bonus-page .bonus-main{
    width:100%!important;
    height:auto!important;
    min-height:calc(100vh - 69px - 57px)!important;
    max-height:none!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    padding-bottom:100px!important;
}
html.bonus-scroll-page body.bonus-page .bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    z-index:1000!important;
}
@media(max-width:768px){
    html.bonus-scroll-page body.bonus-page{
        padding-bottom:var(--mobile-bottom-nav-height,70px)!important;
        background-attachment:scroll!important;
    }
    html.bonus-scroll-page body.bonus-page .bonus-main{
        min-height:calc(100dvh - 69px - var(--mobile-bottom-nav-height,70px))!important;
        padding-bottom:calc(var(--mobile-bottom-nav-height,70px) + 28px)!important;
    }
}

/* ===== Promotion grid exact row-height normalization (v1.0.89) =====
   Promotion source images use 7:5 for one column and 14:5 for two columns.
   CSS Grid gaps make a span-2 card slightly wider than exactly two columns,
   so natural image height:auto cannot line up perfectly. JavaScript supplies
   --promo-row-height from the real single-column width for every grid. */
.promo-dynamic-section .bonus-grid{
  align-items:stretch;
  /* grid-auto-rows:var(--promo-row-height, auto); */
}
.promo-dynamic-section .bonus-grid > .promo-image-card.promo-card{
  /* height:var(--promo-row-height, auto); */
  min-height:0;
  align-self:stretch;
  overflow:hidden;
  background:transparent;
}
.promo-dynamic-section .bonus-grid > .promo-image-card.promo-card > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%;
  max-height:100%;
  object-fit:contain!important;
  object-position:center!important;
  box-sizing:border-box;
}

/* ===== v1.0.90: forgot-password page in TitanX light theme ===== */
html:has(body.forget-password-page),
body.forget-password-page{
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden!important;
}
body.forget-password-page{
  padding-bottom:57px!important;
  background:url('../custom/images/background.png') center center / cover no-repeat #eef5ff!important;
  color:#0b3f7d;
}
.forget-password-main{
  height:calc(100vh - 69px - 57px);
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:auto;
  box-sizing:border-box;
}
.forget-password-card{
  width:min(390px,92vw);
  border:1px solid rgba(255,255,255,.82);
  border-radius:22px;
  overflow:hidden;
  background:rgba(235,241,248,.9);
  box-shadow:0 18px 42px rgba(43,105,171,.28),0 0 32px rgba(118,183,255,.24);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.forget-password-heading{
  min-height:58px;
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  border-bottom:2px solid #2597dc;
  padding:0 14px;
  background:rgba(246,249,253,.76);
}
.forget-password-heading h1{
  margin:0;
  text-align:center;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  color:#0a3f7d;
}
.forget-password-back{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#0b4c91;
  text-decoration:none;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(57,126,194,.28);
}
.forget-password-form{padding:24px 18px 26px;}
.forget-password-help{
  margin:0 4px 18px;
  text-align:center;
  font-size:12px;
  line-height:1.5;
  color:#486b87;
}
.forget-password-field{
  height:40px;
  border:1px solid #a8bfd0;
  background:rgba(255,255,255,.92);
  border-radius:22px;
  display:flex;
  align-items:center;
  margin-bottom:14px;
  padding:0 14px;
  box-shadow:inset 0 1px 2px rgba(25,69,105,.1);
  box-sizing:border-box;
}
.forget-password-field .field-icon{
  flex:0 0 24px;
  color:#11589d;
  font-size:17px;
}
.forget-password-field input{
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#244e6d;
  font-size:13px;
  padding-left:8px;
}
.forget-password-field input::placeholder{color:#587389;opacity:1;}
.forget-password-code-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 105px;
  gap:9px;
  margin-bottom:14px;
}
.forget-password-code-row .forget-password-field{margin-bottom:0;}
.forget-password-code-btn{
  border:0;
  border-radius:22px;
  background:linear-gradient(90deg,#1355a0,#3f7fc2);
  color:#fff;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(20,72,130,.22);
}
.forget-password-message{
  min-height:17px;
  margin:-1px 4px 9px;
  text-align:center;
  font-size:11px;
  line-height:1.35;
}
.forget-password-message.error{color:#c53030;}
.forget-password-message.info{color:#1760ae;}
.forget-password-submit{
  width:100%;
  height:42px;
  border:0;
  border-radius:22px;
  background:linear-gradient(90deg,#1155a0,#3f7fc2);
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 6px 13px rgba(34,75,115,.28);
}
.forget-password-submit:hover,.forget-password-code-btn:hover{filter:brightness(1.08);}
.forget-password-login-link{
  display:block;
  margin-top:15px;
  text-align:center;
  color:#0f4e8d;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
@media(max-width:900px){
  .forget-password-main{height:calc(100vh - 57px - 57px);padding:12px 24px;}
  .forget-password-card{width:100%;max-width:370px;border-radius:18px;}
  .forget-password-heading{min-height:54px;}
  .forget-password-form{padding:20px 18px 24px;}
}
@media(max-width:380px){
  .forget-password-main{padding:10px 20px;}
  .forget-password-code-row{grid-template-columns:minmax(0,1fr) 92px;gap:7px;}
  .forget-password-code-btn{font-size:10px;}
  .forget-password-form{padding:18px 15px 21px;}
}


/* ===== Live chat sender / receiver separation =====
   Explicit semantic classes prevent sender and receiver styles from sharing
   the same colour when global/chat theme styles are changed later. */
.chat-message-sender{
    margin-left:auto !important;
    margin-right:0 !important;
    background:linear-gradient(180deg,#0878d1,#064a98) !important;
    border-color:rgba(113,198,255,.55) !important;
    color:#fff !important;
    border-bottom-right-radius:5px !important;
}
.chat-message-receiver{
    margin-left:0 !important;
    margin-right:auto !important;
    background:linear-gradient(180deg,#333a45,#20252d) !important;
    border-color:rgba(255,255,255,.18) !important;
    color:#fff !important;
    border-bottom-left-radius:5px !important;
}
.chat-message-sender .bubble-name{color:#d8f1ff !important;}
.chat-message-receiver .bubble-name{color:#9ce860 !important;}

/* Floating/minimized live-chat widget uses its own sender/receiver classes. */
.mini-msg-sender{justify-content:flex-end !important;}
.mini-msg-receiver{justify-content:flex-start !important;}
.mini-bubble-sender{
    background:linear-gradient(180deg,#0878d1,#064a98) !important;
    color:#fff !important;
    border:1px solid rgba(113,198,255,.5);
    border-bottom-right-radius:5px !important;
}
.mini-bubble-receiver{
    background:linear-gradient(180deg,#333a45,#20252d) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.16);
    border-bottom-left-radius:5px !important;
}

/* Disable the page wallpaper on Live Chat only.
   Other pages continue receiving the BO/customized page background. */
body.chat-page{
    background-image:none !important;
    background-color:#dfe5ed !important;
}
body.chat-page .chat-main{
    background:linear-gradient(180deg,rgba(239,244,250,.82),rgba(210,220,232,.9)) !important;
}

/* ===== v1.0.65: separate desktop/mobile sizing for header auth images =====
   Keep desktop Login/Register image sizing independent from mobile so
   mobile adjustments no longer resize the desktop header controls. */
@media (min-width:481px){
  .top-header-actions > .top-auth-actions{
    gap:14px!important;
    column-gap:14px!important;
  }
  .top-header-actions > .top-auth-actions > .top-login-btn.auth-image-link,
  .top-header-actions > .top-auth-actions > .top-register-btn.auth-image-link{
    width:auto!important;
    min-width:0!important;
    height:40px!important;
    margin:0!important;
    padding:0!important;
    flex:0 0 auto!important;
  }
  .top-header-actions > .top-auth-actions .header-auth-image{
    display:block!important;
    width:auto!important;
    max-width:135px!important;
    height:40px!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
  }
  .top-header-actions > .top-auth-actions > .top-register-btn.auth-image-link{
    margin-left:-6px!important;
  }
}

@media (max-width:480px){
  .top-header-actions > .top-auth-actions{
    gap:20px!important;
    column-gap:20px!important;
  }
  .top-header-actions > .top-auth-actions > .top-login-btn.auth-image-link,
  .top-header-actions > .top-auth-actions > .top-register-btn.auth-image-link{
    width:auto!important;
    min-width:0!important;
    height:36px!important;
    margin:0!important;
    padding:0!important;
    flex:0 0 auto!important;
  }
  .top-header-actions > .top-auth-actions .header-auth-image{
    display:block!important;
    width:auto!important;
    max-width:88px!important;
    height:36px!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
  }
  .top-header-actions > .top-auth-actions > .top-register-btn.auth-image-link{
    margin-left:-6px!important;
  }
}

/* ===== v1.0.92: responsive header, home promo scroll, mobile landscape, setting turnover, bank detail ===== */
/* Keep the TitanX logo consistent across every frontend page. Earlier patches had
   separate 430/390/360 rules that progressively shrank it and made the header jump. */
@media (max-width:900px){
  .top-header .logo-box,
  .top-header .mobile-style-logo{
    flex:0 0 auto!important;
    min-width:0!important;
    margin:0!important;
  }
  .top-header .site-logo,
  .top-header .logo-box img.site-logo,
  .top-header .mobile-style-logo img{
    width:auto!important;
    height:clamp(38px,10vw,44px)!important;
    max-width:clamp(96px,27vw,126px)!important;
    object-fit:contain!important;
    object-position:left center!important;
    display:block!important;
  }
}
@media (max-width:360px){
  .top-header .site-logo,
  .top-header .logo-box img.site-logo,
  .top-header .mobile-style-logo img{
    height:38px!important;
    max-width:98px!important;
  }
}

/* The desktop lobby itself stays viewport-locked, but the right account/promotion
   column is an independent vertical scroller. BO enabled promotion blocks can grow
   naturally below the balance/turnover cards without shifting the grid. */
@media (min-width:769px){
  body.home-page .right-panel{
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-behavior:smooth!important;
    padding-bottom:34px!important;
  }
  body.home-page .right-panel .right-content-box,
  body.home-page .right-panel [data-layout-section="home-after-account-status"],
  body.home-page .right-panel #homeBonusDisplaySection,
  body.home-page .right-panel #dynamicPromotionBox{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.home-page .right-panel #homeBonusDisplaySection{
    margin-top:12px!important;
    padding-bottom:24px!important;
  }
  body.home-page .right-panel #dynamicPromotionBox .promo-dynamic-section,
  body.home-page .right-panel #dynamicPromotionBox .bonus-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

/* Portrait keeps the compact non-scrolling lobby behaviour. Landscape phones have
   much less vertical room, so allow normal document scrolling instead of trapping
   touch gestures inside a 100dvh viewport. */
@media (max-width:900px) and (orientation:landscape){
  html:has(body.home-page),
  body.home-page{
    width:100%!important;
    height:auto!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.home-page{
    padding-bottom:var(--mobile-bottom-nav-height,70px)!important;
    background-attachment:scroll!important;
  }
  body.home-page .main-layout,
  body.home-page .center-content,
  body.home-page .game-grid{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    touch-action:pan-y!important;
  }
  body.home-page .provider-lobby-shell{
    height:auto!important;
    min-height:300px!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.home-page .provider-side-rail,
  body.home-page .provider-games-panel{
    max-height:min(72dvh,520px)!important;
    touch-action:pan-y!important;
  }
}

/* Mobile Setting is the replacement for the hidden desktop right sidebar, so keep
   wallet balance and active promotion turnover together in the first card. */
body.setting-page .setting-bonus-progress-widget{
  margin-top:14px!important;
  width:100%!important;
}
@media (max-width:900px){
  body.setting-page .setting-wallet-card{
    display:block!important;
    order:1!important;
  }
  body.setting-page .setting-bonus-progress-widget{
    display:block;
    margin-top:14px!important;
    padding:12px!important;
    border-radius:14px!important;
    background:rgba(2,12,28,.62)!important;
    border:1px solid rgba(85,194,255,.24)!important;
  }
  body.setting-page .setting-bonus-progress-widget[hidden]{display:none!important;}
}

/* Bank-detail setup/edit page */
body.bank-detail-page{
  overflow-x:hidden!important;
}
body.bank-detail-page .bank-detail-main{
  min-height:calc(100vh - 69px - 57px)!important;
  padding:24px 14px 90px!important;
}
body.bank-detail-page .bank-detail-card{
  width:min(620px,100%)!important;
  margin:0 auto!important;
}
body.bank-detail-page .bank-first-setup-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid rgba(63,193,255,.32);
  border-radius:12px;
  background:rgba(32,146,255,.10);
  color:#dff6ff;
  font-size:13px;
  line-height:1.45;
}
body.bank-detail-page .bank-first-setup-note[hidden]{display:none!important;}
body.bank-detail-page .bank-first-setup-note i{margin-top:2px;color:#67d5ff;}
body.bank-detail-page .bank-optional{font-size:11px;font-weight:500;opacity:.65;margin-left:5px;}
body.bank-detail-page .form-status{min-height:20px;margin:4px 0 8px;font-size:13px;}
body.bank-detail-page .form-status.error{color:#ff8f8f;}
body.bank-detail-page .form-status.success{color:#70f3aa;}
@media (max-width:900px){
  html:has(body.bank-detail-page),
  body.bank-detail-page{
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-y:auto!important;
    touch-action:pan-y!important;
  }
  body.bank-detail-page .bank-detail-main{
    min-height:calc(100dvh - 69px - var(--mobile-bottom-nav-height,70px))!important;
    padding:16px 12px calc(var(--mobile-bottom-nav-height,70px) + 24px)!important;
  }
  body.bank-detail-page .bank-detail-card{padding:18px 14px!important;}
}

/* Wide phones can report >900 CSS px in landscape. Treat short landscape viewports
   as mobile lobby layout as well, otherwise desktop's fixed 3-column viewport wins. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1100px){
  html:has(body.home-page),
  body.home-page{
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:auto!important;
  }
  body.home-page{display:block!important;padding-bottom:var(--mobile-bottom-nav-height,70px)!important;}
  body.home-page .top-header{height:69px!important;}
  body.home-page .main-layout{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.home-page .left-sidebar,
  body.home-page .right-panel{display:none!important;}
  body.home-page .mobile-top-area{display:block!important;}
  body.home-page .center-content,
  body.home-page .game-grid{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.home-page .bottom-nav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:1000!important;}
}

/* ===== v1.0.93: desktop home right promotion column real scrolling =====
   The right panel previously had overflow-y:auto but no constrained height, so it
   expanded with BO promotion content instead of becoming a scroll container. */
@media (min-width:901px){
  body.home-page .right-panel{
    height:calc(100vh - 69px - 57px)!important;
    height:calc(100dvh - 69px - 57px)!important;
    min-height:0!important;
    max-height:calc(100vh - 69px - 57px)!important;
    max-height:calc(100dvh - 69px - 57px)!important;
    box-sizing:border-box!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:stable!important;
    padding-bottom:36px!important;
  }
  body.home-page .right-panel #homeBonusDisplaySection,
  body.home-page .right-panel #dynamicPromotionBox,
  body.home-page .right-panel #dynamicPromotionBox .promo-dynamic-section{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.home-page .right-panel::after{
    content:"";
    display:block;
    height:18px;
    flex:0 0 18px;
  }
  body.home-page .right-panel::-webkit-scrollbar{width:7px;}
  body.home-page .right-panel::-webkit-scrollbar-track{background:transparent;}
  body.home-page .right-panel::-webkit-scrollbar-thumb{background:rgba(42,105,190,.42);border-radius:999px;}
}

/* ===== v1.0.94: hard fix desktop right promotion scrolling =====
   Make the desktop lobby a definite-height grid. The right column then owns its
   vertical overflow instead of expanding with BO promotion content. */
@media (min-width:901px){
  body.home-page{
    overflow:hidden!important;
  }
  body.home-page .main-layout{
    height:calc(100vh - 69px - 57px)!important;
    height:calc(100dvh - 69px - 57px)!important;
    min-height:0!important;
    max-height:calc(100vh - 69px - 57px)!important;
    max-height:calc(100dvh - 69px - 57px)!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }
  body.home-page .right-panel{
    align-self:stretch!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow-y:scroll!important;
    overflow-x:hidden!important;
    padding-top:14px!important;
    padding-bottom:28px!important;
    box-sizing:border-box!important;
    scrollbar-gutter:stable!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.home-page .right-panel > *{
    flex-shrink:0!important;
  }
  body.home-page .right-panel .right-content-box,
  body.home-page .right-panel [data-layout-section="home-after-account-status"],
  body.home-page .right-panel #homeBonusDisplaySection,
  body.home-page .right-panel #dynamicPromotionBox,
  body.home-page .right-panel #dynamicPromotionBox .promo-dynamic-section,
  body.home-page .right-panel #dynamicPromotionBox .bonus-grid{
    position:static!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.home-page .right-panel #homeBonusDisplaySection{
    display:block!important;
    margin-top:10px!important;
    padding-bottom:24px!important;
  }
  body.home-page .right-panel::-webkit-scrollbar{
    display:block!important;
    width:8px!important;
  }
  body.home-page .right-panel::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08)!important;
    border-radius:999px!important;
  }
  body.home-page .right-panel::-webkit-scrollbar-thumb{
    background:rgba(42,105,190,.58)!important;
    border-radius:999px!important;
  }
}


/* ===== v1.0.95: native/smooth right-column scrolling =====
   Do not intercept wheel/trackpad input in JavaScript. The former wheel handler
   changed scrollTop for every wheel event while an older rule also applied
   scroll-behavior:smooth, causing queued animations and a lag/stutter feeling.
   Keep the definite-height scroll container from v1.0.94, but let the browser
   handle wheel/trackpad/touch scrolling natively and immediately. */
@media (min-width:901px){
  body.home-page .right-panel{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scroll-behavior:auto!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:stable!important;
  }
}


/* ===== v1.0.96: reliable low-latency desktop right-column wheel scrolling =====
   The page itself is intentionally locked on desktop, so some browser/layout
   combinations do not hand wheel input to the nested right column reliably.
   Keep the fixed-height scroll container, disable smooth animation, and let the
   small index handler move scrollTop immediately. */
@media (min-width:901px){
  body.home-page .right-panel{
    overflow-y:scroll!important;
    overflow-x:hidden!important;
    scroll-behavior:auto!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }
  body.home-page .right-panel,
  body.home-page .right-panel *{
    scroll-behavior:auto!important;
  }
}


/* VIP automatic unlock status fix 2026-08-12 */
.vip-reward-row.vip-level-unlocked>button,.vip-reward-row>button.vip-status-unlocked{background:rgba(40,167,69,.18);color:#dff7e5}.vip-reward-row.vip-level-current>button,.vip-reward-row>button.vip-status-current,.vip-progress-card>button.vip-status-current{background:rgba(255,255,255,.18);color:#fff}.vip-reward-row.vip-level-unlocked h3{color:#fff}.vip-reward-row.vip-level-unlocked .vip-timeline-dot{background:#72d58a}

/* v1.0.97: Provider First mobile layout - 3 providers per row, wrap downward.
   Do not create a horizontal provider carousel on mobile. */
@media (max-width:768px){
  body.home-page .category-provider-cards{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:10px 8px !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
    overflow-x:visible !important;
    overflow-y:visible !important;
    padding:2px 0 8px !important;
    margin:0 !important;
    scroll-snap-type:none !important;
  }
  body.home-page .category-provider-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    flex:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  body.home-page .category-provider-card img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    object-fit:contain !important;
  }
  body.home-page .category-provider-section,
  body.home-page .category-mixed-shell{
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }
}

/* v1.0.98: Provider First mobile document scrolling.
   Keep the 3-column wrapped provider grid from v1.0.97, but when that provider
   selector is visible let the home page grow vertically and use native page
   scrolling. Slot's provider-rail/game-panel layout is not changed. */
@media (max-width:768px){
  html:has(body.home-page .category-provider-cards),
  body.home-page:has(.category-provider-cards){
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:auto!important;
  }

  body.home-page:has(.category-provider-cards){
    display:block!important;
    padding-bottom:var(--mobile-bottom-nav-height,70px)!important;
  }

  body.home-page:has(.category-provider-cards) .main-layout,
  body.home-page:has(.category-provider-cards) .center-content,
  body.home-page:has(.category-provider-cards) .game-grid,
  body.home-page:has(.category-provider-cards) .category-provider-section,
  body.home-page:has(.category-provider-cards) .category-mixed-shell{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.home-page:has(.category-provider-cards) .category-provider-cards{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:12px!important;
  }

  body.home-page:has(.category-provider-cards) .bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:1000!important;
  }
}

/* v1.0.99: mobile direct game list must use native document scrolling.
   Provider-first landing already wraps 3 providers per row. After selecting a
   HOT/LIVE/SPORT/OTHER provider, direct-games-list also needs to grow downward
   instead of inheriting the older fixed-height/overflow-hidden mobile lobby.
   SLOT keeps its dedicated left provider rail + independent game panel scroll. */
@media (max-width:768px){
  html:has(body.home-page .direct-games-list),
  body.home-page:has(.direct-games-list){
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:auto!important;
  }

  body.home-page:has(.direct-games-list){
    display:block!important;
    padding-bottom:var(--mobile-bottom-nav-height,70px)!important;
  }

  body.home-page:has(.direct-games-list) .main-layout,
  body.home-page:has(.direct-games-list) .center-content,
  body.home-page:has(.direct-games-list) .game-grid{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.home-page:has(.direct-games-list) .direct-games-list{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    /* padding-bottom:100px!important; */
    touch-action:pan-y!important;
  }

  body.home-page:has(.direct-games-list) .bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:1000!important;
  }
}


/* ===== v1.0.100: active promotion Allowed Game / Provider lock ===== */
.promotion-access-disabled{
  opacity:.38 !important;
  filter:grayscale(.72) brightness(.78) !important;
  cursor:not-allowed !important;
  pointer-events:auto !important;
}
.promotion-access-disabled .play-btn,
.play-btn[aria-disabled="true"]{
  cursor:not-allowed !important;
  opacity:.55 !important;
}
.category-provider-card.promotion-access-disabled,
.provider-rail-card.promotion-access-disabled{
  transform:none !important;
  box-shadow:none !important;
}

/* ===== v1.0.101: promotion access UX =====
   Providers and game cards stay fully browseable during an active promotion.
   The final Confirm & Play action alone is disabled for non-allowed games. */
.promotion-access-disabled{opacity:1!important;filter:none!important;pointer-events:auto!important;cursor:pointer!important}
.provider-transfer-confirm.promotion-confirm-disabled,
.provider-transfer-confirm:disabled.promotion-confirm-disabled{opacity:.46!important;filter:grayscale(.35);cursor:not-allowed!important;box-shadow:none!important}


/* ===== v1.0.102: SLOT mobile banner -> lobby scroll handoff =====
   Mobile SLOT keeps the provider rail. The page first scrolls naturally until
   the promotional banner has cleared the sticky header; after that the provider
   rail + game panel own the remaining vertical scrolling. When either lobby
   column reaches its top, upward scrolling chains back to the page so the banner
   can be revealed again. Desktop and Provider-First categories are unchanged. */
@media (max-width:768px){
  html:has(body.home-page.mobile-slot-scroll-handoff),
  body.home-page.mobile-slot-scroll-handoff{
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.home-page.mobile-slot-scroll-handoff{
    display:block!important;
    padding-bottom:var(--mobile-bottom-nav-height,70px)!important;
  }

  body.home-page.mobile-slot-scroll-handoff .top-header{
    position:sticky!important;
    top:0!important;
    z-index:1200!important;
  }

  body.home-page.mobile-slot-scroll-handoff .main-layout{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.home-page.mobile-slot-scroll-handoff .mobile-top-area{
    flex:0 0 auto!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.home-page.mobile-slot-scroll-handoff .center-content{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh - 69px - var(--mobile-bottom-nav-height,70px))!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }

  /* Keep the category strip visible after the banner has scrolled away. */
  body.home-page.mobile-slot-scroll-handoff .category-slider{
    position:sticky!important;
    top:69px!important;
    z-index:1100!important;
  }

  body.home-page.mobile-slot-scroll-handoff .game-grid,
  body.home-page.mobile-slot-scroll-handoff .game-grid.provider-with-rail{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.home-page.mobile-slot-scroll-handoff .provider-lobby-shell{
    height:var(--provider-lobby-height, calc(100dvh - 210px))!important;
    min-height:260px!important;
    max-height:var(--provider-lobby-height, calc(100dvh - 210px))!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }

  body.home-page.mobile-slot-scroll-handoff .provider-side-rail,
  body.home-page.mobile-slot-scroll-handoff .provider-games-panel{
    position:static!important;
    top:auto!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:8px!important;
    scroll-padding-bottom:8px!important;
  }

  body.home-page.mobile-slot-scroll-handoff .provider-games-list{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:8px!important;
  }

  body.home-page.mobile-slot-scroll-handoff .bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:1300!important;
  }
}

/* ===== v1.0.103: SLOT mobile true full-page lobby takeover =====
   After the banner has completely scrolled away, remove it from the mobile
   SLOT layout so the category + provider/game lobby occupy the whole usable
   viewport above the fixed bottom nav. Scrolling back up from the top of the
   lobby restores the banner. */
@media (max-width:768px){
  body.home-page.mobile-slot-scroll-handoff.slot-banner-passed .mobile-top-area{
    display:none!important;
  }

  body.home-page.mobile-slot-scroll-handoff.slot-banner-passed .center-content{
    min-height:calc(100dvh - 69px - var(--mobile-bottom-nav-height,70px))!important;
  }

  body.home-page.mobile-slot-scroll-handoff.slot-banner-passed .game-grid,
  body.home-page.mobile-slot-scroll-handoff.slot-banner-passed .game-grid.provider-with-rail{
    flex:1 1 auto!important;
    min-height:0!important;
  }

  body.home-page.mobile-slot-scroll-handoff.slot-banner-passed .provider-lobby-shell{
    height:var(--provider-lobby-height, calc(100dvh - 69px - 58px - var(--mobile-bottom-nav-height,70px)))!important;
    max-height:var(--provider-lobby-height, calc(100dvh - 69px - 58px - var(--mobile-bottom-nav-height,70px)))!important;
  }
}

/* ===== v1.0.104: SLOT mobile unified page scroll =====
   The banner and game lobby now share one vertical document scroll. As the user
   scrolls the game list, the banner naturally leaves the viewport. Category and
   subcategory remain sticky at the top, while the game grid can fill the entire
   usable screen. The provider rail stays sticky and independently scrollable so
   all providers remain reachable without trapping the game list. */
@media (max-width:768px){
  html:has(body.home-page.mobile-slot-natural-scroll),
  body.home-page.mobile-slot-natural-scroll{
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.home-page.mobile-slot-natural-scroll{
    display:block!important;
    padding-bottom:var(--mobile-bottom-nav-height,70px)!important;
  }

  body.home-page.mobile-slot-natural-scroll .top-header{
    position:sticky!important;
    top:0!important;
    z-index:1400!important;
  }

  body.home-page.mobile-slot-natural-scroll .main-layout{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.home-page.mobile-slot-natural-scroll .mobile-top-area{
    display:block!important;
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.home-page.mobile-slot-natural-scroll .center-content,
  body.home-page.mobile-slot-natural-scroll .game-grid,
  body.home-page.mobile-slot-natural-scroll .game-grid.provider-with-rail{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /* These only stick after the banner has naturally scrolled past them. */
  body.home-page.mobile-slot-natural-scroll .category-slider{
    position:sticky!important;
    top:var(--slot-header-height,69px)!important;
    z-index:1300!important;
  }

  body.home-page.mobile-slot-natural-scroll #subTabRow{
    position:sticky!important;
    top:calc(var(--slot-header-height,69px) + var(--slot-category-height,58px))!important;
    z-index:1290!important;
  }

  body.home-page.mobile-slot-natural-scroll .provider-lobby-shell{
    display:flex!important;
    align-items:flex-start!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh - var(--slot-header-height,69px) - var(--slot-category-height,58px) - var(--slot-subtab-height,0px) - var(--mobile-bottom-nav-height,70px))!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.home-page.mobile-slot-natural-scroll .provider-games-panel,
  body.home-page.mobile-slot-natural-scroll .provider-games-list{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    touch-action:pan-y!important;
  }

  body.home-page.mobile-slot-natural-scroll .provider-side-rail{
    position:sticky!important;
    top:calc(var(--slot-header-height,69px) + var(--slot-category-height,58px) + var(--slot-subtab-height,0px))!important;
    height:auto!important;
    max-height:calc(100dvh - var(--slot-header-height,69px) - var(--slot-category-height,58px) - var(--slot-subtab-height,0px) - var(--mobile-bottom-nav-height,70px))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.home-page.mobile-slot-natural-scroll .bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:1500!important;
  }
}

/* ===== v1.0.105: SLOT mobile bounded lobby scroll + sticky category/subcategory =====
   Keep the phone viewport itself locked. The home main-layout is the only
   vertical scroll viewport between the header and fixed bottom navigation.
   The banner scrolls away inside that viewport; category and subcategory then
   stay pinned at its top while SLOT providers/games continue scrolling below. */
@media (max-width:768px){
  html:has(body.home-page.mobile-slot-natural-scroll),
  body.home-page.mobile-slot-natural-scroll{
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  body.home-page.mobile-slot-natural-scroll{
    display:block!important;
    padding-bottom:0!important;
    touch-action:none!important;
  }

  body.home-page.mobile-slot-natural-scroll .top-header{
    position:relative!important;
    top:auto!important;
    z-index:1400!important;
  }

  body.home-page.mobile-slot-natural-scroll .main-layout{
    display:block!important;
    width:100%!important;
    height:calc(100dvh - var(--slot-header-height,69px) - var(--mobile-bottom-nav-height,70px))!important;
    min-height:0!important;
    max-height:calc(100dvh - var(--slot-header-height,69px) - var(--mobile-bottom-nav-height,70px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-behavior:auto!important;
    position:relative!important;
  }

  body.home-page.mobile-slot-natural-scroll .mobile-top-area{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    z-index:1!important;
  }

  body.home-page.mobile-slot-natural-scroll .center-content{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }

  /* Category sticks to the TOP OF THE MOBILE CONTENT VIEWPORT after banner passes. */
  body.home-page.mobile-slot-natural-scroll .category-slider{
    position:sticky!important;
    top:0!important;
    z-index:1350!important;
    margin-top:0!important;
  }

  /* Real BO subcategory row stays directly below category when present. */
  body.home-page.mobile-slot-natural-scroll #subTabRow{
    position:sticky!important;
    top:var(--slot-category-height,58px)!important;
    z-index:1340!important;
  }

  body.home-page.mobile-slot-natural-scroll .game-grid,
  body.home-page.mobile-slot-natural-scroll .game-grid.provider-with-rail,
  body.home-page.mobile-slot-natural-scroll .provider-lobby-shell{
    width:100%!important;
    height:auto!important;
    min-height:calc(100% - var(--slot-category-height,58px) - var(--slot-subtab-height,0px))!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.home-page.mobile-slot-natural-scroll .provider-lobby-shell{
    display:flex!important;
    align-items:flex-start!important;
  }

  /* Games follow the main-layout scroll; do not create another nested page. */
  body.home-page.mobile-slot-natural-scroll .provider-games-panel,
  body.home-page.mobile-slot-natural-scroll .provider-games-list{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    touch-action:auto!important;
    overscroll-behavior:auto!important;
  }

  /* Provider rail stays aligned beneath both sticky bars and can scroll itself. */
  body.home-page.mobile-slot-natural-scroll .provider-side-rail{
    position:sticky!important;
    top:calc(var(--slot-category-height,58px) + var(--slot-subtab-height,0px))!important;
    height:auto!important;
    max-height:calc(100dvh - var(--slot-header-height,69px) - var(--mobile-bottom-nav-height,70px) - var(--slot-category-height,58px) - var(--slot-subtab-height,0px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.home-page.mobile-slot-natural-scroll .bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:1500!important;
  }
}

/* ===== v1.0.106: SLOT mobile sticky tabs visual shield =====
   Keep scrolling content visually BELOW the sticky category/subcategory bars.
   The previous sticky positioning worked, but the bars themselves were
   transparent, so game cards could be seen sliding underneath/through the gaps. */
@media (max-width:768px){
  body.home-page.mobile-slot-natural-scroll .category-slider{
    position:sticky!important;
    top:0!important;
    z-index:1450!important;
    isolation:isolate!important;
    background:rgba(215,225,233,.98)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    overflow:hidden!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
    box-shadow:0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(0,0,0,.12)!important;
  }

  body.home-page.mobile-slot-natural-scroll .category-row{
    position:relative!important;
    z-index:2!important;
    background:transparent!important;
  }

  body.home-page.mobile-slot-natural-scroll #subTabRow{
    position:sticky!important;
    top:var(--slot-category-height,58px)!important;
    z-index:1440!important;
    isolation:isolate!important;
    background:rgba(215,225,233,.98)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    margin:0!important;
    padding:4px 0 8px!important;
    box-shadow:0 1px 0 rgba(255,255,255,.65), 0 2px 5px rgba(0,0,0,.10)!important;
  }

  /* Ensure lobby content can never paint above the sticky navigation stack. */
  body.home-page.mobile-slot-natural-scroll .game-grid,
  body.home-page.mobile-slot-natural-scroll .provider-lobby-shell,
  body.home-page.mobile-slot-natural-scroll .provider-games-panel,
  body.home-page.mobile-slot-natural-scroll .provider-games-list{
    position:relative!important;
    z-index:1!important;
  }
}

/* ===== v1.0.107: SLOT mobile subcategory background follows page =====
   Keep the sticky subcategory shield behavior, but remove the solid grey panel.
   Using the same fixed page background makes the row look transparent/seamless
   while still preventing scrolling game cards from visually crossing the tabs. */
@media (max-width:768px){
  body.home-page.mobile-slot-natural-scroll #subTabRow{
    background-color:transparent!important;
    background-image:url('../custom/images/background.png')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-attachment:fixed!important;
    background-repeat:no-repeat!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
    border:0!important;
  }
}

/* ===== v1.0.108: SLOT mobile sticky navigation seamless background =====
   The visible grey strip was coming from the sticky .category-slider shield,
   not #subTabRow. Keep the paint shield (so game cards cannot scroll over the
   sticky tabs) but make both sticky layers render the exact same page
   background/overlay as body, so there is no separate coloured panel. */
@media (max-width:768px){
  body.home-page.mobile-slot-natural-scroll .category-slider,
  body.home-page.mobile-slot-natural-scroll #subTabRow{
    background-color:transparent!important;
    background-image:
      linear-gradient(var(--page-background-overlay),var(--page-background-overlay)),
      url('../custom/images/background.png')!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:cover!important;
    background-attachment:fixed!important;
    background-blend-mode:normal!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
    border:0!important;
  }

  body.home-page.mobile-slot-natural-scroll .category-row{
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
  }
}

/* ===== v1.0.109: SLOT mobile sticky subcategory anti-jitter =====
   Freeze the bounded lobby viewport while scrolling and keep the sticky tab
   layers on their own compositor layer. Mobile browser UI can continuously
   change 100dvh/visualViewport while the user reaches the end of the list;
   that was making the sticky threshold recalculate and visibly shake. */
@media (max-width:768px){
  body.home-page.mobile-slot-natural-scroll .main-layout{
    height:calc(var(--slot-mobile-viewport-height, 100dvh) - var(--slot-header-height,69px) - var(--mobile-bottom-nav-height,70px))!important;
    max-height:calc(var(--slot-mobile-viewport-height, 100dvh) - var(--slot-header-height,69px) - var(--mobile-bottom-nav-height,70px))!important;
  }

  body.home-page.mobile-slot-natural-scroll .category-slider,
  body.home-page.mobile-slot-natural-scroll #subTabRow{
    background-attachment:scroll!important;
    transform:translate3d(0,0,0)!important;
    -webkit-transform:translate3d(0,0,0)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    will-change:transform!important;
    contain:paint!important;
  }

  body.home-page.mobile-slot-natural-scroll #subTabRow{
    /* Keep the sticky offset on a stable whole-pixel value. */
    top:var(--slot-category-height,58px)!important;
  }
}

/* VIP 2.0 - configurable tier sub-level progression */
.vip-tier-progress small.vip-tier-meter-label{display:block;margin-top:7px;color:#98a4ba;font-size:11px;font-weight:800}
.vip-reward-row h3 small{display:block;margin-top:4px;color:#9ca6b8;font-size:11px;font-style:normal;font-weight:800}
.vip-reward-box small{margin-top:6px;color:#c4cad7;font-size:11px;line-height:1.35;max-width:92%}
.vip-reward-box em{margin-top:5px;color:#ffca85;font-size:10px;font-style:normal;font-weight:900}
.vip-reward-row.vip-level-current{border-color:rgba(255,190,112,.34)!important;box-shadow:0 0 0 1px rgba(255,190,112,.08),0 12px 28px rgba(0,0,0,.18)}
.vip-reward-row.vip-level-unlocked .vip-reward-box{background:linear-gradient(180deg,rgba(34,71,47,.42),rgba(31,35,40,.94))}
.vip-reward-row.vip-level-locked{opacity:.72}
@media(min-width:900px){.vip-panel[data-vip-panel="level"].active{grid-template-columns:320px 1fr!important}.vip-level-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}.vip-reward-box{align-items:center!important;padding:18px!important;text-align:center}.vip-reward-row h3 small{text-align:left}}


/* ===== v1.0.110: history/downline back buttons + bank scroll + stable header/language layout ===== */
.page-back-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
}
.page-back-link{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Bank Detail used to inherit the desktop lobby's html/body 100vh + overflow:hidden.
   That clipped the lower fields/button on short desktop windows. This page is a form,
   so always allow natural document scrolling on every viewport size. */
html:has(body.bank-detail-page),
html:has(body.bank-detail-page) body.bank-detail-page{
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body.bank-detail-page{
  display:block!important;
  padding-bottom:57px!important;
  touch-action:pan-y!important;
}
body.bank-detail-page .bank-detail-main{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
body.bank-detail-page .bank-detail-card{
  overflow:visible!important;
}

/* Keep the header's final desktop geometry from the first rendered frame. The base
   stylesheet originally starts with justify-content:center; async shell/header markup
   then changed it to right aligned, producing the visible center -> right jump. */
.top-header{
  justify-content:flex-start!important;
}
.top-header .logo-box,
.top-header .mobile-style-logo{
  margin-right:auto!important;
  flex:0 0 auto!important;
}
.top-header-actions{
  margin-left:auto!important;
  flex:0 0 auto!important;
}
@media (min-width:769px){
  .top-header-actions{
    position:absolute!important;
    right:28px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }
}
@media (max-width:768px){
  .top-header-actions{
    position:static!important;
    transform:none!important;
    margin-left:auto!important;
  }
}

/* Prevent translation reflow/scroll anchoring from nudging Setting while the language
   popup is being switched. JS also preserves the menu's exact viewport position. */
body.setting-page,
body.setting-page .setting-main,
body.setting-page .setting-shell,
body.setting-page .setting-card{
  overflow-anchor:none!important;
}
body.setting-page .setting-item > span:nth-child(2){
  min-width:0!important;
}


/* ===== v1.0.111: integrated back-button placement for Downline + History ===== */
body.downline-page .downline-head{
  justify-content:flex-start!important;
}
body.downline-page .downline-title-block{
  min-width:0;
}
body.downline-page .downline-head-back{
  flex:0 0 auto;
  align-self:center;
  margin:0 14px 0 0!important;
  position:relative!important;
  top:auto!important;
  left:auto!important;
}
body.downline-page .downline-code{
  margin-left:auto;
}
body.history-page .history-tabs{
  align-items:center;
}
body.history-page .history-tabs-back{
  flex:0 0 auto;
  margin:0 2px 0 0!important;
  position:relative!important;
  top:auto!important;
  left:auto!important;
}
@media (max-width: 700px){
  body.downline-page .downline-head-back{margin-right:10px!important;}
  body.history-page .history-tabs{padding-left:14px!important;}
  body.history-page .history-tabs-back{margin-right:0!important;}
}

/* ===== v1.0.112: Setting language geometry lock =====
   English and Chinese use different font fallback metrics. Previously the profile
   rows/menu buttons only had min-height + normal line-height, so the CJK font made
   each row a few pixels taller. Across all rows this changed the card height and
   pushed the Setting panel up/down when switching language. Keep the same physical
   row/heading/button geometry for every language instead of compensating scroll. */
body.setting-page .setting-profile-mini-merged{
  box-sizing:border-box!important;
  min-height:88px!important;
  height:88px!important;
  margin-bottom:16px!important;
  padding-bottom:16px!important;
}
body.setting-page .setting-merged-profile-heading{
  box-sizing:border-box!important;
  min-height:47px!important;
  height:47px!important;
  margin-bottom:8px!important;
  display:flex!important;
  align-items:flex-start!important;
}
body.setting-page .setting-merged-profile-heading h1{
  line-height:24px!important;
  min-height:24px!important;
  margin:0!important;
}
body.setting-page .setting-merged-profile-heading p{
  line-height:16px!important;
  min-height:16px!important;
  margin:4px 0 0!important;
}
body.setting-page .profile-list{
  margin-top:0!important;
}
body.setting-page .profile-row{
  box-sizing:border-box!important;
  height:39px!important;
  min-height:39px!important;
  padding:0!important;
  line-height:18px!important;
}
body.setting-page .profile-row > span,
body.setting-page .profile-row > strong{
  line-height:18px!important;
  margin:0!important;
}
body.setting-page .setting-toggle{
  box-sizing:border-box!important;
  height:58px!important;
  min-height:58px!important;
  line-height:22px!important;
}
body.setting-page .setting-menu{
  align-items:stretch!important;
}
body.setting-page .setting-item{
  box-sizing:border-box!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  line-height:18px!important;
  overflow:hidden!important;
}
body.setting-page .setting-item > span:nth-child(2){
  line-height:18px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.setting-page .setting-ico{
  line-height:1!important;
}
body.setting-page .setting-item em{
  line-height:22px!important;
}

/* On narrow screens labels can still use the same stable row height. */
@media (max-width:900px){
  body.setting-page .setting-profile-mini-merged{
    min-height:88px!important;
    height:88px!important;
  }
  body.setting-page .profile-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    height:39px!important;
    min-height:39px!important;
  }
  body.setting-page .profile-row strong{
    text-align:right!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    max-width:56vw!important;
  }
}

/* VIP milestone artwork + profile badge v2.1.0 */
body.vip-page .vip-reward-box.vip-milestone-reward{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;min-width:260px!important}
body.vip-page .vip-milestone-image{width:78px!important;height:64px!important;object-fit:contain!important;display:block!important;flex:0 0 auto!important;filter:drop-shadow(0 5px 10px rgba(0,0,0,.24))}
body.vip-page .vip-milestone-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;min-width:0!important}
body.vip-page .vip-milestone-copy strong{white-space:nowrap!important}
body.vip-page .vip-milestone-copy small{max-width:210px!important;line-height:1.25!important;color:#d7d1c8!important;text-align:left!important}
body.vip-page .vip-milestone-copy em{font-style:normal!important;font-size:11px!important;line-height:1.25!important;color:#ffca6b!important;text-align:left!important}
body.setting-page .setting-profile-mini-merged .profile-badge.profile-vip-badge-rich{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-width:0!important;max-width:128px!important;padding:5px 9px!important;border-radius:999px!important;overflow:hidden!important}
body.setting-page .profile-vip-badge-rich img{width:25px!important;height:25px!important;object-fit:contain!important;flex:0 0 25px!important}
body.setting-page .profile-vip-badge-rich i{width:auto!important;font-size:14px!important;color:#ffd75d!important;flex:0 0 auto!important}
body.setting-page .profile-vip-badge-rich span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:11px!important;font-weight:900!important}
@media(max-width:760px){body.vip-page .vip-reward-box.vip-milestone-reward{min-width:210px!important;gap:8px!important}body.vip-page .vip-milestone-image{width:62px!important;height:52px!important}body.vip-page .vip-milestone-copy small{max-width:150px!important}}


/* VIP manual milestone claim v2.2.0 */
body.vip-page .vip-claim-button{cursor:pointer!important;pointer-events:auto!important;opacity:1!important;position:relative!important;overflow:hidden!important;box-shadow:0 0 18px rgba(255,190,72,.28)!important;animation:vipClaimPulse 1.8s ease-in-out infinite!important}
body.vip-page .vip-claim-button:hover{transform:translateY(-1px) scale(1.03)!important}
body.vip-page .vip-claim-button.is-claiming{cursor:wait!important;animation:none!important;opacity:.82!important}
body.vip-page .vip-claimed-button{opacity:.82!important}
body.vip-page .vip-level-unlocked .vip-milestone-image,body.vip-page .vip-level-current .vip-milestone-image{filter:drop-shadow(0 6px 14px rgba(255,190,72,.34))!important}
@keyframes vipClaimPulse{0%,100%{box-shadow:0 0 10px rgba(255,190,72,.18)}50%{box-shadow:0 0 24px rgba(255,190,72,.50)}}
@media(prefers-reduced-motion:reduce){body.vip-page .vip-claim-button{animation:none!important}}
body.vip-page .vip-reward-history-row .vip-history-claim{border:1px solid rgba(255,197,89,.72);border-radius:10px;padding:8px 13px;background:linear-gradient(180deg,#ffcf69,#e99b22);font-weight:900;cursor:pointer;white-space:nowrap;box-shadow:0 5px 15px rgba(0,0,0,.2)}
body.vip-page .vip-reward-history-row .vip-history-claim:hover{transform:translateY(-1px)}
body.vip-page .vip-reward-history-row .vip-history-claim:disabled{opacity:.7;cursor:wait}


/* VIP dual milestone artwork/perks v2.3.0 */
body.vip-page .vip-reward-box.vip-milestone-reward{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:18px!important;min-width:360px!important;flex-wrap:wrap!important}
body.vip-page .vip-milestone-perk{display:flex!important;align-items:center!important;gap:9px!important;min-width:135px!important}
body.vip-page .vip-milestone-perk+.vip-milestone-perk{padding-left:16px!important;border-left:1px solid rgba(255,255,255,.10)!important}
body.vip-page .vip-perk-label{font-size:10px!important;line-height:1!important;text-transform:uppercase!important;letter-spacing:.3px!important;color:#aaa49d!important;white-space:nowrap!important}
body.vip-page .vip-deposit-stack{width:58px!important;height:58px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(145deg,#5f2d8b,#9a4dd1)!important;color:#ffd862!important;font-size:27px!important;box-shadow:0 5px 14px rgba(0,0,0,.23)!important}
body.vip-page .vip-deposit-bonus-image{width:78px!important;height:64px!important}
body.vip-page .vip-milestone-note{flex-basis:100%!important;font-size:11px!important;color:#d7d1c8!important;line-height:1.3!important;text-align:left!important}
@media(max-width:760px){body.vip-page .vip-reward-box.vip-milestone-reward{min-width:230px!important;gap:10px!important}body.vip-page .vip-milestone-perk+.vip-milestone-perk{padding-left:10px!important}body.vip-page .vip-milestone-note{width:100%!important}}

/* VIP per-step turnover artwork */
body.vip-page .vip-turnover-stack{width:78px!important;height:64px!important;display:grid!important;place-items:center!important;flex:0 0 auto!important;font-size:30px!important;color:#f3c86a!important;background:radial-gradient(circle,rgba(255,207,92,.18),transparent 70%)!important}
body.vip-page .vip-turnover-image{object-fit:contain!important}

/* VIP milestone perks v2.5.0: artwork above, label/value below to prevent horizontal overflow */
body.vip-page .vip-reward-box.vip-milestone-reward{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:start!important;
  justify-content:stretch!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
body.vip-page .vip-milestone-perk{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  min-width:0!important;
  width:100%!important;
  padding:0 8px!important;
  box-sizing:border-box!important;
  text-align:center!important;
}
body.vip-page .vip-milestone-perk+.vip-milestone-perk{
  padding-left:8px!important;
  border-left:1px solid rgba(255,255,255,.10)!important;
}
body.vip-page .vip-milestone-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:3px!important;
  width:100%!important;
  min-width:0!important;
  text-align:center!important;
}
body.vip-page .vip-milestone-copy small,
body.vip-page .vip-milestone-copy strong,
body.vip-page .vip-milestone-copy em{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  text-align:center!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
body.vip-page .vip-milestone-copy strong{
  white-space:normal!important;
  line-height:1.2!important;
}
body.vip-page .vip-milestone-image,
body.vip-page .vip-coin-stack,
body.vip-page .vip-deposit-stack,
body.vip-page .vip-turnover-stack{
  margin:0 auto!important;
  flex:0 0 auto!important;
}
body.vip-page .vip-milestone-note{
  grid-column:1 / -1!important;
  width:100%!important;
  min-width:0!important;
  text-align:center!important;
}
@media(max-width:760px){
  body.vip-page .vip-reward-box.vip-milestone-reward{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    min-width:0!important;
  }
  body.vip-page .vip-milestone-perk{padding:0 4px!important;gap:5px!important}
  body.vip-page .vip-milestone-perk+.vip-milestone-perk{padding-left:4px!important}
  body.vip-page .vip-milestone-image,
  body.vip-page .vip-coin-stack,
  body.vip-page .vip-deposit-stack,
  body.vip-page .vip-turnover-stack{width:54px!important;height:48px!important}
  body.vip-page .vip-milestone-copy small{font-size:10px!important}
  body.vip-page .vip-milestone-copy strong{font-size:13px!important}
}
@media(max-width:430px){
  body.vip-page .vip-reward-box.vip-milestone-reward{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.vip-page .vip-milestone-note{grid-column:1 / -1!important}
}

/* VIP milestone column sizing v2.6.0: keep artwork + label + value fully visible */
body.vip-page .vip-level-list{
  align-items:stretch!important;
}
body.vip-page .vip-reward-row{
  height:100%!important;
  align-content:start!important;
}
body.vip-page .vip-reward-box.vip-milestone-reward{
  height:auto!important;
  min-height:164px!important;
  padding:16px 14px 18px!important;
  align-items:stretch!important;
  overflow:visible!important;
  grid-auto-rows:auto!important;
}
body.vip-page .vip-milestone-perk{
  min-height:124px!important;
  justify-content:flex-start!important;
  padding:0 10px!important;
}
body.vip-page .vip-milestone-image,
body.vip-page .vip-coin-stack,
body.vip-page .vip-deposit-stack,
body.vip-page .vip-turnover-stack{
  width:72px!important;
  height:62px!important;
  max-width:100%!important;
}
body.vip-page .vip-milestone-copy{
  margin-top:2px!important;
  min-height:44px!important;
}
body.vip-page .vip-milestone-copy small{
  min-height:14px!important;
  font-size:10px!important;
  line-height:1.2!important;
}
body.vip-page .vip-milestone-copy strong{
  min-height:20px!important;
  font-size:14px!important;
  line-height:1.35!important;
  overflow:visible!important;
}
body.vip-page .vip-milestone-note{
  margin-top:2px!important;
  padding-top:8px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}
@media(max-width:760px){
  body.vip-page .vip-reward-box.vip-milestone-reward{
    min-height:150px!important;
    padding:14px 8px 16px!important;
  }
  body.vip-page .vip-milestone-perk{
    min-height:112px!important;
    padding:0 4px!important;
  }
  body.vip-page .vip-milestone-image,
  body.vip-page .vip-coin-stack,
  body.vip-page .vip-deposit-stack,
  body.vip-page .vip-turnover-stack{
    width:58px!important;
    height:52px!important;
  }
}
@media(max-width:430px){
  body.vip-page .vip-reward-box.vip-milestone-reward{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* VIP milestone spacing v2.6.1: tighten level cards/perk spacing */
body.vip-page .vip-level-list{
  gap:10px!important;
  row-gap:10px!important;
  column-gap:10px!important;
}
body.vip-page .vip-reward-row{
  padding:13px!important;
}
body.vip-page .vip-reward-box.vip-milestone-reward{
  gap:8px!important;
  padding:14px 10px 15px!important;
}
body.vip-page .vip-milestone-perk{
  gap:4px!important;
  padding:0 6px!important;
}
body.vip-page .vip-milestone-copy{
  gap:2px!important;
  margin-top:0!important;
}
@media(max-width:760px){
  body.vip-page .vip-level-list{gap:8px!important}
  body.vip-page .vip-reward-row{padding:11px!important}
  body.vip-page .vip-reward-box.vip-milestone-reward{gap:6px!important;padding:12px 7px 13px!important}
}

/* VIP mobile perk row v2.6.2: always keep Level Bonus / Deposit Bonus / Turnover on one row */
@media(max-width:760px){
  body.vip-page .vip-reward-box.vip-milestone-reward{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:2px!important;
    padding:12px 4px 13px!important;
  }
  body.vip-page .vip-milestone-perk{
    min-width:0!important;
    width:100%!important;
    min-height:112px!important;
    padding:0 2px!important;
  }
  body.vip-page .vip-milestone-perk+.vip-milestone-perk{
    padding-left:2px!important;
  }
  body.vip-page .vip-milestone-image,
  body.vip-page .vip-coin-stack,
  body.vip-page .vip-deposit-stack,
  body.vip-page .vip-turnover-stack{
    width:52px!important;
    height:48px!important;
  }
  body.vip-page .vip-milestone-copy small{
    font-size:9px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  body.vip-page .vip-milestone-copy strong{
    font-size:13px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
}
@media(max-width:430px){
  body.vip-page .vip-reward-box.vip-milestone-reward{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* ===== VIP / History back-to-top finishing patch 2026-08-23 =====
   VIP has no mobile bottom navigation. The global mobile rule reserves 57px for
   pages that do, which exposed the body's dark fallback below the VIP artwork. */
@media (max-width:768px){
  html:has(body.vip-page),
  html:has(body.vip-page) body.vip-page{
    min-height:100dvh!important;
    background-color:transparent!important;
  }
  body.vip-page{
    padding-bottom:0!important;
  }
  body.vip-page .vip-main{
    min-height:100dvh!important;
    margin-bottom:0!important;
    padding-bottom:max(28px,env(safe-area-inset-bottom))!important;
  }
}

/* VIP is a naturally scrolling content page on tablet/desktop as well. Keep the
   document as the scroll owner so the shared back-to-top control works everywhere. */
@media (min-width:769px){
  html:has(body.vip-page),
  html:has(body.vip-page) body.vip-page{
    height:auto!important;
    max-height:none!important;
    min-height:100vh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  body.vip-page{
    display:block!important;
  }
  body.vip-page .vip-main{
    height:auto!important;
    max-height:none!important;
    min-height:100vh!important;
    overflow:visible!important;
  }
}

/* Keep the shared control above page chrome on both VIP and History. */
body.vip-page .naga-scroll-top-btn,
body.history-page .naga-scroll-top-btn{
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
}

/* VIP milestone full banner v2.4.0 */
body.vip-page .vip-reward-box.vip-milestone-reward.has-full-banner{padding:0!important;display:block!important;overflow:hidden!important;min-height:0!important;background:#cfe8ff!important}body.vip-page .vip-milestone-full-banner{display:block!important;width:100%!important;height:100%!important;min-height:150px!important;max-height:220px!important;object-fit:cover!important;object-position:center!important;border:0!important;border-radius:0!important;margin:0!important}body.vip-page .vip-level-locked .vip-milestone-full-banner{filter:saturate(.78) brightness(.86);opacity:.82}@media(max-width:760px){body.vip-page .vip-milestone-full-banner{min-height:118px!important;max-height:170px!important}}

/* VIP milestone full-banner clickable HTML detail modal (lazy UI; no extra network request). */
body.vip-page .vip-milestone-full-banner.is-clickable{cursor:pointer;transition:transform .14s ease,filter .14s ease}body.vip-page .vip-milestone-full-banner.is-clickable:hover{filter:brightness(1.04);transform:scale(1.004)}body.vip-page .vip-milestone-full-banner.is-clickable:focus-visible{outline:3px solid #53a9ff;outline-offset:-3px}.vip-banner-modal-open{overflow:hidden!important}.vip-banner-detail-overlay{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,9,20,.72);backdrop-filter:blur(4px)}.vip-banner-detail-overlay.show{display:flex}.vip-banner-detail-modal{position:relative;width:min(720px,calc(100vw - 32px));max-height:min(82vh,760px);overflow:auto;border:2px solid #e3b727;border-radius:18px;padding:24px;background:linear-gradient(180deg,#17130f,#241b12);color:#fff;box-shadow:0 24px 70px rgba(0,0,0,.5)}.vip-banner-detail-modal h3{margin:0 42px 18px 0;padding-bottom:13px;border-bottom:2px solid #e3b727;color:#ffd847;font-size:20px;font-weight:900}.vip-banner-detail-content{font-size:15px;line-height:1.65;color:#fff}.vip-banner-detail-content h1,.vip-banner-detail-content h2,.vip-banner-detail-content h3,.vip-banner-detail-content h4{color:#ffd847}.vip-banner-detail-content img{max-width:100%;height:auto}.vip-banner-detail-content a{color:#69c4ff}.vip-banner-detail-content table{width:100%;border-collapse:collapse}.vip-banner-detail-content td,.vip-banner-detail-content th{padding:7px;border:1px solid rgba(255,255,255,.22)}.vip-banner-detail-x{position:absolute;right:14px;top:12px;border:0;background:transparent;color:#fff;font-size:30px;line-height:1;cursor:pointer}.vip-banner-detail-actions{display:flex;justify-content:center;margin-top:22px;padding-top:18px;border-top:2px solid #e3b727}.vip-banner-detail-close{min-width:190px;border:0;border-radius:12px;padding:13px 22px;background:linear-gradient(180deg,#ff7c6f,#e34036);color:#fff;font-size:16px;font-weight:900;cursor:pointer}@media(max-width:760px){.vip-banner-detail-overlay{padding:12px}.vip-banner-detail-modal{width:calc(100vw - 20px);max-height:86vh;padding:18px 16px;border-radius:14px}.vip-banner-detail-modal h3{font-size:18px}.vip-banner-detail-content{font-size:14px}.vip-banner-detail-close{width:100%;min-width:0}}

/* ===== VIP layout preservation + perk spacing fix 2026-08-24 =====
   Keep the existing full-width progress card / two-column level cards layout,
   while only tightening milestone perk spacing and removing unused bottom space. */
@media (min-width:900px){
  body.vip-page .vip-panel[data-vip-panel="level"].active{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  body.vip-page .vip-progress-card{
    width:100%!important;
    box-sizing:border-box!important;
  }
  body.vip-page .vip-level-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (min-width:761px){
  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner){
    min-height:124px!important;
    height:auto!important;
    padding:11px 10px 9px!important;
    align-items:start!important;
    row-gap:4px!important;
  }

  /* One perk: keep it centered. */
  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner):not(:has(> .vip-milestone-perk + .vip-milestone-perk)){
    grid-template-columns:112px!important;
    justify-content:center!important;
  }

  /* Exactly two perks: compact centered pair instead of two wide 1fr columns. */
  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner):has(> .vip-milestone-perk + .vip-milestone-perk):not(:has(> .vip-milestone-perk + .vip-milestone-perk + .vip-milestone-perk)){
    grid-template-columns:repeat(2,112px)!important;
    justify-content:center!important;
    column-gap:18px!important;
  }

  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner) > .vip-milestone-perk{
    min-height:0!important;
    padding:0 4px!important;
    gap:3px!important;
  }

  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner) > .vip-milestone-perk + .vip-milestone-perk{
    padding-left:4px!important;
    border-left:0!important;
  }

  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner) .vip-milestone-image,
  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner) .vip-coin-stack,
  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner) .vip-deposit-stack,
  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner) .vip-turnover-stack{
    width:64px!important;
    height:56px!important;
  }

  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner) .vip-milestone-copy{
    min-height:0!important;
    margin-top:0!important;
    gap:1px!important;
  }

  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner) .vip-milestone-copy small,
  body.vip-page .vip-reward-box.vip-milestone-reward:not(.has-full-banner) .vip-milestone-copy strong{
    min-height:0!important;
  }
}


/* ===== VIP claim reminder badge (BO Layout Section-safe) =====
   The sidebar HTML can be replaced by BO at runtime. JS adds the class to the
   current VIP link after each replacement, so this styling does not depend on
   the bundled sidebar markup. */
.naga-vip-reminder-link{
  position:relative!important;
}
.naga-vip-claim-badge{
  position:absolute;
  top:50%;
  right:42px;
  transform:translateY(-50%);
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border:2px solid #fff;
  border-radius:999px;
  background:#e60012;
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:900;
  box-sizing:border-box;
  box-shadow:0 2px 8px rgba(230,0,18,.42);
  pointer-events:none;
  animation:nagaVipClaimBadgePulse 1.8s ease-in-out infinite;
}
@keyframes nagaVipClaimBadgePulse{
  0%,100%{transform:translateY(-50%) scale(1);box-shadow:0 2px 8px rgba(230,0,18,.38)}
  50%{transform:translateY(-50%) scale(1.10);box-shadow:0 2px 13px rgba(230,0,18,.62)}
}
@media(prefers-reduced-motion:reduce){
  .naga-vip-claim-badge{animation:none}
}

/* ===== v1.1.12: authoritative BO Homepage Bonus visibility =====
   IMPORTANT: keep this block at the END of style.css. Earlier desktop lobby
   rules contain #homeBonusDisplaySection { display:block!important; } and must
   never override a confirmed BO Disabled state. Conversely, Enabled must clear
   any stale hidden state from a previous refresh. */
html[data-home-bonus-enabled="0"] body.home-page #homeBonusDisplaySection,
html[data-home-bonus-enabled="0"] body.home-page [data-home-bonus-display] {
  display:none!important;
  visibility:hidden!important;
}
html[data-home-bonus-enabled="1"] body.home-page #homeBonusDisplaySection {
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}


/* ===== v1.1.13: no-flash BO Homepage Bonus bootstrap =====
   The HTML starts in pending state. Keep the promotion column fully hidden until
   frontend-display.js receives the live BO setting. This prevents a Disabled
   brand from flashing the bundled/predefined promotion markup on every reload. */
html[data-home-bonus-enabled="pending"] body.home-page #homeBonusDisplaySection,
html[data-home-bonus-enabled="pending"] body.home-page [data-home-bonus-display] {
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

/* ===== Live Transaction widget ===== */
.live-transaction-widget{width:100%;margin:12px 0 14px;font-family:Arial,sans-serif;color:#071f55;background:#f7f9fc;border-radius:7px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.live-transaction-widget[hidden]{display:none!important}
.live-transaction-title{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 5px;background:#eef2f8;color:#0647aa;font-size:12px;font-weight:900;letter-spacing:.1px}
.live-transaction-title b{display:flex;align-items:center;gap:4px;background:#ed111b;color:#fff;border-radius:2px;padding:2px 5px;font-size:10px;line-height:1}
.live-transaction-title b i{width:7px;height:7px;border-radius:50%;background:#fff;display:inline-block;animation:liveTransactionPulse 1.1s ease-in-out infinite}
.live-transaction-table{border-top:1px solid #d7dde7}
.live-transaction-head,.live-transaction-row{display:grid;grid-template-columns:1.06fr 1.06fr .88fr;align-items:center}
.live-transaction-head{min-height:24px;background:#c91520;color:#fff;font-size:10px;font-weight:900;text-transform:uppercase}
.live-transaction-head span{padding:4px 5px;border-right:1px solid rgba(255,255,255,.5);min-width:0}
.live-transaction-head span:last-child{border-right:0}
.live-transaction-row{min-height:26px;font-size:10px;font-weight:800;background:#fff;transition:opacity .18s ease,transform .18s ease}
.live-transaction-row:nth-child(even){background:#e9edf3}
.live-transaction-row>span{display:flex;align-items:center;gap:4px;min-width:0;padding:4px 5px;white-space:nowrap;overflow:hidden}
.live-transaction-row .lt-user{overflow:hidden;text-overflow:ellipsis;color:#0647aa;min-width:0}
/* Deposit / Withdraw use separate selectors so each side can be styled independently. */
.live-transaction-row .lt-amount{flex:0 0 auto}
.live-transaction-row .lt-deposit-amount{color:#e31520}
.live-transaction-row .lt-withdraw-amount{color:#e31520}
.live-transaction-row .lt-provider{display:block;overflow:hidden;text-overflow:ellipsis;color:#0647aa;text-transform:uppercase}
.live-transaction-empty{padding:14px 8px;text-align:center;font-size:10px;font-weight:800;color:#6b7280;background:#fff}
@keyframes liveTransactionPulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.live-transaction-title b i{animation:none}}
@media(max-width:900px){.mobile-bottom-area .live-transaction-widget{margin:12px 0}.left-sidebar .live-transaction-widget{display:none!important}}

/* ===== VIP mobile spacing/alignment fix 2026-09-01 =====
   Keep the approved VIP visuals unchanged; only normalize mobile gutters and
   restore breathing room between the tier progress card and milestone list. */
@media (max-width:760px){
  body.vip-page .vip-content-wrap{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  body.vip-page .vip-panel[data-vip-panel="level"].active{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
  }

  body.vip-page .vip-progress-card{
    box-sizing:border-box!important;
    width:auto!important;
    max-width:calc(100% - 14px)!important;
    margin-left:14px!important;
    margin-right:0!important;
    margin-bottom:18px!important;
  }

  body.vip-page .vip-level-list{
    box-sizing:border-box!important;
    width:auto!important;
    max-width:calc(100% - 14px)!important;
    margin-left:14px!important;
    margin-right:0!important;
  }

  body.vip-page .vip-reward-row{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* ===== VIP mobile progress inner padding fix 2026-09-01 =====
   Keep current design; add safe inner gutters so the Bronze/EXP copy and
   Current badge do not touch the progress-card edges. */
@media (max-width:760px){
  body.vip-page .vip-progress-card.vip-tier-progress{
    padding:8px 10px 12px 10px!important;
  }
}

/* ===== Desktop provider landing: wrap providers into rows (no horizontal rail) =====
   Match the mobile provider-first behaviour: providers fill left-to-right in
   ascending BO order, then continue on the next row. Wide desktop shows 6
   providers per row; standard desktop shows 5. */
@media (min-width:769px){
  body.home-page .category-provider-cards{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    overflow-x:visible!important;
    overflow-y:visible!important;
    padding:2px 0 10px!important;
    margin:0!important;
    scroll-snap-type:none!important;
  }
  body.home-page .category-provider-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    flex:none!important;
    margin:0!important;
    padding:0!important;
  }
  body.home-page .category-provider-card img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    object-fit:contain!important;
  }
  body.home-page .category-provider-section,
  body.home-page .category-mixed-shell{
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
}

/* With the fixed 400px left/right panels, medium desktop has less centre room.
   Use five providers per row there instead of squeezing six. */
@media (min-width:769px) and (max-width:1699px){
  body.home-page .category-provider-cards{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:12px!important;
  }
}