.content-page--exclusive {
    background: linear-gradient(180deg, rgba(82, 55, 153, 0) 0%, #ffc107 100%) !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 255) 0%, #ffc107 100%) !important;
}
.leaderboard {
    background-image: url(https://cdn.picpuk.com/Luxiplayleaderboard-mobile.webp) !important;
}
.sidebar__content.opened {
    background: #000000 url(https://cdn.picpuk.com/bg-luxi-new-black.webp) center top no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.modals-sidemenu .modal-dialog-scrollable .modal-content {
    background: #000000 url(https://cdn.picpuk.com/bg-luxi-new-black.webp) center top no-repeat;
    background-size: cover;
}
.content {
    background: #000000 url('') center center no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: top;
}
.content-page--dark {
        background: #000000 url('') center center no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: top;
}
/* Versi Desktop */
body {
    background: #000000 url('') 
                center top no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.content-page--hot {
    background: linear-gradient(180deg, rgba(0, 0, 0, 255) 0%, rgb(139 148 1 / 25%) 50%, #ffc107 100%)!important;
}

.content-page--slider .splide-game-default__container--upcoming-lotto .splide-game-default__wrapper {
    background: linear-gradient(180deg, rgba(1, 46, 33, 0) 0%, #fecd44 100%) !important;
}

.marquee {
    background: #001216 !important;
}

.button-form-auth:hover, .button-form-auth:focus, .box-joker-spin .btn-jokerspin:hover, .splide-game-default__container--upcoming-lotto:hover .splide-game-default__button, .box-card-sports:hover .btn-default-sports, .splide-game-default__wrapper:hover .splide-game-default__btn, .custom-btn-action:hover {
    background: linear-gradient(180deg, #fecd44 0%, #ff9000 100%) !important;
    box-shadow: 0px 2px 0px 0px #ffc107 !important;
}

.header-misc__link--bar {
    background: linear-gradient(360deg, #ffdc64 0%, #ffd45a 100%) !important;
    box-shadow: 0px 2px 0px 0px #ffce24 !important;

}

.header-misc__link--bar:hover {
    background: linear-gradient(360deg, #fe7444 0%, #fe8f44 100%) !important;
    box-shadow: 0px 2px 0px 0px #ffce24 !important;
}
.deposit__btn {
    background: linear-gradient(to top, #ffc107 0%, #fecd44 100%) !important;
    box-shadow: 0 3px 0 0 #ffc107 !important;
}
.content-page__pending-wrapper {
  background: linear-gradient(180deg, #000000e0 0%, rgb(18 18 18 / 68%) 35.87%), linear-gradient(0deg, #343a40, #0f0f0f14) !important;
}

.salin {
  background-color: rgba(174, 255, 146, 0.1) !important;
  border: 1px solid rgb(255, 218, 146) !important;
  color: rgb(255, 253, 146) !important;
}
.header-btn--bar {
    background: linear-gradient(360deg, #ffce24 0%, #fff 100%) !important;
    box-shadow: 0px -2px 0px 0px #ffc107 inset !important;
}

.form-button:hover, .form-button:focus {
    color: #212529 !important;
    background: linear-gradient(360deg, #ffce24 0%, #ffc107 100%) !important;
}
.welcome__btn {
    width: 100%;
    background: linear-gradient(to top, #ffce24 0%, #ffce24 100%) !important;
    box-shadow: 0 3px 0 0 #ffc107 !important;
}
.sidebar-button {
  color: rgb(6, 6, 6) !important;
  background: linear-gradient(to top, #feebb1 0%, #feca50 100%) !important;
  box-shadow: 0 3px 0 0 #ffbd23 !important;
}
.layout-result-game__button:hover, .referral-action__button:hover, .user-referral__content-item--detail-btn:hover, .user-referral__content-item--play-btn:hover, .game-promotions__content-item--detail-btn:hover, .game-promotions__content-item--play-btn:hover {
    color: #020202;
    background: linear-gradient(to top, #ff8c07 0%, #ffc107 100%) !important;
    box-shadow: 0px 2px 0px 0px #ffc107 !important !important;
}

.header {
    background: linear-gradient(180deg, #1b1b1b 0%, #0B1918 100%) !important;
}
.header-btn:focus {
    background: url(https://media.wtgplay.xyz/style/supernova/global-icon/btn-vector.png), linear-gradient(360deg, #fd7e1a 0%, #ffc107 100%) !important;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Fallback Mobile */
@media (max-width: 768px) {
    body {
        background-attachment: scroll !important; /* hilangkan fixed */
        background-position: center top;
    }
}
.footer {
    background: #04040485 !important;
}

/* Backdrop + modal Register */
.lp-modal__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);
  display:none;align-items:center;justify-content:center;z-index:99999;backdrop-filter:blur(2px)}
.lp-modal__backdrop.show{display:flex}
.lp-modal{width:min(92vw,420px);border-radius:16px;overflow:hidden;
  background:#121212;color:#fff;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 48px rgba(0,0,0,.5);transform:scale(.96);opacity:0;transition:.18s ease}
.lp-modal.show{transform:scale(1);opacity:1}
.lp-modal__head{display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:linear-gradient(135deg,#1b1b1b,rgba(255,200,107,.14))}
.lp-modal__head .ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.lp-modal--err .ico{background:#7a1d1d}
.lp-modal--ok  .ico{background:#1f6b3d}
.lp-modal__title{font-weight:700}
.lp-modal__body{padding:16px;line-height:1.5}
.lp-modal__actions{display:flex;gap:10px;justify-content:flex-end;padding:0 16px 16px}
.lp-btn{padding:10px 14px;border-radius:10px;border:1px solid transparent;cursor:pointer}
.lp-btn--gold{background:#ffc86b;color:#161616;font-weight:700}
.lp-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}

/* END MODAL REGISTER */

/* LOGIN  */
/* === semua rule di-scope ke halaman login saja === */
.page-login{
  /* variabel khusus login */
  --banner-min: 180px;
  --banner-ideal: 32vw;
  --banner-max: 360px;
  --form-gap: 16px;
  --card-maxw: 560px;
  --card-pad: 16px;
}

/* Banner cover */
.page-login .content-page__login{
  position: relative;
  text-align: center;
  color:#fff;
  padding-top: clamp(var(--banner-min), var(--banner-ideal), var(--banner-max));
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
}
.page-login .content-page__login>img{
  position:absolute; inset:0 0 auto 0;
  width:100%;
  height: clamp(var(--banner-min), var(--banner-ideal), var(--banner-max));
  object-fit:cover; object-position:center; display:block;
}
.page-login .content-page__login h1,
.page-login .content-page__login p{
  position:relative; z-index:1; margin:8px 16px 0;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}

/* Wrapper & card */
.page-login .content-page__body-position--set{ margin-top: var(--form-gap); }
.page-login .content-page__body-main{
  max-width: var(--card-maxw);
  margin-inline:auto;
  width: calc(100% - 20px);
}
.page-login .content-page__body-wrapper{ padding: var(--card-pad); }

/* Form feel */
.page-login .form-auth__label{ font-size:.95rem; }
.page-login .form-auth__input{
  -webkit-appearance:none; font-size:16px; padding:12px 14px; width:100%;
}
.page-login .form-footer .btn.form-button{ width:100%; }

/* Eye icon */
.page-login .form-auth__wrapper--password{ position:relative; }
.page-login .form-auth__wrapper--password #showeye,
.page-login .form-auth__wrapper--password #unshoweye{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  padding:8px; cursor:pointer; z-index:2;
}

/* Breakpoints */
@media (min-width:480px){
  .page-login{ --card-pad:20px; --form-gap:18px; }
}
@media (min-width:768px){
  .page-login{
    --banner-min:240px; --banner-ideal:28vw; --banner-max:420px;
    --card-maxw:640px; --card-pad:24px; --form-gap:22px;
  }
}
@media (min-width:1024px){
  .page-login{
    --banner-min:280px; --banner-ideal:24vw; --banner-max:460px;
    --card-maxw:720px; --form-gap:26px;
  }
}

/* Fix 100vh iOS (khusus login) */
.page-login .content-page--auth{ min-height: calc(var(--vh, 1vh) * 100); }

/* END LOGIN */