/* 数字Timaru — 样式
   主题：浅色、克制、编辑风格。
   整页没有顶栏：左栏自带页头（标题 + 收起按钮）+ 竖向标签页，右栏是三维视口。
   视口从窗口最顶端开始，只保留「建筑信息」浮层；左下角状态条已撤掉。 */

:root {
  --bg:        #F4F3F0;
  --panel:     #FFFFFF;
  --ink:       #1A1B1D;
  --ink-2:     #5C5F63;
  --ink-3:     #8B8E92;
  --line:      #E3E1DB;
  --line-2:    #CFCCC4;
  --accent:    #1F6F8B;
  --accent-2:  #B5641F;
  --shadow:    0 1px 2px rgba(20,22,26,.05), 0 8px 24px rgba(20,22,26,.06);
  --fs:        1.15;
  --fs-ui:     1.0675;
}

* { box-sizing: border-box; }

/* 整页竖排：布局（左栏 + 视口）吃掉整个窗口高度。
   没有顶栏了，所以不需要再为它留高度、也不会有「标题被大字号撑破」的问题。 */
body { display: flex; flex-direction: column; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
               Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- 左栏页头 */
/* 标题从顶栏搬到这里 —— 左栏本来就占着地方，放这儿不额外吃三维面积。 */
.panelhead {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: calc(6px * var(--fs-ui));
  padding: calc(13px * var(--fs-ui)) calc(10px * var(--fs-ui))
           calc(12px * var(--fs-ui)) calc(16px * var(--fs-ui));
  border-bottom: 1px solid var(--line);
}
.panelhead .brand { flex: 1 1 auto; min-width: 0; }
.panelhead h1 {
  margin: 0;
  font-size: calc(17px * var(--fs));
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.panelhead p {
  margin: calc(2px * var(--fs)) 0 0;
  font-size: calc(10px * var(--fs));
  color: var(--ink-3);
  letter-spacing: .02em;
  line-height: 1.45;
}

/* ---------------------------------------------------------------- 布局 */
.layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* 左栏改成标签页之后内容变窄了，从 400px 收到约 264px（乘 --fs-ui 是为了
     字号放大时标签条和内容区跟着长，不然大字号会把标签挤出去）。 */
  grid-template-columns: minmax(0, calc(247px * var(--fs-ui))) minmax(0, 1fr);
}
/* 「来源」页是长正文，200 px 宽会挤成每行两三个字 —— 切到这一页时左栏自动展宽，
   切回控件页自动收窄。看三维的时候左栏还是窄的。 */
.layout.is-src {
  grid-template-columns: minmax(0, calc(400px * var(--fs-ui))) minmax(0, 1fr);
}
/* 收起左栏：只留页头里那个按钮，整个窗口让给三维场景。
   放在 .is-src 之后 —— 两条特异性相同，靠顺序让「收起」优先。 */
.layout.is-collapsed {
  grid-template-columns: minmax(0, calc(40px * var(--fs-ui))) minmax(0, 1fr);
}

/* 漫游沉浸态：只要在漫游 —— 自己开的（人行 / 车行 / 飞行）或自动巡游 —— 就把
   整个窗口让给三维场景：左栏整条撤掉、左下角状态条也撤掉，屏幕上只剩三维。
   ★ 必须放在 .is-collapsed **之后**：两条特异性相同（都是 0,2,0），靠顺序取胜。
     用户在漫游前把左栏收起了（.is-collapsed 还挂着），这里要盖过它。
   ★ 只加这一个类，**不碰** .is-collapsed、也**不写** localStorage ——
     收起左栏是用户自己的持久偏好，漫游期间改掉它，退出后左栏就回不到原样了。
     开关在 app.js 的 syncImmersive()，两种漫游共用同一个。 */
.layout.is-roam {
  grid-template-columns: minmax(0, 1fr);
}
.layout.is-roam .panel { display: none; }
.layout.is-roam .hud-stat { display: none; }

.panel {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;              /* 滚动交给 .panes */
}
/* 页头下面那一层：标签条（左）+ 内容区（右） */
.panelbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; }

/* 收起按钮：把整个窗口让给三维场景 */
.collapse {
  flex: 0 0 auto;
  border: 1px solid var(--line-2); background: #FFF; cursor: pointer;
  width: calc(22px * var(--fs-ui)); height: calc(22px * var(--fs-ui));
  border-radius: 6px; padding: 0; margin-top: calc(2px * var(--fs-ui));
  color: var(--ink-2); font: inherit; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.collapse:hover { border-color: var(--accent); color: var(--accent); }
.collapse .arw { font-size: calc(13px * var(--fs-ui)); display: block; }

/* 收起后的左栏：只剩一个按钮，标题和标签页都藏起来 */
.panel.is-collapsed .panelhead {
  padding: calc(10px * var(--fs-ui)) 0;
  justify-content: center; gap: 0; border-bottom: 0;
}
.panel.is-collapsed .panelhead .brand { display: none; }
.panel.is-collapsed .collapse { margin-top: 0; }
.panel.is-collapsed .collapse .arw { transform: rotate(180deg); }
.panel.is-collapsed .panelbody { display: none; }

/* ---------------------------------------------------------------- 左栏竖向标签条 */
.tabs {
  flex: 0 0 auto;
  width: calc(58px * var(--fs-ui));
  display: flex; flex-direction: column;
  padding: calc(7px * var(--fs-ui)) 0;
  background: #FBFAF8;
  border-right: 1px solid var(--line);
}
.tab {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: calc(12.5px * var(--fs-ui));
  color: var(--ink-2); letter-spacing: .06em;
  padding: calc(13px * var(--fs-ui)) calc(4px * var(--fs-ui));
  position: relative; text-align: center; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--accent); font-weight: 600; background: var(--panel); }
/* 选中态的竖线压在标签条与内容区的交界上 */
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; right: -1px;
  top: calc(6px * var(--fs-ui)); bottom: calc(6px * var(--fs-ui));
  width: 2px; background: var(--accent);
}
/* 「来源」钉在标签条底部，跟三个控制页分开 */
.tab-end { margin-top: auto; }

/* 内容区：一次只显示当前那一页 */
.panes {
  flex: 1 1 auto; min-width: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.panes::-webkit-scrollbar { width: 9px; }
.panes::-webkit-scrollbar-thumb {
  background: #DAD7D0; border-radius: 6px; border: 3px solid var(--panel);
}
.pane {
  display: none;
  padding: calc(17px * var(--fs-ui)) calc(16px * var(--fs-ui)) calc(22px * var(--fs-ui));
}
.pane.is-on { display: block; }

/* ---------------------------------------------------------------- 各页里的控件 */
.lyr { margin-bottom: calc(11px * var(--fs-ui)); }
.lyr:last-child { margin-bottom: 0; }
.lyr label {
  display: flex; align-items: center; gap: calc(8px * var(--fs-ui));
  cursor: pointer; font-size: calc(13.5px * var(--fs-ui)); color: #2E3033;
  user-select: none;
}
.lyr input {
  flex: 0 0 auto;
  width: calc(15px * var(--fs-ui)); height: calc(15px * var(--fs-ui));
  accent-color: var(--accent); cursor: pointer;
}

/* 视角按钮：内容区只有约 170 px 宽，所以竖排一列。
   两列在字号放大后「圣心圣殿」会撑破格子；竖排在标签页里纵向空间是富余的。 */
.vbtns { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(7px * var(--fs-ui)); }
.vbtns button {
  border: 1px solid var(--line-2); background: #FFF; cursor: pointer;
  font: inherit; font-size: calc(13px * var(--fs-ui)); color: #2E3033;
  padding: calc(8px * var(--fs-ui)) calc(10px * var(--fs-ui));
  border-radius: 7px; text-align: center;
}
.vbtns button:hover { border-color: var(--accent); color: var(--accent); }

.hint {
  margin: calc(12px * var(--fs-ui)) 0 0;
  font-size: calc(10.5px * var(--fs-ui)); color: var(--ink-3); line-height: 1.75;
}
/* 操作提示分键鼠/触屏两套，按屏宽切（见文件末尾的窄屏段） */
.hint .touch-only { display: none; }

/* 字号：三格按比例撑满内容区，格子随宽度收缩，窄了也不会溢出 */
.fsrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  border: 1px solid var(--line-2); border-radius: 8px;
  overflow: hidden; background: var(--panel);
}
.fsrow button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; color: var(--ink-2); min-width: 0;
  padding: calc(7px * var(--fs-ui)) calc(4px * var(--fs-ui));
  font-size: calc(13px * var(--fs-ui));
  line-height: 1;
}
.fsrow button:hover { background: #F7F6F3; color: var(--ink); }
.fsrow button:disabled { color: #C4C2BC; cursor: default; background: transparent; }
#fsVal { font-variant-numeric: tabular-nums; }
#fsVal.is-set { color: var(--accent-2); font-weight: 600; }
.fsrow button + button { border-left: 1px solid var(--line); }

/* ---------------------------------------------------------------- 「漫游」页 */
.wlbl {
  margin: calc(15px * var(--fs-ui)) 0 calc(7px * var(--fs-ui));
  font-size: calc(10.5px * var(--fs-ui));
  color: var(--ink-3); letter-spacing: .09em;
}
.wlbl:first-child { margin-top: 0; }

/* 选中的模式：底色 + 左边一道竖线，跟标签条的选中态一个语言 */
.vbtns button.is-on {
  border-color: var(--accent); color: var(--accent);
  font-weight: 600; background: #F2F8FA;
}

/* 第一/第三人称：两格等宽铺满 */
.vprow {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line-2); border-radius: 8px;
  overflow: hidden; background: var(--panel);
}
.vprow button {
  border: 0; background: transparent; cursor: pointer; min-width: 0;
  font: inherit; font-size: calc(12.5px * var(--fs-ui)); color: var(--ink-2);
  padding: calc(8px * var(--fs-ui)) calc(4px * var(--fs-ui));
  line-height: 1.2;
}
.vprow button + button { border-left: 1px solid var(--line); }
.vprow button:hover { background: #F7F6F3; color: var(--ink); }
.vprow button[aria-pressed="true"] {
  color: var(--accent); font-weight: 600; background: #F2F8FA;
}

/* 进入/退出漫游的主按钮 */
.wgo {
  width: 100%; margin-top: calc(18px * var(--fs-ui));
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent); color: #FFF; cursor: pointer;
  font: inherit; font-size: calc(13.5px * var(--fs-ui)); font-weight: 600;
  padding: calc(10px * var(--fs-ui)) calc(8px * var(--fs-ui));
  letter-spacing: .04em;
}
.wgo:hover { background: #1A5E76; border-color: #1A5E76; }
/* 漫游进行中：按钮变描边（红棕），跟"开始"区分开 */
.wgo.is-on {
  background: var(--panel); color: var(--accent-2); border-color: var(--accent-2);
}
.wgo.is-on:hover { background: #FBF3EA; }

/* 自动巡游：跟上面那套"自己开"分开一块，所以上面拉一条分隔线 */
.wlbl-sep {
  margin-top: calc(20px * var(--fs-ui));
  padding-top: calc(15px * var(--fs-ui));
  border-top: 1px solid var(--line);
}
/* 巡游按钮不用 --accent（那是"进入漫游"的颜色），用红棕 —— 两个主按钮
   长一样的话，用户会以为它们是同一件事的两个状态。 */
.wgo-roam {
  margin-top: calc(4px * var(--fs-ui));
  border-color: var(--accent-2); background: var(--accent-2);
}
.wgo-roam:hover { background: #9C5517; border-color: #9C5517; }
.wgo-roam.is-on { background: var(--panel); color: var(--accent-2); border-color: var(--accent-2); }
.wgo-roam.is-on:hover { background: #FBF3EA; }

/* ---------------------------------------------------------------- 「寻家」页 */
/* 输入框 + 命中列表。内容区只有约 170 px 宽，所以列表项一行放不下
   "标题 + 次级信息"两段 —— 竖着摞两行（.ft / .fm）。 */
.findrow { position: relative; display: flex; align-items: center; }
.findrow input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  font: inherit; font-size: calc(13px * var(--fs-ui)); color: var(--ink);
  background: #FFF; border: 1px solid var(--line-2); border-radius: 8px;
  padding: calc(8px * var(--fs-ui)) calc(26px * var(--fs-ui))
           calc(8px * var(--fs-ui)) calc(10px * var(--fs-ui));
  -webkit-appearance: none; appearance: none;
}
.findrow input::placeholder { color: var(--ink-3); }
/* 聚焦环贴在边框上（offset 0）—— 留 1 px 缝的话会读成"双层蓝框"，
   跟页面其他地方的单线聚焦语言不一致。 */
.findrow input:focus {
  outline: 2px solid var(--accent); outline-offset: 0;
  border-color: var(--accent);
}
/* type=search 在 WebKit 里自带一个"清除"小叉，跟我们自己的按钮重叠，去掉 */
.findrow input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.findrow #findClear {
  position: absolute; right: calc(6px * var(--fs-ui));
  border: 0; background: transparent; cursor: pointer; padding: 0;
  width: calc(18px * var(--fs-ui)); height: calc(18px * var(--fs-ui));
  border-radius: 4px; color: var(--ink-3); line-height: 1;
  font-size: calc(15px * var(--fs-ui));
  display: flex; align-items: center; justify-content: center;
}
.findrow #findClear:hover { color: var(--ink); background: #F2F1EE; }
/* ★ 必须补：上面写了 display:flex，作者样式一律赢过 UA 的 [hidden]{display:none}，
   不补的话"清空"按钮在空输入时也一直挂着（速度表踩过同一个坑）。 */
.findrow #findClear[hidden] { display: none; }

/* 命中列表。最多 30 条，列表自己封顶滚动 —— 内容区本来也能滚，
   两层滚动条叠在一起很难看。 */
.findlist {
  list-style: none; margin: calc(11px * var(--fs-ui)) 0 0; padding: 0;
  max-height: calc(340px * var(--fs-ui));
  overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 9px; background: #FFF;
}
.findlist[hidden] { display: none; }
.findlist li {
  padding: calc(7px * var(--fs-ui)) calc(10px * var(--fs-ui));
  cursor: pointer; border-bottom: 1px solid #F1EFEB;
}
.findlist li:last-child { border-bottom: 0; }
.findlist li:hover { background: #F7F6F3; }
/* 选中态：底色 + 左边一道竖线，跟标签条/模式按钮是同一套视觉语言 */
.findlist li.is-sel { background: #F2F8FA; box-shadow: inset 2px 0 0 var(--accent); }
.findlist .ft {
  display: block; font-size: calc(12.5px * var(--fs-ui));
  color: var(--ink); line-height: 1.45;
  overflow-wrap: anywhere;
}
.findlist .fm {
  display: block; margin-top: calc(2px * var(--fs-ui));
  font-size: calc(10.5px * var(--fs-ui)); color: var(--ink-3); line-height: 1.45;
}
.findlist .fm .chip {
  display: inline-block; padding: 0 calc(5px * var(--fs-ui));
  border-radius: 4px; background: #EEF4F7; color: var(--accent);
  margin-right: calc(5px * var(--fs-ui));
}
/* 命中处刷底色。只在**主键**（标题）里标 —— 靠类别名命中的条目标题里根本没这个词，
   硬标会把整条标题刷黄。 */
.findlist .ft mark {
  background: #FFF0B8; color: inherit; padding: 0 1px; border-radius: 2px;
}
.findlist .fempty {
  cursor: default; text-align: center; color: var(--ink-3);
  font-size: calc(12px * var(--fs-ui));
  padding: calc(15px * var(--fs-ui)) calc(10px * var(--fs-ui));
}
.findlist .fempty:hover { background: transparent; }

/* ---------------------------------------------------------------- 正文（「来源」页） */
/* 内边距已经由 .pane 给过，这里不再补 */
#intro { padding: 0; }

#intro h2 {
  font-size: calc(15px * var(--fs));
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .06em;
  margin: calc(30px * var(--fs)) 0 calc(11px * var(--fs));
  padding-bottom: calc(7px * var(--fs));
  border-bottom: 1px solid var(--line);
}
#intro h2:first-child { margin-top: 0; }

#intro h3 {
  font-size: calc(14px * var(--fs));
  font-weight: 600;
  margin: calc(20px * var(--fs)) 0 calc(7px * var(--fs));
}

#intro p {
  margin: 0 0 calc(11px * var(--fs));
  font-size: calc(13.5px * var(--fs));
  line-height: 1.78;
  color: #2E3033;
}

#intro ul { margin: 0 0 calc(11px * var(--fs)); padding-left: calc(19px * var(--fs)); }
#intro li {
  font-size: calc(13.5px * var(--fs));
  line-height: 1.72;
  margin-bottom: calc(5px * var(--fs));
  color: #2E3033;
}

#intro strong { font-weight: 600; color: var(--ink); }

.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  margin: 0 0 calc(16px * var(--fs));
}
.facts div { background: var(--panel); padding: calc(11px * var(--fs)) calc(13px * var(--fs)); }
.facts dt {
  font-size: calc(11.5px * var(--fs)); color: var(--ink-3);
  margin: 0 0 calc(3px * var(--fs)); letter-spacing: .02em;
}
.facts dd {
  margin: 0; font-size: calc(16px * var(--fs)); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.facts dd small { font-size: calc(11.5px * var(--fs)); font-weight: 400; color: var(--ink-3); }

.note {
  background: #FAF9F6; border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: 8px;
  padding: calc(13px * var(--fs)) calc(15px * var(--fs));
  margin: 0 0 calc(14px * var(--fs));
}
.note p { font-size: calc(12.5px * var(--fs)) !important; color: var(--ink-2) !important; }
.note p:last-child { margin-bottom: 0; }

table.src {
  width: 100%; border-collapse: collapse;
  font-size: calc(12.5px * var(--fs));
  margin: 0 0 calc(14px * var(--fs));
}
table.src th, table.src td {
  text-align: left; padding: calc(7px * var(--fs)) calc(9px * var(--fs));
  border-bottom: 1px solid var(--line); vertical-align: top;
}
table.src th { color: var(--ink-3); font-weight: 500; white-space: nowrap; }
table.src td:last-child { color: var(--ink-2); }

/* ---------------------------------------------------------------- 三维 */
.viewer { position: relative; overflow: hidden; background: #0E1418; }
#gl { display: block; width: 100%; height: 100%; touch-action: none; }
/* 按住 Ctrl/Shift 时给个抓手光标 —— 平移是隐藏手势，得有个可见的提示。
   :active 只有在真的按住左键拖动时才会命中，所以抓手是"抓"还是"抓着"分得开。 */
#gl.is-pan { cursor: grab; }
#gl.is-pan:active { cursor: grabbing; }

.hud {
  position: absolute; z-index: 5;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 11px;
  box-shadow: var(--shadow);
  padding: calc(13px * var(--fs-ui)) calc(15px * var(--fs-ui));
}
.hud h3 {
  margin: 0 0 calc(9px * var(--fs-ui));
  font-size: calc(11px * var(--fs-ui));
  font-weight: 600; color: var(--ink-3);
  letter-spacing: .09em;
}
/* 状态条：数据规模与「实测 / 推算」口径在「来源」页已完整说明，这里不再显示。
   DOM 节点和文字生成仍保留（probe / parity / verify_facade_detail 要读它），
   只用 display:none 让它恒定不出现。 */
.hud-stat {
  display: none;
  bottom: 16px; left: 16px;
  font-size: calc(11.5px * var(--fs-ui));
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  padding: calc(9px * var(--fs-ui)) calc(13px * var(--fs-ui));
}

/* ---------------------------------------------------------------- 漫游浮层 */
/* 中心准星。只第一人称显示 —— 第三人称能看见自己站在哪儿，不需要准星。 */
.crosshair {
  position: absolute; z-index: 6;
  left: 50%; top: 50%;
  width: calc(14px * var(--fs-ui)); height: calc(14px * var(--fs-ui));
  margin: calc(-7px * var(--fs-ui)) 0 0 calc(-7px * var(--fs-ui));
  pointer-events: none;
}
.crosshair::before, .crosshair::after {
  content: ""; position: absolute; background: rgba(255,255,255,.85);
  box-shadow: 0 0 2px rgba(0,0,0,.55);
}
.crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; }
.crosshair::after { top: 50%; left: 0; right: 0; height: 1px; margin-top: -0.5px; }

/* 顶部模式徽标：告诉用户"现在在人行 / 第一人称" */
.hud-mode {
  top: 16px; left: 50%; transform: translateX(-50%);
  font-size: calc(11.5px * var(--fs-ui));
  color: var(--ink); font-weight: 600; letter-spacing: .06em;
  padding: calc(7px * var(--fs-ui)) calc(14px * var(--fs-ui));
  white-space: nowrap;
}
.hud-mode .sub { font-weight: 400; color: var(--ink-3); }

/* 底部操作提示。靠右下角 —— 左下角被状态条占着（"20702 栋建筑…"很长），
   放正中间两块会贴在一起。漫游时建筑信息卡不出现，右下是空的。 */
.hud-keys {
  bottom: 16px; right: 16px;
  font-size: calc(11px * var(--fs-ui));
  color: var(--ink-2);
  padding: calc(7px * var(--fs-ui)) calc(13px * var(--fs-ui));
  white-space: nowrap;
}
.hud-keys b { color: var(--ink); font-weight: 600; }

/* 速度表。压在模式徽标正下方 —— 两个都是"当前状态"，放一起读起来连贯。
   数字用等宽数字，不然 8→18 位数变化时整块会左右抖。 */
.hud-speed {
  top: calc(16px * var(--fs-ui) + 38px * var(--fs-ui)); left: 50%;
  transform: translateX(-50%);
  font-size: calc(11.5px * var(--fs-ui));
  color: var(--ink-2);
  padding: calc(5px * var(--fs-ui)) calc(12px * var(--fs-ui));
  white-space: nowrap; display: flex; align-items: baseline;
  gap: calc(4px * var(--fs-ui));
}
.hud-speed b {
  font-size: calc(15px * var(--fs-ui)); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: calc(30px * var(--fs-ui)); text-align: right;
}
.hud-speed i { font-style: normal; color: var(--ink-3); }
/* ★ 必须补这一条：上面 .hud-speed 写了 display:flex，而 [hidden] 的
   display:none 来自 UA 样式表 —— 作者样式一律赢，于是 hidden 属性会失效、
   速度表在人行模式下也照样显示（截图里抓到过）。 */
.hud-speed[hidden] { display: none; }

/* 巡游浮层：节拍名 + 进度条 + 停止提示。
   ★ 同样必须补 [hidden] 那一条 —— 这里写了 display:flex，作者样式一律赢过
     UA 样式表的 display:none，不补的话"停止巡游后进度条还挂在画面上"。 */
.hud-roam {
  bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center;
  gap: calc(12px * var(--fs-ui));
  font-size: calc(11.5px * var(--fs-ui));
  color: var(--ink); font-weight: 600; letter-spacing: .05em;
  padding: calc(8px * var(--fs-ui)) calc(14px * var(--fs-ui));
  white-space: nowrap;
  pointer-events: none;          /* 别挡住点画面 */
}
.hud-roam[hidden] { display: none; }
.hud-roam .rbar {
  display: block; width: calc(148px * var(--fs-ui)); height: 4px;
  background: rgba(20,22,26,.13); border-radius: 2px; overflow: hidden;
}
.hud-roam .rbar i {
  display: block; width: 0; height: 100%;
  background: var(--accent-2); border-radius: 2px;
}
.hud-roam .rstop { font-weight: 400; color: var(--ink-3); }

/* 「寻家」飞行浮层：目标名 + 返回提示。压**顶部正中** —— 沉浸态下左栏和状态条
   都没了，顶部那一条是空的（漫游徽标只在漫游时出现，两者不会同时挂）。 */
.hud-fly {
  top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center;
  gap: calc(12px * var(--fs-ui));
  font-size: calc(11.5px * var(--fs-ui));
  color: var(--ink); font-weight: 600; letter-spacing: .05em;
  padding: calc(8px * var(--fs-ui)) calc(14px * var(--fs-ui));
  white-space: nowrap; pointer-events: none;
  max-width: calc(100% - 32px);
}
.hud-fly[hidden] { display: none; }
.hud-fly .fname {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.hud-fly .fstop { font-weight: 400; color: var(--ink-3); flex: 0 0 auto; }

.hud-info {
  bottom: 16px; right: 16px; max-width: calc(268px * var(--fs-ui));
  padding: calc(15px * var(--fs-ui)) calc(17px * var(--fs-ui));
}
.hud-info .x {
  position: absolute; top: calc(5px * var(--fs-ui)); right: calc(7px * var(--fs-ui));
  border: 0; background: transparent; cursor: pointer; font-size: calc(19px * var(--fs-ui));
  color: var(--ink-3); line-height: 1; padding: 3px;
}
.hud-info .x:hover { color: var(--ink); }
#infoBody .nm {
  font-size: calc(15px * var(--fs-ui)); font-weight: 600;
  margin: 0 0 calc(7px * var(--fs-ui)); padding-right: calc(16px * var(--fs-ui));
}
#infoBody dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(4px * var(--fs-ui)) calc(11px * var(--fs-ui)); }
#infoBody dt { font-size: calc(11.5px * var(--fs-ui)); color: var(--ink-3); white-space: nowrap; }
#infoBody dd { margin: 0; font-size: calc(12.5px * var(--fs-ui)); color: #2E3033; }
#infoBody .est { color: var(--accent-2); }

/* ---------------------------------------------------------------- 启动遮罩 */
.boot {
  position: absolute; inset: 0; z-index: 60;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .45s ease;
}
.boot.gone { opacity: 0; pointer-events: none; }
.bootin { text-align: center; }
.bootin p { font-size: 14px; color: var(--ink-2); margin: 0; letter-spacing: .04em; }

/* ---------------------------------------------------------------- 窄屏 */
/* 左栏折成上、三维视口占下。标签条仍然是竖的（窄屏宽度富余，横向不用省），
   「来源」页太长时由 .panes 内部滚动。 */
@media (max-width: 900px) {
  /* 窄屏本来就是整栏铺满，.layout.is-src / .is-collapsed 的单列要一起盖掉
     （它们的选择器特异性更高，不一起写会被顶回两列） */
  .layout, .layout.is-src, .layout.is-collapsed {
    grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr);
  }
  .panel { border-right: 0; border-bottom: 1px solid var(--line); max-height: 46vh; }
  /* 窄屏上「收起」没意义（本来就占不满宽度），藏掉按钮 */
  .collapse { display: none; }
  .viewer { min-height: 44vh; }
  /* 窄屏出触屏那套手势提示（原来整条藏掉，是因为旧版触屏只有单指旋转+捏合缩放，
     说了等于没说）。键鼠那套在这里没意义，换成 touch-only。 */
  .hint .kbd-only { display: none; }
  .hint .touch-only { display: inline; }
  .hud-stat { bottom: 10px; left: 10px; }
  /* 窄屏没有键盘，按键徽标没意义；徽标也跟着缩到左上，别压住画面正中 */
  .hud-keys { display: none; }
  .hud-mode { top: 10px; left: 10px; transform: none; }

  /* 漫游沉浸态：窄屏本来是「左栏在上、视口在下」两行，这里要收回单行 ——
     面板一 display:none，它就退出了网格，视口会落到 auto 高的第一行上、
     铺不满整个窗口。写在最后，保证盖过上面那条 .layout.is-collapsed。 */
  .layout.is-roam { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
}