:root {
  --bg: #f3e6d4;
  --bg-soft: #f7edd9;
  --white: #ffffff;
  --yellow: #ffca05;
  --yellow-deep: #e6b400;
  --gold: #c9a227;
  --apricot: #f3e0c2;
  --apricot-deep: #e8c99a;
  --grey: #818386;
  --grey-soft: #bdbdbd;
  --ink: #1c1c1e;
  --ink-soft: #3a3a3c;
  --line: #ebe4d6;
  --ok: #2f9e44;
  --shadow: 0 8px 24px rgba(28, 28, 30, 0.08);
  --radius: 18px;
  --nav-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --font: "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  min-height: 100%;
  min-height: 100dvh;
}
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  overscroll-behavior: none;
}
/* 填滿 Home Indicator 底下（同底欄白色），避免 PWA 露異色邊 */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--safe-bottom);
  background: #ffffff;
  z-index: 39;
  pointer-events: none;
}

button, input { font: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.hidden, [hidden] { display: none !important; }

.app-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  min-height: 100dvh;
  /* 底欄高度 + 安全區 + 額外呼吸位，免被底 bar／Home Indicator 遮 */
  padding: 10px 14px calc(var(--nav-h) + var(--safe-bottom) + 28px);
  position: relative;
}

/* 只固定頂欄；護照卡跟內容一齊滾 */
.sticky-head {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: -10px -14px 0;
  padding: 10px 14px 8px;
  background: var(--bg);
  box-shadow: none;
}
.sticky-head .topbar { margin-bottom: 0; }
html.is-guest .sticky-head {
  position: relative;
  top: auto;
  z-index: auto;
  box-shadow: none;
  background: var(--bg);
  margin: 0 -14px;
  padding: 10px 14px 8px;
  flex-shrink: 0;
}
/* 主畫面 PWA：頂／底安全區額外留位（Safari 瀏覽器唔好再疊一次） */
@media (display-mode: standalone) {
  .sticky-head {
    padding-top: calc(10px + var(--safe-top));
  }
  html.is-guest .sticky-head {
    padding-top: calc(10px + var(--safe-top));
  }
}
html.is-guest #profileCard,
html.is-guest #tutorialReplayRow { display: none !important; }
/* 獎賞／優惠唔顯示護照卡 */
html[data-tab="rewards"] #profileCard,
html[data-tab="offers"] #profileCard,
html[data-tab="rewards"] #tutorialReplayRow,
html[data-tab="offers"] #tutorialReplayRow {
  display: none !important;
}

.tutorial-replay-row {
  display: flex;
  justify-content: flex-start;
  margin: 4px 0 0;
}
.btn-tutorial-replay {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(28, 28, 30, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  cursor: pointer;
}
.btn-tutorial-replay:active {
  transform: scale(0.98);
}
html.is-tutorial #tutorialReplayRow {
  visibility: hidden;
  pointer-events: none;
}

/* 未登入：只留頂欄 + 9:16 介紹圖 */
html.is-guest,
html.is-guest body {
  height: 100%;
  overflow: hidden;
}
html.is-guest .app-shell {
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: calc(10px + var(--safe-bottom));
}
html.is-guest .topbar { margin-bottom: 8px; flex-shrink: 0; }
html.is-guest main,
html.is-guest .bottom-nav { display: none !important; }
html.is-guest .guest-hero { display: flex; }

.guest-hero {
  display: none;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
.guest-hero-frame {
  position: relative;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 100%;
  overflow: visible;
}
.guest-hero-frame > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
  user-select: none;
  pointer-events: none;
}
.guest-cta-hit {
  position: absolute;
  left: 19%;
  width: 62%;
  top: 79.4%;
  height: 9.8%;
  border-radius: 999px;
  background: transparent;
  z-index: 2;
}
.guest-cta-hand {
  position: absolute;
  left: 70%;
  top: 83.4%;
  width: 14%;
  min-width: 44px;
  max-width: 64px;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 4px rgba(28, 28, 30, .18));
  animation: guest-hand-bob 0.95s ease-in-out infinite;
  transform-origin: 20% 15%;
}
.guest-cta-hand img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
}
@keyframes guest-hand-bob {
  0%, 100% { transform: translate(5px, 5px); }
  50% { transform: translate(-6px, -6px); }
}
@media (prefers-reduced-motion: reduce) {
  .guest-cta-hand { animation: none; }
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.brand-text { min-width: 0; }
.brand-text strong {
  display: block;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.2;
}
.brand-text span {
  display: block;
  font-size: 11px;
  color: var(--grey);
  margin-top: 2px;
  line-height: 1.3;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.mtf-logo-link {
  display: block;
  line-height: 0;
  flex-shrink: 0;
}
.mtf-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: min(132px, 34vw);
  object-fit: contain;
  object-position: right center;
}
.btn-auth {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--white);
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.btn-auth.is-in {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Profile */
.profile-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.8);
  margin-bottom: 14px;
}
#profileCard {
  position: relative;
  overflow: hidden;
  margin: 12px 0 14px;
  padding: 16px 18px 14px;
  /* 貼滿卡片邊框；靠右下對齊，保留明Duck、唔左右夾扁 */
  background-color: #fff6e0;
  background-image: url("/assets/profile-card-bg.jpg?v=7");
  background-repeat: no-repeat;
  /* 略向右移少少 */
  background-position: calc(100% + 18px) bottom;
  background-size: cover;
  border: 1px solid var(--apricot-deep);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--apricot), var(--yellow));
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--apricot-deep);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.avatar.has-photo img { display: block; }
.avatar.has-photo #avatarFallback { display: none; }
.avatar #avatarFallback {
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  line-height: 1;
}
.avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  display: grid;
  place-items: center;
  z-index: 2;
}
.profile-meta { min-width: 0; flex: 1; }
.profile-name-row {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  max-width: 100%;
  position: relative;
}
.profile-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  cursor: default;
  display: inline-block;
  max-width: 9.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-id { display: none; }
html:not(.is-guest) .profile-name {
  cursor: pointer;
}
.name-edit {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 9px;
  display: grid;
  place-items: center;
  line-height: 1;
  margin-bottom: 1px;
  cursor: pointer;
}
.profile-name[contenteditable="true"] {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  overflow: visible;
  max-width: 9.5em;
}
.remain-clock {
  flex-shrink: 0;
  text-align: right;
  margin-left: auto;
  align-self: flex-start;
  transform: translateX(-28px);
}
.remain-clock-label {
  font-size: 11px;
  color: var(--grey);
  line-height: 1.3;
}
.remain-clock-value {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transform: translateX(12px);
}

.dash-mid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.next-reward {
  display: grid;
  /* 固定兩欄：文案再短（鑽石）寶箱都唔會移位 */
  grid-template-columns: 10.6rem 82px;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}
.next-reward-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  width: 100%;
}
.hook-label {
  font-size: 12.5px;
  color: var(--grey);
  white-space: normal;
  line-height: 1.25;
}
.next-reward-need {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.next-reward-need .hook-stage-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
.next-reward-need .tier-remain-num {
  font-size: 26px;
  vertical-align: -1px;
}

.chest-ring {
  position: relative;
  width: 82px;
  height: 82px;
  justify-self: end;
}
.chest-ring.is-hit {
  cursor: pointer;
}
.chest-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chest-ring .chest-img {
  position: absolute;
  inset: 18%;
  width: 64%;
  height: 64%;
  object-fit: contain;
  transform-origin: 50% 78%;
  filter: drop-shadow(0 2px 4px rgba(28, 28, 30, 0.18));
  animation: chest-hatch 5s ease-in-out infinite;
}
@keyframes chest-hatch {
  0%, 84%, 100% { transform: rotate(0deg) translateY(0); }
  86% { transform: rotate(-9deg) translateY(-2px); }
  88% { transform: rotate(9deg) translateY(-3px); }
  90% { transform: rotate(-8deg) translateY(-1px); }
  92% { transform: rotate(7deg) translateY(-2px); }
  94% { transform: rotate(-4deg); }
  96% { transform: rotate(3deg); }
}
.chest-ring .ring-on {
  filter:
    drop-shadow(0 0 2px #ffe566)
    drop-shadow(0 0 6px #ffca04)
    drop-shadow(0 0 14px rgba(255, 202, 4, 0.95))
    drop-shadow(0 0 24px rgba(255, 202, 4, 0.55));
}

.days-hero {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  line-height: 0.85;
  padding-right: 2px;
  transform: translate(-14px, -10px);
}
.days-num {
  font-size: 56px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1.4px #8a6a00;
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 #c9a227,
    1px -1px 0 #c9a227,
    -1px 1px 0 #c9a227,
    1px 1px 0 #c9a227,
    0 3px 0 #8a6a00,
    0 6px 10px rgba(28, 28, 30, 0.28);
}
.days-unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
  margin-left: 6px;
}

.progress-block {
  margin: 12px 28px 0 18px;
}
.progress-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 34px;
  margin-bottom: 4px;
  padding: 14px 6px 0;
  overflow: visible;
}
.progress-title {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
  transform: translate(-22px, -8px);
}
.progress-track {
  position: relative;
  padding: 0 6px 5px;
}
.track-chests {
  position: absolute;
  left: 6px;
  right: 6px;
  top: auto;
  bottom: 0;
  height: 50px;
  pointer-events: none;
  z-index: 0;
}
/* 針腳貼底：放大時向上長，唔向下頂進度條 */
.track-pin {
  position: absolute;
  top: auto;
  bottom: 0;
  width: 26px;
  height: 33.8px;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  pointer-events: auto;
  transform: translateX(-50%);
  transform-origin: center bottom;
  transition: width 0.2s ease, height 0.2s ease;
  z-index: 0;
}
.track-pin.is-current {
  width: 36px;
  height: 46.8px;
  z-index: 2;
  /* 針腳連箱一齊脈動（貼底放大） */
  animation: pin-chest-pulse 3.5s ease-in-out infinite;
}
@keyframes pin-chest-pulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
  }
}
.track-pin-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(28, 28, 30, 0.35));
}
/* 而家目標：白針腳 + 黃光 */
.track-pin.is-current .track-pin-bg {
  filter:
    drop-shadow(0 0 3px rgba(255, 214, 40, 0.95))
    drop-shadow(0 0 9px rgba(255, 202, 5, 0.9))
    drop-shadow(0 1px 2px rgba(28, 28, 30, 0.28));
}
.track-chest {
  position: absolute;
  left: 50%;
  /* 箱微微下移；針腳位置不變 */
  top: 41%;
  width: 17px;
  height: 17px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 1px rgba(28, 28, 30, 0.22));
  transition: width 0.2s ease, height 0.2s ease, top 0.2s ease;
  z-index: 1;
}
.track-pin.is-current .track-chest {
  top: 40%;
  width: 24px;
  height: 24px;
  filter:
    drop-shadow(0 0 2px rgba(255, 214, 40, 0.7))
    drop-shadow(0 1px 1px rgba(28, 28, 30, 0.22));
}
/* 已開啟：唔要尖腳，淨係放大開箱 */
.track-pin.is-passed {
  width: 32px;
  height: 32px;
  z-index: 1;
}
.track-pin.is-passed .track-pin-bg {
  display: none;
}
.track-pin.is-passed .track-chest {
  top: 50%;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 2px rgba(28, 28, 30, 0.28));
}
/* 同 progress-track 左右 6px padding 對齊；銅／銀／金放格縫，鑽石略左 */
.track-pin.at-2 { left: calc((100% - 35px) * 2 / 8 + 7.5px); }
.track-pin.at-4 { left: calc((100% - 35px) * 4 / 8 + 17.5px); }
.track-pin.at-6 { left: calc((100% - 35px) * 6 / 8 + 27.5px); }
.track-pin.at-8 { left: calc(100% - 2px); }
.seg-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}
.seg-bar .seg {
  display: block;
  height: 11px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -3px 4px rgba(201, 162, 39, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 4px rgba(28, 28, 30, 0.16);
}
.seg-bar .seg.on {
  background: linear-gradient(180deg, #ffe98a 0%, var(--yellow) 42%, var(--yellow-deep) 100%);
  border-color: #f0d24a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 3px rgba(160, 110, 0, 0.35),
    0 1px 0 rgba(255, 230, 120, 0.9),
    0 3px 5px rgba(201, 162, 39, 0.4);
}

.guest-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--grey);
  line-height: 1.45;
}

/* Panels */
.panel { display: none; }
.panel.active { display: block; animation: rise .28s ease; }
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 12px;
}
.section-title span { color: var(--grey); font-weight: 500; font-size: 13px; }

/* Quest map — 1080×3840 森林地圖底 */
.map-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 3840;
  height: auto;
  min-height: 0;
  border-radius: 20px;
  background: #d9c49a url("/assets/map-bg.webp?v=1") center / 100% 100% no-repeat;
  border: 2px solid var(--yellow);
  box-shadow:
    0 0 0 1px rgba(255, 202, 5, 0.35),
    0 0 14px rgba(255, 202, 5, 0.55),
    0 0 28px rgba(255, 214, 40, 0.32),
    var(--shadow);
  overflow: hidden;
  --map-pad: 4px;
}
.map-group-bubble {
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  border-radius: 18px;
  /* 分段：銅 → 銀 → 金（拉長到任務7）→ 彩虹；界線極細漸變 */
  background: linear-gradient(
    180deg,
    rgba(212, 146, 78, 0.4) 0%,
    rgba(193, 122, 56, 0.36) 21.2%,
    rgba(197, 204, 211, 0.42) 23.8%,
    rgba(168, 178, 188, 0.36) 43.2%,
    rgba(255, 216, 74, 0.4) 45.8%,
    rgba(230, 180, 0, 0.36) 66.2%,
    rgba(255, 90, 122, 0.34) 69.2%,
    rgba(255, 159, 26, 0.3) 80%,
    rgba(255, 202, 5, 0.3) 87%,
    rgba(52, 199, 89, 0.3) 92%,
    rgba(59, 130, 246, 0.32) 96%,
    rgba(168, 85, 247, 0.36) 100%
  );
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  pointer-events: none;
  overflow: hidden;
}
.map-board svg.map-route {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.map-bead line {
  stroke-linecap: round;
  fill: none;
}
/* 全部虛線淡黃光 */
.map-bead-todo .map-bead-rim,
.map-bead-todo .map-bead-core,
.map-bead-done .map-bead-rim,
.map-bead-done .map-bead-core,
.map-bead-done .map-bead-glow,
.map-bead-todo .map-bead-glow,
.map-bead-todo .map-bead-rim-on,
.map-bead-todo .map-bead-core-on {
  filter:
    drop-shadow(0 0 1.5px rgba(255, 214, 40, 0.45))
    drop-shadow(0 0 3px rgba(255, 202, 5, 0.28));
}
/* 未完成／充能熄燈底：灰實心 + 黃外框 */
.map-bead-todo .map-bead-rim {
  stroke: #ffca05;
  stroke-width: 1.9;
}
.map-bead-todo .map-bead-core {
  stroke: #8e8e93;
  stroke-width: 1.1;
}
/* 已完成／充能著燈／第1粒長著：黃光 + 白框 + 黃實心 */
.map-bead-done .map-bead-glow,
.map-bead-todo .map-bead-glow,
.map-bead-charge .map-bead-glow {
  stroke: rgba(255, 214, 40, 0.95);
  stroke-width: 4.2;
  pointer-events: none;
}
.map-bead-done .map-bead-rim-on,
.map-bead-todo .map-bead-rim-on,
.map-bead-done .map-bead-rim {
  stroke: #ffffff;
  stroke-width: 2.9;
}
.map-bead-done .map-bead-core-on,
.map-bead-todo .map-bead-core-on,
.map-bead-done .map-bead-core {
  stroke: #ffca05;
  stroke-width: 1.7;
}
/* 充能第1粒長著：永遠全亮，唔受動畫影響 */
.map-bead-charge-lead line {
  opacity: 1 !important;
  animation: none !important;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
  background: none;
  padding: 0;
  /* 淨係圓同 label／寶箱食 click，唔好成個 96px 盒亂中 */
  pointer-events: none;
}
.map-pin .node-bubble {
  position: relative;
  z-index: 1; /* graphic：任務圓喺寶箱之下 */
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  box-sizing: border-box;
  pointer-events: none;
}
/* 透明熱區：剛好等於任務圓，疊喺寶箱熱區之上（graphic 唔跟）
   用 inset+margin 置中，唔好同 pulse 嘅 transform:scale 互踩，否則 current 圓熱區會甩右下 */
.map-pin .node-bubble-hit {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center center;
}
.map-pin.current .node-bubble-hit {
  width: 64px;
  height: 64px;
  animation: map-node-pulse 3.5s ease-in-out infinite;
}
.map-pin.chest-pin .node-bubble-hit {
  width: 108px;
  height: 108px;
}
.map-pin .node-bubble .lock-ico,
.map-pin .node-bubble .check-ico {
  width: 22px;
  height: 22px;
  display: block;
}
.map-pin .node-bubble .check-ico {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}
/* 已完成：黃實圓 + 白框 + 黃外框／淡黃光，立體；白粗 tick */
.map-pin .node-bubble.done {
  background: linear-gradient(165deg, #ffe566 0%, #ffca05 42%, #e6b400 100%);
  color: #ffffff;
  border: 3px solid #ffffff;
  box-shadow:
    0 0 0 3px #e6b400,
    0 0 6px rgba(255, 202, 5, 0.4),
    0 0 12px rgba(255, 214, 40, 0.22),
    0 5px 0 #b8860b,
    0 8px 14px rgba(28, 28, 30, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -4px 6px rgba(160, 110, 0, 0.35);
}
/* 即將完成：白實圓 + 黃框 + 淡黃光，脈動 3.5s */
.map-pin .node-bubble.current {
  width: 64px;
  height: 64px;
  background: #ffffff;
  color: #1c1c1e;
  border: 3px solid #ffca05;
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 7px rgba(255, 202, 5, 0.45),
    0 0 14px rgba(255, 214, 40, 0.25),
    0 4px 10px rgba(28, 28, 30, 0.22);
  animation: map-node-pulse 3.5s ease-in-out infinite;
  font-size: 15px;
}
@keyframes map-node-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
/* 未完成：灰實圓 + 白框 + 淡黃光，立體；黃鎖 */
.map-pin .node-bubble.locked {
  background: linear-gradient(165deg, #c4bfb8 0%, #9a9590 45%, #7a7570 100%);
  color: #ffca05;
  border: 3px solid #ffffff;
  box-shadow:
    0 0 0 3px #6f6a65,
    0 0 6px rgba(255, 202, 5, 0.35),
    0 0 12px rgba(255, 214, 40, 0.2),
    0 5px 0 #524e4a,
    0 8px 14px rgba(28, 28, 30, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -4px 6px rgba(40, 38, 36, 0.35);
}
.map-pin .pin-label {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: #1c1c1e;
  background: #ffffff;
  border-radius: 16px;
  padding: 6px 12px;
  max-width: none;
  width: max-content;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
}
.map-pin .pin-label-num {
  display: block;
  color: #ffca05;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.map-pin .pin-label-name {
  display: block;
  color: #1c1c1e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.map-pin.current .pin-label,
.map-pin.locked .pin-label,
.map-pin.done .pin-label {
  color: #1c1c1e;
}
.map-pin .pin-label-final {
  gap: 0;
  padding: 7px 14px;
  background: linear-gradient(180deg, #ffe566 0%, #ffca05 55%, #e6b400 100%);
  box-shadow:
    0 0 8px rgba(255, 202, 5, 0.55),
    0 0 16px rgba(255, 214, 40, 0.35),
    0 2px 6px rgba(28, 28, 30, 0.18);
}
.map-pin .pin-label-final .pin-label-name {
  color: #1c1c1e;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* 關卡右上角：尖腳 + 寶箱（再放大） */
.map-pin .node-bubble-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.map-reward-pin {
  position: absolute;
  top: -44px;
  right: -27px;
  width: 56px;
  height: 72.8px;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
  transform-origin: center bottom;
}
.map-reward-pin-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(28, 28, 30, 0.35));
}
.map-reward-chest {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 34px;
  height: 34px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 1px rgba(28, 28, 30, 0.22));
  z-index: 1;
}
.map-reward-pin.is-current {
  animation: map-reward-pin-pulse 3.5s ease-in-out infinite;
}
.map-reward-pin.is-current .map-reward-pin-bg {
  filter:
    drop-shadow(0 0 3px rgba(255, 214, 40, 0.95))
    drop-shadow(0 0 10px rgba(255, 202, 5, 0.9))
    drop-shadow(0 1px 2px rgba(28, 28, 30, 0.28));
}
.map-reward-pin.is-current .map-reward-chest {
  width: 40px;
  height: 40px;
  filter:
    drop-shadow(0 0 3px rgba(255, 214, 40, 0.75))
    drop-shadow(0 1px 1px rgba(28, 28, 30, 0.22));
}
/* 已開啟：唔要尖腳，淨係放大開箱 */
.map-reward-pin.is-passed {
  top: -30px;
  right: -20px;
  width: 52px;
  height: 52px;
}
.map-reward-pin.is-passed .map-reward-pin-bg {
  display: none;
}
.map-reward-pin.is-passed .map-reward-chest {
  top: 50%;
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 1px 2px rgba(28, 28, 30, 0.28));
}
@keyframes map-reward-pin-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
/* 終極寶箱：超大黃圓 + 鑽石箱；未開時跟頂部目標箱一樣有孵化律動 */
.map-pin.chest-pin {
  width: 148px;
}
.map-pin.chest-pin .node-bubble.chest-final {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: linear-gradient(165deg, #ffe566 0%, #ffca05 40%, #e6b400 78%, #c99600 100%);
  color: #1c1c1e;
  border: 4px solid #ffffff;
  box-shadow:
    0 0 0 4px #ffca05,
    0 0 0 8px rgba(255, 214, 40, 0.35),
    0 0 18px rgba(255, 202, 5, 0.55),
    0 10px 22px rgba(28, 28, 30, 0.32),
    inset 0 3px 0 rgba(255, 255, 255, 0.55),
    inset 0 -6px 10px rgba(160, 110, 0, 0.35);
  display: grid;
  place-items: center;
  overflow: visible;
  transform-origin: center center;
}
/* 未開啟：同頂部 is-current 箱，3.5s 孵化放大＋黃光律動 */
.map-pin.chest-pin.locked .node-bubble.chest-final {
  animation: chest-final-hatch 3.5s ease-in-out infinite;
}
.map-pin.chest-pin.locked .chest-final-img {
  animation: chest-final-img-hatch 3.5s ease-in-out infinite;
}
.map-pin.chest-pin.is-chest-next .node-bubble.chest-final {
  animation: chest-final-hatch 3.5s ease-in-out infinite;
}
@keyframes chest-final-hatch {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px #ffca05,
      0 0 0 8px rgba(255, 214, 40, 0.35),
      0 0 16px rgba(255, 202, 5, 0.55),
      0 0 28px rgba(255, 180, 0, 0.3),
      0 10px 22px rgba(28, 28, 30, 0.32),
      inset 0 3px 0 rgba(255, 255, 255, 0.55),
      inset 0 -6px 10px rgba(160, 110, 0, 0.35);
  }
  50% {
    transform: scale(1.1);
    box-shadow:
      0 0 0 4px #ffe566,
      0 0 0 9px rgba(255, 214, 40, 0.55),
      0 0 24px rgba(255, 202, 5, 0.85),
      0 0 40px rgba(255, 180, 0, 0.45),
      0 10px 22px rgba(28, 28, 30, 0.32),
      inset 0 3px 0 rgba(255, 255, 255, 0.65),
      inset 0 -6px 10px rgba(160, 110, 0, 0.35);
  }
}
@keyframes chest-final-img-hatch {
  0%, 100% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 4px rgba(255, 214, 40, 0.45))
      drop-shadow(0 2px 4px rgba(28, 28, 30, 0.28));
  }
  50% {
    transform: scale(1.08);
    filter:
      drop-shadow(0 0 8px rgba(255, 214, 40, 0.8))
      drop-shadow(0 0 14px rgba(255, 202, 5, 0.55))
      drop-shadow(0 2px 4px rgba(28, 28, 30, 0.28));
  }
}
.map-pin.chest-pin .chest-final-img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 4px rgba(255, 214, 40, 0.4))
    drop-shadow(0 2px 4px rgba(28, 28, 30, 0.28));
}
/* 已開啟：停孵化，淨係開箱放大 */
.map-pin.chest-pin.done .node-bubble.chest-final {
  animation: none;
}
.map-pin.chest-pin.done .chest-final-img {
  width: 84px;
  height: 84px;
  animation: none;
  filter:
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.45))
    drop-shadow(0 2px 4px rgba(28, 28, 30, 0.28));
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Rewards */
#rewardsList {
  display: grid;
  gap: 28px;
  padding: 14px 8px 6px 0;
  overflow: visible;
}
.tier-card {
  position: relative;
  overflow: visible;
  border-radius: 18px;
  padding: 0;
  border: 2px solid #c5c5c7;
  background: transparent;
  box-shadow: none;
  /* 4 張都用返「進行中」嗰種放大 */
  transform: scale(1.03);
  transform-origin: center top;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tier-card.is-done {
  border-color: var(--yellow);
  box-shadow:
    0 0 0 1px rgba(255, 202, 5, 0.35),
    0 0 14px rgba(255, 202, 5, 0.55),
    0 0 28px rgba(255, 214, 40, 0.28);
}
.tier-card.is-current {
  border-color: #34c759;
  z-index: 1;
  box-shadow:
    0 0 0 1px rgba(52, 199, 89, 0.35),
    0 0 14px rgba(52, 199, 89, 0.5),
    0 0 28px rgba(52, 199, 89, 0.25),
    0 10px 24px rgba(28, 28, 30, 0.08);
}
.tier-card.is-todo {
  border-color: #c5c5c7;
  box-shadow: none;
}
.tier-status {
  position: absolute;
  top: -10px;
  right: -8px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--apricot);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  border: 2px solid #c5c5c7;
  box-shadow: 0 2px 6px rgba(28, 28, 30, 0.08);
}
.tier-card.is-done .tier-status {
  border-color: var(--yellow);
  box-shadow:
    0 0 8px rgba(255, 202, 5, 0.55),
    0 0 16px rgba(255, 214, 40, 0.28),
    0 2px 6px rgba(28, 28, 30, 0.1);
}
.tier-card.is-current .tier-status {
  border-color: #34c759;
  box-shadow:
    0 0 8px rgba(52, 199, 89, 0.5),
    0 0 16px rgba(52, 199, 89, 0.28),
    0 2px 6px rgba(28, 28, 30, 0.1);
}
.tier-card.is-todo .tier-status {
  border-color: #c5c5c7;
  color: var(--ink-soft);
  box-shadow: none;
}
.tier-body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.85fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-radius: 16px;
  min-height: 100%;
}
.tier-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 10px 10px 14px;
  background-color: #f7f1e6;
  background-image: url("/assets/reward-card-bg.jpg?v=1");
  background-size: cover;
  background-position: center;
}
.tier-name {
  position: absolute;
  top: -12px;
  left: -8px;
  z-index: 2;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 8px rgba(28, 28, 30, 0.14);
  -webkit-font-smoothing: antialiased;
}
.tier-card.tone-bronze .tier-name {
  background: linear-gradient(180deg, #d4924e 0%, #c17a38 100%);
  text-shadow: 0 1px 1px rgba(80, 40, 10, 0.25);
}
.tier-card.tone-silver .tier-name {
  background: linear-gradient(180deg, #e8ecf0 0%, #c5ccd3 100%);
  color: #2f343a;
  border-color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}
.tier-card.tone-gold .tier-name {
  background: linear-gradient(180deg, #ffd84a 0%, #ffca05 100%);
  color: #1c1c1e;
  border-color: rgba(255, 255, 255, 0.65);
  text-shadow: none;
}
.tier-card.tone-rainbow .tier-name {
  background: linear-gradient(
    90deg,
    #ff5a7a 0%,
    #ff9f1a 18%,
    #ffca05 36%,
    #34c759 54%,
    #3b82f6 72%,
    #a855f7 100%
  );
  color: #fff;
  text-shadow: 0 1px 1px rgba(28, 28, 30, 0.3);
  border-color: rgba(255, 255, 255, 0.65);
}
.tier-gift-label {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.tier-reward {
  margin: 2px 0 10px;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.28;
  color: var(--yellow);
  letter-spacing: 0.02em;
  -webkit-text-stroke: 3px #1c1c1e;
  paint-order: stroke fill;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
}
.tier-detail {
  margin-top: 0;
  font-size: 14.5px;
  color: var(--grey);
  line-height: 1.55;
}
.tier-claim {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}
.tier-claim-label {
  color: var(--ink-soft);
  font-weight: 600;
}
.tier-terms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--yellow-deep);
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  box-shadow: 0 6px 14px rgba(230, 180, 0, 0.24);
  cursor: pointer;
}
.tier-terms-btn:active {
  transform: translateY(1px);
}
.terms-sheet {
  background: #fff;
  max-height: min(92vh, 860px);
  padding: 18px 16px 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.terms-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.terms-title {
  margin: 4px 0 4px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
}
.terms-subtitle {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--yellow-deep);
  text-align: center;
}
.terms-lead {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.terms-em {
  color: var(--yellow-deep);
  font-weight: 800;
  font-size: 1.05em;
}
.terms-h {
  margin: 18px 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.terms-strong {
  margin: 10px 0 6px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
}
.terms-list {
  margin: 0 0 8px;
  padding-left: 1.2em;
}
.terms-list li {
  margin: 0 0 6px;
}
.terms-list--muted li,
.terms-note {
  color: var(--grey);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 500;
}
.terms-table-wrap {
  overflow-x: auto;
  margin: 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.terms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.terms-table th,
.terms-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
.terms-table thead th {
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}
.terms-table tbody th {
  width: 32%;
  font-weight: 800;
  color: var(--ink);
  background: #faf8f3;
}
.terms-table tr:last-child th,
.terms-table tr:last-child td {
  border-bottom: none;
}
.terms-boardgame {
  margin: 10px 0 4px;
}
.terms-boardgame img {
  display: block;
  width: 100%;
  border-radius: 12px;
  background: transparent;
}
.terms-boardgame figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grey);
}
.tier-prize {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex: 1 1 auto;
  margin: 8px -4px -2px;
  width: calc(100% + 8px);
  min-height: 0;
}
.tier-prize-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  bottom: auto;
  z-index: 0;
  width: 125%;
  height: 95%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(255, 248, 210, 0.98) 0%,
    rgba(255, 226, 90, 0.72) 22%,
    rgba(255, 202, 5, 0.42) 42%,
    rgba(255, 190, 40, 0.18) 62%,
    rgba(255, 202, 5, 0) 78%
  );
  filter: blur(18px);
  pointer-events: none;
}
.tier-prize-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 2px 6px rgba(28, 28, 30, 0.1));
}
.tier-card.is-popup {
  transform: none;
}
.reward-sheet {
  background: transparent;
  box-shadow: none;
  padding: 36px 14px 22px;
  overflow: visible;
  max-height: min(94vh, 820px);
}
.reward-sheet .modal-close {
  top: 0;
  right: 4px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(28, 28, 30, 0.12);
}
.notice-sheet .lead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 16px;
}
.notice-wa-link {
  color: var(--yellow-deep);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 彈窗右上 ✕ 唔好遮住「已完成／進行中」藥丸 */
.tier-card.is-popup .tier-status {
  right: 30px;
}
#rewardBody {
  overflow: visible;
  padding: 8px 6px 4px 0;
}
.reward-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.35;
  color: #1c1c1e;
  background: linear-gradient(180deg, #ffe566 0%, #ffca05 55%, #e6b400 100%);
  box-shadow:
    0 0 12px rgba(255, 202, 5, 0.45),
    0 4px 12px rgba(28, 28, 30, 0.12);
}

/* Reward unlock celebrate */
.celebrate-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
}
.celebrate-overlay.hidden { display: none !important; }
.celebrate-dim {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 14, 0.72);
  transition: background 0.35s ease;
}
.celebrate-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.celebrate-flash.is-on {
  animation: celebrate-flash 0.55s ease-in-out forwards;
}
@keyframes celebrate-flash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}
.celebrate-stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(420px, 92vw);
  min-height: 280px;
  padding: 24px 12px 40px;
  pointer-events: none;
}
.celebrate-overlay.is-await {
  cursor: pointer;
}
.celebrate-overlay.is-await .celebrate-dim,
.celebrate-overlay.is-await .celebrate-stage,
.celebrate-overlay.is-await .celebrate-chest-hit {
  pointer-events: auto;
  cursor: pointer;
}
.celebrate-copy-top {
  text-align: center;
  margin-bottom: 18px;
}
.celebrate-congrats {
  font-size: 42px;
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-shadow:
    0 0 16px rgba(255, 202, 5, 0.55),
    0 2px 0 rgba(140, 100, 0, 0.25);
}
.celebrate-got {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}
.celebrate-copy-bot {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}
.celebrate-chest-hit {
  position: relative;
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}
.celebrate-blur {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.55) 42%,
    rgba(255, 255, 255, 0) 72%
  );
  filter: blur(18px);
  z-index: 0;
  pointer-events: none;
}
.celebrate-blur.is-expand {
  animation: celebrate-blur-expand 1s ease-out forwards;
}
@keyframes celebrate-blur-expand {
  0% {
    width: 150px;
    height: 150px;
    filter: blur(18px);
    opacity: 1;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.55) 42%,
      rgba(255, 255, 255, 0) 72%
    );
  }
  100% {
    width: 240vmax;
    height: 240vmax;
    filter: blur(28px);
    opacity: 0.92;
    background: radial-gradient(
      circle,
      rgba(255, 252, 240, 0.98) 0%,
      rgba(255, 248, 220, 0.75) 40%,
      rgba(255, 255, 255, 0.35) 70%
    );
  }
}
.celebrate-chest {
  position: relative;
  z-index: 1;
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  transform-origin: 50% 78%;
}
.celebrate-chest.is-pulse {
  animation: celebrate-chest-pulse 1.6s ease-in-out infinite;
}
@keyframes celebrate-chest-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.celebrate-chest.is-hatching {
  animation: celebrate-chest-hatch 0.1s ease-in-out 10;
}
@keyframes celebrate-chest-hatch {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-14deg) translateY(-4px); }
  50% { transform: rotate(14deg) translateY(-5px); }
  75% { transform: rotate(-10deg) translateY(-2px); }
}
.celebrate-hand {
  position: absolute;
  right: 20%;
  bottom: 18%;
  width: 72px;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 6px rgba(28, 28, 30, 0.28));
  animation: celebrate-hand-bob 0.95s ease-in-out infinite;
  transform-origin: 20% 15%;
}
.celebrate-hand img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-18deg);
}
@keyframes celebrate-hand-bob {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-6px, -6px); }
}
.celebrate-overlay.is-hatching .celebrate-hand,
.celebrate-overlay.is-await .celebrate-hand {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .celebrate-chest.is-pulse,
  .celebrate-chest.is-hatching,
  .celebrate-hand,
  .celebrate-blur.is-expand,
  .celebrate-flash.is-on {
    animation: none;
  }
}
.tier-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 26px 14px 16px;
  text-align: center;
  background: #fff;
}
.tier-right-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
}
.tier-right-copy .hook-label {
  font-size: 12px;
  color: var(--grey);
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.tier-hook-stage {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
  text-align: center;
}
.tier-hook-need {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  text-align: center;
}
.tier-remain-num {
  display: inline-block;
  margin: 0 2px;
  font-size: 34px;
  font-weight: 800;
  color: var(--yellow-deep);
  line-height: 1;
  vertical-align: -2px;
  text-shadow: 0 0 10px rgba(255, 202, 5, 0.45);
}
.tier-hook-done {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.tier-hook-locked {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.35;
  white-space: normal;
  text-align: center;
}
.tier-chest-ring {
  width: 124px;
  height: 124px;
}
.tier-chest-ring .chest-img {
  inset: 14%;
  width: 72%;
  height: 72%;
}
.tier-card.is-done .tier-chest-ring .chest-img {
  animation: none;
}
.tier-card.is-todo .tier-chest-ring .chest-img {
  animation: none;
  filter: grayscale(0.2) drop-shadow(0 2px 4px rgba(28, 28, 30, 0.14));
}

@media (max-width: 380px) {
  .tier-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tier-right {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .tier-right-copy { align-items: flex-start; }
  .tier-hook-locked { max-width: none; }
}

/* Offers — aligned with goldpulse-radar list */
.offers-list { display: grid; gap: 12px; }
.offer-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}
.offer-card-media {
  aspect-ratio: 750 / 330;
  background: var(--apricot);
  overflow: hidden;
  line-height: 0;
}
.offer-card-media picture,
.offer-card-media img {
  display: block;
  width: 100%;
  height: 100%;
}
.offer-card-media img {
  object-fit: cover;
  object-position: center;
}
/* 雷達 banner 較闊，cover 會裁左右；偏左對焦令「黃金交易」唔被 crop */
.offer-card-media--radar img {
  object-position: left center;
}
.offer-card-body { padding: 12px 14px 14px; }
.offer-card-title { font-size: 15px; font-weight: 700; }
.offer-card-desc { margin-top: 4px; font-size: 12px; color: var(--grey); line-height: 1.45; }
.offer-card--featured .offer-card-body { padding-bottom: 16px; }
.offer-card--featured .offer-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Bottom nav — 白色，伸入安全區 */
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(480px, 100%);
  height: auto;
  min-height: var(--nav-h);
  padding: 8px 10px calc(10px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: #ffffff;
  backdrop-filter: none;
  border-top: 1px solid var(--line);
  z-index: 40;
}
.bottom-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
  box-shadow: 0 24px 0 24px #ffffff;
  pointer-events: none;
}
.bottom-nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--grey);
  border-radius: 12px;
  padding: 8px 6px;
}
.bottom-nav-item .nav-ico {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.bottom-nav-item .nav-ico svg {
  width: 22px;
  height: 22px;
  display: block;
}
.bottom-nav-item .nav-label { line-height: 1; }
.bottom-nav-item.active {
  color: var(--gold);
  background: var(--bg-soft);
}
.bottom-nav-item.active .nav-ico { color: var(--yellow-deep); }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 30, .45);
}
.modal-sheet {
  position: relative;
  width: min(480px, 100%);
  max-height: min(92vh, 720px);
  overflow: auto;
  background: var(--white);
  border-radius: 22px 22px 0 0;
  padding: 18px 18px 28px;
  box-shadow: 0 -12px 40px rgba(0,0,0,.18);
  animation: sheet .28s ease;
}
.modal-sheet.task-sheet {
  max-height: min(94vh, 860px);
}
@keyframes sheet {
  from { transform: translateY(24px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f1ec;
  color: var(--ink-soft);
}
.modal h2 {
  font-size: 20px;
  margin: 4px 0 6px;
}
.modal .lead {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.45;
  margin-bottom: 14px;
}
.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink-soft);
}
.field input {
  width: 100%;
  border: 1px solid var(--line);
  background: #faf8f3;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
}
.field input:focus {
  border-color: var(--yellow-deep);
  box-shadow: 0 0 0 3px rgba(255, 202, 5, .25);
}
.field input.is-invalid {
  border-color: #d9480f;
  background: #fff5f2;
  box-shadow: 0 0 0 3px rgba(217, 72, 15, .18);
}
.field-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--grey);
  line-height: 1.4;
}
.field-hint.is-error {
  color: #d9480f;
  font-weight: 600;
}
.auth-note {
  font-size: 12px;
  color: #8a6a00;
  background: var(--bg-soft);
  border: 1px solid var(--apricot-deep);
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1.45;
  margin: 4px 0 14px;
}
.btn-primary {
  width: 100%;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 16px;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(230, 180, 0, .28);
}
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.auth-switch {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--grey);
}
.auth-switch button {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.otp-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 8px 0 14px;
}
.otp-box {
  width: 100%;
  aspect-ratio: 0.9;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: #faf8f3;
  border-radius: 12px;
  outline: none;
}
.otp-box:focus {
  border-color: var(--yellow-deep);
  box-shadow: 0 0 0 3px rgba(255, 202, 5, .25);
}
.btn-ghost {
  white-space: nowrap;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
}
.task-sheet .stars { color: var(--yellow-deep); letter-spacing: 1px; }
.task-sheet .task-num {
  margin: 0;
  color: #ffca05;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.task-sheet .task-title {
  margin: 8px 0 12px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
.task-sheet .task-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.task-sheet .task-body p { margin: 0 0 10px; }
.task-sheet .task-lead {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 12px !important;
}
.task-sheet .task-subhead {
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  font-size: 14.5px;
  color: var(--ink);
}
.task-sheet .task-section {
  margin: 16px 0 8px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.task-sheet .task-em {
  color: var(--yellow-deep);
  font-weight: 800;
}
.task-sheet .task-tip {
  margin: 8px 0 !important;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.task-sheet .task-tip--cta {
  margin: 14px 0 !important;
}
.task-sheet .task-tip--cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--yellow-deep);
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  color: var(--ink) !important;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(230, 180, 0, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.task-sheet .task-tip--cta a:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(230, 180, 0, 0.22);
}
.task-sheet .task-tip--cta .task-tip--disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(28, 28, 30, 0.12);
  background: linear-gradient(180deg, #e8e8ea 0%, #c8c8cc 100%);
  color: #6b6b70;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  cursor: not-allowed;
  user-select: none;
  box-shadow: none;
  pointer-events: none;
}
.tier-reward-note {
  margin: -4px 0 10px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.task-playlist-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 202, 5, 0.55);
  background: linear-gradient(165deg, #fff8d6 0%, #ffe566 55%, #ffca05 100%);
  color: var(--ink);
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(230, 180, 0, 0.22);
}
.task-playlist-badge {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ff0000;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(28, 28, 30, 0.2);
}
.task-playlist-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.task-playlist-copy strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}
.task-playlist-copy small {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
}
.task-sheet .task-links { margin: 6px 0 12px !important; }
.task-sheet .task-body a {
  color: var(--yellow-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.task-sheet .task-list {
  margin: 0 0 12px;
  padding-left: 1.2em;
}
.task-sheet .task-list--num {
  list-style: decimal;
  padding-left: 1.4em;
}
.task-sheet .task-list li {
  margin: 0 0 8px;
}
.task-sheet .task-callout {
  margin: 12px 0 !important;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(255, 202, 5, 0.14);
  border: 1.5px solid rgba(230, 180, 0, 0.42);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.55;
}
.task-sheet .task-promo {
  margin: 14px 0 4px;
  padding: 12px 12px 4px;
  border-radius: 14px;
  background: rgba(255, 202, 5, 0.12);
  border: 1px solid rgba(255, 202, 5, 0.35);
}
.task-sheet .task-promo-title {
  margin: 0 0 8px !important;
  font-size: 15px;
  font-weight: 800;
}
.task-videos {
  display: grid;
  gap: 12px;
  margin: 14px 0 4px;
}
.task-video {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.task-video.is-done {
  border-color: rgba(255, 202, 5, 0.65);
  box-shadow: 0 0 0 1px rgba(255, 202, 5, 0.2);
}
.task-video-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.task-video-pct {
  color: var(--yellow-deep);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}
.task-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
}
.task-video--short {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.task-video--short .task-video-head {
  width: 100%;
  box-sizing: border-box;
}
.task-video-frame--short {
  width: min(100%, 260px);
  aspect-ratio: 9 / 16;
  border-radius: 0;
  margin: 0 auto;
}
.task-video-frame iframe,
.task-video-frame > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.task-video-bar {
  height: 6px;
  background: #efe8da;
}
.task-video-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ffe566, #ffca05);
  transition: width 0.2s ease;
}
.task-sheet .task-how {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.task-sheet .task-disclaimer {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--grey);
}
.task-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.task-actions.is-done {
  grid-template-columns: 1fr;
}
.task-actions .btn-primary,
.task-actions .btn-ghost {
  width: 100%;
  padding: 12px 10px;
  text-align: center;
}
.muted { color: var(--grey); font-size: 12px; }

/* Avatar 1:1 crop */
.avatar-crop-sheet {
  max-height: min(94vh, 760px);
}
.avatar-crop-stage {
  display: grid;
  place-items: center;
  margin: 8px 0 14px;
}
.avatar-crop-viewport {
  position: relative;
  width: min(78vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #1c1c1e;
  touch-action: none;
  cursor: grab;
  user-select: none;
  box-shadow: 0 0 0 3px #ffca05, 0 10px 28px rgba(0, 0, 0, 0.18);
}
.avatar-crop-viewport.is-dragging {
  cursor: grabbing;
}
.avatar-crop-viewport img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
  -webkit-user-drag: none;
}
.avatar-crop-frame {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.avatar-crop-zoom {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.avatar-crop-zoom input[type="range"] {
  width: 100%;
  accent-color: var(--yellow-deep);
}
.avatar-crop-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}
.avatar-crop-actions .btn-ghost,
.avatar-crop-actions .btn-primary {
  width: 100%;
  padding: 12px 10px;
}

@media (min-width: 520px) {
  .modal { place-items: center; }
  .modal-sheet {
    border-radius: 22px;
    margin: 16px;
  }
}

/* Register disclaimer gate */
#registerGateModal {
  z-index: 95;
}
.register-gate-sheet {
  max-height: min(92vh, 760px);
  display: flex;
  flex-direction: column;
}
.register-gate-copy {
  flex: 1 1 auto;
  max-height: min(58vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 4px 0 16px;
  padding-right: 2px;
}
.register-gate-lead {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
}
.register-gate-copy p {
  margin: 0 0 10px;
}
.register-gate-copy ul {
  margin: 0 0 10px;
  padding-left: 1.2em;
}
.register-gate-copy li {
  margin: 0 0 4px;
}
.register-gate-copy .gate-em {
  color: var(--yellow-deep);
  font-weight: 800;
}
.register-gate-copy a {
  color: var(--yellow-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.register-gate-copy a:active {
  opacity: 0.75;
}
.register-gate-ack {
  margin: 4px 0 0 !important;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(217, 72, 15, 0.14);
  border: 1px solid rgba(217, 72, 15, 0.28);
  color: var(--ink);
  font-weight: 600;
}
#registerGateAccept:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}