main {
    padding: 0;
}
.vip-container {
    /* height: 100vh;
    height: 100dvh; */
}
.vip-container__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 1rem 0;
}
.vip-container__header .previous-page {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
}
.vip-container__header .previous-page a {
    font-size: 2rem;
    font-weight: 900;
    background: #da932a;
    background: linear-gradient(to top right, #da932a 0%, #ffecda 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vip-container__header .previous-page a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.vip-container__header svg {
    fill: var(--accent-purple);
    background: #000;
    height: 48px;
    border-radius: 100vw;
    border: 2px solid var(--dark-surface);
    padding: .25rem;
}
.vip-container__banner {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}
.vip-container__banner .progress-bar {
    display: flex;
    width: 90%;
    border-radius: 100vw;
    position: relative;
    height: 26px;
    background: rgba(0,0,0,.5);
}
.vip-container__banner .progress-bar img {
    position: absolute;
}
.vip-container__banner .progress-bar img.vip-coin {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}
.vip-container__banner .progress-bar img.plus-icon {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
}
.vip-container__banner .progress-bar .incrementing-bar {
    height: 100%;
    width: 60%;
    background-image: linear-gradient(to top right,#da932a,#ffecda);
    border-radius: 100vw;
    box-shadow: 0 0 10px #000;
}
.vip-container__banner .login-tracker-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    gap: 1rem;
    background: rgba(0,0,0,.5);
    border-radius: 20px;
    font-size: .7rem;
    text-align: center;
    padding: .5rem 1rem;
    border: 1px solid var(--dark-surface);
    margin: 1rem 0 2rem 0;
}
.vip-container__banner .login-tracker-container p {
    max-width: 45ch;
    width: 100%;
    color: var(--accent-txt-clr);
}
.vip-container__banner .login-tracker-container p span {
    color: goldenrod;
    font-weight: 600;
}
.vip-container__banner .login-tracker-container > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vip-container__banner .login-tracker-container img {
    min-height: 40px;
}
.vip-container__banner .login-tracker-container .letter {
    font-size: .6rem;
}
/* ---- Benefits ---- */
.vip-container__benefits {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to bottom, hsla(302, 60%, 12%, .5), transparent);
    padding: 0;
    position: relative;
    overflow: hidden;
}
.vip-container__benefits::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--transparent-primary-purple);
    outline: 1px dashed var(--transparent-accent-purple);
    outline-offset: -4px;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 0%, transparent 75%);
    mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 75%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.vip-container__benefits .title {
    background-image: linear-gradient(to right,transparent, hsla(241, 42%, 34%, .125),  #333279,hsla(241, 42%, 34%, .125), transparent);
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: none;
    padding: .5rem .75rem;
    text-align: center;
    outline: 1px dashed var(--transparent-accent-purple);
    outline-offset: -4px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.vip-container__benefits .title span {
    font-size: inherit;
    font-weight: 900;
    text-transform: uppercase;
    background: #da932a;
    background: linear-gradient(to top right, #da932a 0%, #ffecda 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vip-container__benefits .listing-box {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    max-height: 25rem;
    overflow: auto;
    position: relative;
    background: rgba(0,0,0,.125);
}
.vip-container__benefits .listing-box .ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-grow: 1;
    padding: 1rem 0;
    max-height: 25rem;
    aspect-ratio: 16 / 9;
    overflow: auto;
    -webkit-mask-image: linear-gradient(to top, transparent 0, black 2rem, black calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to top, transparent 0, black 2rem, black calc(100% - 2rem), transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.vip-container__benefits .listing-box .ul .li {
    display: grid;
    grid-template-columns: 60px 4fr 1fr;
    align-items: center;
}
.vip-container__benefits .listing-box .li img {
    margin-left: auto;
}
.vip-container__benefits .listing-box .li span:not(.benefit) {
    color: lightgreen;
    text-align: right;
}
.vip-container__benefits .listing-box .li span.benefit {
    overflow: auto;
    text-wrap: nowrap;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    padding: 0 1rem;
}
.vip-container__benefits .listing-box button {
    padding: .5rem;
    position: sticky;
    top: 0;
}
.vip-container__benefits .listing-box button img {
    min-width: 40px;
    max-width: 40px;
}
.vip-container__benefits .listing-box button img:not(.previous-arrow-img) {
    animation: bounceRight 2s infinite linear;
}
@keyframes bounceRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(2px);
        opacity: .125;
    }
}
@keyframes bounceLeft {
    0% {
        transform: translateX(0) scale(-1);
        opacity: 1;
    }
    50% {
        transform: translateX(-2px) scale(-1);
        opacity: .125;
    }
}
.vip-container__benefits .listing-box .previous-arrow-img {
    transform: scale(-1);
    animation: bounceLeft 2s infinite linear;
}
.vip-container__benefits .claimables-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}
.vip-container__benefits .claimables-container h3 {
    text-transform: none;
    font-weight: 500;
    padding: .5rem;
    text-align: center;
    font-size: 1.25rem;
}
.vip-container__benefits .daily-chest {
    background: rgba(125, 106, 236, .125);
}
.vip-container__benefits .exclusive-chest {
    background: hsla(36, 100%, 63%, 0.125);
}  
.vip-container__benefits .daily-chest h3 {
    outline: 1px dashed rgba(125, 106, 236, .275);
    outline-offset: -4px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-image: linear-gradient(to right,transparent,rgba(125, 106, 236, .125),  rgb(125, 106, 236), rgba(125, 106, 236, .125), transparent);
}
.vip-container__benefits .exclusive-chest h3 {
    background: #da932a;
    background: linear-gradient(to top right, #da932a 0%, #ffecda 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.vip-container__benefits .exclusive-chest > span {
    outline: 1px dashed var(--transparent-accent-purple);
    outline-offset: -4px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-image: linear-gradient(to right,transparent,hsla(36, 100%, 63%, 0.125), hsla(36, 100%, 63%, .75), hsla(36, 100%, 63%, 0.125), transparent);
    padding: 0 .5rem;
    text-shadow: 1px 1px 2px #000;
    font-weight: 700;
    font-size: .875rem;
    text-align: center;
    height: 41px;
    align-content: center;
}
.vip-container__benefits .claimable {
    display: flex;
    flex-direction: column;
}
.vip-container__benefits .claimable .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 1rem 0;
}
.vip-container__benefits .claimable .row .items {
    display: flex;
    overflow: auto;
    gap: .5rem;
    padding: 0 1rem;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 2rem, black calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 2rem, black calc(100% - 2rem), transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.vip-container__benefits .claimable img {
    max-width: 40px;
    min-width: 40px;
}
.vip-container__benefits .claimable p {
    background: rgba(0,0,0,.5);
    padding: .275rem .75rem;
    text-align: center;
    font-size: .8rem;
    border-radius: 100vw;
    min-width: max-content;
}
.vip-container__benefits .claimable p span {
    font-weight: 600;
    background: #da932a;
    background: linear-gradient(to top right, #da932a 0%, #ffecda 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 1100px) {
    .vip-container__header svg {
        padding: 0;
        padding-right: .75rem;
        aspect-ratio: 16 / 9;
        border-radius: 0 100vw 100vw 0;
        border: 1px solid var(--dark-surface);
        border-left: none;
    }
    .vip-container__benefits .title {
        background-image: linear-gradient(to right, #333279,hsla(241, 42%, 34%, .125), transparent);
        text-align: left;
    }
    .vip-container__benefits .claimable h3 {
        text-align: left;
    }
    .vip-container__benefits .daily-chest h3 {
        background-image: linear-gradient(to right, rgb(125, 106, 236), rgba(125, 106, 236, .125), transparent);
       
    }
    .vip-container__benefits .exclusive-chest > span {
        background-image: linear-gradient(to right, hsla(36, 100%, 63%, .75), hsla(36, 100%, 63%, 0.125), transparent);
        text-align: left;
    }
}
@media (max-width: 720px) {
    .vip-container__benefits .listing-box .ul .li {
        font-size: .8rem;
    }
    .vip-container__benefits .listing-box button {
        padding: .5rem;
    }
    .vip-container__benefits .listing-box button img {
        min-width: 20px;
        max-width: 20px;
        height: 20px;
    }
    .vip-container__benefits .listing-box .li span.benefit {
        padding: 0 .5rem;
    }
}
@media(max-width: 480px) {
    .vip-container__benefits .claimable p {
        font-size: .7rem;
    }
}