@charset "UTF-8";

@font-face {
    font-family: 'VT323-Regular';
    src: url('../../../../fonts/VT323/VT323-Regular.ttf');
}

@font-face {
    font-family: 'Protest-Strike';
    src: url('../../../../fonts/ProtestStrike/Protest-Strike.ttf');
}

@keyframes spinnerWidgetSlideRight {
    0% {
        transform: translateX(calc(-1 * var(--spinner_widget-width)));
        animation-timing-function: ease-in;
    }
    5% {
        transform: translateX(calc(var(--spinner_widget-window-width) * 0.2 - var(--spinner_widget-width) * 0.2));
        animation-timing-function: linear;
    }


    /*10% {*/
    /*    z-index: 1060;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.3 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/
    /*20% {*/
    /*    z-index: 1060;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.3 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/
    /*21% {*/
    /*    z-index: 9;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.3 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/


    /*50% {*/
    /*    z-index: 1060;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.5 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/
    /*70% {*/
    /*    z-index: 1060;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.5 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/
    /*71% {*/
    /*    z-index: 9;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.5 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/



    95% {
        transform: translateX(calc(var(--spinner_widget-window-width) * 0.8 - var(--spinner_widget-width) * 0.8));
        animation-timing-function: ease-out;
    }
    100% {
        transform: translateX(var(--spinner_widget-window-width));
    }
}

@keyframes spinnerWidgetSpin {
    0% {
        transform: rotate(0deg);
        animation-timing-function: ease-in;
    }
    5% {
        transform: rotate(360deg);
        animation-timing-function: linear;
    }
    95% {
        transform: rotate(720deg);
        animation-timing-function: ease-out;
    }
    100% {
        transform: rotate(1080deg);
    }
}

@keyframes spinnerWidgetSlideRightFirst {
    0% {
        transform: translateX(0);
        animation-timing-function: ease-in;
    }
    5% {
        transform: translateX(calc(var(--spinner_widget-window-width) * 0.2 - var(--spinner_widget-width) * 0.2));
        animation-timing-function: linear;
    }


    /*10% {*/
    /*    z-index: 1060;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.3 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/
    /*20% {*/
    /*    z-index: 1060;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.3 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/
    /*21% {*/
    /*    z-index: 9;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.3 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/


    /*50% {*/
    /*    z-index: 1060;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.5 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/
    /*70% {*/
    /*    z-index: 1060;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.5 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/
    /*71% {*/
    /*    z-index: 9;*/
    /*    transform: translateX(calc(var(--spinner_widget-window-width) * 0.5 - var(--spinner_widget-width) * 0.2));*/
    /*    animation-timing-function: linear;*/
    /*}*/


    95% {
        transform: translateX(calc(var(--spinner_widget-window-width) * 0.8 - var(--spinner_widget-width) * 0.8));
        animation-timing-function: ease-out;
    }
    100% {
        transform: translateX(var(--spinner_widget-window-width));
    }
}

@keyframes spinnerWidgetSpinFirst {
    0% {
        transform: rotate(0deg);
        animation-timing-function: ease-in;
    }
    5% {
        transform: rotate(360deg);
        animation-timing-function: linear;
    }
    95% {
        transform: rotate(720deg);
        animation-timing-function: ease-out;
    }
    100% {
        transform: rotate(1080deg);
    }
}


#spinnerWidgetTarget{
    display: none;
}

#spinner_widget_container{
    /*background: blue;*/

    position: fixed;
    bottom: 0;
    left: 0;
    min-width: 400px;
    min-height: 470px;
    width: 42vh;
    height: 48vh;
    z-index: 9;
    cursor: url(../../image/curseur.svg) 0 18, pointer !important;
    /*animation: slideRight 9s infinite;*/
}

#spinner_widget_container.active-first{
    animation: spinnerWidgetSlideRightFirst 16s forwards;
}
#spinner_widget_container.active-first #spinner_widget-prize_container{
    animation: spinnerWidgetSpinFirst 16s forwards;
}

#spinner_widget_container.active{
    animation: spinnerWidgetSlideRight 18s infinite;
}

#spinner_widget_container.active #spinner_widget-prize_container{
    animation: spinnerWidgetSpin 18s infinite;
}
#spinner_widget_container.hide-forwards #spinner_widget-prize_container,
#spinner_widget_container.hide #spinner_widget-prize_container{
    animation: spinnerWidgetSpin 18s infinite;
}

#spinner_widget_container.stop {
    animation-play-state: paused;
}

#spinner_widget_container.stop #spinner_widget-prize_container{
    animation-play-state: paused;
}

/*#spinner_widget_container.hide{*/
/*    !*offset-path: path("M320,200 L1964,-138 A30,30 0 0,1 1964,-208 L2665,-474");*!*/
/*    animation: spinnerWidgetHide 3s linear forwards;*/
/*}*/


@keyframes spinnerWidgetHiding {
    0% {
        transform: translateX(var(--spinner_widget-hiding-stage0X)) translateY(0);
    }
    100% {
        transform:
                translateX(var(--spinner_widget-hiding-stage100X))
    }
}
@keyframes spinnerWidgetHide {
    0% {
        transform:
                translateX(var(--spinner_widget-hide-stage0X))
    }
    100% {
        transform:
                translateX(var(--spinner_widget-hide-stage100X))
                translateY(var(--spinner_widget-top));
    }
}

#spinner_widget_container.hiding{
    animation: spinnerWidgetHiding var(--spinner_widget-hiding-0-to-90) linear forwards;
}

#spinner_widget_container.hide{
    animation: spinnerWidgetHide 0.5s linear forwards;
}

#spinner_widget_container.hide-forwards{
    animation: none;
    transform:
            translateX(var(--spinner_widget-hide-stage100X))
            translateY(var(--spinner_widget-top));
}

#spinnerWidget.opacity_6{
    opacity: 0.6;
}

#spinnerWidget{
    display: none;
}

.spinner_widget-mascot{
    position: absolute;
    width: 65%;
    height: 100%;
    transition: all 0.5s ease;
}

.spinner_widget-mascot img{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}

#spinner_widget_container.hide-forwards .spinner_widget-mascot,
#spinner_widget_container.hide .spinner_widget-mascot{
    transform-origin: 100% 100%;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

#spinner_widget_container.hide-forwards .spinner_widget-tooltip,
#spinner_widget_container.hide .spinner_widget-tooltip{
    transform-origin: 50% 100%;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

#spinner_widget_container.hide-forwards,
#spinner_widget_container.hide{
    width: var(--spinner_widget-width);
    height: var(--spinner_widget-width);
    min-width: var(--spinner_widget-width);
    min-height: var(--spinner_widget-width);
}

#spinner_widget_container.hide-forwards .spinner_widget-wheel,
#spinner_widget_container.hide .spinner_widget-wheel{
    width: 100%;
    height: 100%;
    pointer-events: none;
}


.spinner_widget-tooltip{
    background-image: url("../../../../../../image/spinner/widget_tooltip.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: 100% 100%;

    position: absolute;
    top: 0;
    right: 0;
    width: 76%;
    height: 48%;
    min-height: 260px;
    padding: 5% 0 12% 0;
    opacity: 0.94;

    color: var(--spinner_widget-color);

    transition: all 0.5s ease;
}

.spinner_widget-tooltip.no-button{
    background-size: 100% 100%;
    top: 12%;
    height: 36%;
}

.spinner_widget-close-btn{
    width: 100%;
    text-align: center;
}

#spinnerWidgetCloseBtn{
    background: none;
    border: none;
    transition: all 0.2s ease;
    width: 100%;
}

#spinnerWidgetCloseBtn svg path{
    fill: var(--spinner_widget-color);
}

#spinnerWidgetCloseBtn:hover{
    transform: rotate(180deg);
}

.spinner_cart-printer-container,
.spinner_widget-printer-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}


.linecursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: #000;
    margin-left: 2px;
    animation: blink 0.8s infinite;
}


#spinnerCartTooltip,
#spinnerWidgetTooltip{
    font-family: 'VT323-Regular', sans-serif;
    font-size: clamp(22px, 2vh, 48px);
    line-height: 1.2;
    margin-top: 0.2rem;
    text-align: center;
}

.spinner_widget-tooltip.no-button #spinnerWidgetTooltip{
    margin-top: 0.6rem;
}

.spinner_widget-start-btn{
    text-align: center;
    margin-top: 1rem;
}

#spinnerCartStartBtn,
#spinnerWidgetStartBtn{
    color: var(--spinner_widget-color);
    border-width: 6px; /* 根据你的PNG图片边缘宽度调整 */
    border-style: solid;
    border-image: url("../../../../../../image/spinner/widget_toolitp_btn_border.png") 10 round; /* 10是切片值，与border-width匹配 */
    border-radius: 18px;
    background-color: #25F4EE;
    padding: 0 12px;
    cursor: pointer;

    filter:
            drop-shadow(0 2px 1px #547CA6)
            drop-shadow(0 1px 0px #000000);
    transition: all 0.1s ease;

    font-family: 'VT323-Regular', sans-serif;
    font-size: clamp(20px, 1.8vh, 24px);
}

#spinnerCartStartBtn:hover,
#spinnerWidgetStartBtn:hover {
    transform: translateY(2px);
    filter:
            drop-shadow(0 0px 1px #547CA6)
            drop-shadow(0 1px 0px #000000);
}

.spinner_cart-wheel,
.spinner_widget-wheel{
    position: absolute;
    background-color: #FFFFFF; /* 白色背景 */
    border-radius: 50%;    /* 关键：50% 生成圆形 */
    width: 58%;          /* 圆的宽度 */
    aspect-ratio: 1 / 1; /* 强制宽高比 1:1 */
    pointer-events: none;
    bottom: 1%;
    right: -2%;
}


#spinner_cart-prize_container,
#spinner_widget-prize_container{
    position: absolute;
    width: 96%;
    height: 96%;
    top: 2%;
    left: 2%;
    transition: transform 0.5s ease;
    pointer-events: none;
}

.spinner_spinner-prize,
.spinner_cart-prize,
.spinner_widget-prize{
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: url(../../image/curseur.svg) 0 18, pointer !important;
    pointer-events: none;
}

.spinner_spinner-sector,
.spinner_cart-sector,
.spinner_widget-sector{
    pointer-events: auto; /* 允许 SVG path 接收鼠标事件 */
}

.spinner_spinner-prize-title,
.spinner_cart-prize-title,
.spinner_widget-prize-title{
    position: absolute;
    font-family: 'Protest-Strike', sans-serif;
    color: #111111;
    font-size: 0.8rem;
    left: 50%;
    top: 50%;
    width: 46%;
    padding-left: 10%;
    line-height: 1.2;
    transform: translate(-50%, -50%) rotate(var(--title-angle)) translateX(50%);
    text-align: center;
    transform-origin: center; /* 设置旋转中心点 */
    z-index: 1;
}


.spinner_spinner-prize-title.spinner_spinner-prize-title-isnext,
.spinner_cart-prize-title.spinner_cart-prize-title-isnext,
.spinner_widget-prize-title.spinner_widget-prize-title-isnext{
    color: #AAAAAA;
}

.spinner_widget-inner-circle,
.spinner_cart-inner-circle,
.spinner_spinner-inner-circle{
    position: absolute;
    background-color: #FFFFFF; /* 白色背景 */
    border-radius: 50%;    /* 关键：50% 生成圆形 */
    width: 18%;
    aspect-ratio: 1 / 1; /* 强制宽高比 1:1 */
    max-width: 50px;
    max-height: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 轻微阴影 */
}

.spinner_spinner-prize-preview,
.spinner_cart-prize-preview,
.spinner_widget-prize-preview{
    position: fixed;
    width: 5vw;
    height: 5vw;
    aspect-ratio: 1 / 1;
    max-width: 160px;
    max-height: 160px;
    min-width: 100px;
    min-height: 100px;
    pointer-events: none;
    left: -999px;
    top: -999px;
    z-index: 31;
}

.spinner_spinner-prize-preview.hide,
.spinner_cart-prize-preview.hide,
.spinner_widget-prize-preview.hide{
    display: none !important;
}

.spinner_spinner-preview-image-container,
.spinner_cart-preview-image-container,
.spinner_widget-preview-image-container{
    position: absolute;
    width: 100%;
    height: 100%;
    margin-top: 1rem;
}

.is-next .spinner_spinner-preview-image-container,
.is-next .spinner_cart-preview-image-container,
.is-next .spinner_widget-preview-image-container{
    filter: grayscale(0.7);
}

.spinner_spinner-preview-image,
.spinner_cart-preview-image,
.spinner_cart-prize-image,
.spinner_widget-preview-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 12%;
    background-color: #ffffff;
    border-radius: 0.8rem;
    /*object-fit: cover;*/
    /*pointer-events: none;*/
}

#shoppingCartContent img.spinner_spinner-preview-image,
#shoppingCartContent img.spinner_cart-preview-image,
#shoppingCartContent img.spinner_cart-prize-image,
#shoppingCartContent img.spinner_cart-preview-border,
#shoppingCartContent img.spinner_widget-preview-image{
    border: none;
}

.spinner_spinner-win-select-border,
.spinner_spinner-preview-border,
.spinner_cart-preview-border,
.spinner_cart-prize-border,
.spinner_widget-preview-border{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.spinner_spinner-preview-text,
.spinner_cart-preview-text,
.spinner_widget-preview-text{
    /*font-family: var(--v8-font-family-text);*/
    font-family: 'Protest-Strike', sans-serif;
    font-size: clamp(1rem, 1.6vh, 1.2rem);
    /*font-weight: bold;*/
    text-align: center;
    position: relative;
    top: 10px;
    background-color: #FFFFFF;
    /*width: clamp(100%, 10vw, 300px);*/
    /*max-width: 300px;*/
    width: min-content;
    white-space: nowrap;
    padding: 0.2rem 0.6rem;
    border: 3px solid #000000;
    border-radius: 0.8rem;
    color: var(--spinner_widget-color);
}

.is-next .spinner_spinner-preview-text,
.is-next .spinner_cart-preview-text,
.is-next .spinner_widget-preview-text{
    color: #BBBBBB;
    border-color: #BBBBBB;
}


@keyframes spinnerSpinnerSlideDown {
    0% {
        transform: translateY(-100%); /* 从屏幕外顶部开始 */
    }
    50% {
        transform: translateY(20px); /* 快速下落并超过目标位置（第1次反弹） */
    }
    65% {
        transform: translateY(-10px); /* 回弹（第2次反弹） */
    }
    80% {
        transform: translateY(5px); /* 再次超过（第3次反弹） */
    }
    90% {
        transform: translateY(-2px); /* 轻微回弹 */
    }
    100% {
        transform: translateY(0); /* 最终稳定 */
    }
}

@keyframes spinnerSpinnerSlideUp {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}

#spinner_spinner_container{
    background-color: var(--v8-background-color);

    position: fixed;
    top: 0;
    left: 0;
    z-index: 29;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    transform: translateY(-100%);
    display: none;
}

#spinner_spinner_container.show{
    display: block;
    animation: spinnerSpinnerSlideDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#spinner_spinner_container.hide{
    display: block;
    animation: spinnerSpinnerSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#spinnerSpinner{
    background-image: url("../../../../../../image/spinner/spinner_begin_bg_1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 29;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#spinnerSpinner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}


#spinner_spinner-prize_container{
    position: absolute;
    width: 96%;
    height: 96%;
    top: 2%;
    left: 2%;
    pointer-events: none;
    z-index: 19;
}

.spinner_spinner-wheel-container {
    width: 100vw;
    height: 50vh;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
}

.spinner_spinner-wheel-container.hide {
    display: none;
}

.spinner_spinner-wheel{
    position: absolute;
    background-color: #FFFFFF; /* 白色背景 */
    border-radius: 50%;    /* 关键：50% 生成圆形 */
    width: clamp(480px, 58vw, 600px);          /* 圆的宽度 */
    aspect-ratio: 1 / 1; /* 强制宽高比 1:1 */
    pointer-events: none;
    transform: translateY(-10vh);
    /*transition: transform 2s ease-in-out;*/
    z-index: 29;
}

.spinner_spinner-wheel.drawing {
    transition: transform 1s ease-in-out;
    transform: translateY(36%);
}

.spinner_spinner-prize-title{
    font-size: 1.2rem;
}

.spinner_spinner-arrow{
    /*position: relative;*/
    position: absolute;
    width: 18%;
    max-width: 86px;
    max-height: 76px;
    min-width: 58px;
    min-height: 51px;
    aspect-ratio: 86 / 76;
    left: 96%;
    top: 50%;
    z-index: 19;
    transform: translate(-1rem, -50%);
}

.spinner_spinner-arrow svg{
    width: 100%;
    height: 100%;
}

@media (orientation: landscape) {
    .spinner_spinner-wheel{
        width: initial;
        max-width: none;
        height: 80vh;
        min-height: 280px;
        max-height: 600px;
    }
}

@media (max-height: 480px) {
    .spinner_spinner-prize-title{
        font-size: 0.8rem;
    }
}


/*用css控制转盘旋转*/
/*@keyframes spin-full {*/
/*    !* 初始状态：0s，0deg，匀加速开始 *!*/
/*    0% {*/
/*        transform: rotate(0deg);*/
/*        !* 加速阶段用ease-in，让速度从0平滑提升 *!*/
/*        animation-timing-function: ease-in;*/
/*    }*/

/*    !* 加速阶段结束（2s）：累计720deg，切换为匀速 *!*/
/*    22.22222222222222% {*/
/*        transform: rotate(720deg);*/
/*        !* 匀速阶段用linear，保持速度稳定 *!*/
/*        animation-timing-function: linear;*/
/*    }*/

/*    !* 匀速阶段结束（5s）：累计2880deg，切换为减速 *!*/
/*    55.55555555555555% {*/
/*        transform: rotate(2880deg);*/
/*        !* 减速到30deg/s用ease-out，平滑降速 *!*/
/*        animation-timing-function: ease-out;*/
/*    }*/

/*    !* 减速到30deg/s结束（7s）：累计3630deg，切换为精准停止 *!*/
/*    77.77777777777777% {*/
/*        transform: rotate(3630deg);*/
/*        !* 最后停止阶段用ease-out，缓慢停到目标角度 *!*/
/*        animation-timing-function: ease-out;*/
/*    }*/

/*    !* 最终停止（9s）：累计3630+30+360×10+90=7350deg（示例目标角度90deg） *!*/
/*    100% {*/
/*        transform: rotate(7350deg);*/
/*        animation-timing-function: linear;*/
/*    }*/
/*}*/



@keyframes spin-full {
    /* 初始状态：0s，0deg，匀加速开始 */
    0% {
        transform: rotate(0deg);
        animation-timing-function: ease-in;
    }
    80% {
        transform: rotate(1864deg);
    }
    80% {
        transform: rotate(2864deg);
        animation-timing-function: ease-out;
    }
    100% {
        transform: rotate(3728deg);
    }
}

#spinner_spinner-prize_container.spinning {
    animation: spin-full 6s forwards;
}







@keyframes breathe {
    0%, 100% { opacity: 0.6; transform: scale(1);}
    50% { opacity: 1; transform: scale(1.05); }
}

@keyframes breathe-finish {
    to { opacity: 1; transform: scale(1.05); }
}

.spinner_spinner-glow_effect{
    position: absolute;
    width: 94%;
    height: 94%;
    top: 3%;
    left: 3%;
    border-radius: 50%;    /* 关键：50% 生成圆形 */
    pointer-events: none;
    z-index: 1;
}

.spinner_spinner-glow_effect.breathe{
    box-shadow:
            0 0 calc(50px + clamp(0.8rem, 1vw, 1.2rem)) 10px #FFFFFF,
            0 0 calc(60px + clamp(0.8rem, 1vw, 1.2rem)) 16px rgba(255, 255, 255, 0.5);
    animation: breathe 3s infinite;
}

.spinner_spinner-glow_effect.breathe.finish{
    animation: breathe-finish 0.3s forwards; /* 平滑过渡到高亮状态 */
}

.spinner_spinner-drawing_bg{
    background-image: url("../../../../../../image/spinner/spinner_draw_bg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.spinner_spinner-drawing_bg.hide{
    opacity: 0;
}


#spinner_widget-current-prize-preview,
#current-prize-preview {
    position: absolute;
    background: #FFFFFF;
    width: 18%;
    aspect-ratio: 1 / 1;
    max-width: 160px;
    max-height: 160px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 1rem;
    padding: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 29;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#spinner_widget-current-prize-preview{
    width: 3vw;
    height: 3vw;
    aspect-ratio: 1 / 1;
    max-width: 80px;
    max-height: 80px;
    min-width: 60px;
    min-height: 60px;
}


#current-prize-preview.hide{
    display: none !important;
}

#spinner_widget-current-prize-image,
#current-prize-image {
    width: 100%;
    height: 100%;
    border-radius: 0.8rem;
    object-fit: cover;
    pointer-events: none;
}















.spinner_spinner-text-container {
    position: absolute;
    bottom: 0;
    height: 46vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    color: var(--spinner_spinner-color);
    font-family: 'VT323-Regular', sans-serif;
    transition: opacity 1s ease-in-out;
    opacity: 1;
    overflow-y: auto;
    width: 100%;
}

.spinner_spinner-text-container.hide{
    opacity: 0;
}

.spinner_spinner-inner-circle{
    max-width: 80px;
    max-height: 80px;
    z-index: 19;
}

.spinner_spinner-text-title{
    font-family: 'Protest-Strike', sans-serif;
}

.spinner_spinner-text-description{
    margin-top: 1rem;
}

.spinner_spinner-text-description p{
    margin: 0;
    font-size: var(--v8-size-2);
    letter-spacing: 2px;
}

.spinner_spinner-text-button{
    margin-top: 20px;
}

.spinner_spinner-win-button,
.spinner_spinner-start-button{
    background-image: url("../../../../../../image/spinner/spinner_button_bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    font-family: 'Protest-Strike', sans-serif;
    font-size: var(--v8-size-2);
    padding: 1.2rem 3rem 1.8rem;
    border-radius: 2.2rem;

    transition: transform 0.5s ease;
}

.spinner_spinner-win-button:hover,
.spinner_spinner-start-button:hover{
    transform: translateY(-10px);
}

.spinner_spinner-start-button.disabled:hover{
    transform: none;
}


.spinner_spinner-text-term{
    margin-top: 1rem;
}

.spinner_spinner-text-term p{
    margin: 0;
    font-size: var(--v8-size-3);
    /*letter-spacing: 2px;*/
}

#spinnerSpinnerTerm{
    text-decoration: underline;
    cursor: pointer;
}

#spinnerSpinnerCloseBtn{
    position: fixed;
    top: 1.6rem;
    right: 2rem;
    cursor: pointer;
    opacity: 0.6;
    color: var(--spinner_spinner-color);
    font-family: 'VT323-Regular', sans-serif;
    font-size: var(--v8-size-2);
    z-index: 20;
    transition: 180ms ease-in-out;
    transform: rotate(0deg);
    transition: opacity 1s ease-in-out;
}

#spinnerSpinnerCloseBtn.hide{
    opacity: 0;
}

#spinnerSpinnerCloseBtn svg {
    transition: transform 180ms ease-in-out; /* 将 transition 移到默认状态 */
    transform: rotate(0deg); /* 默认角度 */
}

#spinnerSpinnerCloseBtn svg path{
    fill: var(--spinner_spinner-color);
}

#spinnerSpinnerCloseBtn:hover{
    opacity: 1;
}
#spinnerSpinnerCloseBtn:hover svg{
    transition: 180ms ease-in-out;
    transform: rotate(180deg);
}



.spinner_spinner-result-container{
    position: fixed;
    display: flex;
    width: 100vw;
    height: 100vh;
}

.spinner_spinner-result-container.hide{
    display: none;
}

.spinner_spinner-result_svg svg {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    animation-play-state: paused;
}
.spinner_spinner-result_svg svg path{
    fill: revert-layer;
}


.spinner_spinner-result{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    z-index: 19;
}



@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    4% {
        transform: rotate(-12deg);
    }
    8% {
        transform: rotate(12deg);
    }
    12% {
        transform:  rotate(-12deg);
    }
    16% {
        transform: rotate(12deg);
    }
    20% {
        transform:  rotate(-12deg);
    }
    24% {
        transform: rotate(12deg);
    }
    30%, 100% {
        transform: rotate(0deg);
    }
}

.spinner_spinner-win-glow-effect{
    position: absolute;
    width: 94%;
    height: 94%;
    top: 3%;
    left: 3%;
    border-radius: 1rem;
    pointer-events: none;

    box-shadow:
            0 0 calc(50px + clamp(0.8rem, 1vw, 1.2rem)) 10px #FFFFFF,
            0 0 calc(60px + clamp(0.8rem, 1vw, 1.2rem)) 16px rgba(255, 255, 255, 0.5);

    animation: breathe 2s infinite linear;
}

.result-prize-preview{
    position: relative;
    background: #FFFFFF;
    width: 26vh;
    aspect-ratio: 1 / 1;
    max-width: 260px;
    max-height: 260px;
    min-width: 180px;
    min-height: 180px;
    border-radius: 1rem;
    /*border: 6px solid #FFFFFF;*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;

    transform-origin: center center;

    animation: shake 2s infinite linear;
}

.spinner_spinner-result-border{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#result-prize-image{
    width: 100%;
    height: 100%;
    border-radius: 0.8rem;
    object-fit: cover;
    pointer-events: none;
}



/*购物车*/
.spinner_cart-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-height: 320px; /* 设定一个足够大的值 */
    margin-bottom: 2rem;
    transition: max-height 0.3s ease-out;
}

.spinner_cart-alert{
    font-family: 'Protest-Strike', sans-serif;
    font-size: 1.2rem;
    color: #FF1A51;
    margin-bottom: 0.8rem;
}

.spinner_cart-container.hide{
    margin-bottom: 0;
    max-height: 0;
    overflow: hidden;
}

.spinner_cart-container.hide .spinner_cart-window-content{
    display: none;
}

.spinner_cart-remove-modal,
.spinner_cart-window {
    background: #F0F0F0;
    border: 2px solid #FFFFFF;
    box-shadow:
            0px 7.82px 9.2px 0px #CECECE,
            0px 7.82px 0px 0px #CACACA,
            0px 6.9px 0px 0px #DCDCDC,
            0px 5.75px 0px 0px #DEDEDE,
            0px 4.6px 0px 0px #E0E0E0,
            0px 2.3px 0px 0px #ECECEC,
            0px 1.15px 0px 0px #EFEFEF,
            0px 1.15px 0px 0px #F4F4F4 inset;

    width: 100%;
    height: 240px;
}

.spinner_cart-window-header {
    display: flex;
    justify-content: right;
    align-items: center;
    position: relative;
    background: #FF7999;
    width: 100%;
    height: 58px;
    padding: 10px;
}

.spinner_cart-window-header.spinner_cart-closed{
    background: #D1D1D1;
}

.spinner_cart-empty-close-btn{
    background: #F8F8F8;
    border: none;
    padding: 4px;
    box-shadow:
            1px 1px 0px 0px #FFFFFF inset,
            -2px -2px 0px 0px #7A7A7A inset;

    width: 38px;
    height: 38px;
    transition: all 0.2s ease;
}

.spinner_cart-empty-close-btn:active{
    box-shadow:
            -1px -1px 0px 0px #7A7A7A inset,
            2px 2px 0px 0px #FFFFFF inset;
    transform: translateY(1px);
}

.spinner_cart-empty-close-btn svg path{
    fill: var(--spinner_widget-color);
}

.spinner_cart-empty-close-btn svg{
    transition: 180ms ease-in-out;
}

.spinner_cart-empty-close-btn:hover svg{
    transition: 180ms ease-in-out;
    transform: rotate(180deg);
}

.spinner_cart-window-content{
    position: relative;
    height: 180px;
}

#shoppingCartContent .spinner_cart-window-content img.spinner_cart-empty-mascot-img{
    transform: scaleX(-1);

    border: none;
    margin: 0;
    padding: 0;
    max-height: 250px;
    width: auto;
    object-fit: contain;
    position: absolute;
    /*top: 2px;*/
    bottom: 2px;
    right: 20px;
    pointer-events: none;
}

/*#shoppingCartContent .spinner_cart-window-content img.spinner_cart-empty-mascot-img.spinner_cart-has-alert{*/
/*    top: calc(2.76rem + 2px);*/
/*}*/

/*#shoppingCartContent .spinner_cart-window-content img.spinner_cart-empty-mascot-img.spinner_cart-has-alert.spinner_cart-has-not-alert{*/
/*    top: calc(4.48rem + 2px);*/
/*}*/

#shoppingCartContent .spinner_cart-window-content img.spinner_cart-mascot-img{
    border: none;
    margin: 0;
    padding: 0;
    max-height: 250px;
    width: auto;
    object-fit: contain;
    position: absolute;
    /*top: 2px;*/
    bottom: 2px;
    left: 20px;
    pointer-events: none;
}

/*#shoppingCartContent .spinner_cart-window-content img.spinner_cart-mascot-img.spinner_cart-has-alert{*/
/*    top: calc(2.76rem + 2px);*/
/*}*/

/*#shoppingCartContent .spinner_cart-window-content img.spinner_cart-mascot-img.spinner_cart-has-alert.spinner_cart-has-not-alert{*/
/*    top: calc(4.48rem + 2px);*/
/*}*/

.spinner_cart-wheel{
    width: 46%;
    position: absolute;
    max-width: 180px;
    right: 120px;
    /*top: 68px;*/
    bottom: 6px;
}

/*.spinner_cart-wheel.spinner_cart-has-alert{*/
/*    top: calc(2.76rem + 68px);*/
/*}*/

/*.spinner_cart-wheel.spinner_cart-has-alert.spinner_cart-has-not-alert{*/
/*    top: calc(4.48rem + 68px);*/
/*}*/

.spinner_cart-prize-title{
    font-size: 0.6rem;
    font-weight: normal;
}

.spinner_cart-prize-preview{
    max-height: 120px;
    max-width: 120px;
}

.spinner_cart-window-content-left,
.spinner_cart-window-content-right,
.spinner_cart-window-content-left .spinner_cart-window-content-rule span{
    color: var(--spinner_widget-color);
}

.spinner_cart-window-content-left .spinner_cart-window-content-rule span{
    font-family: 'VT323-Regular', sans-serif;
    font-size: 1.1rem;
    padding-left: 8px;
    text-decoration: underline;
    cursor: pointer;
}

.spinner_cart-window-content-left,
.spinner_cart-window-content-right,
.spinner_cart-window-content-right-inner{
    display: flex;
    flex-direction: column;
    width: 60%;
    height: 100%;
    justify-content: space-evenly;
}

.spinner_cart-window-content-rule svg path{
    fill: var(--spinner_widget-color);
}

.spinner_cart-window-content-title{
    font-family: 'Protest-Strike', sans-serif;
    font-size: calc(16px + (18 - 16)*(100vw - 768px)/(1920 - 768));
    padding: 10px;
}

.spinner_cart-start-btn {
    padding: 16px;
}

.spinner_cart-window-content-rule {
    padding-left: 8px;
    padding-top: 16px;
}

#spinner_cart-prize_container{
    animation: spinnerWidgetSpin 18s infinite;
}




.spinner_spinner-rule-modal .modal-body svg path{
    fill: revert-layer;
}

.spinner_spinner-rule-modal .modal-body{
    background-image: url("../../../../../../image/spinner/spinner_rule_bg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    border: none;
    border-radius: 120px;

    box-shadow:
            -4.64px -6.95px 9.27px 0px #FFDF551F inset,
            11.59px 1.85px 9.27px 0px #FFFFFF80 inset,
            -7.42px 5.56px 55.62px 0px #FFFFFF33 inset;
}

.spinner_spinner-rule-modal .modal-title .modal_close_btn svg{
    transition: 180ms ease-in-out;
}

.spinner_spinner-rule-modal .modal-title:hover svg{
    transition: 180ms ease-in-out;
    transform: rotate(180deg);
}

.spinner_spinner-rule-title{
    font-family: 'Protest-Strike', sans-serif;
    font-size: var(--v8-size-2);
    color: var(--spinner_widget-color);
    text-align: center;
    margin: 1.6rem 0;
}

.spinner_spinner-rule-content,
.spinner_spinner-rule-content span,
.spinner_spinner-rule-content a{
    font-family: 'VT323-Regular', sans-serif;
    font-size: var(--v8-size-3);
    color: var(--spinner_widget-color);
    text-align: center;
}

.spinner_spinner-rule-content{
    display: flex;
    justify-content: center;
    padding: 0 5rem 4rem 5rem;
    width: 100%;
}

.spinner_spinner-rule-content-inner {
    max-width: 420px;
}


#spinnerCartRemoveBtn img.spinner_cart_remove_btn_img {
    border: none;
    margin-bottom: 0;
    width: 100%;
    padding: 0;
}

#spinnerCartRemoveTooltip img.spinner_cart-remove-tooltip-img {
    position: absolute;

    border: none;
    margin-bottom: 0;
    width: 100%;
    padding: 0;
}

#spinnerCartConfirmBtn img{
    border: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.spinner_cart-remove-tooltip span.spinner_cart-remove-tooltip-text{
    position: absolute;
    font-family: 'VT323-Regular', sans-serif;
    color: var(--spinner_widget-color);
}

.spinner_cart-remove-tooltip{
    position: fixed;
    top: 38px;
    right: 38px;
    width: 130px;
    height: 78px;
}

.spinner_cart-remove-tooltip-text{
    padding: 8px 16px;
    left: 12px;
    line-height: 1.2;
    text-align: center;
}

.spinner_cart-remove-tooltip{
    display: none;
}


.spinner_cart-window-content-right{
    display: flex;
    width: 100%;
    align-items: end;
}

.spinner_cart-window-content-right-inner{
    width: 60%;
    align-items: center;
}

#spinnerCartContainer img.spinner_cart-prize-image,
#spinnerCartContainer img.spinner_cart-prize-border {
    border: none;
    margin-bottom: 0;
    width: 100%;
    padding: 0;
}

.spinner_cart-prize-image-container{
    position: relative;
    width: 60px;
    height: 60px;
    margin-left: 6%;
}

.spinner_cart-window-content-prize-name{
    background-color: #FFFFFF;
    font-family: 'VT323-Regular', sans-serif;
    border-radius: 8px;
    color: #FF3F62;
    padding: 2px 6px;
    margin-left: 6%;
}

.spinner_cart-window-content-right-inner .spinner_cart-window-content-title{
    margin-left: 6%;
    padding: 0;
}

.spinner_cart-window-content-level-amount{
    font-family: 'VT323-Regular', sans-serif;
}

.spinner_cart-window-content-level-amount svg path{
    fill: revert-layer;
}

.spinner_cart-remove-modal{
    display: none;
    position: fixed;
    width: 480px;
    height: 230px;
    right: 68px;
    top: 148px;
}

.spinner_cart-remove-modal.show{
    display: block;
}

#spinnerCartRemoveModal svg path{
    fill: revert-layer;
}

.spinner_cart-remove-modal-content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spinner_cart-remove-modal-title{
    padding: 1rem 0 0;
}

.spinner_cart-remove-modal-text{
    font-family: 'VT323-Regular', sans-serif;
    color: var(--spinner_widget-color);
    text-align: center;
    padding: 1rem 0 0;
}

.spinner_cart-remove-container{
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 1rem 0 0;
}

.spinner_cart-remove-modal-btn{
    background: #F0F0F0;
    font-family: 'VT323-Regular', sans-serif;
    color: var(--spinner_widget-color);
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow:
            2px 2px 0px 0px #FFFFFF inset,
            -2px -2px 0px 0px #9E9E9E inset,
            1px 1px 0px 0px #FFFFFF inset,
            -1px -1px 0px 0px #292929 inset;
}

.spinner_cart-remove-modal-btn:hover{
    border: 1px solid rgba(0, 0, 0, 1);
}

.spinner_cart-remove-modal-btn:active{
    border: 1px solid rgba(0, 0, 0, 1);
    box-shadow:none;
}



.spinner_level-modal .modal-body svg path{
    fill: revert-layer;
}

.spinner_level-modal .modal-content{
    max-width: 480px;
}

@media (min-width: 768px) {
    .spinner_level-modal .modal-content{
        max-width: 480px;
        margin: 1.75rem auto;
    }
}


.spinner_level-modal .modal-body{
    background-color: transparent;
    background-image: url("../../../../../../image/spinner/spinner_level_modal_bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border: none;

    width: 480px;
    height: 480px;

    padding: 0;
    margin: 0;
}

.spinner_level-modal-header{
    width: 100%;
    height: 68px;
    text-align: right;
    padding: 10px;
}

.spinner_level-modal-close-btn{
    background: #F8F8F8;
    border: none;
    padding: 4px;
    box-shadow:
            -4px -4px 0px 0px #7A7A7A inset,
            4px 4px 0px 0px #FFFFFF inset;
    width: 48px;
    height: 48px;
    transition: all 0.2s ease;
}

.spinner_level-modal-close-btn:active{
    box-shadow:
            -1px -1px 0px 0px #7A7A7A inset,
            2px 2px 0px 0px #FFFFFF inset;
    transform: translateY(1px);
}

.spinner_level-modal-close-btn svg{
    transition: 180ms ease-in-out;
}
.spinner_level-modal-close-btn:hover svg{
    transition: 180ms ease-in-out;
    transform: rotate(180deg);
}

#spinnerLevelImage{
    height: 38px;
}


.spinner_level-modal-content{
    font-family: 'Protest-Strike', sans-serif;
    font-size: var(--v8-size-2);
    color: var(--spinner_widget-color);
    padding: 36px 68px;
    text-align: center;
}

.spinner_level-modal-content-inner{
    margin-top: 18px;
}

.spinner_level-modal .modal-footer{
    margin-top: 0;

}

.spinner_level-start-btn{
    text-align: center;
    margin-top: 1rem;
}

.spinner_level-start-btn{
    width: 100%;
}




#spinnerLevelStartBtn{
    background-color: transparent;
    background-image: url("../../../../../../image/spinner/spinner_level_btn_border.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 100%;
    height: 68px;
    margin: 0;
    padding: 0 0 6px 0;
    border: none;

    font-family: 'VT323-Regular', sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: clamp(20px, 2vh, 30px);
    color: var(--spinner_widget-color);

    filter:
            drop-shadow(0 2px 1px #547CA6)
            drop-shadow(0 1px 0px #000000);

    transition: all 0.1s ease;
}

#spinnerLevelStartBtn:hover{
    transform: translateY(2px);
    filter:
            drop-shadow(0 0px 1px #547CA6)
            drop-shadow(0 1px 0px #000000);
}

.spinner_spinner-win_container{
    width: 100%;
    overflow-y: auto;
}

.spinner_spinner-win_title{
    font-family: 'Protest-Strike', sans-serif;
    color: var(--spinner_spinner-color);
    text-align: center;
    margin-top: 4rem;
}

@media (max-height: 580px) {
    .spinner_spinner-win_title{
        margin-top: 2rem;
    }
}

.spinner_spinner-win_description{
    font-family: 'VT323-Regular', sans-serif;
    color: var(--spinner_spinner-color);
    text-align: center;
    margin-top: 1rem;
}

.spinner_spinner-win_description p {
    margin: 0;
    font-size: var(--v8-size-2);
    letter-spacing: 2px;
}

.spinner_spinner-win-button-container{
    margin-top: 20px;
    text-align: center;
}


.spinner_spinner-win-select-modal .modal-body{
    background-color: transparent;
    background-image: url("../../../../../../image/spinner/win_select_bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border: none;

    width: 600px;
    height: 600px;

    padding: 0;
    margin: 0;
}

.spinner_spinner-win-select-content{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
    padding: 108px 28px 108px;
}

.spinner_spinner-win-select-icon{
    width: 40px;
    height: 40px;
}

.spinner_spinner-win-select-content-inner{
    font-family: 'VT323-Regular', sans-serif;
    font-size: var(--v8-size-2);
    color: var(--spinner_widget-color);
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    /*margin-top: 1rem;*/
}

.spinner_spinner-win-select-container{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    /*margin-top: 1.6rem;*/
}

.spinner_spinner-win-select-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    cursor: url(../../image/curseur.svg) 0 18, pointer !important;
}

.spinner_spinner-win-select-img-container{
    position: relative;
    width: 60%;
    max-width: 160px;
    transition: transform 0.5s ease;
}

.spinner_spinner-win-select-item:hover .spinner_spinner-win-select-img-container,
.spinner_spinner-win-select-item:hover .spinner_spinner-win-select-btn{
    transform: scale(1.2);
}

.spinner_spinner-win-select-item:hover .spinner_spinner-win-select-btn{
    transform: translateY(12px);
    background-image: url("../../../../../../image/spinner/win_select_button_bg_active.png");
}

.spinner_spinner-win-select-img{
    width: 100%;
    height: 100%;
    padding: 12%;
    background-color: #ffffff;
    border-radius: 0.8rem;
}

.spinner_spinner-win-select-btn{
    cursor: url(../../image/curseur.svg) 0 18, pointer !important;

    background-image: url("../../../../../../image/spinner/win_select_button_bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    font-family: 'VT323-Regular', sans-serif;
    font-size: var(--v8-size-2);
    color: var(--spinner_widget-color);
    text-align: center;

    padding: 0.2rem 0.1rem;

    border: none;
    border-radius: 0.4rem;

    width: 90%;
    min-width: 240px;
    margin-top: 1rem;

    transition: all 0.5s ease;
}

#spinnerLevelModal {
    z-index: 1090;
}

#spinnerLevelModal .modal-dialog{
    max-width: 620px;
    margin: 1.75rem auto;
    height: auto;
}

#spinnerLevelModal .modal-footer,
#spinnerLevelModal .modal-body{
    background-color: initial;
}

#spinnerLevelModal img {
    border: none;
    margin-bottom: auto;
    width: auto;
    padding: 0;
}

@media (min-width: 768px) {
    #spinnerLevelModal .modal-dialog {
        max-width: 620px;
        margin: 1.75rem auto;
    }
}

@media (min-width: 576px) {
    #spinnerLevelModal .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
}
@media (min-width: 576px) {
    #spinnerLevelModal .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }
}
@media (min-width: 576px) {
    #spinnerLevelModal .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
}

.spinner_cart-tooltip{
    background-image: url("../../../../../../image/spinner/webapp_widget_tooltip.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    position: fixed;
    bottom: 118px;
    right: 128px;
    /*transform: translateX(-50%);*/
    width: 280px;
    height: 168px;
    padding: 18px 18px 26px;
    opacity: 0.94;

    color: var(--spinner_widget-color);

    z-index: 1030;
}