* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #fff;
  font-family: "Microsoft JhengHei", "Noto Sans TC", Arial, sans-serif;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.zgbj-page {
  --w: min(100vw, 750px);
  --s: calc(var(--w) / 750);
  width: var(--w);
  margin: 0 auto;
  padding-top: calc(117 * var(--s));
  min-height: 100vh;
  background: #160e13;
  color: #fff0d4;
  overflow: hidden;
}

.zgbj-top {
  position: fixed;
  top: -4px;
  left: 50%;
  width: var(--w);
  height: calc(124 * var(--s));
  transform: translateX(-50%);
  background: #20130e url("../img/zgbj/slices/top.webp") no-repeat center top / 104% 104%;
  z-index: 999;
}

.top-btn {
  position: absolute;
  top: calc(24 * var(--s));
  width: calc(197 * var(--s));
  height: calc(68 * var(--s));
  border: 0;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
}

.top-facebook {
  right: calc(218 * var(--s));
  background-image: url("../img/zgbj/slices/top-facebook.webp");
}

.top-query {
  right: calc(16 * var(--s));
  background-image: url("../img/zgbj/slices/top-query.webp");
}

.hero-section {
  position: relative;
  height: calc(1234 * var(--s));
  background-color: #160e13;
  background-image: url("../img/zgbj/slices/home-bg.webp");
  background-repeat: no-repeat;
  background-position: center calc(-100 * var(--s));
  background-size: 100% auto;
}

.hero-section::before {
  content: "";
  position: absolute;
  right: calc(52 * var(--s));
  top: calc(20 * var(--s));
  width: calc(87 * var(--s));
  height: calc(108 * var(--s));
  background: url("../img/zgbj/slices/age16.webp") no-repeat center / contain;
}

.hero-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(16 * var(--s));
  width: calc(58 * var(--s));
  height: calc(79 * var(--s));
  transform: translateX(-50%);
  background: url("../img/zgbj/slices/arrow.webp") no-repeat center / contain;
  animation: zgbjArrowHint 1.35s ease-in-out infinite;
  opacity: .92;
}

.video-play {
  position: absolute;
  left: 74%;
  top: calc(660 * var(--s));
  width: calc(104 * var(--s));
  height: calc(104 * var(--s));
  transform: translateX(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  z-index: 3;
}

.video-play::before {
  content: "";
  position: absolute;
  inset: calc(-8 * var(--s));
  border-radius: 50%;
  background: url("../img/zgbj/slices/play-ring.webp") no-repeat center / contain;
  filter: drop-shadow(0 0 calc(10 * var(--s)) rgba(255, 255, 255, .45));
  animation: zgbjPlayRingSpin 6s linear infinite;
}

.video-play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(62 * var(--s));
  height: calc(70 * var(--s));
  transform: translate(-50%, -50%);
  background: url("../img/zgbj/slices/play-core.webp") no-repeat center / contain;
}

.hero-reserve {
  position: absolute;
  left: 50%;
  top: calc(825 * var(--s));
  width: calc(430 * var(--s));
  height: calc(292 * var(--s));
  transform: translateX(-50%);
  border: 0;
  padding: 0;
  background: url("../img/zgbj/slices/home-reserve-button.webp") no-repeat center / contain;
}

.hero-count {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1092 * var(--s));
  color: #fff1dc;
  font-size: calc(24 * var(--s));
  font-weight: 900;
  text-align: center;
  text-shadow: 0 calc(2 * var(--s)) calc(5 * var(--s)) #000;
}

.hero-count span {
  color: #ffcf4d;
}

@keyframes zgbjPlayRingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes zgbjArrowHint {
  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, calc(10 * var(--s)));
  }
}

.task-section {
  position: relative;
  min-height: calc(1468 * var(--s));
  background: #160e13 url("../img/zgbj/slices/other-bg.webp") repeat-y top center / 100% auto;
}

.task-title-img {
  position: absolute;
  left: 50%;
  top: calc(30 * var(--s));
  width: calc(604 * var(--s));
  height: calc(236 * var(--s));
  transform: translateX(-50%);
  background: url("../img/zgbj/slices/task-title.webp") no-repeat center / contain;
  pointer-events: none;
}

.task-fashion-img {
  position: absolute;
  left: 50%;
  top: calc(250 * var(--s));
  width: calc(456 * var(--s));
  height: calc(398 * var(--s));
  transform: translateX(-50%);
  background: url("../img/zgbj/slices/task-fashion.webp") no-repeat center / contain;
  pointer-events: none;
}

.reserve-form {
  position: absolute;
  left: 50%;
  top: calc(670 * var(--s));
  width: calc(590 * var(--s));
  height: calc(148 * var(--s));
  transform: translateX(-50%);
}

.zgbj-page.phone-reserved .reserve-form {
  display: none;
}

.reserve-complete {
  display: none;
  position: absolute;
  left: 50%;
  top: calc(652 * var(--s));
  width: calc(590 * var(--s));
  min-height: calc(170 * var(--s));
  transform: translateX(-50%);
  z-index: 2;
}

.zgbj-page.phone-reserved .reserve-complete {
  display: block;
}

.reserve-confirm-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(60 * var(--s));
  border: calc(1 * var(--s)) solid rgba(255, 226, 177, .55);
  border-radius: calc(30 * var(--s));
  background: rgba(239, 232, 218, .94);
  box-shadow: 0 calc(8 * var(--s)) calc(18 * var(--s)) rgba(0, 0, 0, .28);
  overflow: hidden;
}

.reserve-confirm-label {
  flex: 0 0 calc(176 * var(--s));
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(48, 37, 31, .42);
  color: #342a23;
  font-size: clamp(14px, calc(21 * var(--s)), 22px);
  font-weight: 900;
}

.reserve-confirm-row strong {
  flex: 1;
  min-width: 0;
  padding: 0 calc(22 * var(--s));
  color: #1f1a16;
  font-size: clamp(15px, calc(23 * var(--s)), 24px);
  font-weight: 900;
  letter-spacing: calc(.4 * var(--s));
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(54 * var(--s));
  background: rgba(239, 232, 218, .92);
  border-radius: calc(27 * var(--s));
  overflow: hidden;
}

.country-select {
  width: 34%;
  height: 100%;
  border: 0;
  outline: 0;
  padding-left: calc(14 * var(--s));
  padding-right: calc(26 * var(--s));
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2l7 7 7-7' fill='none' stroke='%23433b31' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(10 * var(--s)) center;
  background-size: calc(13 * var(--s)) auto;
  color: #292622;
  font-size: clamp(13px, calc(20 * var(--s)), 22px);
  font-weight: 800;
  appearance: none;
  -webkit-appearance: none;
}

.phone-sep {
  width: 1px;
  height: 58%;
  background: rgba(48, 37, 31, .5);
}

.phone-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 calc(18 * var(--s));
  background: transparent;
  color: #1f1a16;
  font-size: calc(22 * var(--s));
  font-weight: 900;
}

.phone-input::placeholder {
  color: #918b82;
  font-weight: 700;
}

.task-submit {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(237 * var(--s));
  height: calc(60 * var(--s));
  transform: translateX(-50%);
  border: 0;
  padding: 0;
  background: url("../img/zgbj/slices/task-submit.webp") no-repeat center / contain;
  color: transparent;
}

.task-submit:disabled {
  filter: grayscale(1);
  opacity: .8;
}

.reserved-submit {
  position: absolute;
  left: 50%;
  top: calc(88 * var(--s));
  width: calc(237 * var(--s));
  height: calc(60 * var(--s));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 195, 132, .62);
  border-radius: calc(9 * var(--s));
  background: linear-gradient(180deg, rgba(218, 68, 45, .92), rgba(139, 31, 25, .95));
  box-shadow: 0 calc(4 * var(--s)) calc(10 * var(--s)) rgba(255, 93, 54, .28), inset 0 0 calc(12 * var(--s)) rgba(255, 205, 139, .26);
  color: #fff4da;
  font-size: clamp(16px, calc(25 * var(--s)), 26px);
  font-weight: 900;
  letter-spacing: calc(1 * var(--s));
  text-shadow: 0 calc(2 * var(--s)) calc(4 * var(--s)) rgba(0, 0, 0, .45);
}

.store-card {
  position: absolute;
  left: 50%;
  top: calc(900 * var(--s));
  width: calc(692 * var(--s));
  height: calc(324 * var(--s));
  transform: translateX(-50%);
  background: url("../img/zgbj/slices/store-card.webp") no-repeat center / contain;
}

.store-btn {
  position: absolute;
  left: calc(378 * var(--s));
  top: calc(217 * var(--s));
  width: calc(252 * var(--s));
  height: calc(71 * var(--s));
  border: 0;
  padding: 0;
  background: url("../img/zgbj/slices/store-apple.webp") no-repeat center / contain;
  text-indent: -9999px;
  overflow: hidden;
}

.store-btn.is-android {
  background-image: url("../img/zgbj/slices/store-google.webp");
}

.store-btn.is-ios {
  background-image: url("../img/zgbj/slices/store-apple.webp");
}

.facebook-card {
  position: absolute;
  left: 50%;
  top: calc(1220 * var(--s));
  width: calc(692 * var(--s));
  height: calc(243 * var(--s));
  transform: translateX(-50%);
  background: url("../img/zgbj/slices/facebook-card.webp") no-repeat center / contain;
}

.facebook-btn {
  position: absolute;
  left: calc(68 * var(--s));
  top: calc(150 * var(--s));
  width: calc(253 * var(--s));
  height: calc(59 * var(--s));
  border: 0;
  padding: 0;
  background: url("../img/zgbj/slices/facebook-button.webp") no-repeat center / contain;
  text-indent: -9999px;
  overflow: hidden;
}

.milestone-section {
  position: relative;
  min-height: calc(1515 * var(--s));
  background: #160e13 url("../img/zgbj/slices/other-bg.webp") repeat-y top center / 100% auto;
}

.milestone-title-img {
  position: absolute;
  left: 50%;
  top: calc(0 * var(--s));
  width: calc(540 * var(--s));
  height: calc(211 * var(--s));
  transform: translateX(-50%);
  background: url("../img/zgbj/slices/milestone-title.webp") no-repeat center / contain;
}

.milestone-current {
  position: absolute;
  left: calc(64 * var(--s));
  top: calc(205 * var(--s));
  color: #fff2d8;
  font-size: calc(24 * var(--s));
  font-weight: 900;
  text-shadow: 0 calc(2 * var(--s)) calc(5 * var(--s)) #000;
  z-index: 2;
}

.milestone-current #show-subscription {
  color: #ffd45b;
  font-size: calc(50 * var(--s));
  line-height: 1;
}

.milestone-current #show-subscription-unit {
  color: #fff2d8;
  font-size: calc(24 * var(--s));
  line-height: 1;
}

.milestone-list {
  position: absolute;
  left: 50%;
  top: calc(350 * var(--s));
  width: calc(681 * var(--s));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--s));
}

.milestone-card {
  position: relative;
  width: 100%;
  aspect-ratio: 569 / 181;
  flex: 0 0 auto;
  background: no-repeat center / 100% 100%;
}

.milestone-card.is-sealed::after {
  position: absolute;
  inset: 2% 1.5%;
  border-radius: calc(12 * var(--s));
  background: rgba(18, 14, 13, .48);
  content: "";
  pointer-events: none;
}

.milestone-card:nth-child(even) {
  transform: translateX(calc(10 * var(--s)));
}

.milestone-card-1w { background-image: url("../img/zgbj/slices/milestone-1w.png"); }
.milestone-card-5w { background-image: url("../img/zgbj/slices/milestone-5w.png"); }
.milestone-card-10w { background-image: url("../img/zgbj/slices/milestone-10w.png"); }
.milestone-card-30w { background-image: url("../img/zgbj/slices/milestone-30w.png"); }
.milestone-card-50w { background-image: url("../img/zgbj/slices/milestone-50w.png"); }

.milestone-seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20%;
  aspect-ratio: 1;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.78) rotate(-12deg);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  background: url("../img/zgbj/slices/milestone-seal.png") no-repeat center / contain;
  pointer-events: none;
}

.milestone-card.is-sealed .milestone-seal {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1) rotate(-12deg);
}

.zgbj-footer {
  position: relative;
  padding: calc(92 * var(--s)) calc(58 * var(--s)) calc(56 * var(--s));
  background: #160e13 url("../img/zgbj/slices/other-bg.webp") repeat-y top center / 100% auto;
  text-align: center;
}

.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(34 * var(--s));
  margin-bottom: calc(34 * var(--s));
}

.footer-game-logo,
.footer-company-logo {
  display: block;
  flex: 0 0 auto;
  text-indent: -9999px;
  overflow: hidden;
}

.footer-game-logo {
  width: calc(138 * var(--s));
  height: calc(138 * var(--s));
  background: url("../img/zgbj/slices/footer-game-logo.webp") no-repeat center / contain;
}

.footer-company-logo {
  width: calc(132 * var(--s));
  height: calc(78 * var(--s));
  background: url("../img/zgbj/slices/footer-company-logo.webp") no-repeat center / contain;
}

.footer-line {
  width: 1px;
  height: calc(58 * var(--s));
  background: rgba(255, 255, 255, .42);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: calc(82 * var(--s));
  margin-bottom: calc(26 * var(--s));
}

.footer-links a {
  color: #d9d4d5;
  font-size: calc(22 * var(--s));
  font-weight: 800;
  text-decoration: none;
}

.footer-text {
  color: rgba(226, 220, 221, .72);
  font-size: calc(18 * var(--s));
  line-height: 1.65;
}

.footer-text p {
  margin: calc(14 * var(--s)) 0 0;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  --w: min(100vw, 750px);
  --s: calc(var(--w) / 750);
}

.modal.show {
  display: block;
}

.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
}

.success-panel,
.reward-panel,
.video-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 650px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 218, 148, .55);
  border-radius: 18px;
  background: rgba(27, 14, 13, .97);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .55);
  color: #fff0d4;
}

.success-panel,
.reward-panel {
  padding: 30px 26px 28px;
}

.success-panel h2,
.reward-panel h2 {
  margin: 0 0 20px;
  color: #ffd98a;
  text-align: center;
  font-size: 28px;
}

.modal-close {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

.cdkey-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f9d88b, #c6863a);
  color: #6a250f;
  font-size: 16px;
  font-weight: 800;
}

.cdkey-box strong {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.cdkey-box button,
.success-actions button,
.reward-btn {
  border: 0;
  border-radius: 999px;
  background: #b73324;
  color: #fff4d4;
  font-weight: 800;
}

.cdkey-box button {
  padding: 6px 12px;
}

.success-tip,
.query-tip {
  color: rgba(255, 240, 212, .78);
  text-align: center;
  line-height: 1.5;
}

.success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.success-actions button {
  min-width: 138px;
  padding: 12px 18px;
}

#successModal .modal-mask {
  background: rgba(0, 0, 0, .68);
}

#successModal .success-panel {
  top: 50%;
  width: min(calc(690 * var(--s)), calc(100vw - 24px));
  min-height: calc(610 * var(--s));
  padding: calc(12 * var(--s)) 0 calc(24 * var(--s));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

#successModal .success-panel .modal-close {
  right: calc(10 * var(--s));
  top: calc(-8 * var(--s));
  z-index: 3;
}

#successModal .success-panel h2 {
  position: relative;
  display: block;
  width: calc(604 * var(--s));
  max-width: 100%;
  height: calc(236 * var(--s));
  margin: calc(-34 * var(--s)) auto calc(-10 * var(--s));
  background: url("../img/zgbj/slices/success-title.webp") no-repeat center / contain;
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
  text-shadow: none;
  overflow: hidden;
}

#successModal .success-panel h2::before {
  display: none;
}

#successModal .cdkey-box {
  width: calc(681 * var(--s));
  max-width: 100%;
  height: calc(112 * var(--s));
  margin: 0 auto calc(28 * var(--s));
  gap: calc(6 * var(--s));
  border-radius: 0;
  background: url("../img/zgbj/slices/success-code-bg.webp") no-repeat center / 100% 100%;
  color: #5a4638;
  font-size: calc(24 * var(--s));
  line-height: 1;
  box-shadow: none;
}

#successModal .cdkey-box strong {
  color: #9f271d;
  font-size: calc(26 * var(--s));
  letter-spacing: calc(1 * var(--s));
  text-shadow: none;
}

#successModal .cdkey-box button {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #5a4638;
  font-size: calc(22 * var(--s));
  font-weight: 900;
}

#successModal .success-prizes {
  display: grid;
  grid-template-columns: repeat(4, calc(140 * var(--s)));
  justify-content: space-between;
  align-items: end;
  width: calc(650 * var(--s));
  max-width: calc(100% - 24 * var(--s));
  margin: 0 auto calc(36 * var(--s));
}

#successModal .success-prize {
  display: block;
  width: calc(140 * var(--s));
  height: calc(118 * var(--s));
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

#successModal .success-prize1 {
  background-image: url("../img/zgbj/slices/success-reward1.webp");
}

#successModal .success-prize2 {
  background-image: url("../img/zgbj/slices/success-reward2.webp");
}

#successModal .success-prize3 {
  background-image: url("../img/zgbj/slices/success-reward3.webp");
}

#successModal .success-prize4 {
  background-image: url("../img/zgbj/slices/success-reward4.webp");
}

#successModal .success-tip {
  margin: 0 auto calc(12 * var(--s));
  color: rgba(255, 240, 212, .88);
  font-size: calc(20 * var(--s));
  font-weight: 800;
  text-align: center;
}

#successModal .success-store-step .success-tip,
#successModal .success-facebook-step .success-tip {
  width: calc(343 * var(--s));
  height: calc(20 * var(--s));
  overflow: hidden;
  background: url("../img/zgbj/slices/success-claim.webp") no-repeat center / contain;
  color: transparent;
  font-size: 0;
}

#successModal .success-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(74 * var(--s));
}

#successModal .success-actions button {
  min-width: 0;
  padding: 0;
  border-radius: calc(8 * var(--s));
}

#successModal #successStoreBtn {
  width: calc(254 * var(--s));
  height: calc(73 * var(--s));
  background: url("../img/zgbj/slices/success-store-apple.webp") no-repeat center / contain;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

#successModal #successStoreBtn.is-android {
  width: calc(252 * var(--s));
  height: calc(71 * var(--s));
  background-image: url("../img/zgbj/slices/success-store-google.webp");
}

#successModal #successStoreBtn.is-ios {
  background-image: url("../img/zgbj/slices/success-store-apple.webp");
}

#successModal #successFacebookBtn {
  width: calc(252 * var(--s));
  height: calc(71 * var(--s));
  background: url("../img/zgbj/slices/success-facebook.webp") no-repeat center / contain;
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
}

.reward-list {
  display: grid;
  gap: 12px;
}

.reward-item {
  display: grid;
  grid-template-columns: 92px 1fr 72px;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
}

.reward-code {
  overflow: hidden;
  color: #ffd98a;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.reward-btn {
  height: 34px;
}

#rewardModal .modal-mask {
  background: rgba(0, 0, 0, .82);
}

.reward-panel {
  width: min(calc(726 * var(--s)), 96vw);
  height: calc(997 * var(--s));
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("../img/zgbj/slices/reward-panel-bg.webp") no-repeat center / 100% 100%;
  box-shadow: none;
  color: #403a33;
  overflow: hidden;
}

.reward-panel h2 {
  position: absolute;
  left: calc(80 * var(--s));
  top: calc(104 * var(--s));
  margin: 0;
  opacity: 0;
  color: #30343a;
  text-align: left;
  font-size: calc(40 * var(--s));
  font-weight: 900;
  letter-spacing: calc(1 * var(--s));
}

.reward-panel .modal-close {
  right: calc(44 * var(--s));
  top: calc(42 * var(--s));
  width: calc(48 * var(--s));
  height: calc(48 * var(--s));
  background: rgba(91, 62, 40, .26);
  color: #6d5842;
  font-size: calc(38 * var(--s));
}

.reward-panel .query-tip {
  display: none;
}

.reward-list {
  position: absolute;
  left: calc(80 * var(--s));
  top: calc(254 * var(--s));
  width: calc(587 * var(--s));
  display: grid;
  gap: calc(34 * var(--s));
}

.reward-item {
  display: grid;
  grid-template-columns: calc(196 * var(--s)) calc(196 * var(--s)) calc(147 * var(--s));
  gap: calc(10 * var(--s)) calc(38 * var(--s));
  align-items: center;
  min-height: calc(58 * var(--s));
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.reward-label,
.reward-code {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(56 * var(--s));
  padding: 0 calc(10 * var(--s));
  border-radius: calc(6 * var(--s));
  background: rgba(213, 203, 178, .9);
  color: #695f4f;
  font-size: calc(25 * var(--s));
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.reward-code {
  overflow: hidden;
  color: #736955;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-btn {
  width: calc(147 * var(--s));
  height: calc(58 * var(--s));
  border: 0;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

.reward-btn-copy {
  background-image: url("../img/zgbj/slices/reward-copy.webp");
}

.reward-btn-go {
  background-image: url("../img/zgbj/slices/reward-go.webp");
}

.reward-empty {
  width: calc(147 * var(--s));
  height: calc(58 * var(--s));
}

.reward-panel.reward-simple-panel {
  width: min(92vw, 560px);
  height: auto;
  max-height: none;
  padding: 28px 22px 24px;
  border: 1px solid rgba(255, 218, 148, .55);
  border-radius: 18px;
  background: rgba(27, 14, 13, .97);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .55);
  color: #fff0d4;
  overflow: visible;
}

.reward-panel.reward-simple-panel h2 {
  position: static;
  opacity: 1;
  margin: 0 0 18px;
  color: #ffd98a;
  text-align: center;
  font-size: clamp(24px, 7vw, 28px);
  letter-spacing: 0;
}

.reward-panel.reward-simple-panel .modal-close {
  right: 12px;
  top: 10px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 28px;
}

.reward-panel.reward-simple-panel .query-tip {
  display: block;
}

.reward-panel.reward-simple-panel .reward-list {
  position: static;
  width: auto;
  display: grid;
  gap: 12px;
}

.reward-panel.reward-simple-panel .reward-item {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 68px;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
}

.reward-panel.reward-simple-panel .reward-label,
.reward-panel.reward-simple-panel .reward-code {
  display: block;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 240, 212, .9);
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
}

.reward-panel.reward-simple-panel .reward-code {
  color: #ffd98a;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  text-align: center;
}

.reward-panel.reward-simple-panel .reward-btn {
  width: auto;
  height: 34px;
  min-width: 62px;
  border-radius: 999px;
  background: #b73324;
  color: #fff4d4;
  font-size: clamp(14px, 4vw, 16px);
  text-indent: 0;
}

.video-panel {
  overflow: hidden;
  background: #000;
}

.video-close {
  position: fixed;
  right: max(12px, calc(18 * var(--s) + env(safe-area-inset-right)));
  top: max(12px, calc(18 * var(--s) + env(safe-area-inset-top)));
  width: calc(44 * var(--s));
  height: calc(44 * var(--s));
  min-width: 36px;
  min-height: 36px;
  z-index: 12;
  background: rgba(0, 0, 0, .58);
  pointer-events: auto;
  touch-action: manipulation;
}

.video-panel video {
  display: block;
  width: 100%;
  max-height: 76vh;
}

.phone-task-modal .modal-mask {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(calc(1 * var(--s)));
}

.phone-task-modal,
.phone-task-modal * {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

.phone-task-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: min(calc(1334 * var(--s)), 100vh);
  transform: translate(-50%, -50%);
  color: #fff;
  overflow: hidden;
}

.phone-task-close {
  position: fixed;
  right: calc(18 * var(--s));
  top: calc(18 * var(--s));
  right: max(12px, calc(18 * var(--s) + env(safe-area-inset-right)));
  top: max(12px, calc(18 * var(--s) + env(safe-area-inset-top)));
  width: calc(44 * var(--s));
  height: calc(44 * var(--s));
  min-width: 34px;
  min-height: 34px;
  background: rgba(0, 0, 0, .45);
  color: rgba(255, 255, 255, .86);
  font-size: clamp(22px, calc(32 * var(--s)), 32px);
  z-index: 10;
}

.phone-task-fashion {
  position: absolute;
  left: 50%;
  top: calc(205 * var(--s));
  width: calc(750 * var(--s));
  height: calc(561 * var(--s));
  transform: translateX(-50%);
  background: url("../img/zgbj/slices/phone-chain-fashion.webp") no-repeat center / contain;
  pointer-events: none;
}

.phone-task-form {
  position: absolute;
  left: 50%;
  top: calc(727 * var(--s));
  width: calc(669 * var(--s));
  transform: translateX(-50%);
  z-index: 2;
}

.phone-task-phone-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(67 * var(--s));
  border-radius: calc(6 * var(--s));
  background: rgba(255, 255, 255, .96);
  overflow: hidden;
}

.phone-task-country {
  width: calc(232 * var(--s));
  height: 100%;
  border: 0;
  outline: 0;
  padding-left: calc(24 * var(--s));
  padding-right: calc(36 * var(--s));
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2l7 7 7-7' fill='none' stroke='%23433b31' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(14 * var(--s)) center;
  background-size: calc(14 * var(--s)) auto;
  color: #393939;
  font-size: clamp(13px, calc(22 * var(--s)), 22px);
  font-weight: 800;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
}

.phone-task-sep {
  width: calc(2 * var(--s));
  height: calc(46 * var(--s));
  background: rgba(55, 55, 55, .72);
}

.phone-task-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 calc(18 * var(--s));
  background: transparent;
  color: #292929;
  font-size: clamp(14px, calc(25 * var(--s)), 25px);
  font-weight: 900;
  line-height: 1;
}

.phone-task-input::placeholder {
  color: #777;
  font-weight: 800;
}

.phone-task-rewards {
  position: absolute;
  left: 50%;
  top: calc(828 * var(--s));
  right: auto;
  width: calc(650 * var(--s));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, calc(150 * var(--s)));
  justify-content: space-between;
  justify-items: center;
  align-items: end;
  z-index: 2;
}

.phone-task-reward {
  display: block;
  width: calc(148 * var(--s));
  height: calc(142 * var(--s));
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

.phone-task-reward1 {
  background-image: url("../img/zgbj/slices/phone-chain-reward1.webp");
}

.phone-task-reward2 {
  background-image: url("../img/zgbj/slices/phone-chain-reward2.webp");
}

.phone-task-reward3 {
  background-image: url("../img/zgbj/slices/phone-chain-reward3.webp");
}

.phone-task-reward4 {
  background-image: url("../img/zgbj/slices/phone-chain-reward4.webp");
}

.phone-task-submit {
  position: absolute;
  left: 50%;
  top: calc(252 * var(--s));
  width: calc(347 * var(--s));
  height: calc(236 * var(--s));
  transform: translateX(-50%);
  border: 0;
  padding: 0;
  background: url("../img/zgbj/slices/phone-chain-submit.webp") no-repeat center / contain;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

.phone-task-submit:disabled {
  filter: grayscale(1);
  opacity: .78;
}

.phone-task-countdown {
  position: absolute;
  left: 50%;
  top: calc(1190 * var(--s));
  width: calc(590 * var(--s));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 calc(14 * var(--s));
  align-items: center;
  justify-content: center;
  justify-items: center;
  color: #fff;
  text-align: center;
  z-index: 2;
}

.phone-task-count-label {
  font-size: clamp(24px, calc(38 * var(--s)), 38px);
  font-weight: 900;
  letter-spacing: calc(1 * var(--s));
}

#phoneTaskCountdown {
  justify-self: center;
  color: #fff;
  font-size: clamp(24px, calc(39 * var(--s)), 39px);
  font-weight: 900;
  letter-spacing: calc(5 * var(--s));
  text-shadow: 0 calc(2 * var(--s)) calc(6 * var(--s)) rgba(0, 0, 0, .55);
}

.phone-task-countdown small {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: calc(8 * var(--s));
  color: #d5b56c;
  font-size: clamp(15px, calc(23 * var(--s)), 23px);
  font-weight: 800;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%);
  z-index: 2000;
  max-width: min(88vw, 620px);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .84);
  color: #fff;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.toast.show {
  opacity: 1;
}

@media (min-width: 751px) {
  body {
    overflow-y: scroll;
  }
}