:root {
  --vh: 1vh;
  --rose: #ef4d74;
  --pink-bg: #f6a5c0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f6a5c0;
  font-family: "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.home-app {
  width: 100%;
  height: 100%;
}

.home-stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(var(--vh) * 100 * 1500 / 2667));
  aspect-ratio: 1500 / 2667;
  height: auto;
  overflow: hidden;
  background: #f6a5c0;
  transform: translate(-50%, -50%);
  transform-origin: center;
  container-type: inline-size;
}

.home-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
}

button img,
.pop-card-img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

[hidden] {
  display: none !important;
}

/* ===== 主標題（靜態） ===== */
.home-title {
  position: absolute;
  left: 6.39%;
  top: 5%;
  width: 86.18%;
  height: auto;
  z-index: 1;
}

/* ===== 地圖箭頭：由下往上依序浮現 ===== */
.arrows {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 預設隱藏；待初訪彈窗關閉後（.arrows.is-playing）才開始動畫 */
.arrow {
  position: absolute;
  height: auto;
  opacity: 0;
  /* 起始位置略低並縮小，動畫時往上浮現 */
  transform: translateY(14%) scale(0.9);
}

.arrow--orange {
  left: 59.03%;
  top: 85.86%;
  width: 7.85%;
}

/* 此元件左側有 17px 透明留白，寬度與 left 已做補償 */
.arrow--teal {
  left: 35.83%;
  top: 64.69%;
  width: 10.84%;
}

.arrow--pink {
  left: 26.81%;
  top: 49.57%;
  width: 8.61%;
}

/* ===== 一整輪循環（6s）：橘→藍綠→粉紅 依序浮現 → 徽章抖動 → 停留 → 淡出 → 重來
   三個箭頭與徽章共用同一組 6s 時間軸、由 .home-app.is-playing 同時啟動，確保每輪都同步。
   （不能用 animation-delay 做錯開，delay 只在第一輪生效，循環後就會失準） ===== */
.home-app.is-playing .arrow--orange {
  animation: arrow-loop-orange 6s linear infinite;
}

.home-app.is-playing .arrow--teal {
  animation: arrow-loop-teal 6s linear infinite;
}

.home-app.is-playing .arrow--pink {
  animation: arrow-loop-pink 6s linear infinite;
}

/* 橘：0.3s 開始浮現 → 1.2s 到位 */
@keyframes arrow-loop-orange {
  0%, 5%    { opacity: 0; transform: translateY(14%) scale(0.9); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  20%, 82%  { opacity: 1; transform: translateY(0) scale(1); }
  92%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* 藍綠：0.9s 開始浮現 → 1.8s 到位 */
@keyframes arrow-loop-teal {
  0%, 15%   { opacity: 0; transform: translateY(14%) scale(0.9); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  30%, 82%  { opacity: 1; transform: translateY(0) scale(1); }
  92%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* 粉紅：1.5s 開始浮現 → 2.4s 到位 */
@keyframes arrow-loop-pink {
  0%, 25%   { opacity: 0; transform: translateY(14%) scale(0.9); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  40%, 82%  { opacity: 1; transform: translateY(0) scale(1); }
  92%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* 我的徽章招牌 */
.badge-sign {
  position: absolute;
  left: 50%;
  top: 22.2%;
  transform: translateX(-50%);
  width: 57%;
  z-index: 3;
  transform-origin: 50% 35%;
  will-change: transform;
}

/* 與箭頭共用同一條 6s 時間軸：等三個箭頭都到位（2.4s）後才抖動 */
.home-app.is-playing .badge-sign {
  animation: badge-shake 6s ease-in-out infinite;
}

/* 抖動：43%(2.58s) 開始快速左右擺動，逐漸收斂於 63%(3.78s) */
@keyframes badge-shake {
  0%, 43%, 63%, 100% { transform: translateX(-50%) rotate(0deg); }
  46% { transform: translateX(-50%) rotate(-2.4deg); }
  49% { transform: translateX(-50%) rotate(2.2deg); }
  52% { transform: translateX(-50%) rotate(-1.7deg); }
  55% { transform: translateX(-50%) rotate(1.3deg); }
  58% { transform: translateX(-50%) rotate(-0.8deg); }
  61% { transform: translateX(-50%) rotate(0.4deg); }
}

/* 系統設定「減少動態」時關閉循環動畫；需放在動畫宣告之後才會生效 */
@media (prefers-reduced-motion: reduce) {
  .home-app.is-playing .arrow {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .home-app.is-playing .badge-sign {
    animation: none;
  }
}

/* 參加抽獎 icon（兩關完成後顯示） */
.lottery-fab {
  position: absolute;
  left: 5%;
  top: 17.6%;
  width: 15.5%;
  z-index: 4;
  animation: fab-bounce 1.6s ease-in-out infinite;
}

@keyframes fab-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5%); }
}

/* 關卡入口（灰/彩由 home.js 切換圖片） */
.gate {
  position: absolute;
  z-index: 2;
}

.gate:active {
  filter: brightness(1.06);
}

.gate--2 {
  left: 34.5%;
  top: 40.2%;
  width: 40.5%;
}

.gate--1 {
  left: 21.5%;
  top: 67.8%;
  width: 44%;
}

/* 底部頁籤 */
.tabbar {
  position: absolute;
  left: 50%;
  bottom: 2.1%;
  transform: translateX(-50%);
  width: 86%;
  z-index: 5;
  line-height: 0;
}

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

.tabbar-btn {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
}

.tabbar-btn--left { left: 0; }
.tabbar-btn--right { right: 0; }

.tabbar-btn:active {
  background: rgba(255, 255, 255, 0.18);
}

/* ===== 彈窗 ===== */
.pop-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
}

.pop-dim {
  position: absolute;
  inset: 0;
  background: rgba(64, 28, 40, 0.5);
  backdrop-filter: blur(1.5px);
}

.pop {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84%;
}

.pop[hidden],
.pop-layer[hidden] {
  display: none;
}

.pop-card {
  position: relative;
  animation: pop-in 260ms cubic-bezier(0.2, 1.2, 0.32, 1) both;
}

@keyframes pop-in {
  0% { transform: scale(0.86); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.pop-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.pop-btn:active {
  transform: translateX(-50%) translateY(1.5%);
}

/* 初訪提示 */
.pop--intro { width: 80%; }

.intro-go {
  top: 78.5%;
  width: 46%;
}

/* 我的徽章彈窗 */
.pop--badges { width: 84%; }

.badge-count {
  position: absolute;
  left: 55.8%;
  top: 21.4%;
  transform: translate(-50%, -50%);
  color: #4c3d38;
  font-size: 5.3cqw;
  font-weight: 950;
  line-height: 1;
}

.badge-done-note {
  position: absolute;
  left: 50%;
  top: 26.8%;
  transform: translateX(-50%);
  width: 100%;
  color: #ef4d74;
  font-size: 3.6cqw;
  font-weight: 900;
  text-align: center;
  line-height: 1;
}

.pbadge {
  position: absolute;
  width: 26.5%;
  height: auto;
  top: 33.5%;
}

.pbadge--a { left: 18.5%; }
.pbadge--b { right: 18.5%; }

.pdeco {
  position: absolute;
  width: 8%;
  height: auto;
  top: 31%;
}

.pdeco--a { left: 12.5%; }
.pdeco--b { right: 12.5%; }

.badge-primary {
  top: 71%;
  width: 48%;
}

.badge-primary[disabled] {
  pointer-events: none;
}

.lottery-note {
  position: absolute;
  left: 50%;
  top: 78.5%;
  transform: translateX(-50%);
  width: 86%;
  height: auto;
}

.badge-back {
  top: 84%;
  width: 38%;
}

/* 已集滿：中間多一行提示文字，參加抽獎鈕在內建說明下方、又要讓得下提示 */
.pop--badges.is-done .badge-primary {
  top: 68.5%;
}

/* 關卡跳窗 */
.pop--gate1,
.pop--gate2 { width: 88%; }

.gate-start {
  top: 72%;
  width: 52%;
}

.gate-back {
  top: 85%;
  width: 36%;
}