* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --base-height: 500px;
}
.container {
  width: 100%;
  background-color: #333333;
}
.container .flexflex {
  display: flex;
}
.container .flexcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .flexjcenter {
  display: flex;
  justify-content: center;
}
.container .flexacenter {
  display: flex;
  align-items: center;
}
.container .flex1 {
  flex: 1;
}
.container .flexcolumn {
  display: flex;
  flex-direction: column;
}
.container .mar1200 {
  width: 1200px;
  margin: 0 auto;
}
.container .container-box {
  padding-top: 24px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.container .container-box .logo {
  width: 121px;
  height: 24px;
  margin-bottom: 31px;
  z-index: 1;
}
.container .container-box .header {
  position: relative;
  width: 1200px;
  height: 280px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.container .container-box .header::after {
  content: "";
  width: 1200px;
  height: 280px;
  background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
  border-radius: 20px;
  position: absolute;
  top: 0;
  left: 0;
}
.container .container-box .header .halo {
  width: 240px;
  height: 214px;
  position: absolute;
  top: -71px;
  left: -59px;
}
.container .container-box .header .star-icon {
  position: absolute;
  top: 46px;
  left: 51px;
  width: 56px;
  height: 56px;
  z-index: 1;
}
.container .container-box .header .love-little {
  position: absolute;
  top: 120px;
  left: -9px;
  width: 173px;
  height: 148px;
  transform: rotate(315deg);
  z-index: 1;
}
.container .container-box .header .bj-2 {
  width: 360px;
  height: 128px;
  position: absolute;
  left: 25px;
  bottom: 0;
  z-index: 1;
}
.container .container-box .header .music-icon {
  width: 34px;
  height: 37px;
  position: absolute;
  top: 194px;
  left: 40px;
  transform: rotate(345deg);
  z-index: 1;
}
.container .container-box .header .bj {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1064px;
  height: 280px;
  z-index: 1;
}
.container .container-box .header .love-big {
  width: 298px;
  height: 256px;
  display: flex;
  transform: rotate(44deg);
  position: absolute;
  top: 22px;
  left: 64px;
  z-index: 1;
}
.container .container-box .header .music-score {
  width: 240px;
  height: 240px;
  position: absolute;
  top: 20px;
  left: 197px;
  z-index: 1;
}
.container .container-box .header .question {
  width: 289px;
  height: 280px;
  position: absolute;
  top: 0;
  left: 668px;
  z-index: 1;
}
.container .container-box .header .text {
  width: 243px;
  height: 210px;
  position: absolute;
  top: 50px;
  left: 423px;
  z-index: 1;
}
.container .container-box .header .face {
  width: 83px;
  height: 83px;
  position: absolute;
  top: -27px;
  left: 1080px;
  z-index: 1;
}
.container .container-box .header .star-icon-2 {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 979px;
  top: 70px;
  z-index: 1;
}
.container .container-box .header .ai-music {
  width: 81px;
  height: 28px;
  position: absolute;
  top: 240px;
  left: 1106px;
  z-index: 1;
}
.container .container-box .header .record-black {
  width: 191px;
  height: 199px;
  position: absolute;
  bottom: 0;
  right: -1px;
  z-index: 1;
}
.container .container-box .header .record-circle {
  position: absolute;
  top: 132px;
  left: 1063px;
  background-color: #72db86;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  z-index: 1;
}
.container .container-box .header .record-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}
.container .container-box .header .green-glow {
  width: 306px;
  height: 62px;
  position: absolute;
  top: 245px;
  left: 217px;
}
.container .container-box .header .shadow {
  width: 240px;
  height: 165px;
  position: absolute;
  top: 151px;
  left: 997px;
}
.container .container-box .details {
  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);
}
.container .container-box .details::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;
}
.container .container-box .details .ray-light {
  width: 286px;
  height: 286px;
  position: absolute;
  top: 3px;
}
.container .container-box .details .ray-light.ray-light-left {
  left: 3px;
}
.container .container-box .details .ray-light.ray-light-right {
  right: 3px;
  transform: scaleX(-1);
}
.container .container-box .details .bj-check {
  width: 1200px;
  height: 134px;
  position: absolute;
  bottom: 3px;
  left: 0;
}
.container .container-box .details .bj-mask {
  width: 1194px;
  height: 129px;
  position: absolute;
  left: 3px;
  bottom: 3px;
}
.container .container-box .details .fluctuate-box {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  align-items: self-end;
  z-index: 100;
}
.container .container-box .details .fluctuate-box .item {
  height: 100%;
  width: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-right: 2px;
}
.container .container-box .details .fluctuate-box .item .item-item {
  width: 100%;
  height: 5px;
  border-radius: 2px;
  background-color: #7d4bf8;
  margin-top: 2px;
}
.container .container-box .details .fluctuate-icon {
  width: 400px;
  height: 86px;
  position: absolute;
  bottom: 120px;
  right: 0;
}
.container .container-box .details .start-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}
.container .container-box .details .start-box .microphone {
  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;
}
.container .container-box .details .start-box .start-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.container .container-box .details .start-box .start-right .suspect-text {
  height: calc(var(--base-height) * 0.112);
  margin-top: calc(var(--base-height) * 0.278);
  margin-bottom: calc(var(--base-height) * 0.048);
}
.container .container-box .details .start-box .start-right .hint {
  font-size: 18px;
  color: #ffffff;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  margin-bottom: calc(var(--base-height) * 0.058);
}
.container .container-box .details .start-box .start-right .start-icon {
  height: calc(var(--base-height) * 0.138);
  cursor: pointer;
}
.container .container-box .details .answer-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  padding-top: calc(var(--base-height) * 0.078);
  align-items: center;
}
@keyframes fadeInUp {
  0% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
.container .container-box .details .answer-box .figure {
  width: calc(var(--base-height) * 0.12);
  height: calc(var(--base-height) * 0.12);
  margin-bottom: calc(var(--base-height) * 0.05);
}
.container .container-box .details .answer-box.answer-0 .list .item:not(:last-of-type) {
  margin-right: 175px;
}
.container .container-box .details .answer-box.answer-1 .list .item:not(:last-of-type) {
  margin-right: 103px;
}
.container .container-box .details .answer-box.answer-2 .list .item:not(:last-of-type) {
  margin-right: 78px;
}
.container .container-box .details .answer-box .list {
  margin-bottom: calc(var(--base-height) * 0.026);
}
.container .container-box .details .answer-box .list .item {
  position: relative;
  flex-direction: column;
  align-items: center;
}
.container .container-box .details .answer-box .list .item .img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--base-height) * 0.412);
  height: calc(var(--base-height) * 0.436);
  margin-bottom: calc(var(--base-height) * 0.074);
  position: relative;
  z-index: 1;
  border-radius: 20px;
}
.container .container-box .details .answer-box .list .item .img-box.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;
  }
}
.container .container-box .details .answer-box .list .item .img-box::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;
}
.container .container-box .details .answer-box .list .item .img-box .img {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  position: relative;
  z-index: 1;
}
.container .container-box .details .answer-box .list .item .img-box .icon {
  position: absolute;
  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;
}
.container .container-box .details .answer-box .list .item .select-me {
  width: calc(var(--base-height) * 0.3);
  height: calc(var(--base-height) * 0.128);
  cursor: pointer;
}
.container .container-box .details .answer-box .text {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
}
.container .container-box .details .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;
}
.container .container-box .details .masking .hint-box {
  background-color: rgba(255, 255, 255, 0.25);
  position: relative;
  z-index: 1;
  padding: 3px;
  height: calc(var(--base-height) * 0.128);
  padding-left: 18px;
  border-radius: 60px;
  padding-right: 27px;
}
.container .container-box .details .masking .hint-box::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;
}
.container .container-box .details .masking .hint-box .like {
  width: 82px;
  height: 88px;
  position: relative;
}
.container .container-box .details .masking .hint-box .like .icon {
  position: absolute;
  left: -10px;
  top: -17px;
  width: 92px;
  height: 98px;
}
.container .container-box .details .masking .hint-box .regret {
  position: relative;
  width: calc(var(--base-height) * 0.23);
  height: calc(var(--base-height) * 0.23);
}
.container .container-box .details .masking .hint-box .regret .icon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -15px;
}
.container .container-box .details .masking .hint-box .text {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  color: #ffffff;
  text-overflow: ellipsis;
}
.container .container-box .details .masking .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;
}
.container .container-box .details .masking .index-btn .index-icon {
  width: 190px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.container .container-box .details .reply {
  justify-content: center;
}
.container .container-box .details .win .gold-left {
  width: 327px;
  height: 381px;
  position: absolute;
  top: 55px;
  left: 146px;
}
.container .container-box .details .win .gold-right {
  width: 416px;
  height: 375px;
  position: absolute;
  top: 37px;
  left: 755px;
}
.container .container-box .details .win .win-icon {
  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);
}
.container .container-box .details .win .hint-box {
  margin-bottom: calc(var(--base-height) * 0.318);
}
.container .container-box .details .lose {
  padding-top: calc(var(--base-height) * 0.422);
}
.container .container-box .details .lose .hint-box {
  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;
}