/* AR 实景导览的样式。
   叠加层要压在实景照片上，所有文字都必须自带背景或描边——
   实景亮度不可控（正午的白墙、逆光的天空），纯文字必然有场景读不清。 */

.ar{position:fixed;inset:0;z-index:120;display:none;background:#000}
.ar.show{display:block}
.ar video{width:100%;height:100%;object-fit:cover;display:block}

.ar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0 12vw;text-align:center;color:#E6EBE8;font-size:var(--t-md);line-height:1.8;background:#0E1412}

/* 标签层不接管手势：游客要能透过它继续操作下面的按钮 */
.ar-layer{position:absolute;inset:0;pointer-events:none}

.ar-tag{position:absolute;pointer-events:auto;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:7px 13px;border-radius:var(--r-pill);white-space:nowrap;
  background:rgba(10,14,12,.72);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.4);transition:opacity var(--m-base) var(--ease)}
.ar-tag b{font-size:var(--t-sm);font-weight:600;color:#fff;letter-spacing:.04em}
.ar-tag i{font-size:11px;font-style:normal;color:var(--brass);font-family:var(--font-number)}
/* 标签下方的引线，把标签和地面上的实际方位视觉连起来 */
.ar-tag::after{content:'';position:absolute;top:100%;left:50%;width:1px;height:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}

.ar-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:var(--s-3);
  padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;
  background:linear-gradient(180deg,rgba(6,9,8,.72),transparent)}
.ar-status{flex:1;font-size:var(--t-xs);color:rgba(255,255,255,.82);letter-spacing:.02em}
.ar-status.warn{color:var(--brass)}
.ar-x{width:34px;height:34px;border-radius:50%;background:rgba(10,14,12,.6);color:#fff;font-size:15px;
  border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;box-sizing:content-box}

/* 罗盘：不只是装饰，它同时暴露「罗盘失效」这种否则完全无感的故障 */
.ar-compass-wrap{width:34px;height:34px;position:relative;flex:none}
.ar-compass{width:100%;height:100%;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(10,14,12,.6);display:grid;place-items:center;transition:transform .18s linear}
.ar-compass i{font-style:normal;font-size:10px;color:var(--brass);transform:translateY(-7px)}

.ar-warn{position:absolute;top:calc(env(safe-area-inset-top) + 58px);left:14px;right:14px;
  padding:8px 12px;border-radius:var(--r-sm);font-size:var(--t-xs);line-height:1.6;
  color:#F2E3C9;background:rgba(94,68,26,.62);border:1px solid rgba(217,184,124,.34);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.ar-manual{position:absolute;left:14px;right:14px;bottom:130px;padding:16px;border-radius:var(--r-lg);
  background:rgba(10,14,12,.9);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#E6EBE8}
.ar-manual p{font-size:var(--t-sm);margin-bottom:10px;color:rgba(255,255,255,.86)}
.ar-manual select{width:100%;margin-bottom:10px;background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);color:#fff}
.ar-manual .btn{width:100%;justify-content:center}

.ar-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  gap:var(--s-4);padding:18px 14px calc(env(safe-area-inset-bottom) + 20px);
  background:linear-gradient(0deg,rgba(6,9,8,.78),transparent)}
.ar-mode{padding:8px 16px;border-radius:var(--r-pill);font-size:var(--t-xs);letter-spacing:.06em;
  color:rgba(255,255,255,.68);background:rgba(10,14,12,.5);border:1px solid rgba(255,255,255,.16)}
.ar[data-mode="nav"] #arModeNav,
.ar[data-mode="scan"] #arModeScan{color:#0E1412;background:var(--brass);border-color:transparent;font-weight:600}
/* 快门只在识景模式出现：导航模式下拍照没有意义，留着只会让人误按 */
.ar-shot{display:none;width:58px;height:58px;border-radius:50%;background:#fff;
  border:4px solid rgba(255,255,255,.34);box-sizing:content-box}
.ar[data-mode="scan"] .ar-shot{display:block}
.ar-shot:active{transform:scale(.94)}

.ar-result{position:absolute;left:14px;right:14px;bottom:118px;padding:14px 16px;border-radius:var(--r-lg);
  background:rgba(10,14,12,.9);border:1px solid rgba(255,255,255,.16);color:#E6EBE8;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);max-height:40vh;overflow:auto}
.ar-result h4{font-family:var(--font-serif);font-size:var(--t-lg);color:#fff;letter-spacing:.06em;margin-bottom:6px}
.ar-result p{font-size:var(--t-sm);line-height:1.75;color:rgba(255,255,255,.82)}
.ar-result .row{display:flex;gap:var(--s-2);margin-top:12px}
.ar-result .row .btn{flex:1;justify-content:center}

/* 屏幕宽了之后标签会被拉得过散，限制一下叠加层的有效宽度 */
@media (min-width:900px){
  .ar-layer{left:50%;width:min(900px,100%);transform:translateX(-50%)}
  .ar-manual,.ar-result,.ar-warn{left:50%;right:auto;width:min(520px,92vw);transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .ar-compass{transition:none}
}

/* 实景路线指引：常驻在画面上方，是导航模式下最该被看见的一条信息 */
.ar-guide{position:absolute;top:calc(env(safe-area-inset-top) + 56px);left:14px;right:14px;
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-lg);
  background:rgba(10,14,12,.86);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.ar[data-mode="scan"] .ar-guide{display:none}   /* 识景模式下它只会挡住取景 */
.ar-guide .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:22px;color:#0E1412;background:var(--brass);font-weight:700}
.ar-guide b{display:block;font-size:var(--t-md);color:#fff;font-weight:600;letter-spacing:.02em}
.ar-guide i{display:block;font-style:normal;font-size:var(--t-xs);color:rgba(255,255,255,.66);margin-top:2px}
@media (min-width:900px){.ar-guide{left:50%;right:auto;width:min(520px,92vw);transform:translateX(-50%)}}

/* 全景漫游：传送门热点和讲解热点必须一眼分得出来，
   否则游客不知道点下去是"听讲解"还是"换个地方" */
.pano-mark-go i{background:var(--brass)!important;box-shadow:0 0 0 6px rgba(217,184,124,.22)!important}
.pano-mark-go span::after{content:' ›';color:var(--brass);font-weight:700}
.pano-back{position:absolute;left:14px;top:calc(env(safe-area-inset-top) + 56px);z-index:6;
  padding:8px 14px;border-radius:var(--r-pill);font-size:var(--t-xs);color:#fff;
  background:rgba(10,14,12,.7);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}


/* VR 漫游状态条：贴底显示，不挡画面 */
.pano-state{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);z-index:6;
  max-width:min(520px,90vw);padding:8px 14px;border-radius:var(--r-pill);
  font-size:var(--t-xs);color:rgba(255,255,255,.9);text-align:center;
  background:rgba(10,14,12,.68);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}