/* Doodle Hunt 網頁版 —— 視覺對照 iOS 版（AccentColor #FF944F、systemGroupedBackground 等） */
:root {
  color-scheme: light;              /* 別讓 Safari 自動反轉成深色 */
  --accent: #ff944f;
  --accent-dark: #f07c30;
  --bg: #f2f2f7;                    /* systemGroupedBackground */
  --card: #ffffff;                  /* secondarySystemGroupedBackground */
  --label: #16120f;
  --secondary: rgba(60, 60, 67, .6);
  --sep: rgba(60, 60, 67, .18);
  --celebrate-top: #fff2db;
  --celebrate-bottom: #ffdecc;
  --celebrate-ink: #73401f;
  --blessing: #b8262e;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body { position: fixed; inset: 0; overflow: hidden; }
img { -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

/* ---------- 頁面容器：手機用 dvh，避免 Safari 位址列造成的跳動 ---------- */
.view { position: absolute; inset: 0; display: none; flex-direction: column; height: 100%; height: 100dvh; }
.view.active { display: flex; }

/* ---------- 導覽列 ---------- */
.nav {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-top) + 6px) 8px 6px;
  background: rgba(242, 242, 247, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid transparent;
  transition: border-color .2s;
  min-height: calc(var(--safe-top) + 44px);
}
.nav.scrolled { border-bottom-color: var(--sep); }
.nav.on-camera { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; }
.nav-btn {
  display: flex; align-items: center; gap: 2px; min-width: 44px; min-height: 44px;
  padding: 0 8px; color: var(--accent); font-size: 17px;
}
.nav.on-camera .nav-btn { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; }
.nav.on-camera .nav-title { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.nav-spacer { min-width: 44px; }
.nav-btn svg { width: 22px; height: 22px; }

.scroller { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ---------- 首頁 ---------- */
.home-head { padding: 4px 20px 0; }
.large-title { margin: 0 0 6px; font-size: 34px; font-weight: 700; letter-spacing: -.6px; }
.subtitle { margin: 0 0 16px; font-size: 15px; line-height: 1.4; color: var(--secondary); }
.progress-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: 16px; padding: 12px 16px; margin-bottom: 20px;
}
.progress-label { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(120,120,128,.2); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; background: var(--accent); width: 0; transition: width .45s cubic-bezier(.22,1,.36,1); }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 20px 16px; }
.cell {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--card); border-radius: 18px; padding: 12px; text-align: center;
  transition: transform .18s;
}
.cell.collected:active { transform: scale(.97); }
.cell-thumb { width: 100%; height: 110px; object-fit: contain; border-radius: 12px; transition: filter .5s, opacity .5s; }
.cell.locked .cell-thumb { filter: grayscale(1); opacity: .35; }
.cell-name { font-size: 15px; font-weight: 600; }
.cell.locked .cell-name { color: var(--secondary); }
.cell-hint { font-size: 11px; color: var(--secondary); }
.cell.collected .cell-hint { color: var(--accent); }
.cell-check { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; color: var(--accent); }

.foot-bar {
  flex: none; padding: 8px 20px calc(var(--safe-bottom) + 8px);
  background: rgba(242, 242, 247, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--sep);
}
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; border-radius: 14px;
  background: var(--accent); color: #fff; font-size: 17px; font-weight: 600;
  transition: transform .15s, background .15s;
}
.btn-primary:active { transform: scale(.98); background: var(--accent-dark); }
.btn-primary svg { width: 21px; height: 21px; }

/* ---------- 採集頁 ---------- */
.detail { padding: 16px 0 32px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero {
  width: calc(100% - 48px); max-width: 420px; height: 220px; object-fit: contain; border-radius: 24px;
  filter: grayscale(1); opacity: .35; transform: scale(.92);
  transition: filter .55s cubic-bezier(.34,1.4,.64,1), opacity .55s, transform .55s cubic-bezier(.34,1.4,.64,1), box-shadow .55s;
}
.hero.lit { filter: none; opacity: 1; transform: scale(1); box-shadow: 0 0 34px rgba(255, 148, 79, .45); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700;
  opacity: 0; transform: scale(.6); transition: opacity .4s, transform .4s cubic-bezier(.34,1.5,.64,1);
}
.badge.lit { opacity: 1; transform: scale(1); }
.badge svg { width: 16px; height: 16px; }
.blurb { margin: 0; padding: 0 24px; font-size: 16px; line-height: 1.45; color: var(--secondary); text-align: center; }
.comic-block { width: 100%; padding: 0 20px; opacity: 0; transform: translateY(24px); transition: opacity .4s, transform .4s; }
.comic-block.shown { opacity: 1; transform: none; }
.section-title { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.comic { width: 100%; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.08); display: block; }

/* ---------- 掃描頁 ---------- */
#view-scan { background: #000; }
.camera-layer { position: absolute; inset: 0; z-index: 0; }
.camera-layer a-scene, .camera-layer video, .camera-layer canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
.scan-ui { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; pointer-events: none; }
.scan-ui > * { pointer-events: auto; }
.reticle { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; transform: translate(-50%, -50%); pointer-events: none; }
.reticle svg { width: 100%; height: 100%; }
.banner-slot { margin-top: calc(var(--safe-top) + 52px); display: flex; justify-content: center; padding: 0 16px; }
.banner {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 12px 16px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
  animation: banner-in .4s cubic-bezier(.22,1.4,.36,1);
}
.banner.found { background: rgba(255, 148, 79, .94); }
.banner.already { background: rgba(142, 142, 147, .94); }
.banner svg { width: 18px; height: 18px; flex: none; }
@keyframes banner-in { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
.scan-hint {
  align-self: center; margin: auto auto calc(var(--safe-bottom) + 28px);
  padding: 10px 16px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 13px;
}
/* 狀態畫面（啟動中／沒權限／出錯）疊在相機上，但導覽列要留在最上面才回得去 */
.scan-status {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 32px; text-align: center;
  background: var(--bg);
}
.scan-status.hidden { display: none; }
#view-scan.showing-status .reticle,
#view-scan.showing-status .scan-hint,
#view-scan.showing-status .banner-slot { display: none; }
.scan-status h2 { margin: 0; font-size: 20px; font-weight: 700; }
.scan-status p { margin: 0; max-width: 22em; font-size: 15px; line-height: 1.45; color: var(--secondary); }
.scan-status .icon { font-size: 44px; line-height: 1; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(120,120,128,.25); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-secondary {
  min-height: 46px; padding: 0 26px; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600;
}

/* ---------- 動作選單 / 對話框 ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.35);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px 8px calc(var(--safe-bottom) + 8px);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
/* debug 選單有十幾項，手機上會比螢幕高 —— 讓它自己捲，別把上面的項目頂出畫面 */
.sheet { transform: translateY(20px); transition: transform .28s cubic-bezier(.22,1,.36,1);
  max-height: calc(100dvh - var(--safe-top) - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet-backdrop.open .sheet { transform: none; }
.sheet-group {
  background: rgba(250,250,250,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 14px; overflow: hidden; margin-bottom: 8px;
}
.sheet-title { padding: 14px 16px; text-align: center; font-size: 13px; line-height: 1.35; color: var(--secondary); border-bottom: .5px solid var(--sep); }
.sheet-title strong { display: block; font-size: 14px; color: var(--label); margin-bottom: 3px; }
.sheet-item {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; font-size: 19px; color: var(--accent);
  border-bottom: .5px solid var(--sep);
}
.sheet-item:last-child { border-bottom: 0; }
.sheet-item:active { background: rgba(0,0,0,.06); }
.sheet-item.destructive { color: #ff3b30; }
.sheet-item.cancel { font-weight: 600; }
.sheet-item svg { width: 20px; height: 20px; }

/* ---------- 慶祝頁 ---------- */
#celebration {
  position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column;
  background: linear-gradient(to bottom, var(--celebrate-top), var(--celebrate-bottom));
  padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px);
  align-items: center; justify-content: flex-start; gap: 18px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* 按鈕釘在底部，其餘內容從上往下排（= iOS 版 VStack + Spacer） */
.celebrate-actions { margin-top: auto; padding-top: 12px; }
#celebration.open { display: flex; animation: fade-in .3s; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.celebrate-head { text-align: center; }
.celebrate-emoji { font-size: 56px; line-height: 1.1; }
.celebrate-title { margin: 6px 0 6px; font-size: 34px; font-weight: 700; color: var(--celebrate-ink); }
.celebrate-sub { margin: 0; font-size: 15px; color: rgba(115, 64, 31, .7); }

.flip-wrap { width: 100%; max-width: 420px; perspective: 1000px; }
.flip-card {
  position: relative; width: 100%; height: clamp(240px, 42dvh, 320px); border-radius: 28px; background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center;
  transition: transform .18s ease-in;
}
.card-face { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.card-title { font-size: 22px; font-weight: 700; }
.card-sub { font-size: 15px; color: var(--secondary); }
.mosaic { display: grid; grid-template-columns: repeat(4, 48px); gap: 8px; justify-content: center; }
.mosaic img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
.card-tree { font-size: 64px; line-height: 1; }
.blessing-1 { font-size: 28px; font-weight: 700; color: var(--blessing); }
.blessing-2 { font-size: 20px; color: var(--blessing); }
.card-emojis { font-size: 20px; }
.tap-hint { font-size: 13px; color: var(--secondary); }
/* canvas 是替換元素：只給 inset:0 會退回 300×150 的固有尺寸，一定要明寫 100% */
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#celebration > *:not(#confetti) { position: relative; z-index: 2; }
.celebrate-actions { width: 100%; max-width: 420px; }
.mosaic { max-height: 30dvh; overflow: hidden; }

/* ---------- 空狀態 ---------- */
.empty { margin: auto; padding: 32px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.empty h2 { margin: 0; font-size: 17px; }
.empty p { margin: 0; font-size: 13px; color: var(--secondary); }

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .home-head, .grid, .foot-bar { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}