@font-face {
  font-family: 'FolkPro';
  src: url('./assets/FolkPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 版面以 390×844 設計稿為基準，--u 為每個設計稿單位對應的實際長度，字級、間距與定位都以 --u 換算。
   背景圖依 --u 等比縮放並貼齊頂端，不拉伸：視窗較窄長時以高度為準、裁左右；
   視窗較寬短時以寬度為準，最多裁掉底部 15%（只含裝飾區，按鈕仍在畫面內），再寬則兩側以底色留白。 */
:root {
  --u: calc(min(max(100vw / 390, 100dvh / 844), 100dvh * 1.15 / 844));
  --ink: #1f2a1c;
  --ink-2: #24401f;
  --green: #2f5d34;
  --track: rgba(47, 93, 52, .3);
  --warn: #9a4a00;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #9ebb78;
  color: var(--ink);
  font-family: 'FolkPro', 'Noto Sans TC', system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-weight: 700;
  font-synthesis: none;
}

[hidden] { display: none !important; }

h1, h2, p { margin: 0; }

/* 切換畫面時 app.js 會把焦點交給標題給輔助科技朗讀；標題不可操作，不需要焦點外框（iOS Safari 會畫藍框） */
[tabindex="-1"]:focus { outline: none; }

.screen {
  position: relative;
  width: min(100vw, calc(390 * var(--u)));
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #9ebb78 center top / calc(390 * var(--u)) calc(844 * var(--u)) no-repeat;
}
.screen[data-screen="start"] { background-image: url('./assets/bg-start.png'); }
.screen[data-screen="blocked"] { background-image: url('./assets/bg-blocked.png'); }
.screen[data-screen="task"] { background-image: url('./assets/bg-task.png'); }
.screen[data-screen="redeemed"] { background-image: url('./assets/bg-success.png'); }

/* 舞台固定 390×844 設計稿大小並置中，底下元素都用設計稿座標絕對定位 */
.stage {
  position: absolute;
  top: 0; left: 50%;
  width: calc(390 * var(--u));
  height: calc(844 * var(--u));
  transform: translateX(-50%);
}
.stage > .view { position: absolute; inset: 0; }
.view > * { position: absolute; }

/* 頂端列與進度 */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
.brand {
  position: absolute; top: calc(24 * var(--u)); left: 0; right: 0;
  text-align: center; font-size: calc(16 * var(--u)); line-height: 1; color: var(--ink);
}
.step-pill {
  position: absolute; top: calc(48 * var(--u)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap;
  padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: 999px;
  background: rgba(255, 255, 255, .6); color: var(--ink-2);
}
.step-label { font-size: calc(14 * var(--u)); letter-spacing: .06em; }
.progress { display: flex; gap: calc(4 * var(--u)); }
.progress span { width: calc(18 * var(--u)); height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--track); }
.progress span.is-done { background: var(--green); }
/* 目前步驟：底色維持半深綠，深綠由左到右填滿並重複，最後一格停一下再重來 */
.progress span.is-active { position: relative; overflow: hidden; background: rgba(47, 93, 52, .55); }
.progress span.is-active::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--green);
  transform-origin: left center;
  animation: progress-fill 1.8s ease-in-out infinite;
}
@keyframes progress-fill {
  0% { transform: scaleX(0); }
  75%, 100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .progress span.is-active::after { animation: none; }
}

/* 文字 */
.title { font-size: calc(26 * var(--u)); line-height: 1.3; }
/* 步驟二、三的內容整塊上下置中：--dy 是相對設計稿原位置的位移（設計稿單位），讓整塊的中心落在 y=398 */
[data-view="task"] { --dy: -34; }
[data-view="redeemed"] { --dy: -21; } /* 卡片頂端要低於背景圖星星的底端（約 y=200），避免遮住 */
.title-top { top: calc((178 + var(--dy, 0)) * var(--u)); left: calc(36 * var(--u)); right: calc(36 * var(--u)); }
.lead { font-size: calc(13 * var(--u)); line-height: 1.8; }
.lead-top { top: calc((230 + var(--dy, 0)) * var(--u)); left: calc(36 * var(--u)); right: calc(36 * var(--u)); }

/* 按鈕 */
.btn {
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  width: 100%; height: calc(58 * var(--u)); padding: 0;
  border: 0; background: transparent center / 100% 100% no-repeat;
  font-family: inherit; font-weight: 700; font-size: calc(18 * var(--u)); letter-spacing: .08em;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-light { background-image: url('./assets/btn-light.png'); color: var(--ink); }
.btn-dark { background-image: url('./assets/btn-dark.png'); color: #fff; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn:focus-visible { outline: calc(3 * var(--u)) solid var(--ink); outline-offset: calc(3 * var(--u)); }
.btn-icon { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.btn-spaced { margin-top: calc(14 * var(--u)); letter-spacing: .3em; }

.actions { left: calc(22 * var(--u)); width: calc(346 * var(--u)); }
.actions-start { top: calc(655 * var(--u)); }
.actions-task { top: calc((556 + var(--dy, 0)) * var(--u)); }
.actions-bottom { top: calc(656 * var(--u)); }

/* 1 確認位置：標題在背景圖的深色帶上 */
.start-title {
  top: calc(242 * var(--u)); left: 0; right: 0; height: calc(163 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-size: calc(26 * var(--u)); line-height: 1.6; text-align: center;
}
.start-title span { display: block; }
.start-instructions {
  top: calc(428 * var(--u)); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u));
  text-align: center; font-size: calc(14 * var(--u)); line-height: 1.5;
}
.start-instructions p:first-child { font-size: calc(16 * var(--u)); }

/* 1b 定位失敗：文字由上往下排，按鈕固定在下方 */
.view-blocked { display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(254 * var(--u)) calc(24 * var(--u)) 0; }
.view-blocked > * { position: static; }
.view-blocked > .actions { position: absolute; left: calc(22 * var(--u)); }
.blocked-text { min-height: calc(99 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: 0 calc(12 * var(--u)); }
.place-card {
  min-height: calc(128 * var(--u)); justify-content: center;
  display: flex; flex-direction: column; gap: calc(4 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u)); border-radius: calc(28 * var(--u));
  background: #fff;
}
.place-label { font-size: calc(12 * var(--u)); color: #5a6a55; }
.place-name { font-size: calc(24 * var(--u)); line-height: 1.25; color: #1f4a26; }
.place-detail { margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.6; color: #4b5a45; }
.place-distance { font-size: calc(26 * var(--u)); line-height: 1.2; color: #9a4a00; }
/* 不在範圍說明裡的地點與公里數：加大、加底色，一眼看得到 */
#blocked-message { white-space: pre-line; }
.mark { padding: calc(1 * var(--u)) calc(6 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(255, 255, 255, .75); font-size: calc(15 * var(--u)); }
.mark-place { color: #1f4a26; }
.mark-distance { color: #9a4a00; }
.tip { padding: 0 calc(12 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.7; white-space: pre-line; }

/* 2 任務進行中 */
.map-card {
  top: calc((265 + var(--dy, 0)) * var(--u)); left: calc(24 * var(--u)); width: calc(342 * var(--u)); height: calc(275 * var(--u));
  display: flex; flex-direction: column;
  border-radius: calc(28 * var(--u)); overflow: hidden; background: #fff;
}
.map-frame { position: relative; flex: 1; background: #e3efea; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }

/* 4 已兌換 */
.ig-card {
  top: calc((229 + var(--dy, 0)) * var(--u)); left: calc(24 * var(--u)); width: calc(342 * var(--u)); height: calc(401 * var(--u));
  padding: calc(20 * var(--u));
  display: flex; flex-direction: column; gap: calc(16 * var(--u));
  border-radius: calc(28 * var(--u)); background: #fff;
}
.ig-embed { flex: 1; width: 100%; min-height: 0; border: 1px solid #dbdbdb; border-radius: calc(8 * var(--u)); }
.ig-card .btn { flex: none; height: calc(56 * var(--u)); border-radius: calc(16 * var(--u)); background: #0d6b4d; font-size: calc(17 * var(--u)); letter-spacing: 0; }

.receipt {
  top: calc((643 + var(--dy, 0)) * var(--u)); left: calc(24 * var(--u)); width: calc(342 * var(--u)); height: calc(76 * var(--u));
  padding: 0 calc(20 * var(--u)) 0 calc(14 * var(--u));
  display: flex; align-items: center; gap: calc(12 * var(--u));
  border-radius: calc(28 * var(--u)); border: 1px solid rgba(255, 255, 255, .75);
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .3));
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(31, 74, 38, .22), inset 0 1px 0 rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums;
}
.receipt-badge {
  flex: none; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
  box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(255, 255, 255, .25), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(31, 74, 38, .3);
}
.receipt-badge svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.receipt-info { display: flex; flex-direction: column; gap: calc(1 * var(--u)); line-height: 1.25; }
.receipt-time { line-height: 1.2; }
.receipt-label { font-size: calc(13 * var(--u)); letter-spacing: .1em; color: var(--ink-2); }
.receipt-date { font-size: calc(15 * var(--u)); }
.receipt-time { margin-left: auto; font-size: calc(28 * var(--u)); letter-spacing: .02em; color: #1f4a26; }

/* 3 兌獎確認視窗 */
.sheet { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 40, 20, .6); }
.sheet-panel {
  position: relative; width: calc(342 * var(--u)); max-width: 94vw;
  padding: calc(32 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u));
  border-radius: calc(28 * var(--u)); background: #fff; text-align: center;
}
.title-sheet { font-size: calc(26 * var(--u)); line-height: 1.3; }
.sheet-desc { font-size: calc(14 * var(--u)); line-height: 1.8; color: #2a2a2a; }
.sheet-actions { width: 100%; margin-top: calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.sheet-actions .btn { height: calc(56 * var(--u)); }
.sheet-actions .btn-light { letter-spacing: .3em; }

/* 比 9:16 寬的手機：背景圖改以 cover 按比例鋪滿整個寬度（--s 是 cover 的縮放），只裁掉底部裝飾區。
   版面仍依 --u 排列以保住按鈕；標題與說明貼著背景圖的色帶和圖案，改用 --s 定位。 */
@media (max-width: 520px) and (max-aspect-ratio: 3/5) {
  :root { --s: max(100vw / 390, 100dvh / 844); }
  .screen { width: 100vw; background-size: cover; }
  .start-title { top: calc(242 * var(--s)); height: calc(163 * var(--s)); }
  .start-instructions { top: calc(428 * var(--s)); }
}

/* 畫面切換與確認視窗的淡入淡出（時間與 app.js 的 FADE_MS 一致）。 */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.screen { animation: fade-in .3s ease; transition: opacity .22s ease; }
.screen.is-fading { opacity: 0; }
.sheet:not([hidden]) { animation: fade-in .22s ease; }
.sheet.is-closing { opacity: 0; transition: opacity .22s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .screen, .sheet:not([hidden]) { animation: none; }
  .screen, .sheet.is-closing { transition: none; }
}