:root{

    --clr-secondary: #8a63d2;
    --clr-style-1: #ece3ff;
    --clr-style-2: #c9b2f0;
    --clr-danger: #ff8fc0;
    --clr-dark: #1c2043;
    --clr-surface: #232853;
    --clr-border-primary: #8a63d2;
    /* Text colors */
    --clr-text-muted: #AAAAAA;
    --clr-text-secondary: #99A1BB;
    /* Status colors */
    --clr-success: #4CAF50;
    --clr-error: #F44336;
    --clr-warning: #FF9800;
    --background-dark: linear-gradient(315deg, rgb(19, 14, 42) 0%, rgb(42, 30, 90) 50%, rgb(19, 14, 42) 100%);
    --background-transparent: rgba(255,255,255,0.1);
    --background-light: repeating-linear-gradient(to right, #8a63d2 0%, #9a7fd6 8%, #9a7fd6 18%, #ff8fc0 27%, #c9b2f0 35%, #ece3ff 40%, #c9b2f0 50%, #ff8fc0 58%, #9a7fd6 67%, #8a63d2 77%, #9a7fd6 83%, #ff8fc0 88%, #c9b2f0 93%, #8a63d2 100%);
    --background-style-1: linear-gradient(180deg, #ece3ff, #c9b2f0);
    --background-style-3: linear-gradient(180deg, #ece3ff, #c9b2f0, #a98fe2);
    --background-style-dark: linear-gradient(178deg, #20244a, #1c2043);
    --background-style-success: linear-gradient(360deg, #0e3100, #109f00);
    --background-style-fail: linear-gradient(360deg, #8a63d2, #ff8fc0);
    --background-style-warning: linear-gradient(360deg, #311a00, #d17d01);
    --background-style-info: linear-gradient(360deg, #290039, #b700f3);
    --gradient-style-2: linear-gradient(180deg, #14172f, #000000);
    --gradient-style-danger: var(--background-style-1);
    --grd-background-light: linear-gradient(178deg, #fff9f9, #ffe0e0);
    --grd-secondary: linear-gradient(0deg, #8a63d2 0%, #ff8fc0 90%);
    --gradient-style-1: linear-gradient(314deg, rgba(169, 143, 226, 1) 0%, rgba(201, 178, 240, 1) 32%, rgba(236, 227, 255, 1) 68%, rgba(201, 178, 240, 1) 100%);
    --default-shadow:  0 5px 8px rgb(4 4 4 / 10%);
    --container-shadow: drop-shadow(0px 5px 5px rgba(0, 0, 0, .5));
    --shadow-btn: 0 3px #8a63d2, 0 3px 3px 1px rgba(0, 0, 0, 0.3);
    --font-secondary: 'Orbitron';
    --glow-yellow: 0 0 6px rgba(236, 227, 255, 0.8), 0 0 18px rgba(201, 178, 240, 0.4);
    --glow-neon: 0 0 8px rgba(255, 143, 192, 0.7), 0 0 22px rgba(154, 127, 214, 0.45);
}   

html{
    margin: auto;
    position: relative;
    font-size: 16px;
}

html, body{
    height: 100%;
    /* Track the VISUAL viewport. #navi-menu is position:absolute;bottom:0 against
       this box, so whatever this measures is where the nav sits. 100svh is the
       toolbar-SHOWN height and never grows, so once the toolbar collapses the
       nav stopped short of the real bottom — the "lifted footer".
       dvh follows the toolbar, and the shift it used to cause is fixed at the
       source instead: #app-bg is now position:absolute inside this same box
       rather than fixed against the LARGE viewport, so the shell and its
       backdrop can no longer disagree by the toolbar height. Change the two
       together or the seam comes back. */
    height: 100dvh;
    overflow: hidden;
    /*max-width: 500px;*/
}

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

/* Form controls don't inherit typography by default — keep them consistent
   with the rest of the UI (16px also prevents iOS zoom-on-focus). */
input, button, textarea, select{
    font-family: inherit;
    font-size: 16px;
    line-height: inherit;
}

/* Restore a visible focus ring for keyboard users only (mouse/touch unaffected) */
:focus-visible{
    outline: 2px solid var(--clr-style-1);
    outline-offset: 2px;
    border-radius: 2px;
}

.cus-font{
    font-family: 'Orbitron', sans-serif !important;
}

body{
    background-color: black;
    font-family: 'Montserrat', 'Rajdhani', sans-serif;
    font-weight: 500;
}

.text-danger{
    color: #ff8fc0;
}

#content{
    z-index: 1;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    width: 100%;
    top: 60px;
    bottom: 55px;
    background: #252525;
    color: #fff;
}

/* Hide scrollbar in WebKit browsers (Chrome, Safari, Edge) */
#content::-webkit-scrollbar {
    display: none;
}

.row{
    display: flex;
    width: 100%;
}

header{
    z-index: 2;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
    gap:0.5rem;
    justify-content: space-between;
    height: 60px;
    background: var(--background-dark);
    background-image: url('../img2/header.gif');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

header a{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#site-logo{
    /* The logo is the only thing sizing the middle header column, and the column
       is `flex: 0 0 calc(50% - 5px)` with min-width:auto — so an image wider than
       that basis cannot shrink and pushes the three columns past the viewport
       (robobearx's 800x240 mark rendered 200px wide at header img's height:60px,
       overflowing 390px screens by 21px: col-3 was clipped by header's
       overflow:hidden and the logo sat 11px off-centre).
       Fit it to the slot instead. max-height is the 60px header height rather
       than 100%, which would resolve against the col's 50px content box and
       shrink logos that fit today. */
    height: auto;
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
}

#marquee{
    z-index: 2;
    position: relative;
    overflow: hidden;
    height: 20px;
    margin: 0 -10px 10px;
    background: var(--gradient-style-1);
    box-shadow: inset 0 0 5px #14172f;
    cursor: pointer;
}

#marquee span{
    position: absolute;
    font-size: 10px;
    color: #ece3ff;
    font-weight: 700;
    margin: auto;
    white-space: nowrap;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes marquee{
    from{
        left: 100%;
    }
    to{
        left: -100%;
    }
}

.hide{
    display: none !important;
}

.box{
    padding: 0 10px 15px;
}

.box.single{
    margin: 30px auto;
}

svg > *{
    color:var(--clr-purple);
}

/* ::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
} */

.scrollable{
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    user-select: none;
}

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


.no-scrollbar{
    scrollbar-width: none;
    -ms-overflow-style: none;
}



.no-scrollbar::-webkit-scrollbar { 
    display: none;
}



.tiny-scrollbar::-webkit-scrollbar {
    width: 4px; /* Narrow scrollbar width */
    height: 4px; /* Narrow scrollbar height */
  }
  
  .tiny-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--clr-style-1); /* Scrollbar thumb color */
    border-radius: 10px; /* Rounded corners */
  }
  
  .tiny-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #ff8fc0 /* Thumb color on hover */
  }
  
  .tiny-scrollbar::-webkit-scrollbar-track {
    background-color: #000000; /* Track color */
    border-radius: 10px;
  }
  
@-moz-document url-prefix() {
    .tiny-scrollbar {
        scrollbar-width: thin; /* Thin scrollbar */
        scrollbar-color: #888 #f1f1f1; /* Thumb and track colors */
    }
}

section{
    padding: 3rem 1.5rem;
}


a{
    text-decoration: none;
}

.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}

.mt-20{
    margin-top: 20px;
}

.mt-25{
    margin-top: 25px;
}

.mt-30{
    margin-top: 30px;
}

.mb-10{
    margin-bottom: 10px;
}

.mb-15{
    margin-bottom: 15px;
}

.mb-20{
    margin-bottom: 20px;
}

.mb-25{
    margin-bottom: 25px;
}

.mb-30{
    margin-bottom: 30px;
}

.mw{
    max-width: 500px !important;
}

.btn{
    font-size: 16px;
    text-transform: uppercase;
    padding: 8px 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: 600;
    line-height: 1
}

.btn-cancel{
    color: #ffffff;
    background: #454545;
}

.btn-secondary{
    background: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(71 71 71) 100%);
    box-shadow: 0 5px 5px rgba(0,0,0,0.5);
}

.btn-submit{
    background: linear-gradient(180deg, #8a63d2 0%, #ff8fc0 100%);
    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
    width: 100%;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: 700;
    color: #ece3ff;
    font-family: var(--font-secondary);
}

.link-cancel{
    font-weight: 700;
    font-size: 14px;
    padding: 3px 0 1px;
    line-height: 1;
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    padding-bottom: 3px;
    margin: auto;
}

.btn-style{
    display: inline-block;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 13px 25px;
    text-transform: uppercase;
    background-image: linear-gradient(160deg, #a98fe2, #c9b2f0, #ece3ff, #c9b2f0, #a98fe2);
    border: 1px solid #a98fe2;
    color: #1c2043;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-size: 100% 100%;
    background-position: center;
    user-select: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
        0 3px 6px rgba(150, 120, 220, 0.4),
        inset 0 -2px 5px 1px rgba(110, 90, 180, 1),
        inset 0 -1px 1px 3px rgba(214, 190, 255, 0.8);
}

.btn-style:focus, .btn-style:hover {
    background-size: 150% 150%;
    border: 1px solid rgba(150, 120, 220, 0.6);
    color: rgba(26, 26, 26, 0.9);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23),
        inset 0 -2px 5px 1px #6f5fae,
        inset 0 -1px 1px 3px rgba(214, 190, 255, 0.8);
}

.btn-style:active {
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.16),
        0 3px 6px rgba(150, 120, 220, 0.4),
        inset 0 -2px 5px 1px #6f5fae,
        inset 0 -1px 1px 3px rgba(214, 190, 255, 0.8);
}

.btn-style:disabled {
    pointer-events: none;
    opacity: .65;
    color: #7e7e7e;
    background: #dcdcdc;
    box-shadow: none;
    text-shadow: none;
    border-color: #c2c2c2;
}

.btn-style-2{
    display: inline-block;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 13px 25px;
    text-transform: uppercase;
    box-shadow: 0 3px 6px rgb(0 0 0 / 33%), 0 3px 6px rgb(0 0 0 / 33%), inset 0 -2px 5px 1px #232853, inset 0 -1px 1px 3px #6a0000;
    background-image: linear-gradient(160deg, #000000, #191919, #4e4e4e, #101010, #000000);
    border: 1px solid #8a63d2;
    color: #ece3ff;
    text-shadow: 0 2px 2px rgb(0 0 0 / 0%);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-size: 100% 100%;
    background-position: center;
    user-select: none;
    animation: btn-deposit 1s infinite linear;
}

.btn-style-2:focus, .btn-style-2:hover {
    background-size: 150% 150%;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23),
        inset 0 -2px 5px 1px #232853,
        inset 0 -1px 1px 3px rgba(90, 70, 160, 0.5);
    border: 1px solid rgba(90, 70, 160, 0.6);
    color: rgba(214, 190, 255, 0.9);
}

.btn-style-2:active {
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.16),
        0 3px 6px rgba(90, 70, 160, 0.4),
        inset 0 -2px 5px 1px #232853,
        inset 0 -1px 1px 3px rgba(90, 70, 160, 0.5);
}

.btn-style-2:disabled {
    pointer-events: none;
    opacity: .65;
    color: #7e7e7e;
    background: #dcdcdc;
    box-shadow: none;
    text-shadow: none;
    border-color: #c2c2c2;
}

.btn-style-1 span, .btn-style-2 span{
    font-family: var(--font-secondary);
    font-weight: 700;
}

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

.bg-form{
    background: var(--grd-background-light);
    border: 2px solid var(--clr-border-primary)
}

.text-success{
    color: #59ff59;
}

.text-error{
    color: red;
}

.text-center{
    text-align: center
}

.ds{
    box-shadow: var(--default-shadow);
}

header .col{
    padding: 5px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* Without this, min-width:auto lets any oversized child override the
       flex basis and blow the header's 25/50/25 grid open. */
    min-width: 0;
}

header .col-1{
    flex: 0 0 calc(25% - 5px);
}

header .col-2{
    flex: 0 0 calc(50% - 5px);
    margin: auto;
    justify-content: center;
}

header .col-3{
    flex: 0 0 calc(25% - 5px);
    margin: auto;
    justify-content: flex-end;
    align-items: center;
}

header img{
    height: 60px;
    filter: drop-shadow(0 5px 8px black);
}

.hide{
    display: none !important;
}

#live-transaction{
    margin-top: 10px;
    font-size: 12px;
    border-radius: 5px;
    background: #0e1024;
    filter: var(--container-shadow);
    border: 1px solid #8a63d2;
}

#live-transaction .top{
    padding: 3px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

#live-transaction .live{
    display: flex;
    background: linear-gradient(180deg, #ff8fc0, #8a63d2);
    border-radius: 3px;
    font-size: 11px;
    color: #fff;
    gap: 3px;
    flex-wrap: nowrap;
    align-items: center;
    animation: live 1.85s infinite;
    font-weight: 600;
    padding: 3px 5px;
    line-height: 1;
}

#live-transaction .live span{
    border-radius: 25px;
    background: #fff;
    width: 8px;
    height: 8px;
}

@keyframes live{
    0%{
        opacity: 0;
    }

    50%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }
}

#live-transaction .span{
    background: #0e1024;
}


#live-transaction .title{
    line-height: 1;
    text-transform: uppercase;
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 700;
    color: #ece3ff;
    text-shadow: var(--glow-yellow);
}

#live-transaction .container{
    display:flex;
}

#live-transaction table{
  width: 100%;
  border-collapse: collapse;
}

#live-transaction th, #live-transaction td{
    /* border: 1px solid var(--clr-border-primary); */
}

#live-transaction th{
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    padding: 5px;
    line-height: 1;
    color: rgba(255,255,255,0.6);
}

#live-transaction thead td{
    text-align: center;
    color: #fff;
    font-weight: 600;
    padding: 0;
    margin-bottom: 5px;
    border: 1px solid var(--clr-border-primary);

}

#live-transaction thead td > div{
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    padding: 5px;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    border-radius: 0px;
    color: white;
}

#live-transaction thead td:first-child div{
    font-family: var(--font-secondary);
    font-weight: 700;
    background: linear-gradient(180deg, #ff8fc0, #8a63d2);
    color: #ece3ff;
}

#live-transaction thead td:last-child div{
    font-family: var(--font-secondary);
    font-weight: 700;
    background: linear-gradient(180deg, #c9b2f0, #a98fe2);
    color: #1c2043;
}

#live-transaction td{
    font-size: 11px;
    padding: 3px;
    line-height: 1;
    color: rgba(255,255,255,0.85);
    border: 1px solid #8a63d2;
    font-weight: 600;
}

#live-transaction  tr:last-child td {
    /* border-bottom: none; */
}

#live-transaction  tr td:first-child {
    border-left: none;
}

#live-transaction  tr td:last-child {
    border-right: none;
}

#live-transaction  tr:last-child td:first-child {
    border-left: none;
}
  
#live-transaction  tr:last-child td:last-child {
    border-right: none;
}

#live-transaction .amount{
    color: #ece3ff;
    text-align: right;
    font-weight: 600;
    text-shadow: var(--glow-yellow);
}

#balance-wrapper{
    background: linear-gradient(325deg, #000000, #3d3d3d, #000000);;
    border-radius: 15px;
    padding: 5px 10px;
    border-radius: 5px;
    background-image: url('../img2/theme/sign-form.jpg');
    box-shadow: 0 0 14px rgba(214, 190, 255, 0.12);
    background-position: center;
    background-size: cover;
    color: var(--clr-style-1);
    border: 1px solid var(--clr-border-primary);
    margin-top: 15px;
}

#sign-form{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 5px;
}

#sign-form a{
    width: 50%;
    overflow: hidden;
    position: relative;
}

#sign-form a:after{
    width: 100%;
    height: 75%;
    background: rgba(255, 255, 255, .2);
    content: '';
    position: absolute;
    transform: rotate(315deg);
    left: -100%;
    top: 50%;
    overflow: hidden;
    animation: btn-sign-form 1.5s infinite;
}

@keyframes btn-sign-form{
    from{
        left: -100%;
    }
    to{
        left: 100%;
    }
}

/* #sign-form a:before{
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    pointer-events: none;
    border-radius: 5px;
    background: linear-gradient(0deg, #910000 0%, #db0202 90%);
} */

#sign-form a span{
    z-index:4;
    position: relative;
}

#balance-wrapper .information{
    display: flex;
    gap: 5px;
    padding: 10px 0;
    justify-content: space-between;
}

#balance-box{
    width: 62%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#balance-box .title{
    font-size: 14px;
}

#balance-box .amount{
    font-size: 20px;
    margin: 5px 0;
    font-weight: 600;
    color: var(--clr-style-1);
    text-shadow: var(--glow-yellow);
}

#balance-box p, #balance-box b{
    font-size: 13px;
}

#fund-options{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    padding: 0 5px;
    max-width: 200px
}
/* 
#fund-options a{
    position: relative;
    padding: 0;
    overflow: hidden;
    padding: 1px;
    background: linear-gradient(180deg, #f0d599, #b38118);
} */

#fund-options a{
    position: relative;
    padding: 0;
    overflow: hidden;
    padding: 2px;
    background: linear-gradient(180deg, #ece3ff, #c9b2f0);
}

/* #fund-options a div{
    font-weight: 400;
    padding: 2px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    z-index: 3;
    position: relative;

    border-radius: 5px;
    background: var(--background-style-3);
    color: #c59200;
    font-weight: 600;
} */

#fund-options a div {
    font-weight: 400;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    gap: 2px;

    font-size: 12px;
    font-weight: 500;
    color: #fff;
    z-index: 3;
    position: relative;
    background: var(--background-style-3);
    color: #ece3ff;
    font-weight: 600;
    background: linear-gradient(180deg, #4f4f4f, #000000);
    box-shadow: inset 0 0 5px #000000;
}

#fund-options a div span{
    font-size: 12px;
    padding: 8px 5px;
    text-wrap: nowrap;
    box-sizing:border-box;
    width: 100%;
    font-family: 'Orbitron', sans-serif !important;
    border-radius: 5px;
    /* color: #e8ddff; */
    color: white;
}

#fund-options .btn-deposit span, #fund-options .btn-withdraw span, #fund-options .btn-burn span, #fund-options .btn-refresh span{
    /* background: var(--background-style-success); */
    animation: 1s btn-deposit infinite linear;
}

@keyframes btn-deposit{
    0%, 100%{
        color: #c9b2f0;
    }

    50%{
        color: #ece3ff;
    }
}

/* #fund-options .btn-withdraw span{
    background: var(--background-style-fail);
}

#fund-options .btn-refresh span{
    background: var(--background-style-warning);
}

#fund-options .btn-burn span{
    background: var(--background-style-info);
}
 */


/* #fund-options a:before{
    height: 400px;
    width: 400px;
    content: '';
    position: absolute;
    top: -200px;
    left: -200px;
    z-index: 1;
    background: linear-gradient(45deg, #34baff 20%, #00000000 30%);
    animation: 3.75s infinite rotate;
} */

/* #fund-options a:before{
    height: 200px;
    width: 200%;
    content: '';
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 100%);
    z-index: 1;
    background: linear-gradient(45deg, #ffffff00 35%, #ebc325 60%, #ffffff00 75%);
    animation: 10s infinite rotate;
} */

#fund-options a:nth-child(1):before {
    animation-delay: 0s;
}

#fund-options a:nth-child(2):before {
    animation-delay: 0.9375s;
}

#fund-options a:nth-child(3):before {
    animation-delay: 1.875s;
}

#fund-options a:nth-child(4):before {
    animation-delay: 2.8125s;
}

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }
}

#fund-options a img{
    width: 20px;
    filter: brightness(.4)
}

#referral-wrapper{
    position: relative;
    /* margin: 10px -10px 30px -10px; */
    margin-bottom: 20px;
}

#referral-wrapper img{
    width: 100%;
}

#referral-wrapper .option-wrapper{
    /* position: absolute;
    left: 0;
    bottom: -10px; */
    width: calc(100% - 10px);
    margin: 0 5px;
}

#referral-wrapper .options{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

#referral-wrapper a{
    flex: 0 0 calc(50% - 10px);
    background: var(--gradient-style-1);
    box-shadow: 0 3px #8a63d2, 0 3px 3px 1px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    min-height: 32px;
}

#referral-wrapper a span{
    color: var(--clr-secondary);
    font-family: 'Orbitron';
    font-weight: 900;
    font-size: 14px;
}

#referral-wrapper a:nth-child(1):after {
    animation-delay: 0s;
}

#referral-wrapper a:nth-child(2):after {
    animation-delay: 0.5s;
}

#referral-wrapper a:nth-child(3):after {
    animation-delay: 1s;
}

#referral-wrapper a:nth-child(4):after {
    animation-delay: 1.5s;
}

#referral-wrapper a:after{
    content: '';
    position: absolute;
    height: 160px;
    width: 30px;
    transform: rotate(45deg) translateY(-50%);
    background: white;
    animation: slidelight 2s infinite linear;
    opacity: 0.3;
    top: 50%;
}

#btn-share-referral span{
    animation: animatedText 1s infinite linear;
}

@keyframes slidelight {
    0%{
        left: -100%;
    }
    100%{
        left: 200%;
    }
}

@keyframes animatedText {
    0%, 100%{
        font-size: 14px
    }

    50%{
        font-size: 15px
    }
}

#lucky-draw img{
    width: 100%;
     border-radius: 5px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

#banners img{
    width: 100%;
}

#navi-menu{
    display: flex;
    bottom:0;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
    justify-content: space-around;
    height: 55px;
    align-items: flex-end;
    background: linear-gradient(0deg, #000000 0%, #14172f 90%);
    border-top: 2px solid #ff8fc0;
    box-shadow: 0 -5px 15px 0 rgba(0,0,0,0.2)
}

#navi-menu a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: white;
    flex-direction: column;
    width: 100%;
    position: relative
}

#navi-menu label{
    color: rgba(255,255,255, 0.5);
    line-height: 1;
    font-weight: 700;
    font-family: var(--font-secondary);
    font-size: 10px;
    text-transform: uppercase;
}

#navi-menu .float-image{
    max-width: 60px;
    min-width: 60px;
    position: absolute;
    bottom: 10px;
    display: flex;
    padding: 5px;
}

#navi-menu  .menu-item{
    flex: 0 0 20%; 
    padding: 7px 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#navi-menu .menu-item img{
    width: 100%;
    max-width: 24px;
    height: auto;
    filter: grayscale(1) brightness(0.9);
}

#menu-bonus img{
    animation: navi-main-icon infinite 3s;
    filter: grayscale(0) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2)) !important;
    width: 100% !important;
    max-width: 100% !important;
}

@keyframes navi-main-icon{
    0%{
        transform: rotate(0deg);
    }
    49%{
        
        transform: rotate(0deg);
        
    }
    50%{
        transform: rotate(15deg) scale(1.1);
    }

    55%{
        transform: rotate(-15deg) scale(1.1);
    }

    60%{
        transform: rotate(15deg) scale(1.1);
    }

    65%{
        transform: rotate(-15deg) scale(1.1);
    }

    70%{
        transform: rotate(15deg) scale(1.1);
    }

    75%{
        transform: rotate(-15deg) scale(1.1);
    }

    80%{
        transform: rotate(15deg) scale(1.1);
    }

    83%{
        transform: rotate(0deg)  scale(1);
    }

    100%{
        transform: rotate(0deg);
    }
}

#navi-menu .menu-item.active label{
    animation: btn-deposit 1s linear infinite;
    text-shadow: var(--glow-yellow);
}

#navi-menu .menu-item.active img{
    animation: icon-active infinite 1s;
    filter: grayscale(0);
}

#game-wrapper{
    margin: 15px -5px 0 -5px;
    border-radius: 5px;
    background: #dfdfdf;
    border: 1px solid var(--clr-border-primary);
    background: linear-gradient(0deg, black, #393939);
}

@media only screen and (min-width:700px) {
    #game-wrapper{
        margin-top: 30px;
    }
}

#game-options{
    width: 100%;
    display: flex;
    gap: 6px;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

#game-options .options{
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 5px;
    padding: 10px 5px;
    border-radius: 5px 5px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#game-options .btn-scroll{
    color: var(--clr-style-1);
    border-radius: 50px;
    display: flex;
    padding: 1px;
    background: var(--background-style-dark);
    border: 1px solid var(--clr-style-1);
    box-shadow: 0 2px 5px black;
    transition: 0.3s;
}

#game-options .btn-scroll.active{
    color: black;
    background: var(--clr-style-1);
    border: 1px solid var(--clr-style-1);
    /* box-shadow: 0 0 5px var(--clr-style-1); */
    transform: translateY(2px);
}

#game-options .option{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 10px 5px 5px;
    border-radius: 5px;
    line-height: 1;
    white-space: nowrap;
    height: 70px;
    min-width: 90px;
    max-width: 90px;
    transform: scale(0.9);
    background: linear-gradient(0deg, #353535, #1c2043);
    box-shadow: inset 0 5px 1px #373737, 0 5px 8px #0000009c, 0 0 10px #212121;
    transition: 0.375s;
}

#game-options .option.active{
    transition: 0.35s;
    padding: 5px;
    transform: scale(0.9);
    box-shadow: inset 0 0px 0px 2px #8a63d2, 0 0px 5px #000000, 0 0 10px #212121;
    background: var(--gradient-style-1);
    background: linear-gradient(0deg, rgba(90, 70, 160, 1) 0%, rgba(122, 104, 192, 1) 32%, rgba(154, 127, 214, 1) 68%, rgba(90, 70, 160, 1) 100%);

}

#game-options .option::before{
    /* content: '';
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 5px;
    background: var(--gradient-style-2); */
}

/* #game-options .option.active::before{
    content: '';
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 5px;
    background: var(--gradient-style-2);
} */


#game-options .option.active::before{
    content: '';
    position: absolute;
    height: calc(100% - 10px);
    bottom: 3px;
    width: calc(100% - 10px);
    background: rgb(0 0 0 / 10%);
    border-radius: 50px;
    left: 3px;
    z-index: -1;
    border-radius: 10px;
    border: 2px solid #8a63d2;
}

@keyframes game-border-active{
    0%, 100%{
        border: 2px solid rgba(90, 70, 160, 0.34);
    }

    50%{
        border: 2px solid #ece3ff;
    }


}

#game-options .option.active label{
    color: #ece3ff !important;
    border-bottom: 2px solid #ece3ff;
    padding-bottom: 2px;
}

@keyframes btn-available{
    0%, 40%, 60%, 100%{
        color: #939393;
    }
    50%{
        color: white;
    }
}

@keyframes game-active{
    0%{
        transform: scale(0.95) translateY(0);
    }

    50%{
        transform: scale(0.95) translateY(-1px);
    }

    100%{
        transform: scale(0.95) translateY(0);
    }
}

#game-options img{
    width: 80%;
    max-width: 32px;
    filter: grayscale(1);
}

#game-options .active img{
    filter: grayscale(0);
}

#game-options label{
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #939393;
    font-family: var(--font-secondary);
    animation: btn-available 5s linear infinite; 
}

#game-options .active label{
    color: white;
}

#games{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 5px;
}

#games .game, #single-game .game{
    flex: 0 0 calc(33.33333% - 10px);
    padding: 4px;
    display: flex;
    position: relative;
    border-radius: 5px;
    box-sizing: border-box;
    background: var(--gradient-style-1);
    margin: 5px;
    overflow: hidden;
    animation: game-box 2s infinite linear
}

#games .no-animation{
    /* animation: none; */
}

#single-game{
    margin: 15px auto 25px;
}
#single-game .game{
    flex: 0 0 100%;
    max-width: 200px;
    margin: auto;
}

@keyframes game-box{
    0%, 100%{
        box-shadow: 0 3px 0 var(--clr-dark), 0 3px 5px rgba(255, 193, 0, 0)
    }
    50%{
        box-shadow: 0 3px 0 var(--clr-dark), 0 3px 5px rgba(255, 193, 0, 1)
    }
}

/* Removed: the rotating light-sweep layer behind every game tile
   (`#games .game::before` + `@keyframes game-background`). It was a 200%x200%
   diagonal streak spinning 360deg every 5s, and because `#games .game` sets
   `overflow: visible` it swept outside the card as well as across the art.
   The `#games .no-animation::before` opt-out went with it — nothing set it. */

#games .game-name, #single-game .game-name{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translatex(-50%);
    font-size: 8px;
    background: var(--gradient-style-1);
    padding: 3px 5px;
    border-radius: 50px;
    color: var(--clr-dark);
    font-weight: 700;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 8ch;
    text-align: center;
    max-width: 16ch;
    overflow: hidden;
}

#single-game .game-name{
    font-size: 12px
}

#games img, #single-game img{
    width: 100%;
    animation: 1.5s glowing-shadow infinite;
}


#tt-game .game{
    padding: 4px;
    display: flex;
    position: relative;
    border-radius: 5px;
    box-sizing: border-box;
    background: var(--gradient-style-1);
    margin: 5px;
    overflow: hidden;
    /* animation: game-box 2s infinite linear */
}

#tt-game{
    margin: 10px auto;
}

#tt-game .game{
    flex: 0 0 100%;
    max-width: 160px;
    margin: auto;
}

#tt-game .game::before{
   content: '';
   background: linear-gradient(45deg, #00000000 50%, #efe6ff 55%, #00000000 60%);
   width:200%;
   height:200%;
   top:-50%;
   left:-50%;
   transform: translate(100%,100%);
   position: absolute;
   /* animation: game-background 5s infinite linear */
}


#tt-game .game-name{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translatex(-50%);
    font-size: 12px;
    background: var(--gradient-style-1);
    padding: 3px 5px;
    border-radius: 50px;
    color: var(--clr-dark);
    font-weight: 700;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 8ch;
    text-align: center;
    max-width: 16ch;
    overflow: hidden;
}

#tt-game .game img{
    width: 100%;
    /* animation: 1.5s glowing-shadow infinite; */
}

#games .disabled:after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
    color: var(--clr-style-1);
    font-weight: 700;
    font-family: var(--font-secondary);
    font-size: 12px;
    text-align: center;
}

#games .disabled img {
    animation: none;
    filter: grayscale(1) brightness(0.5);
}

#games .disabled .game-name{
    filter: grayscale(1);
}

#games .disabled::before {
    filter: grayscale(1);
    animation: none;
}

#games .disabled {
    background: linear-gradient(314deg, rgb(208 208 208) 0%, rgb(194 194 194) 32%, rgb(136 136 136) 68%, rgb(252 252 252) 100%);
}

#games .under-maintenance:after {
    content:'Under Maintenence';
}

#games .lock:after {
    content:'Unavailable';
}

#profile-container{
    margin: 10px 0;
    padding: 10px;
     border-radius: 5px;
}


.section-header{
    border-radius: 50px;
    display: flex;
    position: absolute;
    bottom: 100%;
    transform: translate(-50%, 50%);
    left: 50%;
    display: flex;
    justify-content: center;
    height: 40px;
    align-items: center;
    gap: 5px;
    color: #ece3ff;
    border: 2.5px solid var(--clr-secondary);
    border-left: 4px solid #ece3ff;
    background: #14172f;
    max-width:375px;
    width:40%;
    padding: 15px;
}

.section-header label{
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    text-wrap: nowrap;
    color: #ece3ff;
    text-shadow: var(--glow-yellow);
}

.section{
    position: relative;
    /* margin: 40px 10px 0;
    padding: 40px 10px 10px; */
    border-radius: 5px;
}

form{
    margin: 10px;
}


/** INPUT **/

.input-field{
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    transition: 0.3s;
    position: relative;
    /* background: white; */
    border-radius: 5px;
    /* border: 1px solid #ad954f66; */
}

.input-field input {
    font-size: 15px;
    line-height: 1.3;
    /* margin: 5px 10px; */
    border-radius: 5px;
    border: none;
    color: black;
    background: white;
    padding: 10px;
    height: 36px;
    box-sizing: border-box;
}

.input-field input[type="file"] {
    padding: 6px 10px;
}

.input-field.disabled input{
    background: #cfcfcf;
    position: relative;
}

.input-field.disabled label{
    position: relative;
    padding-left: 16px;
}

.input-field.disabled label:after{
    content: '\f023';
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    top: 2px;
    left: 2px;
    color: #ffa700;
    font-size: 10px;
    font-weight: 900; 
}

.input-field p{
    font-size: 11px;
    color: red;
    padding: 2px 5px;
}

.input-contact input{
    padding-left: 94px
}

.input-contact .country-code{
    display: flex;
    width: 84px;
    position: absolute;
    left: 0;
    top: 20px;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 10px;
    box-sizing: border-box;
    background: #dfdfdf;
    border-radius: 5px 0 0 5px;
}


.input-contact .country-code img{
    height: 20px;
}

.input-contact .country-code span{
    font-size: 15px;
}

.input-contact .country-code span{
    font-size: 15px;
}

.input-otp{
    padding: 10px;
    background: linear-gradient(1deg, #4a0000, #8a63d2);
    border-radius: 5px;
}

.input-otp > div{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    gap: 10px
}

.input-otp input{
    width: calc(70% - 5px)
}

.input-otp button{
    width: calc(30% - 5px);
    border: none;
    border-radius: 5px;
    border: 2px solid var(--clr-style-1);
    background: var(--background-style-dark);
    color: var(--clr-style-1);
    font-family: var(--font-secondary);
    font-size: 12px;
    text-transform: uppercase;
    animation: 1s btn-deposit infinite linear, 1s border-deposit infinite linear;
    box-shadow: inset 0 0 5px #000000;
    font-weight: 700;
}

@keyframes border-deposit{
    0%, 100%{
        border: 2px solid #8a63d2;
    }

    50%{
        border: 2px solid #ece3ff;
    }
}

/* 
.input-field:not(.default) {
    position: relative;
}

.input-field.custom {
    position: relative;
} */

/* .input-field:not(.default) label {
    position: absolute;
    pointer-events: none;
    top: 11px;
    left: 5px;
    transition: top 0.35s ease;
} */

/* .input-field.custom label {
    position: absolute;
    pointer-events: none;
    top: 6px;
    left: 10px;
    transition: top 0.35s ease;
} */

.input-field label{
    font-size: 12px;
    color: white;
    text-transform: uppercase;
    margin-bottom: 5px;
    
}

.input-field .icon-tabler-lock {
    position: absolute;
    right: 5px;
    bottom: 10px;
}

.input-field select{
    border-radius: 5px;
    border: none;
    color: black;
    background: white;
    padding: 0 8px;
    height: 36px;
    box-sizing: border-box;
}

.input-field select option {
    background-color: rgba(255,255,255,0.1) !important;
    border-radius: 0;
    padding: 5px;
    color: black;
    box-sizing: border-box;
}

.input-field .input-with-button{
    display: flex;
}

.input-field .input-with-button input{
    width: 75%;
}

.input-field .input-with-button button{
    width: 25%;
}

.input-field .input-with-button-2{
    display: flex;
}

.input-field .input-with-button-2 input{
    width: 100%;
}

.input-field .input-with-button-2 button{
    position: absolute;
    bottom: 3px;
    height: calc(36px - 6px);
    width: 80px;
    border-radius: 5px;
    border: none;
    background: var(--gradient-style-2);
    animation: btn-deposit 1s linear infinite;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-secondary);
    padding: 5px 10px;
    width: fit-content;
    right: 3px;
    line-height: 1;
}

select option {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* .input-field:not(.default) input:not(:placeholder-shown)~label, .input-field:not(.default).focus label {
    top: -20px;
    font-weight: 600;
    opacity: 1;
    left: 5px;
}

.input-field.custom input:not(:placeholder-shown)~label, .input-field.custom.focus label {
    top: -20px;
    font-size: 12px;
    font-weight: 600;
    opacity: 1;
    left: 5px;
} */
/* 
.input-field.focus label {
    color: black;
} */



.group-input{
    display: flex;
    position: relative;
}

.group-input .input-field{
    width: 100%;
}

.group-input .extra-field{
    width: 25%;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-3px, calc(-50% + -15px));
    z-index: 2;
}

.additional-link{
    color: white;
    font-size: 14px;
    width: 100%;
    display: block;
    text-align: center;
    margin: 10px 0 15px;
}

.additional-link span{
    color: white;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid white;
}

.input-file{
    padding: 3px 0;
}


.upload-label {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 5px;
}

.upload-label .txt {
    font-size: 16px;
    color: white;
    opacity: 0.5;
    font-weight: 400;
}

.input-field .label-btn {
    font-size: 12px;
    font-weight: 600;
    opacity: 1;
}

.uploaded-receipt {
    display: none;
    max-height: 200px;
    height: auto;
    max-width: 100%;
    overflow: hidden;
    margin: auto;
}

.uploaded-receipt.show {
    display: inline;
    margin-bottom: 25px;
}

#receipt-x {
    display: none;
    position: absolute;
    bottom: -9px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    border-radius: 5px;
    background: var(--red);
    max-width: 70px;
    padding: 5px;
}

#receipt-x.show {
    display: inline;
}

/* .input-field.contact input{
    padding-left: 70px;
    position: relative;
}

.input-field.contact .country-code{
    content: '';
    position: absolute;
    left: 10px;
    bottom: 5px;
    display: flex;
    align-items: center;
    color: black;
    display: none;
}

.input-field.contact .country-code img{
    height: 24px;
    margin-right: 5px;
}

.input-field:not(.default) input:not(:placeholder-shown)~span.country-code, .input-field:not(.default).focus .country-code{
    display: flex;
    align-items: center;
} */

.notice-box {
    background: #414141;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin: 5px 0 15px 0;
}

.notice-box .top {
    display: flex;
    gap: 5px;
    align-items: center;
    color: white;
    justify-content: space-between;
}

.notice-box .top .label {
    display: flex;
    gap: 8px;
    align-items: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.notice-box .top img {
    height: 16px;
    width: 16px;
}

.notice-box .toggle-icon {
    transform: rotate(0deg);
    transition: 0.6s;
    display: flex;
}

.notice-box.minimize .toggle-icon {
    transform: rotate(180deg);
}

.notice-box .content {
    z-index: 1;
    overflow: hidden;
}

.notice-box .content ul {
    transform: translateY(-15px);
    animation: showNotice 0.6s forwards;
}

.notice-box ul {
    margin: 10px 0 0 0;
    padding-inline-start: 25px;
}

.notice-box li {
    color: white;
}

.notice-box p {
    font-size: 12px;
    font-weight: 400;
    color: white;
}

.notice-box b {
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.notice-box .blink, .warning-text{
    font-size: 12px;
    font-weight: 600;
    color: #ff8fc0;
    animation: text-danger 1.5s infinite linear;
}

@keyframes text-danger{
    0%, 100%{
        color: white;
    }

    50%{
        color: #ff8fc0
    }
}

.notice-box.minimize .content ul {
    animation: hideNotice 0.6s forwards;
}

@keyframes text-glow{
    0%{
        filter: drop-shadow(0 0 5px rgba(154, 127, 214, 0));
    }

    50%{
        filter: drop-shadow(0 0 5px rgba(154, 127, 214, 1));
    }

    100%{
        filter: drop-shadow(0 0 5px rgba(154, 127, 214, 0));
    }
}


#share-referral-content h1{
    color: white;
    margin: 0 15px 10px;
    text-align: center;
    font-size: 20px;
    font-family: var(--font-secondary);
    color: var(--clr-style-1);
}

#modal-share-referral .referral-code{
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    background: var(--gradient-style-1);
    color: var(--clr-dark);
    width: 60%;
    display: flex;
    justify-content: center;
    padding: 3px;
    margin: 15px auto;
    border-radius: 5px;
}

#modal-share-referral .modal-content{
    max-width:350px;
}

#share-referral-content .qr-wrapper{
    display: flex;
    justify-content: center;
}

#share-referral-content .qr{
    width: 65%;
    max-width: 300px;
    min-width: 150px;
    margin: auto;
}

#share-referral-content .qrcode{
    text-align: center;
    margin: 10px 15px;
    font-weight: 700;
    color: wheat;
    animation: 3s text-glow infinite;
    font-size: 24px;
}

.refer-qrcode-note{
    color: white;
    font-size: 12px;
    text-align: center;
    margin: 5px 15px 15px;
}

#modal-share-referral .action-wrapper{
    display: flex;
    flex-wrap: wrap;
    margin: 15px 25px 0;
    justify-content: center;
}

#modal-share-referral .action-wrapper img{
    padding: 5px;
    width: 25%;
    box-sizing: border-box;
}

#footer-mobile{
    display: block;
}

#footer-desktop{
    display: none
}

@keyframes hideNotice {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-15px);
        height: 0;
        margin: 0;
    }
}

@keyframes showNotice {
    0% {
        opacity: 0;
        transform: translateY(-15px);
        height: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        height: 100%;
    }
}

@media only screen and (max-width:340px){
    .input-note{
        font-size: 8px;
    }
}

.swiper-pagination-bullet-active{
    background: var(--clr-style-1) !important;
}

@keyframes hideNotice {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-15px);
        height: 0;
        margin: 0;
    }
}

@keyframes showNotice {
    0% {
        opacity: 0;
        transform: translateY(-15px);
        height: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        height: 100%;
    }
}

#x{
    position: absolute;
    width: 56%;
    top: 0;
    height: 100%;
    right: 0;
    z-index: -1;
    justify-content: center;
    display: flex;
    align-items: center;
}

#x img{
    width: 24px;
    height: 24px;
    animation: x 1s infinite ease-in-out;
}

@keyframes x{
    0%, 100%{
        opacity: 1;
    }

    50%{
        opacity: 0.5;
    }
}

@media only screen and (max-width:340px){
    .input-note{
        font-size: 8px;
    }
}

@media only screen and (min-width: 700px){
    #content .front{
        width: calc(50% - 10px);
        margin-top: 10px;
        padding: 0 0 0 10px;
    }

    #x{
        display: none;
    }

    #col-right{
        position: absolute;
        right: 0;
        width: calc(50% - 10px);
        padding: 0 10px;
        top: 0;
        margin-top: 10px;
    }

    #balance-wrapper{
        margin-top: 0;
    }

    #games .game{
        flex: 0 0 calc(20% - 10px);
    }

    /* .section{
        max-width: 800px;
        margin: 40px auto 10px;
        padding: 40px 15px 15px;
    }
     */
    #more-settings, #logout{
        max-width: 800px;
        margin: 15px auto !important;
    }

    .swiper-container{
        margin: 0 !important;
    }

    #marquee{
        margin: 0 0 10px;
    }

    #referral-wrapper{
        margin: 10px 0 25px;
    }

    #bonus-wrapper div{
        /* flex: 0 0 calc(10% - 5px) !important;
        justify-content: flex-start !important; */
    }

    #bonus-wrapper div img{
        min-width: 80px;
    }

    #fund-options {
        width: 60%;
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        padding: 0 5px;
        max-width: 200px;
    }

    #marquee span{
        animation-duration: 20s;
    }
}


@media only screen and (min-width:1200px){
    #content .front{
        width: calc(25% - 10px);
        margin-top: 10px;
        padding: 0 0 0 10px;
        min-width: 400px;
    }

    #footer-mobile{
        display: none;
    }

    #footer-desktop{
        display: block
    }

    #game-wrapper{
        position: absolute;
        width: calc(50% - 10px);
        left: calc(50% + 20px);
        transform: translateX(calc(-50% + -10px));
        top: 0;
        margin-top: 10px;
        max-width: calc(100% - 820px)
    }

    #game-options .option {
        height: 80px;
        min-width: 110px;
        max-width: 110px;
    }

    #col-right{
        position: absolute;
        right: 0;
        width: calc(25% - 10px);
        padding: 0 10px;
        top: 0;
        margin-top: 10px;
        min-width: 400px
    }

    #games .game{
        flex: 0 0 calc(20% - 10px);
    }

    /* .section{
        max-width: 800px;
        margin: 40px auto 10px;
        padding: 40px 15px 15px;
    } */
    
    #more-settings, #logout{
        max-width: 800px;
        margin: 15px auto !important;
    }

    .swiper-container{
        margin: 0 !important;
    }

    #marquee{
        margin: 0 0 10px;
    }

    #referral-wrapper{
        margin: 10px 0 25px;
    }

    #bonus-wrapper div{
        /* flex: 0 0 calc(10% - 5px) !important;
        justify-content: flex-start !important; */
    }

    #balance-wrapper{
        margin-top: 0;
    }

    #bonus-wrapper div img{
        min-width: 80px;
    }

    #marquee span{
        animation-duration: 30s;
    }
 
}

@media only screen and (min-width: 1024px){
    #promo-wrapper {
        display: flex;
        flex-wrap: wrap;
    }

    #marquee span{
        animation-duration: 25s;
    }
}

@keyframes glowing-shadow{
    0% {
        filter: drop-shadow(0 0 1px rgba(214, 190, 255, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 3px rgba(214, 190, 255, 0.75));
    }
    100% {
        filter: drop-shadow(0 0 1px rgba(214, 190, 255, 0.3));
    }
}

@keyframes icon-active {
    0%, 100% { transform: scale(1); filter: brightness(1.2); }
    50% { transform: scale(1.1); filter: brightness(1.5) drop-shadow(0 0 3px rgba(214, 190, 255, 0.8)); }
}

/* .form-title{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    color: var(--clr-dark);
} */

.btn-submit:disabled{
    background: #696969 !important;
    color: #b3b3b3 !important;
}

.form-extra-options{
    font-weight: 600;
    font-size: 14px;
    padding: 3px 0 1px;
    line-height:1;
    color:red;
    border-bottom:1px solid red
}

.back-link.custom{
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
    flex-direction: column;
    margin-bottom: 5px;
}

form{
    color: var(--clr-dark);
    margin: 0;
}

.form-wrapper{
    margin: 0 auto;
    padding: 15px;
    border-radius: 5px;
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, .5));
    background: var(--background-style-dark);
    /* border: 2px solid var(--clr-border-primary); */
}

.form-wrapper .header{
    font-size: 20px;
    color: var(--clr-style-1);
    font-weight: 700;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    margin: 10px auto 25px;
    text-align: center;
}

.loading-full:after{
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: 100vw;
    max-width: var(--max-vw);
    background: #000000a8;
    z-index: 999999;
}


.home-banner-wrapper{
    display: flex;
}

.home-banner-wrapper img{
    width: 100%
}

#side-buttons{
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 8px 0;
}

#side-buttons > div{
    flex: 1;
}

#side-buttons a{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

#side-buttons img{
    width: 100%;
    max-width: 120px;
    height: auto;
}

#side-buttons span{
    font-size: 11px;
    color: var(--clr-style-1);
    text-align: center;
}

#modal-burn-credit .notice {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    padding: 15px 10px;
    margin-bottom: 15px;
}

#modal-burn-credit ol {
    padding-inline-start: 20px !important;
    margin: 0;
}

#modal-burn-credit li{
    font-size: 12px;
}

#modal-burn-credit .image-wrapper{
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

#modal-burn-credit .image-wrapper img{
    width: 40%;
    margin: auto;
    max-width: 160px;
}

.modal .btn-close-modal{
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    display: flex;
    background: var(--gradient-style-1);
    padding: 3px;
    border-radius: 5px;
    z-index: 1;
}

#partnership{
    width: 100%;
    max-width: 80px;
    height: 100%;
    margin:auto;
    margin-right: 10px;
    display:flex;
    padding: 1px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}

#partnership::before{
    content: '';
    background: linear-gradient(0deg, black 30%, #EDD66F 49%, #000000 70%);
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    animation: partnership 2s ease-in-out infinite;
}

@keyframes partnership{
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }
}

#partnership img{
    width: 100%;
    height: 100%;
    object-fit: fill;
    will-change: transform;
    transform: translateZ(0);
}

#btn-sidebar{
    margin: auto;
    display: flex;
    align-items: center;
    margin-left: 5px;
    color: var(--clr-style-1);
}

#sidebar{
    position: absolute;
    left: -100%;
    top: 0;
    z-index: 10008;
    width: 80%;
    height: 100%;
    transition: .425s;
    max-width: 325px;
}

#sidebar.show{
    left: 0
}

#sidebar.show:before{
    content: '';
    width: 102%;
    background: rgba(0,0,0,.75);
    position: fixed;
    height: 100%;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: var(--max-vw);
}

#sidebar .container{
    top: 0;
    height: 100vh;
    overflow-y: hidden;
    padding-bottom: 30px;
    width: 100%;
    max-width: 325px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--gradient-style-2);
    background: linear-gradient(315deg, #14172f, #000000, #20244a);
}

#sidebar .container::-webkit-scrollbar{
    display: none;
}

#sidebar .top{
    padding: 0 15px;
    border-bottom: 1px solid var(--clr-border-primary);
    width: 100%;
    position: relative;
    display: flex;
    background: var(--background-dark);
    background-image: url(../img2/header.gif);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

#sidebar .top .btn-close{
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
}

#sidebar .top .btn-close > *{
    color: var(--clr-style-1)
}

#sidebar .top .profile-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

#sidebar .top .profile-info{
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

#sidebar .top .profile-wrapper span{
    font-weight: 600;
    color: white;
    font-size: 16px;
}

#sidebar .top span.balance{
    color: #ece3ff;
}

#sidebar .top .logo{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar .top .logo img{
    width: 100%;
    max-width: 120px
}

#sidebar .middle{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 5px;
    margin: 0 10px;
    border-bottom: 1px solid #ccc;
    height: 100px;
}

#sidebar .middle a{
    flex: 0 0 33.333%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

#sidebar .middle a img{
    width: 32px;
}

#sidebar .middle a label{
    font-size: 12px;
    font-weight: 600;
    color: #ece3ff;
    text-align: center
}

#sidebar .items{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 0;
    height: calc(100vh - 250px);
    overflow-y: scroll
}

#sidebar .item a{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 10px 15px;
}

#sidebar .item{
    border-bottom: 1px solid var(--clr-border-primary);
}

#sidebar .item:last-of-type{
    border-bottom: none;
}

#sidebar .item a img{
    width: 24px;
}

#sidebar .item a label{
    font-size: 15px;
    transform: none;
    background: linear-gradient(0deg, #c9b2f0 0%, #ece3ff 50%, #c9b2f0 100%);
    font-weight: 700;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#sidebar .dropdown-content{
    padding-left: 32px;
    height: 0;
    overflow: hidden;
    transition: 1s;
}

#sidebar .dropdown-container.active .dropdown-content{
    height: auto;
}

#sidebar .dropdown-content a{
    font-size: 15px;
    transform: none;
    color: white;
}

#sidebar .dropdown-container a svg{
    transition: 0.275s;
}

#sidebar .dropdown-container a svg > *{
    color: var(--clr-style-1);
}

#sidebar .dropdown-container.active a svg{
    transform: rotate(90deg);
}

#community-wrapper img{
    width: 100%;
    filter: var(--container-shadow);
    margin: 10px auto;
}

#side-partnership{
    position: fixed;
    right: 0;
    top: 10%;
    z-index: 99;
    animation: side-partnership 25s infinite linear;
}

#side-partnership img{
    width: 80px;
    fill: var(--container-shadow);
    will-change: transform;
    transform: translateZ(0);
}

@keyframes side-partnership{
    0%, 100%{
        top: 10%;
    }

    50%{
        top: 40%;
    }
}

footer{
    padding: 10px 10px;
    margin: 15px auto;
    width: 100%;
}

footer hr{
    width: 100%;
    margin: 10px auto;
}



footer p{
    font-size: 10px;
    margin-bottom: 5px;
}

footer p.title{
    font-size: 10px;
    font-weight: 600;
}

footer h6{
    font-size: 12px;
    font-weight: 600;
}



footer .game-license{
    flex: 0 0 30%;
    display: flex;
    gap: 5px;
    flex-direction: column;
}

footer .row{
    flex-direction: column;
    gap: 5px;
    margin-bottom: 5px;
}

footer .game-license{
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    justify-content: space-between;
}

footer .game-license .col:last-of-type{
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

footer .game-license img{
    width: 100%;
    max-width: 120px;
    padding: 5px 0;
}

#form-game-credential{
    width: 80%;
    margin: 15px auto;
}

#game-notice{
    font-size: 16px;
    font-family: var(--font-secondary);
    text-align: center
}

#btn-download-apk{
    display: block;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-secondary);
    animation: btn-deposit 1s linear infinite;
    border: 2px solid;
    background: var(--gradient-style-2);
    text-transform: uppercase;
    margin: -10px auto 15px;
}

#lottery-game{
    padding: 10px;
    background: #00000038;
    border-radius: 5px;
    margin: 10px auto;
}

#lottery-wallet-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
}

#lottery-wallet-info{
    display: flex;
    gap: 5px;
    flex-direction: column;
}

#lottery-wallet-info label{
    font-size: 12px;
    font-weight: 400;
    color: white;
}

#lottery-wallet-wrapper svg > *{
    color: var(--clr-style-1)
}

#lottery-wallet-wrapper a{
    display: flex;
    align-items: center;
    margin-right: 5px;
}

#lottery-wallet-info .amount{
    font-size: 20px;
    color: white;
    font-weight: 600;
}

#lottery-action-wrapper{
    display: flex;
    gap: 5px;
    flex-direction: row;
    flex: 56%;
}

#lottery-action-wrapper a{
    font-size: 10px;
    color: var(--clr-dark);
    background: var(--gradient-style-1);
    padding: 10px;
    display: flex;
    gap: 3px;
    flex-direction: column;
}

#lottery-fund{
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
}

#lottery-fund a{
    position: relative;
    padding: 0;
    overflow: hidden;
    padding: 2px;
    background: linear-gradient(180deg, #ece3ff, #c9b2f0);
    box-sizing: border-box;
    flex: 0 0 48%
}

#lottery-fund a div {
    font-weight: 400;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    gap: 2px;

    font-size: 12px;
    font-weight: 500;
    color: #fff;
    z-index: 3;
    position: relative;
    background: var(--background-style-3);
    color: #ece3ff;
    font-weight: 600;
    background: linear-gradient(180deg, #4f4f4f, #000000);
    box-shadow: inset 0 0 5px #000000;
}

#lottery-fund a div span{
    font-size: 12px;
    padding: 8px 5px;
    text-wrap: nowrap;
    box-sizing:border-box;
    width: 100%;
    font-family: 'Orbitron', sans-serif !important;
    border-radius: 5px;
    /* color: #e8ddff; */
    color: white;
}


#modal-tt-game .modal-content{
    background: none;
}

#modal-tt-game .form-wrapper{
    background: var(--background-style-dark);
    padding: 20px;
}

#modal-tt-game .note{
    color: red;
    font-size: 13px;
    text-align: center;
    padding: 0 5px;
    font-weight: 600;
    margin-bottom: 10px;
}

#popular-games{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

#popular-games .title{
    font-size: 16px;
    background: linear-gradient(0deg, rgba(195, 155, 54, 1) 0%, rgba(221, 187, 77, 1) 32%, rgba(255, 244, 153, 1) 68%, rgba(187, 144, 47, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    font-family: var(--font-secondary);
    filter: var(--container-shadow);
}


#popular-games .games{
    display: flex;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
}

#popular-games .game{
    display: flex;
    gap: 0;
    flex-direction: column;
    min-width: 160px;
    background: #313131;
    filter: var(--container-shadow);
    margin-bottom: 15px;
    border-radius: 0 0 5px 5px;
}

#popular-games .game img{
    width: 100%;
    border-radius: 5px 5px 0 0;
}

#popular-games .info-wrapper{
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    overflow: hidden;
}

#popular-games .info-wrapper .game-name{
    font-size: 12px;
    line-height: 1;
    text-align: center;
}

#popular-games .info-wrapper .game-provider{
    font-size: 12px;
    width: fit-content;
    border-radius: 50px;
    color: var(--clr-style-1);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
}

#popular-games .info-wrapper .game-rtp{
    font-size: 12px;
}

@media only screen and (min-width:1200px) and (max-width:1300px){
    #games .game{
        flex: 0 0 calc(33.333% - 10px);
    }
    
    #game-options .option {
        height: 75px;
        min-width: 90px;
        max-width: 90px;
    }

}

@media only screen and (min-width:1300px) and (max-width:1400px){
    #games .game{
        flex: 0 0 calc(25% - 10px);
    }
    
    #game-options .option {
        height: 75px;
        min-width: 90px;
        max-width: 90px;
    }
}

@media only screen and (min-width:800px) and (max-width:1199px){
    #games .game{
        flex: 0 0 calc(25% - 10px);
    }

}


@media only screen and (min-width:700px) and (max-width:799px){
    #games .game{
        flex: 0 0 calc(33.333% - 10px);
    }

}



/* ============================================================
   RobobearX overrides — neon-space theme + responsive rails
   Mobile-first: rails flatten (display: contents) and sections
   re-order into a sensible single column. Desktop (>=1100px):
   3-column grid matching the mockup (left promos / center games
   / right account panel).
   ============================================================ */

:root{
    --clr-purple: #c9b2f0;
}

/* Let the fixed #app-bg (shared/background) show through */
#content{
    background: transparent;
}

.box.front{
    display: flex;
    flex-direction: column;
}

.box.front > .rail{
    display: contents;
}

/* Mobile section order (incl. dingospin-layout sections) */
#marquee            { order: 0; }
#hero-swiper        { order: 1; }
#cert-badge         { order: 2; }  /* just below the sliders (Marcus, 21 Aug) */
#col-right          { order: 3; }
#checkin-rail       { order: 4; }
#live-transaction   { order: 5; }
.rail-center > *    { order: 6; }
#referral-wrapper   { order: 7; }
#rail-promos        { order: 8; }
#download-app       { order: 9; }
#social-banners     { order: 10; }
#game-tips          { order: 11; }
.box.front > footer { order: 12; }

/* New sections */
#download-app, #game-tips{
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    margin: 8px 0;
    box-shadow: var(--glow-neon);
}
#download-app img, #game-tips img{
    width: 100%;
    display: block;
}

/* Panel framing to match the mockup's glassy purple cards */
#live-transaction, #balance-wrapper{
    border: 1px solid rgba(201, 178, 240, 0.35);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(50, 32, 102, 0.85), rgba(23, 16, 54, 0.9));
    box-shadow: 0 0 14px rgba(154, 127, 214, 0.25) inset, 0 4px 14px rgba(0,0,0,0.4);
}

/* Desktop: mockup's 3-column layout */
@media (min-width: 1100px){
    .box.front{
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr) 340px;
        gap: 16px;
        align-items: start;
        max-width: 1680px;
        margin: 0 auto;
        padding: 0 16px 20px;
    }
    .box.front > .rail{
        display: block;
        min-width: 0;
    }
    #marquee{
        grid-column: 1 / -1;
    }
    .rail-left  { grid-column: 1; }
    .rail-center{ grid-column: 2; }
    .rail-right {
        grid-column: 3;
        position: sticky;
        top: 10px;
    }
    .box.front > footer{
        grid-column: 1 / -1;
    }
    #hero-swiper{
        margin: 0 !important;
        border-radius: 14px;
        overflow: hidden;
    }
}

/* Neutralize the legacy ez7 absolute-positioned desktop layout (the >=700px /
   >=1200px `#content .front` / `#col-right` / `#game-wrapper` rules earlier in
   this file). The rails own responsive layout now: single column below 1100px,
   3-column grid above. Placed last so it wins at equal specificity. */
@media only screen and (min-width: 700px){
    #content .front{
        width: auto;
        min-width: 0;
        padding: 0 16px 20px;
    }
    #col-right{
        position: static;
        width: auto;
        min-width: 0;
        padding: 0;
        margin-top: 0;
    }
    #game-wrapper{
        position: static;
        width: auto;
        max-width: none;
        left: auto;
        transform: none;
        margin-top: 0;
    }
}

/* ============================================================
   Mockup alignment — game options + provider grid.
   The category art is a complete pill graphic (icon + text baked
   in) and the provider art is a complete framed card, so every
   legacy tile/card decoration (90px tile clamp, grayscale filter,
   red active gradient, purple card gradient, glow + shine
   animations, name pill) is stripped; the art speaks for itself.
   ============================================================ */
#game-options .options{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 2px 12px;
    overflow-x: visible;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
#game-options .option,
#game-options .option.active{
    all: unset;                 /* nukes tile size/gradients/shadows/scale */
    display: block;
    cursor: pointer;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}
#game-options .option img{
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    filter: none;               /* legacy grayscales inactive tabs; mockup pills are full-color */
}
#game-options .option.active img{
    filter: drop-shadow(0 0 6px rgba(255, 215, 110, 0.8));
}

#game-wrapper{
    background: none !important; /* mockup: grid sits on the page backdrop */
}
#games{
    padding: 16px 0;
    gap: 20px;
}
#games .game{
    flex: 0 0 calc(50% - 10px) !important; /* phones: 2 framed cards across */
    background: none !important;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none !important;
    animation: none;
    overflow: visible;
}
#games .game::before{
    content: none;              /* rotating shine sweep -- not in the mockup */
}
#games .game .game-name{
    display: none;              /* frame art carries its own labeling */
}

/* Mockup: welcome marquee is a light pink strip with dark text */
#marquee{
    background: linear-gradient(180deg, #ffe3f2, #f9c9e5) !important;
}
#marquee span{
    color: #4a2a58 !important;
    font-weight: 600;
}

/* Desktop grid: 5 across. At 4 across the tiles came out ~226px on a 966px
   rail, upscaling the 200x200 source art ~13% and reading soft; 20% lands at
   ~178px, i.e. downscaled, so it stays sharp. Phones keep 2 across via the
   global `flex: 0 0 calc(50% - 10px) !important` above.
   `!important` here is what beats the five earlier #games .game rules. */
@media (min-width: 700px){
    #games .game{
        flex-basis: calc(20% - 15px) !important;
    }
}

/* Below the desktop grid: pills scroll horizontally at natural size instead
   of compressing six-across into a phone-width row. */
@media (max-width: 699px){
    #game-options .options{
        justify-content: flex-start;
        overflow-x: auto;
    }
    #game-options .option{
        flex: 0 0 auto;
    }
    #game-options .option img{
        width: auto;
        height: 40px;
    }
}

/* ============================================================
   Mockup palette — frosted lavender glass on deep indigo.
   The inherited sweep kept ez7's gold button insets and leaned
   hot-magenta; the mockup is soft glass pills (white text),
   navy panels, lilac balance, cyan/pink feed amounts.
   ============================================================ */

/* Glass pill recipe: LOGIN/REGISTER, DEPOSIT/WITHDRAW/REFRESH,
   SHARE/DOWNLINE/COPY LINK/MORE INFO */
.btn-style, .btn-style-2,
#fund-options .btn > div,
#referral-wrapper .options .btn{
    background: linear-gradient(180deg, rgba(246, 240, 255, 0.95) 0%, rgba(206, 184, 243, 0.92) 55%, rgba(164, 134, 224, 0.92) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(90, 50, 140, 0.9), 0 0 8px rgba(120, 80, 180, 0.5);
    box-shadow: 0 0 14px rgba(198, 168, 255, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
    animation: none !important;
}
.btn-style span, .btn-style-2 span,
#fund-options .btn > div span,
#referral-wrapper .options .btn span{
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}
.btn-style:focus, .btn-style:hover, .btn-style:active,
.btn-style-2:focus, .btn-style-2:hover, .btn-style-2:active{
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(214, 190, 255, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* Panels: deep navy indigo with a soft periwinkle border */
#live-transaction, #balance-wrapper{
    background: linear-gradient(180deg, rgba(32, 36, 74, 0.92), rgba(24, 27, 58, 0.95)) !important;
    border: 1px solid rgba(150, 160, 230, 0.4) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

/* Balance: "AUD 0.00" in lilac gradient text */
#balance-box .amount{
    background: linear-gradient(180deg, #f2e9ff 20%, #b49ae6 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #cbb4f2;
}

/* Live feed: indigo header bar, cyan money-in, pink money-out */
#live-transaction th{
    background: linear-gradient(90deg, #4b4f92, #5a5fa8) !important;
    color: #ffffff !important;
}
#live-transaction td.amount:nth-child(1){ color: #7ee7e0 !important; }
#live-transaction td.amount:nth-child(2){ color: #ff8fc0 !important; }

/* ============================================================
   TEMPLATE UPDATE — Web网 request, Aug 2026
   Client benchmarked us against playmates9 / dingospin and asked for a
   模板 (template) change, not a re-theme. Structure moves toward the
   reference; palette and artwork stay this tenant's own.

   Three changes live here:
     1. category tabs become captioned artwork tiles, not bare pills
     2. every game tile carries an explicit PLAY affordance

   A game search was tried and removed: it came from playmates9, which the
   client never called JK's. The JK reference is dingospin, which has none.

   Placed last so it wins at equal specificity.
   ============================================================ */

/* 1. Category tabs — artwork tile + caption.
   NB: the earlier mockup override (line ~3349) does `all: unset; display: block`,
   so this must restore `display: flex` explicitly — otherwise align-items/gap
   below are silently inert and the caption sits left-aligned. */
#game-options .option{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px 6px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(35,40,83,.9), rgba(28,32,67,.95));
    border: 2px solid rgba(138,99,210,.45);
    transition: border-color .15s, box-shadow .15s;
}
#game-options .option .option-label{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--clr-style-2);
    text-transform: uppercase;
    white-space: nowrap;
}
#game-options .option.active{
    border-color: var(--clr-danger);
    box-shadow: 0 0 12px rgba(255,143,192,.4);
}
#game-options .option.active .option-label{ color: var(--clr-style-1); }

/* 2. PLAY affordance on every game tile.
   The tile is already the click target — this is a visual affordance, so it
   is a span rather than a button and stays pointer-transparent, otherwise it
   would swallow the tile's own onClick. */
#games .game{ position: relative; }
#games .game .game-play{
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 5px 0;
    text-align: center;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--clr-dark);
    background: var(--background-style-1);
    border-radius: 7px;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(201,178,240,.35);
}

/* ============================================================
   Right-rail balance panel: stop the balance text colliding with
   the DEPOSIT/WITHDRAW/REFRESH pills.

   `#balance-wrapper .information` is a flex row with a 5px gap, but
   its two children were sized in percentages that overflow it:
     desktop  #balance-box 62% + #fund-options 50% = 112%
     <tablet  #balance-box 62% + #fund-options 60% = 122%
   The excess pushed the pills back over the "Minimum Deposit /
   Withdrawal / Processing Time" lines. Reported from production
   (Web网, 28 Jul) against both tenants.

   Fixed by letting the text column flex into whatever is left
   instead of claiming a fixed share. min-width:0 is required —
   without it the flex item refuses to shrink below its longest
   word and the overflow comes straight back.
   Placed last so it wins at equal specificity.
   ============================================================ */
#balance-wrapper .information{
    flex-wrap: nowrap;
    align-items: flex-start;
}
#balance-box{
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
#fund-options{
    flex: 0 0 40%;
    width: auto;
    min-width: 0;
}
@media only screen and (max-width: 1023px){
    #fund-options{
        flex: 0 0 42%;
        width: auto;
    }
}

/* ============================================================
   Dingospin-style layout adoption (Aug 2026)
   Structure/arrangement only — colors come from this tenant's
   theme tokens in :root, not from dingospin's palette.
   (.game-play tile affordance + tab captions already exist above.)
   ============================================================ */

/* Header "Menu" pill (dingospin: labeled button, top-left) */
#btn-sidebar{
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--background-style-dark);
    border: 1px solid var(--clr-style-2);
    border-radius: 10px;
    padding: 4px 10px;
    box-shadow: var(--glow-neon);
    cursor: pointer;
}
#btn-sidebar label{
    color: var(--clr-style-1);
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
@media only screen and (max-width: 699px){
    #btn-sidebar{ border: none; background: none; box-shadow: none; padding: 0; }
    #btn-sidebar label{ display: none; }
}

/* Left rail: certification strip under the live-transaction table */
#cert-badge{
    margin: 8px 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: var(--background-style-dark);
}
#cert-badge img{ width: 100%; display: block; }

/* Left rail: social community banner cards (Telegram / Facebook / ...) */
#social-banners{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0;
}
.social-banner{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid var(--clr-style-2);
    background: linear-gradient(90deg, var(--clr-surface), var(--clr-dark));
    box-shadow: var(--glow-neon);
}
.social-banner img{ width: 34px; height: 34px; object-fit: contain; }
.social-banner .txt{ display: flex; flex-direction: column; line-height: 1.25; }
.social-banner .txt b{
    color: var(--clr-style-1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.social-banner .txt span{ color: white; font-size: 13px; font-weight: 600; }

/* Base `#games .game` is a flex ROW; with the PLAY strip added, the img
   squeezes the strip into a vertical sliver beside it. Stack instead. */
#games .game{ flex-direction: column; }

/* The mockup block zeroes .game margins (the framed art carries its own
   spacing baked into the PNG), but the PLAY bars span the full tile width,
   so adjacent bars touched edge-to-edge. Space the grid with a real gap —
   safe here because this tenant zeroes tile margins at every width. */
#games{ gap: 10px; justify-content: center; }

/* Live-transaction: 5 columns are tight in the rail — stop amount wrapping */
#live-transaction .amount{ white-space: nowrap; }
#live-transaction th, #live-transaction td{ padding: 4px 3px; }

/* Live-transaction Play CTA column */
#live-transaction .btn-play-sm{
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--grd-secondary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

/* Center column: search bar above the grid */
#game-search{
    position: relative;
    margin: 10px 5px 0;
}
#game-search input{
    width: 100%;
    padding: 10px 40px 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--clr-border-primary);
    background: rgba(0, 0, 0, 0.35);
    color: white;
}
#game-search input::placeholder{ color: var(--clr-text-secondary); }
#game-search .icon{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    pointer-events: none;
}

/* Center column: SLOT / CRASH segmented toggle */
#type-toggle{
    display: flex;
    gap: 6px;
    margin: 10px 5px 0;
}
#type-toggle .pill{
    flex: 1;
    text-align: center;
    text-transform: uppercase;
    padding: 8px 0;
    border-radius: 6px;
    font-family: var(--font-secondary);
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 13px;
    color: var(--clr-text-secondary);
    background: var(--background-style-dark);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: 0.25s;
}
#type-toggle .pill.active{
    color: var(--clr-dark);
    background: var(--background-style-1);
    border-color: var(--clr-style-1);
    box-shadow: var(--glow-yellow);
}

/* Right rail: stacked promo banner cards */
#rail-promos{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0;
}
#rail-promos a{
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--glow-neon);
    cursor: pointer;
}
#rail-promos img{ width: 100%; display: block; }

/* Right rail: balance + redeem + daily check-in card */
#checkin-rail{
    margin: 8px 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--clr-surface), var(--clr-dark));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    color: white;
}
#checkin-rail .ci-balance{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
#checkin-rail .ci-balance b{
    color: var(--clr-style-1);
    font-family: var(--font-secondary);
}
#checkin-rail .ci-redeem{
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--clr-style-1);
    color: var(--clr-style-1);
    font-size: 12px;
    cursor: pointer;
}
#checkin-rail .ci-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--clr-text-secondary);
}
#checkin-rail .ci-checkin-btn{
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--background-style-1);
    color: var(--clr-dark);
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
}
#checkin-rail .ci-days{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 10px;
}
#checkin-rail .ci-day{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
    font-size: 10px;
    color: var(--clr-text-secondary);
}
#checkin-rail .ci-day.today{
    border-color: var(--clr-style-1);
    color: var(--clr-style-1);
    box-shadow: var(--glow-yellow);
}
#checkin-rail .ci-day.claimed{ color: var(--clr-success); }
#checkin-rail .ci-day .a{ font-weight: 800; font-size: 11px; }

/* Category tabs + denser grid on desktop (dingospin) */
@media only screen and (min-width: 1100px){
    /* Equal-width category pills: the active tab highlights via its glow
       without ballooning (dingospin: active = highlight, not growth).
       The selector must include .active to match the specificity of the
       mockup-alignment block above (`#game-options .option, .option.active
       { all: unset; flex: 1 1 0; }`) — a plain `.option` rule loses on the
       active tab, which then becomes the row's only growable item and
       swallows all the space freed by capping its siblings. */
    #game-options .option,
    #game-options .option.active{
        flex: 0 1 150px;
        max-width: 150px;
    }
    /* Denser grid in the center column, like dingospin's 6-across */
    #games .game{ flex: 0 0 calc(16.666% - 10px); }
}

/* Mobile: the mockup tab block sets `overflow-x: visible` + `flex: 1 1 0`,
   which crushes all six pills into slivers on narrow screens and clips the
   row. Restore a dingospin-style horizontally scrollable row of fixed-width
   pills below the desktop breakpoint. Selector includes .active to outrank
   the `all: unset` block (see below). */
@media only screen and (max-width: 1099px){
    #game-options .options{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }
    #game-options .option,
    #game-options .option.active{
        flex: 0 0 110px;
        max-width: 110px;
        box-sizing: border-box; /* `all: unset` reverts to content-box; without
                                   this the 110px basis + padding renders ~141px */
    }
    /* The <=699px block sizes the art `width: auto; height: 40px`, which is far
       wider than the 110px frame for these wide banner PNGs — it spilled over
       both borders. Fit the art to the frame and let height follow. */
    #game-options .option img{
        width: 100%;
        height: auto;
        max-width: 100%;
    }
}

/* Active tab keeps the framed-pill look. The legacy
   `#game-options .option.active { all: unset }` (specificity 0,2,1 — written
   for the old full-banner active art) outranks the framed-pill `.option`
   block and strips the active tab's frame: its img stretches full-width and
   the caption drops to the bottom-left. Mirror the pill frame back onto the
   active tab; the later border-color/box-shadow/glow rules still apply. */
#game-options .option.active{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px 6px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(35, 40, 83, .9), rgba(28, 32, 67, .95));
    border: 2px solid var(--clr-danger);
}

/* Footer: dingospin-style brand blurb + badge sections (Web网 feedback 12 Aug) */
#site-footer .f-brand{ display: flex; align-items: center; gap: 16px; margin: 10px 0 6px; }
#site-footer .f-brand img{ height: 44px; flex-shrink: 0; }
#site-footer .f-brand p{ font-size: 11px; color: var(--clr-text-secondary); line-height: 1.55; }
#site-footer .f-section{ margin: 14px 0; }
#site-footer .f-heading{
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: white;
    font-weight: 700;
    margin-bottom: 8px;
}
#site-footer .f-badges{ display: flex; flex-wrap: wrap; gap: 10px; }
#site-footer .f-badge{
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 8px 14px;
    min-width: 120px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#site-footer .f-badge img{ max-height: 36px; max-width: 140px; object-fit: contain; display: block; }

/* Right-rail promos: frame the banners as cards so ribbon-shaped art doesn't
   float (proper 1000x500 art fills the slot naturally when uploaded) */
#rail-promos a{
    background: linear-gradient(180deg, var(--clr-surface), var(--clr-dark));
    border: 1px solid var(--clr-style-2);
    padding: 6px;
}

/* ============================================================
   JK TEMPLATE EXTRAS — tenant design, dingospin structure.
   Replaces the earlier "DINGOSPIN FULL LOOK" skin. C's direction
   (Web网 15 Aug): "I don't need to change the design, I need to
   change the template." Tenant art (header/background) and tenant
   colors stay; only structural template elements are kept.
   ============================================================ */

/* Marquee: ticker-strip rules (dingospin structure), tenant colors */
#marquee{
    border-top: 2px solid var(--clr-style-2);
    border-bottom: 2px solid var(--clr-danger);
    border-radius: 0;
}

/* Bottom nav: active tab raised as a card (dingospin structure), tenant colors */
#navi-menu .menu-item.active{
    background: var(--background-style-dark);
    border: 1px solid var(--clr-border-primary);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    transform: translateY(-8px);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.45);
}

/* Sign pages: airy full-width form rows (dingospin structure), tenant colors */
#sign-wrapper input, #sign-wrapper select{
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--clr-border-primary) !important;
    color: #fff !important;
    border-radius: 4px;
}
#sign-wrapper .btn-submit, #sign-wrapper button[type=submit]{
    background: var(--grd-secondary) !important;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 1px;
}
#sign-wrapper a{ color: var(--clr-style-1); }

/* Social banners are full "JOIN US NOW" art — render as clean banner cards */
#social-banners .social-banner{
    padding: 0;
    background: none !important;
    border: none !important;
    overflow: hidden;
    border-radius: 12px;
}
#social-banners .social-banner img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* BabyMolly: pink palette for the chat welcome card (tenant recolor of the
   chat-welcome-* hooks; !important is required to beat the component's
   inline defaults). */
.chat-welcome-card{
    border-color: #ff7ab8 !important;
    background: linear-gradient(135deg, #b0447f, #5e1f47) !important;
    box-shadow: 0 0 14px rgba(255, 150, 200, 0.5) inset, 0 0 10px rgba(255, 122, 184, 0.45) !important;
}
.chat-welcome-title{
    background: linear-gradient(90deg, #ffd1e8, #ff8fc0) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
.chat-welcome-cta{
    background: #ff5fb0 !important;
    box-shadow: 0 0 14px rgba(255, 95, 176, 0.6) !important;
}

/* Kit-art buttons (C, Web网 21 Aug): sign-form + fund-options use the design's
   button art; the hidden pill fallback shows only if the art 404s. */
.btn-art{
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.btn-art img{ width: 100%; display: block; }
.btn-art .btn-art-fallback{
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    background: var(--background-style-1);
    color: var(--clr-dark);
    font-weight: 700;
}

/* Fix: legacy `#fund-options a img{ width:20px; filter:brightness(.4) }` was
   crushing the kit-art buttons to 20px (Marcus, mobile test 21 Aug). ID
   specificity beats .btn-art, so out-specific it here. */
#fund-options .btn-art img, #sign-form .btn-art img{
    width: 100% !important;
    max-height: 52px;
    object-fit: contain;
    filter: none !important;
}


/* ── Display cutouts and home indicators ──────────────────────────────────────
   The app asks for the whole screen (`viewportFit: 'cover'` in the core layout,
   plus apple-mobile-web-app-status-bar-style black-translucent), so the shell —
   not the browser — is responsible for keeping its own chrome out of the insets.
   Without this the header sits under the status bar and the nav under the home
   indicator / gesture bar.

   Every env() here is 0 on desktop and on phones without cutouts, so the shell
   measures exactly 60 / 55 as before wherever there is nothing to avoid. */
header{
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
}

#content{
    top: calc(60px + env(safe-area-inset-top));
    bottom: calc(55px + env(safe-area-inset-bottom));
}

#navi-menu{
    height: calc(55px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
}