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

:root {
    --base-height: 500px;
}

.container {
    .flexflex {
        display: flex;
    }

    .flexcenter {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flexjcenter {
        display: flex;
        justify-content: center;
    }

    .flexacenter {
        display: flex;
        align-items: center;
    }

    .flex1 {
        flex: 1;
    }

    .flexcolumn {
        display: flex;
        flex-direction: column;
    }

    .mar1200 {
        width: 1200px;
        margin: 0 auto;
    }

    width: 100%;
    background-color: rgba(51, 51, 51, 1);

    .container-box {
        padding-top: 24px;
        height: 100vh;
        display: flex;
        flex-direction: column;

        .logo {
            width: 121px;
            height: 24px;
            margin-bottom: 31px;
            z-index: 1;
        }

        .header {
            position: relative;
            width: 1200px;
            height: 280px;
            // background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
            border-radius: 20px;
            margin-bottom: 20px;

            &::after {
                content: "";
                width: 1200px;
                height: 280px;
                background: linear-gradient(180deg, rgba(125, 75, 248, 1) 0%, rgba(82, 65, 176, 1) 100%);
                border-radius: 20px;
                position: absolute;
                top: 0;
                left: 0;
            }

            .halo {
                width: 240px;
                height: 214px;
                position: absolute;
                top: -71px;
                left: -59px;
            }

            .star-icon {
                position: absolute;
                top: 46px;
                left: 51px;
                width: 56px;
                height: 56px;
                z-index: 1;
            }

            .love-little {
                position: absolute;
                top: 120px;
                left: -9px;
                width: 173px;
                height: 148px;
                transform: rotate(315deg);
                z-index: 1;
            }

            .bj-2 {
                width: 360px;
                height: 128px;
                position: absolute;
                left: 25px;
                bottom: 0;
                z-index: 1;
            }

            .music-icon {
                width: 34px;
                height: 37px;
                position: absolute;
                top: 194px;
                left: 40px;
                transform: rotate(345deg);
                z-index: 1;
            }

            .bj {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 1064px;
                height: 280px;
                z-index: 1;
            }

            .love-big {
                width: 298px;
                height: 256px;
                display: flex;
                transform: rotate(44deg);
                position: absolute;
                top: 22px;
                left: 64px;
                z-index: 1;
            }

            .music-score {
                width: 240px;
                height: 240px;
                position: absolute;
                top: 20px;
                left: 197px;
                z-index: 1;
            }

            .question {
                width: 289px;
                height: 280px;
                position: absolute;
                top: 0;
                left: 668px;
                z-index: 1;
            }

            .text {
                width: 243px;
                height: 210px;
                position: absolute;
                top: 50px;
                left: 423px;
                z-index: 1;
            }

            .face {
                width: 83px;
                height: 83px;
                position: absolute;
                top: -27px;
                left: 1080px;
                z-index: 1;
            }

            .star-icon-2 {
                width: 110px;
                height: 110px;
                position: absolute;
                left: 979px;
                top: 70px;
                z-index: 1;
            }

            .ai-music {
                width: 81px;
                height: 28px;
                position: absolute;
                top: 240px;
                left: 1106px;
                z-index: 1;
            }

            .record-black {
                width: 191px;
                height: 199px;
                position: absolute;
                bottom: 0;
                right: -1px;
                z-index: 1;
            }

            .record-circle {
                position: absolute;
                top: 132px;
                left: 1063px;
                background-color: rgb(114, 219, 134);
                width: 94px;
                height: 94px;
                border-radius: 50%;
                z-index: 1;

                &::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: #fff;
                }
            }

            .green-glow {
                width: 306px;
                height: 62px;
                position: absolute;
                top: 245px;
                left: 217px;
            }

            .shadow {
                width: 240px;
                height: 165px;
                position: absolute;
                top: 151px;
                left: 997px;
            }
        }

        .details {
            // height: 500px;
            // flex: 1;
            max-height: 500px;
            margin-bottom: 40px;
            width: 1200px;
            border-radius: 20px;
            background-color: rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 1;
            padding: 3px;
            overflow: hidden;
            height: var(--base-height);

            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: calc(100% - 6px);
                height: calc(100% - 6px);
                background-color: #7d4bf8;
                z-index: -1;
                border-radius: 18px;
            }

            .ray-light {
                width: 286px;
                height: 286px;
                position: absolute;
                top: 3px;

                &.ray-light-left {
                    left: 3px;
                }

                &.ray-light-right {
                    right: 3px;
                    transform: scaleX(-1);
                }
            }

            .bj-check {
                width: 1200px;
                height: 134px;
                position: absolute;
                bottom: 3px;
                left: 0;
            }

            .bj-mask {
                width: 1194px;
                height: 129px;
                position: absolute;
                left: 3px;
                bottom: 3px;
            }

            .fluctuate-box {
                position: absolute;
                left: 10px;
                top: 10px;
                display: flex;
                align-items: self-end;
                z-index: 100;

                .item {
                    height: 100%;
                    width: 12px;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    margin-right: 2px;

                    .item-item {
                        width: 100%;
                        height: 5px;
                        border-radius: 2px;
                        background-color: #7d4bf8;
                        margin-top: 2px;
                    }
                }
            }

            .fluctuate-icon {
                width: 400px;
                height: 86px;
                position: absolute;
                // top: 293px;
                bottom: 120px;
                right: 0;
            }

            .start-box {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;

                .microphone {
                    // width: 326px;
                    // height: 326px;
                    // margin-top: 93px;
                    width: calc(var(--base-height) * 0.652);
                    height: calc(var(--base-height) * 0.652);
                    margin-top: calc(var(--base-height) * 0.186);
                    margin-left: 163px;
                    margin-right: 28px;
                }

                .start-right {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    .suspect-text {
                        // height: 56px;
                        // margin-top: 136px;
                        // margin-bottom: 23px;
                        height: calc(var(--base-height) * 0.112);
                        margin-top: calc(var(--base-height) * 0.278);
                        margin-bottom: calc(var(--base-height) * 0.048);
                    }

                    .hint {
                        font-size: 18px;
                        color: #ffffff;
                        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                        // position: absolute;
                        // top: calc(var(--base-height) * 0.43);
                        // left: 517px;
                        margin-bottom: calc(var(--base-height) * 0.058);
                    }

                    .start-icon {
                        // width: fit-content;
                        height: calc(var(--base-height) * 0.138);
                        cursor: pointer;
                    }
                }
            }

            .answer-box {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                flex-direction: column;
                // padding-top: 39px;
                padding-top: calc(var(--base-height) * 0.078);
                align-items: center;
                // animation: fadeInUp 3s ease  forwards;

                @keyframes fadeInUp {
                    0% {
                        left: 100%;
                    }

                    100% {
                        left: 0;
                    }
                }

                .figure {
                    width: calc(var(--base-height) * 0.12);
                    height: calc(var(--base-height) * 0.12);
                    // margin-bottom: 22px;
                    margin-bottom: calc(var(--base-height) * 0.05);
                }

                &.answer-0 {
                    .list .item {
                        &:not(:last-of-type) {
                            margin-right: 175px;
                        }
                    }
                }

                &.answer-1 {
                    .list .item {
                        &:not(:last-of-type) {
                            margin-right: 103px;
                        }
                    }
                }

                &.answer-2 {
                    .list .item {
                        &:not(:last-of-type) {
                            margin-right: 78px;
                        }
                    }
                }

                .list {
                    // margin-bottom: 13px;
                    margin-bottom: calc(var(--base-height) * 0.026);

                    .item {
                        position: relative;
                        flex-direction: column;
                        align-items: center;

                        .img-box {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: calc(var(--base-height) * 0.412);
                            height: calc(var(--base-height) * 0.436);
                            // width: 206px;
                            // height: 218px;
                            // margin-bottom: 37px;
                            margin-bottom: calc(var(--base-height) * 0.074);

                            position: relative;
                            z-index: 1;
                            border-radius: 20px;

                            &.show {
                                background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
                                animation: bg 1.3s infinite linear;
                            }

                            @property --rotate {
                                syntax: "<angle>";
                                initial-value: 0deg;
                                inherits: false;
                            }

                            @keyframes bg {
                                0% {
                                    --rotate: 0deg;
                                }

                                100% {
                                    --rotate: 360deg;
                                }
                            }

                            &::after {
                                content: "";
                                z-index: -1;
                                width: calc(100% - 6px);
                                height: calc(100% - 6px);
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                border-radius: 20px;
                                background-color: #7d4bf8;
                            }

                            .img {
                                width: calc(100% - 6px);
                                height: calc(100% - 6px);
                                position: relative;
                                z-index: 1;
                            }

                            .icon {
                                position: absolute;
                                // top: 164px;
                                bottom: calc(var(--base-height) * 0.036);
                                left: 50%;
                                transform: translateX(-50%);
                                width: calc(var(--base-height) * 0.06);
                                height: calc(var(--base-height) * 0.06);
                                cursor: pointer;
                                z-index: 1;
                            }
                        }

                        .select-me {
                            // width: 150px;
                            // height: 64px;
                            width: calc(var(--base-height) * 0.3);
                            height: calc(var(--base-height) * 0.128);
                            cursor: pointer;
                        }
                    }
                }

                .text {
                    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 16px;
                    color: #ffffff;
                }
            }

            .masking {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
                flex-direction: column;
                align-items: center;
                z-index: 2;

                .hint-box {
                    background-color: rgba(255, 255, 255, 0.25);
                    position: relative;
                    z-index: 1;
                    padding: 3px;
                    // height: 64px;
                    height: calc(var(--base-height) * 0.128);
                    padding-left: 18px;
                    border-radius: 60px;
                    padding-right: 27px;

                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: calc(100% - 9px);
                        height: calc(100% - 9px);
                        background: linear-gradient(180deg, #4a28b0 0%, #7d4bf8 100%);
                        z-index: -1;
                        border-radius: 60px;
                    }

                    .like {
                        width: 82px;
                        height: 88px;
                        position: relative;

                        .icon {
                            position: absolute;
                            left: -10px;
                            top: -17px;
                            width: 92px;
                            height: 98px;
                        }
                    }

                    .regret {
                        position: relative;
                        // width: 115px;
                        // height: 115px;
                        width: calc(var(--base-height) * 0.23);
                        height: calc(var(--base-height) * 0.23);

                        .icon {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: -15px;
                        }
                    }

                    .text {
                        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 18px;
                        color: #ffffff;
                        text-overflow: ellipsis;
                    }
                }

                .index-btn {
                    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                    font-weight: 650;
                    font-style: normal;
                    font-size: 16px;
                    color: #642501;
                    text-align: center;
                    width: 190px;
                    height: 40px;
                    line-height: 40px;
                    z-index: 1;
                    position: relative;
                    cursor: pointer;

                    .index-icon {
                        width: 190px;
                        height: 40px;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        z-index: -1;
                    }
                }
            }

            .reply {
                justify-content: center;
            }

            .win {
                .gold-left {
                    width: 327px;
                    height: 381px;
                    position: absolute;
                    top: 55px;
                    left: 146px;
                }

                .gold-right {
                    width: 416px;
                    height: 375px;
                    position: absolute;
                    top: 37px;
                    left: 755px;
                }

                .win-icon {
                    // width: 209px;
                    // height: 200px;
                    // margin-top: 2px;
                    // margin-bottom: 11px;
                    width: calc(var(--base-height) * 0.418);
                    height: calc(var(--base-height) * 0.4);
                    margin-top: calc(var(--base-height) * 0.004);
                    margin-bottom: calc(var(--base-height) * 0.022);
                }

                .hint-box {
                    // margin-bottom: 159px;
                    margin-bottom: calc(var(--base-height) * 0.318);
                }
            }

            .lose {
                // padding-top: 211px;
                padding-top: calc(var(--base-height) * 0.422);

                .hint-box {
                    // margin-bottom: 161px;
                    margin-bottom: calc(var(--base-height) * 0.322);
                    padding-left: 15px;
                }
            }
        }
    }
}

/* 入场动画 */
.slide-right-enter-from {
    /* 入场开始位置：向左偏移自身宽度 */
    transform: translateX(100%);
    opacity: 0;
}

.slide-right-enter-active {
    /* 入场动画：向右移动到原位 */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.slide-right-enter-to {
    /* 入场结束位置：不偏移 */
    transform: translateX(0);
    opacity: 1;
}

/* 退场动画 */
.slide-right-leave-from {
    /* 退场开始位置：不偏移 */
    transform: translateX(0);
    opacity: 1;
}

.slide-right-leave-active {
    /* 退场动画：向右移动到自身宽度外 */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.slide-right-leave-to {
    /* 退场结束位置：向右偏移自身宽度 */
    transform: translateX(-100%);
    opacity: 0;
}

/* 列表排序动画（可选） */
.slide-move {
    transition: transform 0.3s ease;
}