/* ============================================================
   基礎重置與全域設定
   ============================================================ */

/* 清除所有元素預設邊距與 box model 統一為 border-box */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100svh;
  background-color: #000;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  user-select: none; /* 關閉長按選取 */
  -webkit-user-select: none;
  overscroll-behavior: none;
  touch-action: pan-y;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

#loading-screen {
  position: fixed;
  inset: 0;
  background-color: #000; /* 跟你的背景色一致 */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}

#loading-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}
/* ============================================================
   背景層
   ============================================================ */

.bg-middle {
  position: fixed; /* 改為 absolute，相對於父層 body 或 container */
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  /* 關鍵：背景寬度要跟 app-container 一致 */
  width: 100%;
  max-width: calc(100svh * (390 / 659));

  background-image: url("images/BG.png");
  background-size: contain; /* 改用 contain 確保圖片 100% 顯示不被切 */
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.bg-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  z-index: 5;
  pointer-events: none;
}

.bg-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  z-index: 5;
  pointer-events: none;
}

/* ============================================================
   頁面容器
   ============================================================ */

/* 主容器：使用 dvh 取代 vh，讓 iOS Safari 正確排除網址列高度 */
.app-container {
  position: absolute; /* 固定定位，覆蓋整個視窗 */
  overflow-y: auto; /* ✅ 必須是 scroll 或 auto，JS 才能偵測到 */
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior-y: contain; /* 防止捲到底時觸發頁面回彈 */

  top: 0; /* 從頂端開始 */
  bottom: 0; /* 延伸到底端 */
  left: 0; /* 從左端開始 */
  right: 0; /* 延伸到右端 */
  margin: 0 auto; /* 水平置中容器本身，不影響子元素 */

  max-width: calc(100svh * (390 / 659)); /* 依照設計稿比例限制最大寬度 */

  width: 100%; /* 預設撐滿可用寬度 */
  height: 100svh;
  z-index: 10; /* 確保在其他內容之上 */
  background: transparent; /* 背景透明，讓下層背景顯示 */
}

.app-container::-webkit-scrollbar {
  display: none;
}

/* 媒體查詢：視窗寬度 >= 480px 時（平板、桌機）套用以下設定 */
@media (min-width: 480px) {
  /* 主容器與中層背景：改用 aspect-ratio 控制比例，以 dvh 計算定位 */
  .app-container,
  .bg-middle {
    width: auto;
    height: 100%;
    aspect-ratio: 390 / 659;
    left: 50%;
    right: auto; /* 加這行，清除 right: 0 的影響 */
    transform: translateX(-50%);
  }
  .bg-top {
    width: calc(100svh * (390 / 659)); /* 寬度等於容器寬度（用 dvh 計算） */
    height: auto; /* 高度自動等比，不變形 */
    left: 50%; /* 左邊界移到視窗中央 */
    transform: translateX(-50%); /* 水平置中 */
  }

  .bg-bottom {
    width: calc(100svh * (390 / 659)); /* 寬度等於容器寬度（用 dvh 計算） */
    height: auto; /* 高度自動等比，不變形 */
    left: 50%; /* 左邊界移到視窗中央 */
    transform: translateX(-50%); /* 水平置中 */
  }
}

/* ============================================================
   單一頁面
   ============================================================ */

.page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100svh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.page.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   左上角 Logo 群組
   ============================================================ */

.logo-group.top-left {
  position: absolute;
  top: 5%;
  left: 6%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2%;
  z-index: 15;
}

.logo-group .logo-a {
  width: 50%;
  height: auto;
  margin-bottom: 30px;
}

.logo-group .logo-b {
  width: 80%;
  height: auto;
}

.logo-group .text-b {
  width: 60%;
  height: auto;
}

/* ============================================================
   置中文字（Text_A）
   ============================================================ */

.text-block.text-center-top {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  z-index: 15;
}

.text-block img {
  width: 100%;
  height: auto;
}

/* ============================================================
   地圖 + 印章區
   ============================================================ */

.map-area {
  position: absolute;
  width: 76%;
  top: 57%;
  left: 48%;
  transform: translate(-50%, -50%);
  z-index: 15;
}

.map-bg {
  width: 100%;
  height: auto;
  display: block;
}

.stamp-slot {
  position: absolute;
  width: 42%;
}

/* 印章1：左下角（402） */
#stamp-slot-1 {
  bottom: -20%;
  left: -9%;
}

/* 印章2：右上角（Main） */
#stamp-slot-2 {
  top: -17%;
  right: -10%;
}

.stamp-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.4s ease;
}

.stamp-slot .stamp-off {
  opacity: 1;
}

.stamp-slot .stamp-on {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.stamp-slot.is-collected .stamp-off {
  opacity: 0;
}

.stamp-slot.is-collected .stamp-on {
  opacity: 1;
}

@keyframes stampDrop {
  0% {
    transform: scale(1.4) rotate(-8deg);
    opacity: 0;
  }
  60% {
    transform: scale(0.95) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.stamp-animate {
  animation: stampDrop 0.5s ease-out forwards;
}

/* ============================================================
   按鈕
   ============================================================ */

.btn-corner {
  position: absolute;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 15;
}

.btn-corner img {
  width: 100%;
  height: auto;
  display: block;
}

.btn-corner.bottom-right {
  right: max(4%, 20px);
  bottom: calc(6% + env(safe-area-inset-bottom));
}

.btn-corner.bottom-center {
  bottom: calc(6% + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
}

.btn-corner.btn-scan {
  width: 50%;
}
.btn-corner.btn-back {
  width: 50%;
}

/* ============================================================
   掃描頁：相機 video 與掃描框
   ============================================================ */

.scan-wrapper {
  position: absolute;
  width: 72%;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  aspect-ratio: 1 / 1; /* ← 加這行 */
  overflow: hidden; /* ← 加這行，裁掉超出的部分 */
  border-radius: 8%; /* ← 加這行，跟 video 的圓角一致 */
}
#qr-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8%;
  display: block;
}

.scan-frame {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: auto;
  pointer-events: none;
  z-index: 14;
}

/* ============================================================
   已兌換完畢頁：大圖示置中
   ============================================================ */

.redeem-group {
  position: absolute;
  right: 6%;
  bottom: 6%;
  display: flex;
  flex-direction: column; /* 上下排列 */
  align-items: flex-end; /* 靠右對齊 */
  gap: 15px;
  z-index: 15;
}

.text-c {
  width: 52%; /* 調整文字寬度 */
  height: auto;
  transition: opacity 0.3s ease;
}

.text-c.is-hidden {
  display: none;
}

/* 按鈕不需要再用 bottom-right 定位，改由 redeem-group 控制 */
.redeem-group .btn-redeem {
  position: static; /* 取消原本的 absolute，交給父層排版 */
  width: 53%; /* 按鈕寬度填滿父容器 */
}

/* 1. 強化動畫定義，加入硬體加速屬性 */
@keyframes redeemStampDrop {
  0% {
    /* 使用 translate3d 觸發硬體加速 */
    transform: translate3d(-50%, -50%, 0) scale(2);
    opacity: 0;
  }
  60% {
    transform: translate3d(-50%, -50%, 0) scale(0.9) rotate(-5deg);
    opacity: 1;
  }
  80% {
    transform: translate3d(-50%, -50%, 0) scale(1.1) rotate(3deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* 2. 初始狀態優化 */
.redeemed-stamp {
  position: absolute;
  top: 55%;
  left: 51%;
  /* 預設先放在中心並透明，但不要 display: none */
  transform: translate3d(-50%, -50%, 0) scale(0);
  width: 85%;
  z-index: 30;
  pointer-events: none;
  opacity: 0;

  /* 防止 iOS 渲染閃爍的關鍵屬性 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.redeemed-stamp.is-visible {
  /* 移除原本的 transition，改用純 animation 控制 */
  animation: redeemStampDrop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)
    forwards;
}

/* ============================================================
   頁面切換動畫（淡入）
   ============================================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 已兌換狀態 */
#page-complete.is-redeemed .text-b {
  display: none;
}

#page-complete.is-redeemed .stamp-slot {
  filter: brightness(0.3); /* 數值越小越暗，0.3 代表原本亮度的 30% */
  transition: filter 0.5s ease; /* 增加平滑過渡感 */
}

/* 改成這樣 */
#page-complete.is-redeemed .redeemed-stamp {
  opacity: 1;
}