/*---- sec03 ----*/
.sec03 {
  padding-top: 5.5%;
  background: url(https://images1.iwplay.com.tw/image/pwm/events/20260717/images/sec03_bg.webp) no-repeat center top #000000;
  background-size: cover;
}
.sec03 .fire_light {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/fire_light.png) no-repeat center bottom;
}
.sec03 .line {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  aspect-ratio: 1920 / 114;
}
/* PC：line 上移 2% 並壓在區塊上（裁切改由 .container 負責） */
@media (min-width: 576px) {
  .sec03 {
    overflow: visible;
  }
  .sec03 .container {
    overflow: hidden;
  }
  .sec03 .line {
    top: -2%;
    z-index: 2;
  }
  /* sec03 title 圖較扁，加寬讓換算高度接近 sec01/sec02（46% × 16.46% ≈ 7.6%）*/
  .sec03 .title {
    width: 46%;
  }
}
.sec03 .content {
  position: relative;
  width: 47%;
}
.sec03 .content p {
  position: relative;
  margin: 0% auto;
  width: 89.4%;
  color: #ffffff;
  font-size: .83vw;
  text-align: center;
  letter-spacing: .03vw;
  line-height: 1.4vw;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .95)) drop-shadow(0px 0px 10px rgba(0, 0, 0, .5));
}
.sec03 .content p span {
  margin: 0 .3vw;
  color: #e3d1b1;
}
.sec03 .content .sns {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2.5% auto 0;
  width: 30%;
  z-index: 60;
}
.sec03 .content .sns a {
  display: block;
  width: 21%;
  transition: .3s;
}
.sec03 .content .sns a:hover {
  filter: brightness(1.15);
}

/* ===== invite 任務區塊 ===== */
.sec03 .content .mission {
  position: relative;
  width: 100%;
  margin: 2.5% auto 10% auto;
}
/* 兩種任務：上下排列 */
.sec03 .content .mission .task_group {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;          /* 置中 */
  column-gap: 1%;                   /* PC 卡片水平間距（不影響手機直排）*/
  align-items: flex-start;
  margin: 0;
}
.sec03 .content .mission .task_group:last-child {
  margin-bottom: 0;
}
.sec03 .content .mission .task_group1 {
  position: relative;
  margin: 1.5% auto;
  left: 10%;                 /* 往左偏；左側之後用 ::before 放圖 */
}
.sec03 .content .mission .task_group2 {
  position: relative;
  margin: 1.5% auto;
  left: -15%;                  /* 往右偏；右側之後用 ::before 放圖 */
}
/* task_group 角色圖（偽元素）：兩張同一 scale、各套用圖片原始長寬比 */
.sec03 .content .mission .task_group1::before,
.sec03 .content .mission .task_group2::before {
  content: "";
  position: absolute;
  top: 0;                    /* 改用 top 定位，可調 */
  width: 110%;
  background: no-repeat center / 100% 100%;
  pointer-events: none;
  opacity: 0;                /* 進場前隱藏，捲到才滑入 */
}
.sec03 .content .mission .task_group1::before {
  left: -82%;
  top: -48%;
  aspect-ratio: 1465 / 1155; /* 圖片原始長寬比 */
  background-image: url(https://images2.iwplay.com.tw/image/pwm/events/20260717/images/task_group1_chara.webp);
}
.sec03 .content .mission .task_group2::before {
  right: -96%;
  top: -23%;                  /* task_group2 用 right 定位，可調 */
  aspect-ratio: 1341 / 866;  /* 圖片原始長寬比 */
  background-image: url(https://images2.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_chara.webp);
}
/* 角色圖進場：捲到（JS 加 .chara-in）才由下往上滑入 */
@keyframes charaSlideInUp {
  from { opacity: 0; transform: translateY(30%); }
  to   { opacity: 1; transform: translateY(0); }
}
.sec03 .content .mission .task_group1.chara-in::before,
.sec03 .content .mission .task_group2.chara-in::before {
  animation: charaSlideInUp 1s ease both;   /* 由下往上 */
}
/* 單一目標卡片（背景圖 500x700）*/
.sec03 .content .mission .task {
  position: relative;
  z-index: 1;                /* 卡片在角色圖(::before)之上 */
  width: 33%;
  aspect-ratio: 500 / 700;   /* 依圖片長寬 500x700 */
  background: no-repeat center top;
  background-size: 100% 100%;
}
/* 6 張目標背景圖 */
.sec03 .content .mission .task_group1 .task:nth-child(1) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group1_task_1_base.webp); }
.sec03 .content .mission .task_group1 .task:nth-child(2) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group1_task_2_base.webp); }
.sec03 .content .mission .task_group1 .task:nth-child(3) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group1_task_3_base.webp); }
.sec03 .content .mission .task_group2 .task:nth-child(1) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_task_1_base.webp); }
.sec03 .content .mission .task_group2 .task:nth-child(2) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_task_2_base.webp); }
.sec03 .content .mission .task_group2 .task:nth-child(3) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group3_task_3_base.webp); }
/* task_group2「未開放」狀態（.unopened）：換 lock 圖 + 隱藏領取按鈕
   正式版由後端時間判斷加/移除 .unopened；左下角 demo 按鈕僅供預覽切換 */
.sec03 .content .mission .task_group2.unopened .task:nth-child(1) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_task_1_base_lock.webp); }
.sec03 .content .mission .task_group2.unopened .task:nth-child(2) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_task_2_base_lock.webp); }
.sec03 .content .mission .task_group2.unopened .task:nth-child(3) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_task_3_base_lock.webp); }
.sec03 .content .mission .task_group2.unopened .claim { display: none; }
/* demo 切換按鈕（左下角，僅供 demo，正式版可移除）*/
.demo_lock_btn {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 999;
  padding: 8px 14px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
/* 手機：noke_flex_sp 出現的斷點，demo 按鈕上移到浮動列上方（浮動列高 29.17vw + 12px 間隔）*/
@media (max-width: 767.98px) {
  .demo_lock_btn {
    bottom: calc(29.17vw + 12px);
  }
}
/* 獎勵按鈕：雪碧圖三態（放目標下半）*/
.sec03 .content .mission .task .claim {
  position: absolute;
  bottom: 13%;
  left: 22%;                                 /* (100% − 寬度56%) / 2，取代 translateX 置中 */
  width: 56%;
  aspect-ratio: 517 / 120;                   /* 單格比例（雪碧圖 517x360 ÷ 3）*/
  background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_btn.webp);
  background-repeat: no-repeat;
  background-size: 100% 300%;                /* 直式雪碧圖：3 態上下排列 */
  cursor: pointer;
  transition: .3s;
}
/* 三態（直式：上=未達成 / 中=可領取 / 下=已領取）*/
.sec03 .content .mission .task .claim.lock {
  background-position: center top;
  pointer-events: none;                      /* 未達成：不可點選 */
}
.sec03 .content .mission .task .claim.can {
  background-position: center center;        /* 可領取 */
}
.sec03 .content .mission .task .claim.done {
  background-position: center bottom;
  pointer-events: none;                      /* 已領取：不可再點 */
}
/* hover 發光（僅「可領取」可點）*/
.sec03 .content .mission .task .claim.can:hover {
  filter: drop-shadow(0 0 6px #fff17f) drop-shadow(0 0 10px #fff17f);
}
/* task_group1 / task_group2 的按鈕獨立微調 bottom */
.sec03 .content .mission .task_group1 .task .claim {
  bottom: 14.5%;
}
.sec03 .content .mission .task_group2 .task .claim {
  bottom: 12.5%;
}

/*---- sec02 ----*/
.sec02 {
  background: url(https://images1.iwplay.com.tw/image/pwm/events/20260717/images/sec02_bg.webp) no-repeat center top;
  background-size: cover;
}
.sec02 .content .role_info p {
  color: #1d353f;
}
.sec02 .content .role_skill {
  filter: drop-shadow(0px 0px 20px rgba(225, 225, 225, .95)) drop-shadow(0px 0px 20px rgba(225, 225, 225, .5));
}
.sec02 .content .role_skill .skill.s1 {
  top: 27%;
  left: 1%;
}
.sec02 .content .role_skill .skill.s2 {
  top: 53%;
  left: 8.9%;
}
.sec02 .content .role_skill .skill.s3 {
  top: 72%;
  left: 30.5%;
}
.sec02 .content .role_skill .skill.s4 {
  top: 79%;
  left: 60%;
}
.sec02 .content .role_skill .skill.s5 {
  top: 84%;
  left: 60%;
}
.sec02 .content .role_skill .skill .tt {
  top: auto;
  bottom: 100%;
  background: rgba(0, 0, 0, .65);
}
.sec02 .content .bottom {
  filter: initial;
}

/*---- modal ----*/
#inquire .modal-dialog .modal-content .modal-header {
  margin: 7% auto 2%;
}
#inquire .modal-dialog .modal-content .modal-body table tbody tr:nth-child(odd) {
  background: #e1eaf1;
}

@media (max-width: 575.98px) {
  .sec03 {
    padding-top: 16%;
    background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260717/images/sec03_bg_m.webp);   /* 手機背景 1080x5743 */
    background-size: 100% 100%;                          /* 拉伸貼合區塊實際高度，不透出底色 */
    overflow: visible;    /* 讓 line 往上溢出不被裁切 */
  }
  .sec03 .container {
    overflow: hidden;     /* 內容照樣裁切 */
  }
  .sec03 .line {
    width: 100%;
    left: 0;
    top: -0.5%;                 /* 上移蓋住上方區塊 */
    transform: none;
    aspect-ratio: 1080 / 152;   /* 依 secline_m.webp 長寬 */
    background: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/secline_m.webp) no-repeat center / 100% 100%;
    z-index: 2;
  }
  .sec03 .line img {
    display: none;              /* 手機改用 secline_m 背景，隱藏桌機 line 圖 */
  }
  .sec03 .content {
    width: 100%;
  }
  .sec03 .content p {
    margin: 3% auto;
    width: 84%;
    font-size: 3.4vw;
    line-height: 5.4vw;
  }
  .sec03 .content .sns {
    width: 55%;
  }
  .sec03 .content .mission {
    margin: -22.5% auto 10% auto;
  }
  /* invite 任務區塊：手機三目標上到下平分空間 */
  .sec03 .content .mission .task_group {
    flex-direction: column;
    align-items: center;
    margin: 0 auto -25% auto;   /* top 歸 0：避免 base 的 margin-top:1.5% 殘留與 -25% 折疊，讓間距是乾淨的 -25% */
  }
  /* 手機：偏移歸 0；角色圖偽元素進 flex 直列流（g1 圖在上、g2 圖在下）*/
  .sec03 .content .mission .task_group1,
  .sec03 .content .mission .task_group2 {
    left: 0;
  }
  .sec03 .content .mission .task_group1::before,
  .sec03 .content .mission .task_group2::before {
    position: relative;   /* 由 absolute 改回流內，成為 flex 項目 */
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
  }
  .sec03 .content .mission .task_group1::before {
    aspect-ratio: 2243 / 1499;   /* 手機角色圖比例 */
    background-image: url(https://images2.iwplay.com.tw/image/pwm/events/20260717/images/task_group1_chara_m.webp);
    width: 205%;
    left: -13%;
    margin-bottom: -70%;   /* 角色圖在上方：用負 margin-bottom 把下方卡片往上拉、壓在角色圖上（與 g2 的 margin-top 相反）*/
  }
  .sec03 .content .mission .task_group2::before {
    aspect-ratio: 1867 / 1139;   /* 手機角色圖比例 */
    background-image: url(https://images2.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_chara_m.webp);
    width: 195%;
    left: -71%;
    margin-bottom: -50%;   /* 角色圖排第一個（在上方），用 margin-bottom 讓下方卡片壓上來（同 g1）*/
  }
  .sec03 .content .mission .task {
    width: 88%;
    margin-bottom: 2%;
  }
  .sec03 .content .mission .task:last-child {
    margin-bottom: 0;
  }
  .sec03 .content .mission .task_group1 .task { width: 92%; }
  .sec03 .content .mission .task_group2 .task { width: 86%; }
  /* 兩組領取按鈕用 rem 固定成相同大小（不隨卡片寬度變動）*/
  .sec03 .content .mission .task .claim {
    width: 10rem;
    left: calc(50% - 5rem);   /* 置中：(100% − 10rem) / 2 */
  }
  .sec03 .content .mission .task_group1 .task .claim,
  .sec03 .content .mission .task_group2 .task .claim {
    bottom: 12%;   /* 覆蓋桌機 per-group 的 14.5%/12.5% */
  }
  /* 手機 task 卡片：換 _m 背景、各組依圖片比例（g1 992x696、g2 881x661）*/
  .sec03 .content .mission .task_group1 .task { aspect-ratio: 992 / 696; }
  .sec03 .content .mission .task_group2 .task { aspect-ratio: 881 / 661; }
  .sec03 .content .mission .task_group1 .task:nth-child(1) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group1_task_1_base_m.webp); }
  .sec03 .content .mission .task_group1 .task:nth-child(2) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group1_task_2_base_m.webp); }
  .sec03 .content .mission .task_group1 .task:nth-child(3) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group1_task_3_base_m.webp); }
  .sec03 .content .mission .task_group2 .task:nth-child(1) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_task_1_base_m.webp); }
  .sec03 .content .mission .task_group2 .task:nth-child(2) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_task_2_base_m.webp); }
  .sec03 .content .mission .task_group2 .task:nth-child(3) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group3_task_3_base_m.webp); }
  /* 未開放 lock 手機圖 */
  .sec03 .content .mission .task_group2.unopened .task:nth-child(1) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_task_1_base_lock_m.webp); }
  .sec03 .content .mission .task_group2.unopened .task:nth-child(2) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_task_2_base_lock_m.webp); }
  .sec03 .content .mission .task_group2.unopened .task:nth-child(3) { background-image: url(https://images3.iwplay.com.tw/image/pwm/events/20260717/images/task_group2_task_3_base_lock_m.webp); }
  .sec02 {
    background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260717/images/sec02_bg_m.webp);   /* 手機背景 1080x3043 */
    background-size: 100%;                               /* 全寬、依原比例 */
    background-position: center top;
  }
  .sec02 .content .role_info p {
    margin: 2% auto 0;
    margin-left: 3.5%;
  }
  .sec02 .content::after {
    padding-top: 100%;
    bottom: 38%;
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .9) 20% , rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 95%);
  }
  .sec02 .content .role_skill {
    margin-bottom: 2%;
    width: 88%;
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, .95))drop-shadow(0px 0px 5px rgba(255, 255, 255, .95))drop-shadow(0px -5px 5px #ffffff);
  }
  .sec02 .content .role_skill .skill, .sec02 .content .role_skill .skill.s1, .sec02 .content .role_skill .skill.s2, .sec02 .content .role_skill .skill.s3, .sec02 .content .role_skill .skill.s4, .sec02 .content .role_skill .skill.s5 {
    top: initial;
    left: initial;
    cursor: default;
  }
  .sec02 .content .role_skill .skill {
    width: 25%;
  }
  #inquire .modal-dialog .modal-content .modal-body {
    margin: 0 auto 15%;
  }
}