.page3.container-scroll {
  position: relative;
  top: 470px;
  width: 720px;
  height: 1170px;
  margin: 0 auto;
}

.page3.fadeInUpPlus3 {
  animation: fadeInUpPlus3 1s ease-in-out;
}

@keyframes fadeInUpPlus3 {
  from {
    opacity: 0;
    transform: translateY(10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page3 .hide {
  display: none !important;
}

.page3 .title-page {
  position: relative;
  left: 50%;
  width: 415px;
  height: 135px;
  margin-top: 120px;
  transform: translateX(-50%);
  background: url(../image/section3/title-page3.png) no-repeat;
  background-size: 100%;
  z-index: 5;
}

.page3 button {
  padding: 0;
  border: 0;
  font-family: inherit;
  background-color: transparent;
  cursor: pointer;
}

.page3 button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.page3 .text-page {
  position: absolute;
  top: 100px;
  left: 50%;
  z-index: 5;
  width: 276px;
  height: 71px;
  transform: translateX(-50%);
  background: url(../image/section3/text.png) no-repeat;
  background-size: 100%;
}

.ghost-text-modal,
.quiz-modal,
.quiz-result-modal,
.ghost-success-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
}

.ghost-text-dialog {
  position: relative;
  width: 689px;
  height: 658px;
}

.ghost-text-page-content {
  position: relative;
  width: 651px;
  height: 591px;
  background: url(../image/section3/text-page-content.png) no-repeat;
  background-size: 100%;
}

.ghost-text-close {
  position: absolute;
  top: 28px;
  right: 17px;
  z-index: 2;
  width: 30px;
  height: 33px;
  background: url(../image/section3/text-page-close.png) no-repeat;
  background-size: 100%;
}

.quiz-stage {
  position: relative;
  width: 720px;
  height: 1310px;
  margin: 0 auto;
  pointer-events: auto;
  cursor: pointer;
}

/* 使用真实 DOM 元素代替伪元素，实现独立的悬停效果 */
.character-bg {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  mask-size: contain;
  mask-repeat: no-repeat;
  pointer-events: none;
  filter: brightness(0.4);
  transition: filter 0.3s ease;
  z-index: 1;
}

/* bg1 显示在上方 */
.character-bg1 {
  top: -170px;
  left: 0;
  right: 0;
  width: 720px;
  height: 1011px;
  background-image: url(../image/section3/bg1.png);
  background-position: center top;
  mask-image: url(../image/section3/bg1.png);
  mask-position: center top;
}

/* bg2 显示在下方 */
.character-bg2 {
  bottom: -30px;
  left: 0;
  right: 0;
  width: 720px;
  height: 1030px;
  background-image: url(../image/section3/bg2.png);
  background-position: center bottom;
  mask-image: url(../image/section3/bg2.png);
  mask-position: center bottom;
}

/* 悬停时变亮 - 只影响当前元素 */
.character-bg.hover,
.character-bg.active {
  filter: brightness(1.1);
}


.quiz-start-btn {
  position: absolute;
  bottom: 350px;
  left: 50%;
  width: 373px;
  height: 99px;
  transform: translateX(-50%);
  background: url(../image/section3/Event-starts-btn.png) no-repeat;
  background-size: 100%;
  pointer-events: auto;
  z-index: 10;
}

.quiz-completed-actions {
  position: absolute;
  bottom: 355px;
  left: 50%;
  display: flex;
  flex-direction: row;
  gap: 16px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}

.quiz-completed-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  width: 304px;
  height: 58px;
  transform: translateX(-50%);
  background: url(../image/section3/wancheng-tip.png) no-repeat;
  background-size: 100%;
  pointer-events: none;
  display: none;
}

.quiz-view-result-btn,
.quiz-view-rewards-btn {
  width: 318px;
  height: 91px;
  background-repeat: no-repeat;
  background-size: 100%;
  pointer-events: auto;
}

.quiz-view-result-btn {
  background-image: url(../image/section3/View-results.png);
}

.quiz-view-rewards-btn {
  background-image: url(../image/section3/View-Rewards.png);
  display: none;
}

.t-bg {
  background-image: url(../image/section3/t-bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 590px;
  left: 50%;
  margin-left: -205px;
  width: 410px;
  height: 216px;
}

.quiz-dialog {
  position: relative;
  width: 689px;
  height: 658px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.quiz-dialog[data-question="1"] {
  background-image: url(../image/section3/Question-1.png);
}

.quiz-dialog[data-question="2"] {
  background-image: url(../image/section3/Question-2.png);
}

.quiz-dialog[data-question="3"] {
  background-image: url(../image/section3/Question-3.png);
}

.quiz-dialog[data-question="4"] {
  background-image: url(../image/section3/Question-4.png);
}

.quiz-dialog[data-question="5"] {
  background-image: url(../image/section3/Question-5.png);
}

.quiz-options {
  position: absolute;
  top: 190px;
  left: 78px;
  width: 533px;
  margin: 0;
  padding: 0;
}

.quiz-options li {
  display: flex;
  min-height: 82px;
  align-items: flex-start;
  color: #efc1bd;
  font-size: 24px;
  line-height: 1.45;
  list-style: none;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

.quiz-options li.active {
  color: #ddb37f;
}

.quiz-option-marker {
  flex: 0 0 30px;
}

.quiz-option-text {
  flex: 1;
}

.quiz-actions {
  position: absolute;
  right: 70px;
  bottom: 25px;
  left: 70px;
  display: flex;
  justify-content: center;
  gap: 24px;
}

.quiz-prev-btn,
.quiz-next-btn {
  width: 252px;
  height: 62px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.quiz-prev-btn {
  background-image: url(../image/section3/question-pre.png);
}

.quiz-next-btn {
  background-image: url(../image/section3/Next-question.png);
}

.quiz-submit-btn {
  width: 252px;
  height: 62px;
  background: url(../image/section3/queren5.png) no-repeat center;
  background-size: 100%;
}

.quiz-result-dialog {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100%;
}

.quiz-result-dialog[data-tier="1"] {
  width: 548px;
  height: 818px;
  background-image: url(../image/section3/fraction1.png);
}
.quiz-result-dialog[data-tier="2"] {
  width: 548px;
  height: 818px;
  background-image: url(../image/section3/fraction2.png);
}

.quiz-result-dialog[data-tier="3"] {
  width: 548px;
  height: 818px;
  background-image: url(../image/section3/fraction3.png);
}

.quiz-result-dialog[data-tier="4"] {
  width: 548px;
  height: 818px;
  background-image: url(../image/section3/fraction4.png);
}

.quiz-result-dialog[data-tier="5"] {
  width: 548px;
  height: 818px;
  background-image: url(../image/section3/fraction5.png);
}

.quiz-result-dialog[data-tier="6"] {
  width: 548px;
  height: 892px;
  background-image: url(../image/section3/fraction6.png);
}

.quiz-result-confirm-btn {
  position: absolute;
  bottom: 88px;
  left: 50%;
  width: 238px;
  height: 56px;
  transform: translateX(-50%);
  background: url(../image/section3/Confirm.png) no-repeat;
  background-size: 100%;
}
.quiz-result-dialog[data-tier="6"] .quiz-result-confirm-btn {
  bottom: 78px;
}

.ghost-dialog-success {
  position: relative;
  width: 548px;
  height: 643px;
  background: url(../image/section3/GiftCode-Pop.png) no-repeat;
  background-size: 100%;
}

.ghost-gift-code-interaction {
  position: absolute;
  top: 96px;
  left: 64%;
  transform: translateX(-50%);
}

.gift-code-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gift-code-text {
  max-width: 80px;
  overflow: hidden;
  color: #f7d7be;
  font-size: 21px;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}

.ghost-gift-code-interaction .copy {
  flex: 0 0 34px;
  width: 34px;
  height: 18px;
  background: url(../image/section3/copy-btn.png) no-repeat;
  background-size: 100%;
}

.ghost-success-actions {
  position: absolute;
  bottom: 80px;
  left: 49%;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.ghost-success-btn,
.gift-lounge-btn {
  width: 253px;
  height: 62px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.ghost-success-btn {
  background-image: url(../image/section3/Confirm.png);
}

.gift-lounge-btn {
  background-image: url(../image/section3/Goto-lounge.png);
}

/* Ghost Swiper Modal - 角色选择轮播弹窗 */
.ghost-swiper-modal {
  position: fixed;
  top: -130px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.ghost-swiper-modal.hide {
  display: none;
}

.ghost-swiper-dialog {
  position: relative;
  width: 720px;
  height: 930px;
  /* background: url(../image/section3/swiper-dialog-bg.png) no-repeat; */
  /* background-size: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 100px;
  padding-top: 0px;
  margin-top: 220px;
}

.ghost-swiper-title {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 415px;
  height: 135px;
  background: url(../image/section3/ghost-title.png) no-repeat;
  background-size: 100%;
  z-index: 7;
}

.ghost-swiper-close {
  position: absolute;
  top: 20px;
  right: 40px;
  width: 30px;
  height: 33px;
  background: url(../image/section3/text-page-close.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  z-index: 8;
}

.ghost-swiper.swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.ghost-swiper .swiper-wrapper {
  width: 720px;
}

.ghost-swiper .swiper-slide {
  width: 439px;
  height: 924px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.ghost-swiper .swiper-slide-active .ghost-swiper-item {
  transform: scale(1);
}

.ghost-swiper .swiper-slide-prev .ghost-swiper-item,
.ghost-swiper .swiper-slide-next .ghost-swiper-item {
  transform: scale(0.85);
  opacity: 0.6;
  filter: brightness(0.3) blur(1px) saturate(0.5);
}

.ghost-swiper-item {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ghost-swiper-item[data-ghost-id="1"] {
  background-image: url(../image/section3/ghost-role-1.png);
}

.ghost-swiper-item[data-ghost-id="2"] {
  background-image: url(../image/section3/ghost-role-2.png);
}

.ghost-swiper-item[data-ghost-id="3"] {
  background-image: url(../image/section3/ghost-role-3.png);
}

.ghost-swiper-item[data-ghost-id="4"] {
  background-image: url(../image/section3/ghost-role-4.png);
}

.ghost-swiper-item[data-ghost-id="5"] {
  background-image: url(../image/section3/ghost-role-5.png);
}

.ghost-swiper-item[data-ghost-id="6"] {
  background-image: url(../image/section3/ghost-role-6.png);
}

.ghost-swiper-confirm-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 412px;
  height: 89px;
  background: url(../image/section3/gobtn.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  z-index: 9;
}

/* 新增：选择结果弹窗样式 */
.ghost-choice-result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 18;
}

.ghost-choice-result-modal.hide {
  display: none;
}

.ghost-choice-result-dialog {
  position: relative;
  width: 631px;
  height: 786px;
  background-repeat: no-repeat;
  background-size: 100%;
}

/* 根据选择的ID显示不同的背景图 */
.ghost-choice-result-dialog[data-choice-id="1"] {
  background-image: url(../image/section3/choice-result-1.png);
}

.ghost-choice-result-dialog[data-choice-id="2"] {
  background-image: url(../image/section3/choice-result-2.png);
}

.ghost-choice-result-dialog[data-choice-id="3"] {
  background-image: url(../image/section3/choice-result-3.png);
}

.ghost-choice-result-dialog[data-choice-id="4"] {
  background-image: url(../image/section3/choice-result-4.png);
}

.ghost-choice-result-dialog[data-choice-id="5"] {
  background-image: url(../image/section3/choice-result-5.png);
}

.ghost-choice-result-dialog[data-choice-id="6"] {
  background-image: url(../image/section3/choice-result-6.png);
}

.ghost-choice-result-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 39px;
  background: url(../image/section3/text-page-close.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  z-index: 9;
}

.ghost-choice-result-confirm-btn {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 330px;
  height: 74px;
  background: url(../image/section3/ghost-choice-confirm-btn.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  z-index: 9;
}

.bg-ghost {
  position: absolute;
  top: 590px;
  left: -180px;
  width: 1200px;
  height: 600px;
  background-image: url(../image/section3/bgg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}