.page3.container-scroll {
  margin: 0 auto;
  width: 720px;
  height: 1290px;
  top: -160px;
  /* background: url(../image/section3/bg.png) no-repeat;
  background-size: 100%; */
  position: relative;
}

.page3.fadeInUpPlus3 {
  animation: fadeInUpPlus3 1s ease-in-out;
}
@keyframes fadeInUpPlus3 {
  from {
    opacity: 0;
    transform: translateY(10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page3 .title-page {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 70px;
  width: 511px;
  height: 153px;
  background: url(../image/section3/title-page3.png) no-repeat;
  background-size: 100%;
}

.page3 .text-page {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 155px;
  width: 146px;
  height: 45px;
  background: url(../image/section3/text.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.page3 .reward {
    position: absolute;
  left: 50%;
    top: 225px;
  transform: translateX(-50%);
    width: 657px;
  height: 249px;
  background: url(../image/section3/reward.png) no-repeat;
  background-size: 100%;
}

.page3 .Test-button {
    position: absolute;
  left: 50%;
    top: 940px;
  transform: translateX(-50%);
    width: 434px;
  height: 370px;
  background: url(../image/section3/Test-button.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
}


/* 选择互动弹窗遮罩 */
.ghost-activity-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

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

.ghost-activity-close {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 37px;
  height: 38px;
  background: url(../image/section3/text-page-close.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  z-index: 4
;
}

/* 新结构：列表 + 按钮 + 弹窗 */
.ghost-activity {
  position: relative;
  width: 631px;
  height: 706px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: url(../image/section3/Select-Test.png) no-repeat;
  background-size: 100%;
}

.page3 .ghost-list {
  position: relative;
  top: 190px;
  left: 25px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0 auto;
}

.page3 .ghost-list li {
  list-style: none;
  width: 586px;
height: 53px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.page3 .ghost-list li[data-id="1"] {
  background: url(../image/section3/Select-Test-role1.png) no-repeat;
  background-size: 100%;
}
.page3 .ghost-list li[data-id="2"] {
  background: url(../image/section3/Select-Test-role2.png) no-repeat;
  background-size: 100%;
}
.page3 .ghost-list li[data-id="3"] {
   background: url(../image/section3/Select-Test-role3.png) no-repeat;
  background-size: 100%;
}
.page3 .ghost-list li[data-id="4"] {
  background: url(../image/section3/Select-Test-role4.png) no-repeat;
  background-size: 100%;
}
.page3 .ghost-list li[data-id="5"] {
  background: url(../image/section3/Select-Test-role5.png) no-repeat;
  background-size: 100%;
}
.page3 .ghost-list li[data-id="6"] {
  background: url(../image/section3/Select-Test-role6.png) no-repeat;
  background-size: 100%;
}



.page3 .ghost-list li.active {
  /* 选中状态的通用样式 */
}

/* 每个角色选中后的背景图片 */
.page3 .ghost-list li[data-id="1"].active {
  background-image: url(../image/section3/Select-Test-active-role1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.page3 .ghost-list li[data-id="2"].active {
  background-image: url(../image/section3/Select-Test-active-role2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.page3 .ghost-list li[data-id="3"].active {
  background-image: url(../image/section3/Select-Test-active-role3.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.page3 .ghost-list li[data-id="4"].active {
  background-image: url(../image/section3/Select-Test-active-role4.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.page3 .ghost-list li[data-id="5"].active {
  background-image: url(../image/section3/Select-Test-active-role5.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.page3 .ghost-list li[data-id="6"].active {
  background-image: url(../image/section3/Select-Test-active-role6.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.page3 .ghost-list li.ghost-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page3 .ghost-action {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  bottom: 12px;
}

.page3 .ghost-submit-btn {
  width: 242px;
  height: 81px;
  background: url(../image/section3/ghost-submit-btn.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 4;
}

.page3 .ghost-submit-btn:disabled,
.page3 .ghost-submit-btn.ghost-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.page3 .ghost-submit-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

.ghost-modal-new {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

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

.ghost-dialog-new {
    position: relative;
  width: 631px;
  height: 416px;
  background: url(../image/section3/ghost-dialog-new.png) no-repeat;
  background-size: 100%;
}

.ghost-modal-text {
  color: #f5efe3;
  font-size: 16px;
  margin-bottom: 18px;
}

.ghost-modal-actions {
  position: absolute;
  bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-left: 66px;
}

.ghost-dialog-new-close {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 37px;
  height: 38px;
  background: url(../image/section3/text-page-close.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  z-index: 4;
}
.ghost-confirm-btn {
   width: 242px;
  height: 81px;
  background: url(../image/section3/ghost-dialog-new-confirm.png) no-repeat;
  background-size: 100%;
}

.ghost-cancel-btn {
   width: 242px;
  height: 81px;
  background: url(../image/section3/ghost-dialog-new-cancel.png) no-repeat;
  background-size: 100%;
}



/* 社群弹窗样式 */
.ghost-community-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

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

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

.ghost-community-dialog[data-selected="1"] {
  background-image: url(../image/section3/ghost-community-1.png);
}
.ghost-community-dialog[data-selected="2"] {
  background-image: url(../image/section3/ghost-community-2.png);
}
.ghost-community-dialog[data-selected="3"] {
  background-image: url(../image/section3/ghost-community-3.png);
}
.ghost-community-dialog[data-selected="4"] {
  background-image: url(../image/section3/ghost-community-4.png);
}
.ghost-community-dialog[data-selected="5"] {
  background-image: url(../image/section3/ghost-community-5.png);
}
.ghost-community-dialog[data-selected="6"] {
  background-image: url(../image/section3/ghost-community-6.png);
}

.ghost-community-btn {
  position: absolute;
  bottom: -8px;
  left: 30%;
  transform: translateX(-50%);
  width: 242px;
  height: 81px;
    background: url(../image/section3/ghost-community-btn.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
}

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

/* 文本弹窗样式 */
.ghost-text-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

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

.ghost-text-modal .ghost-dialog {
  background: transparent;
  border-radius: 0;
  padding: 0;
  position: relative;
  width: 640px;
  height: 504px;
}

.ghost-text-modal .ghost-text-page-content {
  width: 631px;
  height: 539px;
  background: url(../image/section3/text-page-content.png) no-repeat;
  background-size: 100%;
  position: absolute;
}

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

.ghost-text-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  width: 242px;
  height: 81px;
  background: url(../image/section3/ghost-text-btn.png) no-repeat;
  background-size: 100%;
}

.ghost-success-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

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

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

.ghost-dialog-success .ghost-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 37px;
  height: 38px;
  background: url(../image/section3/text-page-close.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.ghost-gift-code-interaction {
  position: absolute;
  top: 125px;
  left: 62%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

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

.gift-code-text {
  width: 95px;
  color: #ffffff;
  font-size: 18px;
  /* font-weight: 700; */
  overflow: hidden;
    text-overflow: ellipsis;
  text-align: center;
}

.ghost-gift-code-interaction .copy {
  width: 41px;
  height: 26px;
  cursor: pointer;
  background-image: url(../image/section3/copy-btn.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ghost-success-btn {
  position: absolute;
  left: 160px;
  bottom: 38px;
   width: 311px;
  height: 104px;
  cursor: pointer;
  background-image: url(../image/section3/ghost-success-btn.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.Test-Complete-button-1 {
  position: absolute;
  left: 50%;
    transform: translateX(-50%);
  bottom: 38px;
   width: 293px;
  height: 74px;
  cursor: pointer;
  background: url(../image/section3/Test-Complete-button-1.png) no-repeat;
  background-size: 100%;
}