/* 園區 AR 指引 — 全域樣式 */
:root{
  --bg:#0f172a; --card:#1e293b; --line:#334155; --fg:#e2e8f0; --mut:#94a3b8;
  --acc:#8b5cf6; --acc2:#22c55e; --bad:#ef4444; --warn:#f59e0b;
  --nav-h:0px;   /* 已移除底部 tabbar，地圖滿版 */
}
/* 縮放按鈕 */
.zoom-ctl{ position:absolute; right:12px; bottom:calc(env(safe-area-inset-bottom) + 16px); z-index:600;
  display:flex; flex-direction:column; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.45); }
.zoom-ctl button{ width:46px; height:46px; border:none; background:var(--card); color:var(--fg);
  font-size:24px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; }
.zoom-ctl button:not(:last-child){ border-bottom:1px solid var(--line); }
.zoom-ctl button:active{ background:var(--line); }
#locate svg{ width:22px; height:22px; fill:#4285F4; display:block; }
/* AR／掃碼 返回地圖鈕 */
.view-back{ position:absolute; top:calc(env(safe-area-inset-top) + 12px); left:12px; z-index:800; }
/* Google Maps 風格定位藍點 */
.user-loc{ background:none !important; border:none !important; }
.user-loc .user-dot{ position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%;
  background:#4285F4; border:3px solid #fff; box-shadow:0 0 4px rgba(0,0,0,.45);
  transform:translate(-50%,-50%); }
.user-loc .user-pulse{ position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%;
  background:rgba(66,133,244,.35); transform:translate(-50%,-50%); animation:userPulse 2s ease-out infinite; }
@keyframes userPulse{ 0%{ transform:translate(-50%,-50%) scale(1); opacity:.7; }
  100%{ transform:translate(-50%,-50%) scale(4.2); opacity:0; } }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }               /* 必備 reset：勿被 flex/grid 蓋掉 */
html,body{ margin:0; height:100%; background:var(--bg); color:var(--fg);
  font-family:-apple-system,"Noto Sans TC",system-ui,sans-serif; overscroll-behavior:none; }
#app{ position:fixed; inset:0; display:flex; flex-direction:column; }

/* 視圖容器 */
.view{ position:absolute; inset:0 0 var(--nav-h) 0; }
.view[hidden]{ display:none !important; }

/* 地圖 */
#map{ width:100%; height:100%; background:#0b1220; }

/* 底部導航 */
.tabbar{ position:absolute; left:0; right:0; bottom:0; height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom); display:flex; background:var(--card);
  border-top:1px solid var(--line); z-index:1000; }
.tabbar button{ flex:1; background:none; border:none; color:var(--mut);
  font:inherit; font-size:11px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; padding:6px 0; }
.tabbar button .ic{ font-size:20px; line-height:1; }
.tabbar button.active{ color:var(--fg); }
.tabbar button.active .ic{ transform:translateY(-1px); }

/* 篩選列 */
.filters{ position:absolute; top:calc(env(safe-area-inset-top) + 10px); left:10px; right:10px;
  display:flex; gap:8px; overflow-x:auto; z-index:600; padding-bottom:4px; scrollbar-width:none; }
.filters::-webkit-scrollbar{ display:none; }
.chip{ flex:0 0 auto; background:var(--card); border:1px solid var(--line); color:var(--fg);
  border-radius:999px; padding:7px 13px; font-size:13px; font-weight:600; }
.chip.off{ opacity:.4; }

/* 詳情底卡 */
.sheet{ position:absolute; left:0; right:0; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); background:var(--card);
  border-radius:18px 18px 0 0; border-top:1px solid var(--line); padding:16px 16px 20px;
  transform:translateY(110%); transition:transform .28s cubic-bezier(.4,0,.2,1); z-index:700;
  box-shadow:0 -10px 30px rgba(0,0,0,.4); }
.sheet.open{ transform:translateY(0); }
.sheet .grab{ width:40px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 12px; }
.sheet h2{ margin:0 0 4px; font-size:19px; }
.sheet .cat{ font-size:12px; color:var(--mut); }
.sheet .desc{ margin:10px 0 14px; color:#cbd5e1; font-size:14px; line-height:1.6; }
.sheet .actions{ display:flex; gap:10px; }
.btn{ border:none; border-radius:12px; padding:13px; font:inherit; font-weight:700; color:#fff; flex:1; }
.btn-primary{ background:var(--acc); }
.btn-line{ background:transparent; border:1px solid var(--line); color:var(--fg); }
.dist-badge{ display:inline-block; background:#0b1220; border-radius:8px; padding:3px 9px;
  font-size:12px; color:var(--acc2); font-weight:700; margin-left:6px; }

/* AR 導航 */
#ar-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.ar-overlay{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:space-between; padding:24px 16px; pointer-events:none; }
.ar-target{ margin-top:env(safe-area-inset-top); background:rgba(15,23,42,.72); backdrop-filter:blur(6px);
  border-radius:14px; padding:10px 16px; text-align:center; pointer-events:auto; }
.ar-target .t-name{ font-size:16px; font-weight:700; }
.ar-target .t-dist{ font-size:13px; color:var(--acc2); margin-top:2px; }
.ar-arrow{ font-size:96px; filter:drop-shadow(0 4px 16px rgba(0,0,0,.6));
  transition:transform .15s ease-out; }
.ar-turn{ background:rgba(15,23,42,.72); backdrop-filter:blur(6px); border-radius:12px;
  padding:8px 14px; font-size:14px; font-weight:600; margin-bottom:8px; }
.ar-debug{ position:absolute; left:12px; right:12px; bottom:56px; color:#cbd5e1;
  background:rgba(15,23,42,.72); border:1px solid rgba(148,163,184,.35);
  border-radius:10px; padding:7px 10px; font-size:11px; line-height:1.4;
  font-variant-numeric:tabular-nums; text-align:center; }
.ar-start{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; background:var(--bg); text-align:center; padding:24px; }
.ar-start p{ color:var(--mut); font-size:14px; line-height:1.7; max-width:300px; }

/* 掃碼 */
.scan-wrap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; padding:24px; text-align:center; }
#scan-reader{ width:100%; max-width:360px; }

/* 掃碼互動 */
.interaction{ position:absolute; inset:0; overflow:auto; padding:calc(env(safe-area-inset-top) + 16px) 16px 24px;
  background:var(--bg); }
.interaction-head{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center; }
.interaction h1{ margin:0; font-size:22px; line-height:1.25; }
.interaction-meta{ margin-top:4px; font-size:13px; color:var(--mut); }
.icon-btn{ width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:var(--card);
  color:var(--fg); font-size:30px; line-height:1; }
.stamp{ border:1px solid var(--line); border-radius:999px; padding:6px 10px; font-size:12px; color:var(--mut);
  white-space:nowrap; grid-column:2; justify-self:start; }
.stamp.done{ border-color:rgba(34,197,94,.45); color:var(--acc2); background:rgba(34,197,94,.12); }
.progress{ margin:14px 0; color:var(--acc2); font-size:13px; font-weight:700; }
.info-block{ border-top:1px solid var(--line); padding:16px 0; }
.info-block h2{ margin:0 0 10px; font-size:16px; }
.info-block ul{ margin:0; padding-left:20px; color:#cbd5e1; line-height:1.7; }

/* 合照 */
.photo-stage{ position:absolute; inset:0; overflow:hidden; background:#000; touch-action:none; }
#photo-video,.photo-result{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-result{ z-index:2; }
.photo-sticker{ position:absolute; z-index:3; transform:translate(-50%,-50%); left:50%; top:58%;
  display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(34,197,94,.88);
  border:3px solid #fff; font-size:44px; background-size:contain; background-repeat:no-repeat; background-position:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35); touch-action:none; }
.photo-top{ position:absolute; z-index:4; left:12px; right:12px; top:calc(env(safe-area-inset-top) + 12px);
  display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.photo-controls{ position:absolute; z-index:4; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom) + 14px);
  background:rgba(15,23,42,.84); border:1px solid rgba(148,163,184,.35); border-radius:14px; padding:12px; }
.photo-controls label{ display:block; font-size:13px; color:#cbd5e1; }
.photo-controls input{ width:100%; margin-top:8px; }
.photo-actions{ display:flex; gap:10px; margin-top:12px; }
.photo-actions .btn:disabled{ opacity:.45; }

/* 通用 */
.toast{ position:absolute; left:50%; bottom:calc(var(--nav-h) + 16px); transform:translateX(-50%);
  background:rgba(15,23,42,.92); border:1px solid var(--line); color:var(--fg);
  padding:10px 16px; border-radius:12px; font-size:13px; z-index:1200; max-width:88%;
  opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.show{ opacity:1; }
.muted{ color:var(--mut); }

/* POI 標記（Leaflet divIcon） */
.poi-icon{ background:none; border:none; }
.poi-pin{ position:relative; width:120px; height:48px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; }
.poi-emoji{ width:30px; height:30px; border-radius:50%; background:var(--c);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.4); border:2px solid #fff; }
.poi-label{ font-size:11px; font-weight:700; color:#0f172a; background:rgba(255,255,255,.92);
  padding:1px 6px; border-radius:6px; white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.3); }
.leaflet-container{ background:#0b1220; }