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

.page-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 0;
}

.bonus-app {
    --rpx: 14.5px;
    display: none;
    max-height: 0;
    margin: 0 3%;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, margin-top 0.4s ease, margin-bottom 0.4s ease, opacity 0.3s ease;
}

@media (min-width: 320px) and (max-width: 359.98px) {
    .bonus-app {
        --rpx: calc(14.5px + (100vw - 320px) * 0.0375);
    }
}

@media (min-width: 360px) and (max-width: 600px) {
    .bonus-app {
        --rpx: calc(16px + (100vw - 360px) * 0.0333333);
    }
}

@media (min-width: 600px) and (max-width: 1200px) {
    .bonus-app {
        --rpx: calc(19.2px + (100vw - 600px) * 0.0213333);
    }
}

@media (min-width: 1200px) {
    .bonus-app {
        --rpx: 32px;
    }
}

@media (max-width: 1200px) {
    .bonus-app._visible {
        max-height: calc(6 * var(--rpx));
        margin-top: calc(0.3125 * var(--rpx));
        margin-bottom: calc(0.3125 * var(--rpx));
        opacity: 1;
    }
}

.bonus-app__top {
    background: #6b35a0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: calc(3.875 * var(--rpx));
    padding: calc(0.5625 * var(--rpx)) calc(2.5 * var(--rpx)) calc(0.5625 * var(--rpx)) calc(0.875 * var(--rpx));
    overflow: hidden;
    border-radius: calc(0.625 * var(--rpx));
    z-index: 0;
}

.bonus-app__decor-container {
    position: relative;
    width: 0;
    height: auto;
    align-self: stretch;
    flex-shrink: 0;
    z-index: -1;
}

.bonus-app__decor {
    position: absolute;
    border-radius: 50%;
    background: #fff200;
    pointer-events: none;
}

.bonus-app__decor._1 {
    width: calc(1.5625 * var(--rpx));
    height: calc(1.5625 * var(--rpx));
    top: calc(-1.125 * var(--rpx));
    left: calc(0.625 * var(--rpx));
}

.bonus-app__decor._2 {
    width: calc(2.25 * var(--rpx));
    height: calc(2.25 * var(--rpx));
    bottom: calc(-1 * var(--rpx));
    left: calc(-1.0625 * var(--rpx));
}

.bonus-app__left {
    display: flex;
    flex-direction: column;
    gap: calc(0.1875 * var(--rpx));
    align-items: center;
    z-index: 1;
    flex-shrink: 0;
    width: calc(2.875 * var(--rpx));
}

.bonus-app__left-title {
    font-family: Aqua, sans-serif;
    font-weight: 800;
    font-size: calc(0.6875 * var(--rpx));
    line-height: 1;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

.bonus-app__left-num {
    font-family: Aqua, sans-serif;
    font-weight: 800;
    font-size: calc(1.625 * var(--rpx));
    line-height: 1;
    color: #fff;
    text-align: center;
    letter-spacing: calc(-0.01625 * var(--rpx));
    margin: calc(-0.0625 * var(--rpx)) 0;
}

.bonus-app__left-sub {
    font-family: Aqua, sans-serif;
    font-weight: 700;
    font-size: calc(0.6875 * var(--rpx));
    line-height: 1;
    color: #fff;
    text-align: center;
}

.bonus-app__center {
    display: flex;
    flex-direction: column;
    gap: calc(0.1875 * var(--rpx));
    align-items: center;
    z-index: 1;
}

.bonus-app__btn {
    display: inline-flex;
    align-items: center;
    gap: calc(0.3125 * var(--rpx));
    background: #ec008c;
    border-radius: calc(0.5 * var(--rpx));
    padding: 0 calc(0.6875 * var(--rpx));
    height: calc(1.875 * var(--rpx));
    border: none;
    cursor: pointer;
    font-family: Aqua, sans-serif;
    font-weight: 700;
    font-size: calc(0.5 * var(--rpx));
    line-height: 1;
    color: #fff;
    text-align: left;
    text-decoration: none;
}

.bonus-app__btn--ios,
.bonus-app__btn--google,
.bonus-app__btn--huawei {
    display: none;
}

.bonus-app.is-ios .bonus-app__btn--ios,
.bonus-app.is-google .bonus-app__btn--google,
.bonus-app.is-huawei .bonus-app__btn--huawei {
    display: inline-flex;
}

.bonus-app__btn-icon {
    width: calc(0.75 * var(--rpx));
    height: calc(0.75 * var(--rpx));
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 1V8M9 5.30769L6 8L3 5.30769' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 9V10C11 10.5523 10.5523 11 10 11H2C1.44772 11 1 10.5523 1 10V9' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

.bonus-app__btn-text {
}

.bonus-app__right {
    display: flex;
    flex-direction: column;
    gap: calc(0.3125 * var(--rpx));
    align-items: center;
    z-index: 1;
    background: #916bc4;
    border: calc(0.03125 * var(--rpx)) solid #fff;
    border-radius: calc(0.4375 * var(--rpx));
    padding: calc(0.3125 * var(--rpx)) calc(0.375 * var(--rpx));
}

.bonus-app__right-text {
    font-family: Aqua, sans-serif;
    font-weight: 700;
    font-size: calc(0.375 * var(--rpx));
    line-height: 1;
    color: #fff;
    text-align: center;
}

.bonus-app__timer {
    display: flex;
    gap: calc(0.125 * var(--rpx));
    align-items: flex-start;
}

.bonus-app__timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.0625 * var(--rpx));
    padding: calc(0.0625 * var(--rpx)) 0;
    width: calc(1.5 * var(--rpx));
}

.bonus-app__timer-val {
    font-family: Aqua, sans-serif;
    font-weight: 700;
    font-size: calc(0.8125 * var(--rpx));
    line-height: calc(1.375 * var(--rpx));
    color: #ec008c;
    background: #fff;
    border-radius: calc(0.3125 * var(--rpx));
    height: calc(1.375 * var(--rpx));
    width: calc(1.5 * var(--rpx));
    text-align: center;
}

.bonus-app__timer-label {
    font-family: Aqua, sans-serif;
    font-weight: 600;
    font-size: calc(0.375 * var(--rpx));
    line-height: 1;
    color: #fff;
    text-align: center;
}

.bonus-app__timer-sep {
    display: flex;
    flex-direction: column;
    gap: calc(0.25 * var(--rpx));
    padding-top: calc(0.5 * var(--rpx));
}

.bonus-app__timer-dot {
    width: calc(0.125 * var(--rpx));
    height: calc(0.125 * var(--rpx));
    background: #d9d9d9;
    border-radius: 50%;
}

.bonus-app__close {
    position: absolute;
    top: calc(50% - 0.75 * var(--rpx));
    right: calc(0.5 * var(--rpx));
    width: calc(1.5 * var(--rpx));
    height: calc(1.5 * var(--rpx));
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9422 7.18144C16.1841 6.93952 16.5762 6.93952 16.8182 7.18144C17.06 7.42338 17.06 7.81554 16.8182 8.05742L12.8758 11.9998L16.8182 15.9422C17.0601 16.1841 17.0601 16.5762 16.8182 16.8182C16.5762 17.0601 16.1841 17.0601 15.9422 16.8182L11.9998 12.8758L8.05742 16.8182C7.81554 17.06 7.42338 17.0599 7.18144 16.8182C6.93952 16.5762 6.93952 16.1841 7.18144 15.9422L11.1238 11.9998L7.18144 8.05742C6.93953 7.81551 6.93955 7.42337 7.18144 7.18144C7.42337 6.93952 7.8155 6.93952 8.05742 7.18144L11.9998 11.1238L15.9422 7.18144Z' fill='white'/%3E%3C/svg%3E%0A") center / contain no-repeat #582a84;
    border-radius: calc(0.25 * var(--rpx));
    border: none;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}

@media (min-width: 600px) {
    .bonus-app__left {
        flex-direction: row;
        width: auto;
        gap: calc(0.1875 * var(--rpx));
    }

    .bonus-app__left-num {
        margin: 0;
        font-size: calc(1.25 * var(--rpx));
    }

    .bonus-app__left-title,
    .bonus-app__left-sub {
        font-size: calc(0.6875 * var(--rpx));
    }

    .bonus-app__right {
        flex-direction: row;
        gap: calc(0.3125 * var(--rpx));
        align-items: center;
    }

    .bonus-app__right-text {
        flex-shrink: 0;
        max-width: calc(3 * var(--rpx));
        text-align: center;
    }
}