/* ============================================================================
   舆地秭笺 4.0.3

   ── 代码收束说明 ──
   本样式表负责所有视觉层的最终落地，原则上不处理业务逻辑。
   1) :root 负责全局 token 与主题变量；
   2) html/body 负责页面框架、启动遮罩与安全区；
   3) #map-container 与 svg 负责地图渲染容器；
   4) #info-block / #function-block / #logo-block 负责界面层；
   5) .region / #regions / #nominal-projection 负责地理区域与双轨地图状态；
   6) 启动、交互、动画的核心状态仍由 JS 统一管理，不在这里写分支逻辑。

   这里的注释有意保留并持续扩充：它们既是说明文档，也是维护性约束，
   目的是把“美丽但混乱”的结构收束成一套可持续维护的架构。
============================================================================ */
:root {
  /* ---------- 全局字体与页面 ---------- */
  --app-font-family: 'TF-First', sans-serif;
  --app-background: #f1f1f1;
  --global-font-base-size: 20px;
  --global-font-scale: 1.20;
  --global-content-line-height: 1.45;
  --button-line-height: 1.25;

  /* ---------- 通用界面反馈节奏 ---------- */
  --interface-feedback-duration: 800ms;
  --interface-surface-fade-duration: 1200ms;
  --interface-feedback-easing: ease;
  /* 流光层独立节奏：比动态聚焦更慢，缓缓进入、缓缓淡出。 */
  --interface-edge-fade-duration: 2400ms;
  --interface-edge-fade-easing: ease-in-out;

  --startup-loader-enter-duration: 920ms;
  --startup-loader-exit-duration: 1380ms;
  --startup-content-reveal-duration: 1240ms;
  --startup-content-reveal-delay: 170ms;
  --startup-content-start-opacity: 0;
  --startup-content-start-scale: 0.986;
  --startup-content-start-blur: 0px;
  --startup-spinner-enter-duration: 1050ms;
  --startup-spinner-exit-duration: 460ms;
  --startup-spinner-start-scale: 0.82;
  --startup-spinner-start-blur: 5px;
  --startup-spinner-size: 38px;
  --startup-spinner-stroke: 3px;

  /* ---------- 全局文字发光 ---------- */
  --global-glow-color: rgba(130,130,130,0.58);
  --global-glow-soft: rgba(130,130,130,0.28);
  --global-glow-tight-radius: 1px;
  --global-glow-medium-radius: 3px;
  --global-glow-wide-radius: 6px;
  --svg-text-glow-wide-radius: 4px;

  /* ---------- 地图区域基础视觉 ---------- */
  --region-fill-default: transparent;
  --region-stroke-default: #111111;
  --region-stroke-width: 4px;
  --region-line-join: round;
  --region-style-transition-duration: 0.5s;
  
  /* ---------- 二级菜单行动项语义色 ---------- */
  --menu-item-action-color: #ff5722;

  /* ---------- 地图首屏挂载动画 ---------- */
  --map-boot-start-opacity: 0;
  --map-boot-end-opacity: 0.2;
  --map-boot-duration: 300ms;

  /* ---------- 现实/想象双轨切换过渡 ---------- */
  --track-switch-duration: 280ms;
  --track-switch-easing: cubic-bezier(0.4, 0, 0.2, 1);
  /* 现实轨整图金晕：暖光罩，强调"已进入诗文华夏的现实层"。
     （现实层版图本体不加 sepia/hue-rotate 滤镜——滤镜会把整层按
       固定分辨率栅格化，深缩放时出现马赛克；层级区别改由暖金光罩
       与古黄提示框承担，不触发重栅格化。） */
  --nominal-aura-color-a: rgba(214, 176, 92, 0.26);
  --nominal-aura-color-b: rgba(196, 148, 70, 0.09);

  /* ---------- 信息栏布局、整体悬停与局部聚焦 ---------- */
  --panel-left: 73.8%;
  --panel-right: 0.5%;
  --info-panel-top: 1%;
  --info-panel-bottom: 30%;
  --panel-radius: 30px;
  --info-panel-hover-background-alpha: 0.34;
  --info-focus-radius: 180px;
  --info-focus-backdrop-blur: 18px;
  --info-panel-padding: 10px;
  --info-content-fade-duration: 120ms;
  
  /* ---------- 液态玻璃表现参数（集中控制） ---------- */
  /* 四边高光透明度：顶 / 左 / 底 / 右。越大越亮。 */
  --glass-hl-top: 1.00;
  --glass-hl-left: 0.68;
  --glass-hl-bottom: 0.30;
  --glass-hl-right: 0.30;
  /* 高光宽度与扩散。宽度 = 视觉厚度；扩散 = 折射柔度。 */
  --glass-hl-width: 3px;
  --glass-hl-blur: 6px;
  /* 外部投影：让面板浮起来。0 = 不加。 */
  --glass-outer-blur: 24px;
  --glass-outer-alpha: 0.20;
  
  /* ---------- 浮窗玻璃语言（色盘 / 关于 / 帮助 / 未来合并询问窗 共用） ----------
     所有"浮在地图上的模态玻璃面"共用这一组参数。
     想统一调整所有浮窗的透度 / 模糊 / 内边距，只改这里。 */
  --float-surface-bg: rgba(255, 255, 255, 0.04);
  --float-surface-blur: 2px;
  --float-surface-saturate: 1;
  --float-padding-y: 22px;
  --float-padding-x: 18px;
  /* 柔光层：左上亮斑 + 右下微暗，制造"玻璃厚度"。 */
  --float-softlight:
    radial-gradient(140% 90% at 18% 0%, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(100% 70% at 100% 100%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(80% 50% at 100% 0%, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 60%);
  /* 浮窗阴影：四边高光 + 外白圈 + 双层柔黑投影。 */
  --float-shadow:
    inset 0 var(--glass-hl-width) var(--glass-hl-blur) rgba(255,255,255, calc(var(--glass-hl-top) * 0.95)),
    inset var(--glass-hl-width) 0 var(--glass-hl-blur) rgba(255,255,255, calc(var(--glass-hl-left) * 0.85)),
    inset 0 calc(-1 * var(--glass-hl-width)) var(--glass-hl-blur) rgba(255,255,255, calc(var(--glass-hl-bottom) * 0.85)),
    inset calc(-1 * var(--glass-hl-width)) 0 var(--glass-hl-blur) rgba(255,255,255, calc(var(--glass-hl-right) * 0.85)),
    0 0 var(--glass-outer-blur) rgba(255,255,255, var(--glass-outer-alpha)),
    0 16px 40px rgba(0,0,0,0.14),
    0 2px 8px rgba(0,0,0,0.08);
	
  /* ---------- 面板玻璃（常驻面板：信息栏 / 工具栏） ----------
     回到"0.1 / 10px"基准：透 + 足够模糊去压住地图细节，
     避免底图细线透过玻璃后显得"糊"。 */
  --panel-glass-bg: rgba(255, 255, 255, 0.1);
  --panel-glass-blur: 10px;
  --panel-glass-saturate: 1.25;

  /* 二级菜单：略实一点压住地图细节，但仍透。 */
  --menu-glass-bg: rgba(255, 255, 255, 0.1);
  --menu-glass-blur: 10px;
  --menu-glass-saturate: 1.15;

  /* 常驻面板柔光层：保留"透光"，只留一块克制的左上亮斑给玻璃厚度，
     不做大面积的"白雾 / 灰雾"。 */
  --panel-softlight:
    radial-gradient(140% 90% at 18% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%);

  /* ---------- 工具栏按钮整体悬停与局部聚焦 ---------- */
  --function-panel-top: 71%;
  --function-panel-bottom: 1%;
  --function-button-hover-background-alpha: 0.42;
  --function-button-backdrop-blur: 0px;
  --function-button-focus-radius: 56px;
  --function-button-focus-backdrop-blur: 18px;
  --function-button-radius: 30px;

  /* ---------- Logo 布局与视觉 ---------- */
  --logo-size: 120px;
  /* 【易错点】SVG 四周有大片透明留白（viewBox 680.19×778.64，内容约占
     左 9% / 顶 13% 留白）。「可见图标」左上角 = #logo-block 左上角 +
     ≈22px（水平：8px padding + ≈6.6px letterbox + ≈8.2px SVG 左留白）
     / +≈22px（垂直：8px padding + ≈13.7px SVG 顶留白）。
     --logo-left 不再把图标贴死左缘，留出 ≈18px 呼吸空间。
     --logo-top 不再把图标顶到屏幕最顶端（0px 会压住横屏下 1% 处的染色框
     顶边框），改为对齐染色框顶边（--info-panel-top:1%）之下 6px。 */
  --logo-top: calc(var(--info-panel-top) - 16px);
  --logo-left: -5px;
  --logo-padding: 8px;
  --logo-radius: 36px;
  --logo-background: transparent;
  --logo-backdrop-filter: none;

  /* Logo首屏入场 */
  --logo-entrance-duration: 1180ms;
  --logo-entrance-delay: 220ms;
  --logo-entrance-easing: cubic-bezier(0.37, 0, 0.63, 1);
  --logo-entrance-start-scale: 0.955;
  --logo-entrance-start-blur: 4px;

  /* Logo悬停与触摸反馈 */
  --logo-feedback-duration: var(--interface-feedback-duration);
  --logo-feedback-easing: var(--interface-feedback-easing);
  --logo-feedback-active-contrast: 1.32;
  --logo-feedback-idle-shadow:
    drop-shadow(0 0 0 rgba(38,38,38,0))
    drop-shadow(0 0 0 rgba(58,58,58,0));
  --logo-feedback-active-shadow:
    drop-shadow(0 0 6px rgba(38,38,38,0.82))
    drop-shadow(0 0 11px rgba(58,58,58,0.54));
  --logo-feedback-contour-opacity: 0.38;
  --logo-feedback-contour-blur: 3.8px;
  --logo-feedback-contour-brightness: 0.29;
  --logo-z-index: 20;
  /* 现实轨常驻：暖金柔光（诗文华夏的金色气质）。
     drop-shadow 会顺着 SVG 透明区、贴着图标实体边缘走，
     而不是矩形 box-shadow 外框；挂在主图 #logo-img 上，满不透明。 */
  --logo-nominal-aura:
    drop-shadow(0 0 9px rgba(214, 176, 92, 0.55))
    drop-shadow(0 0 22px rgba(214, 176, 92, 0.28));
  
  /* ---------- 移动端安全区（刘海 / Home Indicator） ---------- */
  /* 只在 viewport-fit=cover 下有效；Android 通常返回 0，不影响。 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  margin: 0;
  width: 100%;
  height: 100%;
  /* 禁止 iOS 双击将页面放大；仍允许平移，地图手势由 SVG 自己接管。 */
  touch-action: manipulation;
}

body {
  margin: 0;
  width: 100%;
  touch-action: manipulation;
  /* 100vh 作为老浏览器降级；现代浏览器用 100dvh，
     它会随地址栏 / 底部工具栏的收起展开而动态变化。 */
  height: 100vh;
  height: 100dvh;
  /* 安全区避让：iOS 刘海与 Home Indicator。
     Android 的浏览器工具栏不属于安全区，由 dvh 处理。 */
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  box-sizing: border-box;
  font-family: var(--app-font-family);
  font-size: calc(var(--global-font-base-size) * var(--global-font-scale));
  display: flex;
  overflow: hidden;
  background: var(--app-background);
}

/* TF启动遮罩：pending → visible → revealing → ready；失败进入 error。 */


#map-container {
  opacity: var(--startup-content-start-opacity);
  transform: translateZ(0) scale(var(--startup-content-start-scale));
  filter: blur(var(--startup-content-start-blur));
  transform-origin: center center;
  transition:
    opacity var(--startup-content-reveal-duration) cubic-bezier(0.37, 0, 0.63, 1) var(--startup-content-reveal-delay),
    transform var(--startup-content-reveal-duration) cubic-bezier(0.37, 0, 0.63, 1) var(--startup-content-reveal-delay),
    filter var(--startup-content-reveal-duration) cubic-bezier(0.37, 0, 0.63, 1) var(--startup-content-reveal-delay);
  will-change: opacity, transform, filter;
}

html.app-revealing #map-container {
  opacity: 1;
  transform: translateZ(0) scale(1);
  filter: blur(0);
}

/* ready 后移除启动滤镜与显式 3D 提升；保留二维恒等变换维持定位包含块。
   opacity 提示维持原有 backdrop-root 边界，不在运动/停稳时切换玻璃采样。
   实际合成与栅格缓存由浏览器决定，清晰度和性能需设备复测。 */
html.app-ready #map-container {
  opacity: 1;
  transform: scale(1);
  filter: none;
  will-change: opacity;
}

/* 遮罩初始透明并拦截输入。 */
#startup-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-background);
  opacity: 0;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--startup-loader-enter-duration) cubic-bezier(0.37, 0, 0.63, 1);
  will-change: opacity;
}

.startup-loader-mark {
  position: relative;
  width: var(--startup-spinner-size);
  height: var(--startup-spinner-size);
  opacity: 0;
  filter: blur(var(--startup-spinner-start-blur));
  transform: translateZ(0) scale(var(--startup-spinner-start-scale));
  transition:
    opacity var(--startup-spinner-enter-duration) cubic-bezier(0.37, 0, 0.63, 1),
    transform var(--startup-spinner-enter-duration) cubic-bezier(0.37, 0, 0.63, 1),
    filter var(--startup-spinner-enter-duration) cubic-bezier(0.37, 0, 0.63, 1);
  will-change: transform, opacity, filter;
}

/* 旋转与进退场分属不同元素，避免两个动画同时争夺transform。 */
.startup-loader-ring {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  border: var(--startup-spinner-stroke) solid rgba(17, 17, 17, 0.15);
  border-top-color: rgba(17, 17, 17, 0.82);
  transform: translateZ(0);
  animation: startup-loader-spin 1180ms linear infinite;
  animation-play-state: paused;
  will-change: transform;
}


html.startup-loader-visible #startup-loader {
  opacity: 1;
}

html.startup-loader-visible .startup-loader-mark {
  opacity: 1;
  filter: blur(0);
  transform: translateZ(0) scale(1);
}

html.startup-loader-visible .startup-loader-ring {
  animation-play-state: running;
}

@keyframes startup-loader-spin {
  to { transform: translateZ(0) rotate(360deg); }
}

/* 就绪后从当前视觉状态平滑退出。 */
html.app-revealing #startup-loader,
html.app-ready #startup-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--startup-loader-exit-duration) cubic-bezier(0.37, 0, 0.63, 1),
    visibility 0s linear var(--startup-loader-exit-duration);
}

html.app-revealing .startup-loader-mark,
html.app-ready .startup-loader-mark {
  opacity: 0;
  filter: blur(2.5px);
  transform: translateZ(0) scale(0.92);
  transition:
    opacity var(--startup-spinner-exit-duration) cubic-bezier(0.42, 0, 0.58, 1),
    transform var(--startup-spinner-exit-duration) cubic-bezier(0.42, 0, 0.58, 1),
    filter var(--startup-spinner-exit-duration) cubic-bezier(0.42, 0, 0.58, 1);
}

/* 字体或应用明确失败时仍不显示后备文字，仅保留纯图形错误标记。 */
html.app-error #startup-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--startup-loader-enter-duration) cubic-bezier(0.37, 0, 0.63, 1);
}

html.app-revealing .startup-loader-ring,
html.app-ready .startup-loader-ring {
  animation-play-state: running;
}

html.app-error .startup-loader-mark {
  opacity: 1;
  filter: none;
  transform: translateZ(0) scale(1);
  border: 0;
  border-radius: 0;
}

html.app-error .startup-loader-ring {
  display: none;
}

html.app-error .startup-loader-mark::before,
html.app-error .startup-loader-mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--startup-spinner-stroke);
  height: 100%;
  border-radius: var(--startup-spinner-stroke);
  background: rgba(17, 17, 17, 0.72);
  transform-origin: center;
}

html.app-error .startup-loader-mark::before {
  transform: translateX(-50%) rotate(45deg);
}

html.app-error .startup-loader-mark::after {
  transform: translateX(-50%) rotate(-45deg);
}

/* ready后撤销启动遮罩的长期合成提示（遮罩已不可见，无需常驻GPU层）。
   注意：#map-container 不在此撤销 —— 撤销会改变面板 backdrop-filter
   对地图的采样，导致玻璃从「透/朦胧」骤变为「糊糊」。 */
html.app-ready #startup-loader,
html.app-ready .startup-loader-mark,
html.app-ready .startup-loader-ring {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .startup-loader-ring {
    animation-duration: 1400ms;
  }

  #startup-loader,
  #map-container,
  .startup-loader-mark,
  .startup-loader-ring {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }
}

/* 地图区 */
.navigation-canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  pointer-events: none;
}

#map-svg > [data-navigation-canvas] {
  visibility: hidden !important;
  pointer-events: all !important;
}

#map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.filing-record {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(35, 43, 43, 0.46);
  font-size: 10px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.filing-record:hover {
  color: rgba(35, 43, 43, 0.72);
  text-decoration: none;
}

#info-block > .filing-record {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms cubic-bezier(0.37, 0, 0.63, 1),
    visibility 0s linear 220ms;
}

#info-block > .filing-record:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

body[data-filing-record="enabled"]:not([data-filing-sync="explicit"]):has(#info-block .info-content[data-info-view="intro"].is-visible):not(:has(#info-block .info-content[data-region-name])):not(:has(.secondary-panel.is-open))
  #info-block > .filing-record {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Apple 显式同步分支：核心提交显隐与时长，CSS 只负责 ease 透明度过渡。
  不再切换 visibility；透明时仍保留渲染，交互由核心和 pointer-events 关闭，勿恢复独立延迟。 */
body[data-filing-sync="explicit"] #info-block > .filing-record {
  visibility: visible;
  transition: opacity var(--filing-transition-duration, var(--info-content-fade-duration)) ease;
}

body[data-filing-record="enabled"][data-filing-sync="explicit"] #info-block[data-filing-visible="true"] > .filing-record {
  opacity: 1;
  pointer-events: auto;
}

/* 非地图交互保留区：透明接住指针/触摸，阻断边缝、圆角外侧和面板间隙对地图的命中。
  桌面覆盖 --panel-left 右侧；窄屏覆盖信息栏上沿以下的底部区域。
  z-index 低于信息栏/工具栏而高于 SVG，面板控件可操作，底图仍可见。 */
#map-container::after {
  content: '';
  position: absolute;
  inset: 0 0 0 var(--panel-left);
  z-index: 1;
  pointer-events: auto;
  touch-action: none;
}

@media (max-width: 800px) {
  #map-container::after {
    inset: calc(100% - var(--info-panel-bottom-gap) - var(--info-panel-height)) 0 0;
  }
}

svg {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  touch-action: none;
  /* 移动端长按地图区不进入文本选择/长按菜单。
     SVG 内的 path 元素在部分浏览器上会触发 selection，
     与合并手势、tap 判定直接打架。 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.region {
  fill: var(--region-fill-default);
  stroke: var(--region-stroke-default);
  stroke-width: var(--region-stroke-width);
  stroke-linejoin: var(--region-line-join);
  cursor: pointer;
  /* 地区视觉由统一渲染器和 D3 transition 独占控制。 */
  transition: none;
  /* 果冻摇曳：让 transform 以元素自身中心为锚点，只作用于元素本身。 */
  transform-box: fill-box;
  transform-origin: center;
}

/* 选中闪烁仍保留原 0.5s 的柔和描边过渡，不影响 Hover 渐变。 */
.region.is-selection-flashing {
  transition:
    fill var(--region-style-transition-duration),
    stroke var(--region-style-transition-duration);
}

#regions path.region[data-navigation-stroke],
#nominal-projection path.region[data-navigation-stroke] {
  opacity: 1 !important;
  stroke: var(--navigation-stroke-color) !important;
}

/* 现实/想象双轨切换：两条地图图层交叉淡入淡出。 */
#regions,
#nominal-projection {
  transition: opacity var(--track-switch-duration) var(--track-switch-easing);
}
#regions {
  opacity: 1;
  pointer-events: auto;
}
#nominal-projection {
  opacity: 0;
  pointer-events: none;
  /* 现实层版图本体不加滤镜：CSS/SVG filter 会把整层按固定分辨率
     栅格化进纹理，深缩放时先放大低清纹理 → 马赛克。层级区别改由
     暖金光罩 #track-aura 与古黄提示框 #nominal-track-frame 承担。 */
}

/* 现实轨整图金晕：铺在地图之上的暖光罩，随 body[data-view-track] 淡入淡出。
   纯装饰、pointer-events:none，强化"现实层"与"想象层"的温差。 */
#track-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--nominal-aura-color-a) 0%, rgba(214,176,92,0) 72%),
    radial-gradient(100% 100% at 50% 100%, var(--nominal-aura-color-b) 0%, rgba(196,148,70,0) 60%);
  opacity: 0;
  transition: opacity var(--track-switch-duration) var(--track-switch-easing);
}
body[data-view-track="nominal"] #track-aura {
  opacity: 1;
}

/* 切轨过渡不再做整图模糊脉冲——模糊会让快速切换显得生硬。
   只保留两条图层的交叉淡入淡出：旧的渐隐的同时，新的渐显。 */

/* 合并模式激活时禁用文本选择，防止拖动经过信息栏/工具栏时选中文字。 */
body.merge-mode-active,
body.merge-mode-active * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#merge.is-merge-mode-exit .glass-button-label {
  color: var(--menu-item-action-color);
}

/* 合并模式：地图区四周的墨黑液态玻璃提示框。
   纯装饰，pointer-events:none 不拦截任何交互；
   主体透明（仅四周提示，不覆盖地图主体显示）。 */
#merge-armed-frame {
  position: absolute;
  left: var(--panel-right);
  top: var(--info-panel-top);
  bottom: var(--function-panel-bottom);
  width: calc(var(--panel-left) - 2 * var(--panel-right));
  box-sizing: border-box;
  border-radius: var(--panel-radius);
  /* 主体保持透明：不在地图区内铺染色，提示框以边框为主。 */
  background: transparent;
  border: 2px solid rgba(18, 18, 18, 0.62);
  box-shadow:
    /* 四周内缘墨晕：贴边收紧（小偏移 + 小发散），不过分侵入地图。 */
    inset 0 3px 8px rgba(0, 0, 0, 0.30),
    inset 3px 0 8px rgba(0, 0, 0, 0.30),
    inset 0 -3px 8px rgba(0, 0, 0, 0.22),
    inset -3px 0 8px rgba(0, 0, 0, 0.22),
    /* 边缘细光：勾勒玻璃轮廓。 */
    inset 0 0 6px rgba(20, 20, 20, 0.28),
    /* 外部柔和墨晕：收窄范围，让边框显眼而不铺满。 */
    0 0 16px rgba(0, 0, 0, 0.30);
  /* 对角蒙版：左下 / 右上 100% 可见，左上 / 右下全透明。
     用 to top right（角到角相对渐变）而非 45deg（绝对角）：45deg 只对
     正方形成立，横屏真实对角线≈30°、竖屏≈55°，固定 45° 会让渐变带
     偏离真实对角线，四角不透明度全部错位。to top right 由浏览器按框
     实际宽高实时计算对角线，角到角对齐。
     关键：角到角渐变下，对角线的中垂线恰是「左上—右下」另一条对角线，
     因此左上 / 右下两角永远精确落在 50%（几何中心），与宽高比无关；
     透明带只需包住 50% 即可让这两角准确透明。 */
  -webkit-mask-image: linear-gradient(to top right, #000 0%, #000 30%, transparent 40%, transparent 60%, #000 70%, #000 100%);
  mask-image: linear-gradient(to top right, #000 0%, #000 30%, transparent 40%, transparent 60%, #000 70%, #000 100%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 34;
  transition:
    opacity 260ms cubic-bezier(0.37, 0, 0.63, 1),
    visibility 0s linear 260ms;
}

body.merge-mode-active #merge-armed-frame {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 260ms cubic-bezier(0.37, 0, 0.63, 1),
    visibility 0s;
}

/* 现实轨（名义层）古黄提示框：与 #merge-armed-frame 完全同构，仅色泽不同。
   现实轨下沿「右上—左下」对角淡入，示意当前处于现实版图（不可编辑）。
   古黄取诗文华夏的金色气质，与暖金光罩同源。 */
#nominal-track-frame {
  position: absolute;
  left: var(--panel-right);
  top: var(--info-panel-top);
  bottom: var(--function-panel-bottom);
  width: calc(var(--panel-left) - 2 * var(--panel-right));
  box-sizing: border-box;
  border-radius: var(--panel-radius);
  background: transparent;
  border: 2px solid rgba(186, 146, 66, 0.62);
  box-shadow:
    inset 0 3px 8px rgba(206, 164, 76, 0.30),
    inset 3px 0 8px rgba(206, 164, 76, 0.30),
    inset 0 -3px 8px rgba(206, 164, 76, 0.22),
    inset -3px 0 8px rgba(206, 164, 76, 0.22),
    inset 0 0 6px rgba(186, 146, 66, 0.28),
    0 0 16px rgba(196, 154, 70, 0.30);
  -webkit-mask-image: linear-gradient(to top right, #000 0%, #000 30%, transparent 40%, transparent 60%, #000 70%, #000 100%);
  mask-image: linear-gradient(to top right, #000 0%, #000 30%, transparent 40%, transparent 60%, #000 70%, #000 100%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 33;
  transition:
    opacity 260ms cubic-bezier(0.37, 0, 0.63, 1),
    visibility 0s linear 260ms;
}

body[data-view-track="nominal"] #nominal-track-frame {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 260ms cubic-bezier(0.37, 0, 0.63, 1),
    visibility 0s;
}

/* 窄屏按原设计铺满地图区；仅微收一口，避免侵入上方 Logo / SVG 图标。 */
@media (max-width: 800px) {
  #merge-armed-frame,
  #nominal-track-frame {
    left: 0;
    top: 0.75%;
    width: 100%;
    /* 【易错点】竖屏下染色框的底边与「工具栏」外缘下沿重合（不是信息栏）。
       工具栏 bottom = 1.5% + safe-bottom，信息栏 bottom 在其上方 64px+8px
       处。若错把染色框底边对齐信息栏，工具栏区域会露底；若漏掉 bottom，
       则沿用横屏 1%，与工具栏底边错开。这里与 #function-block 共用
       --function-panel-bottom-gap，保证两者精确重合。 */
    bottom: var(--function-panel-bottom-gap);
    -webkit-mask-image: linear-gradient(to top right, #000 0%, #000 30%, transparent 40%, transparent 60%, #000 70%, #000 100%);
    mask-image: linear-gradient(to top right, #000 0%, #000 30%, transparent 40%, transparent 60%, #000 70%, #000 100%);
  }
}

/* 可复用动态聚焦宿主：后续二级菜单只需调用注册接口并选择 profile。 */
.interface-focus-host {
  isolation: isolate;
  --interface-focus-x: 50%;
  --interface-focus-y: 50%;
  --interface-focus-radius: var(--function-button-focus-radius);
  --interface-focus-blur: var(--function-button-focus-backdrop-blur);
  --interface-focus-clear-stop: 44%;
  /* 未激活时保持原百分比渐变；活动焦点由 JS 按速度逐帧写入像素停点。 */
  --interface-focus-vignette-stop-1: calc(var(--interface-focus-clear-stop) - 18%);
  --interface-focus-vignette-stop-2: calc(var(--interface-focus-clear-stop) - 6%);
  --interface-focus-vignette-stop-3: calc(var(--interface-focus-clear-stop) + 8%);
  --interface-focus-vignette-stop-4: calc(var(--interface-focus-clear-stop) + 22%);
  --interface-focus-vignette-stop-5: calc(var(--interface-focus-clear-stop) + 34%);
  --interface-focus-vignette-stop-6: calc(var(--interface-focus-clear-stop) + 44%);
  --interface-surface-r: 230;
  --interface-surface-g: 230;
  --interface-surface-b: 230;
}

.interface-focus-host:not(#info-block):not(button) {
  position: relative;
  overflow: hidden;
}

.interface-focus-host > * {
  position: relative;
  z-index: 2;
}

/* 液态玻璃按钮公共基类：所有玻璃态按钮共享。
   各按钮类（#function-block button / .menu-item）只写差异。 */
.glass-button {
  position: relative;
  overflow: hidden;
  border: none;
  font-family: inherit;
  cursor: pointer;
  /* 按键文字一律不可选中：信息栏正文可选中（设计如此），
     但拖动经过工具栏/菜单/弹窗按钮时不得选中按键文字。 */
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 var(--glass-hl-width) var(--glass-hl-blur) rgba(255,255,255, calc(var(--glass-hl-top) * 0.85)),
    inset 0 calc(-1 * var(--glass-hl-width)) var(--glass-hl-blur) rgba(255,255,255, calc(var(--glass-hl-bottom) * 0.85));
  -webkit-tap-highlight-color: transparent;
}

.interface-focus-profile-information {
  --interface-focus-radius: var(--info-focus-radius);
  --interface-focus-blur: var(--info-focus-backdrop-blur);
  --interface-surface-r: 232;
  --interface-surface-g: 232;
  --interface-surface-b: 232;
  --interface-surface-alpha: var(--info-panel-hover-background-alpha);
}

.interface-focus-profile-button,
.interface-focus-profile-submenu {
  --interface-focus-radius: var(--function-button-focus-radius);
  --interface-focus-blur: var(--function-button-focus-backdrop-blur);
  --interface-focus-clear-stop: 56%;
  --interface-surface-r: 230;
  --interface-surface-g: 230;
  --interface-surface-b: 230;
  --interface-surface-alpha: var(--function-button-hover-background-alpha);
}

/* 信息栏区 */
#info-block {
  position: absolute;
  z-index: 2;
  left: var(--panel-left);
  right: var(--panel-right);
  top: var(--info-panel-top);
  bottom: var(--info-panel-bottom);
  border-radius: var(--panel-radius);
  background-color: var(--panel-glass-bg);
  /* 柔光层：极弱的一层，避免大面积雾感。 */
  background-image: var(--panel-softlight);
  backdrop-filter: blur(var(--panel-glass-blur)) saturate(var(--panel-glass-saturate));
  -webkit-backdrop-filter: blur(var(--panel-glass-blur)) saturate(var(--panel-glass-saturate));
  padding: var(--info-panel-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
  isolation: isolate;
  /* [3.4.0-c] 液态玻璃边缘高光：顶、左为受光面，底、右为背光面。
     静态属性，不参与逐帧更新，零性能负担。
     染色聚焦层为半透明，此处顶/左高光适度压暗，避免高光穿透色层
     在四周形成一圈刺眼的「白线」。 */
  box-shadow:
    inset 0 var(--glass-hl-width) var(--glass-hl-blur) rgba(255,255,255, calc(var(--glass-hl-top) * 0.70)),
    inset var(--glass-hl-width) 0 var(--glass-hl-blur) rgba(255,255,255, calc(var(--glass-hl-left) * 0.72)),
    inset 0 calc(-1 * var(--glass-hl-width)) var(--glass-hl-blur) rgba(255,255,255, var(--glass-hl-bottom)),
    inset calc(-1 * var(--glass-hl-width)) 0 var(--glass-hl-blur) rgba(255,255,255, var(--glass-hl-right)),
    0 0 var(--glass-outer-blur) rgba(255,255,255,var(--glass-outer-alpha));
  transition:
    background-color var(--interface-feedback-duration) var(--interface-feedback-easing),
    backdrop-filter var(--interface-feedback-duration) var(--interface-feedback-easing),
    -webkit-backdrop-filter var(--interface-feedback-duration) var(--interface-feedback-easing);
  --interface-focus-x: 50%;
  --interface-focus-y: 50%;
  --interface-focus-radius: var(--info-focus-radius);
  --interface-focus-blur: var(--info-focus-backdrop-blur);
  --interface-surface-r: 232;
  --interface-surface-g: 232;
  --interface-surface-b: 232;
  --interface-surface-alpha: var(--info-panel-hover-background-alpha);
}

/* 信息栏滚动容器：聚焦层（::before/::after 与流光层）是 #info-block 的直接子元素，
   不再随正文滚动，无需 JS 逐帧反向补偿滚动偏移——从根本上消除快速滚动时
   「上/下区域来不及上色」的滞后。 */
#info-block .info-scroll {
  position: absolute;
  inset: var(--info-panel-padding);
  bottom: calc(var(--info-panel-padding) + 20px);
  border-radius: calc(var(--panel-radius) - var(--info-panel-padding));
  overflow: auto;
  z-index: 2;
}

/* 信息栏保留滚轮/触控滚动，不显示覆盖聚焦层的原生滚动条。 */
#info-block .info-scroll {
  scrollbar-width: none;
}

#info-block .info-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 二级菜单使用细、圆角的液态玻璃滚动条。 */
.secondary-panel,
.secondary-panel-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.34) rgba(255, 255, 255, 0.04);
}

.secondary-panel::-webkit-scrollbar,
.secondary-panel-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.secondary-panel::-webkit-scrollbar-track,
.secondary-panel-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.secondary-panel::-webkit-scrollbar-thumb,
.secondary-panel-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.secondary-panel::-webkit-scrollbar-thumb:hover,
.secondary-panel-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.28));
  background-clip: padding-box;
}

.secondary-panel::-webkit-scrollbar-corner,
.secondary-panel-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

[data-interface-focus]::before,
[data-interface-focus]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

[data-interface-focus]::before {
  transition:
    opacity var(--interface-feedback-duration) var(--interface-feedback-easing),
    visibility 0s linear var(--interface-feedback-duration);
}

[data-interface-focus]::after {
  transition:
    opacity var(--interface-surface-fade-duration) var(--interface-feedback-easing),
    visibility 0s linear var(--interface-surface-fade-duration);
}

/* 信息栏聚焦层（::before/::after 与流光层）直接挂在 #info-block 下，
   正文滚动发生在内层 .info-scroll，聚焦层不随正文滚动，无需滚动偏移补偿。 */

/* 下层中性聚焦镜：只提供外环的"磨砂"透镜深度，不再承担任何白色。
   中心被反向镂空成最清最透的窗口，直接露出面板自带的玻璃底色——
   也就是用户口中的"玻璃自带的内生梦幻色泽"。磨砂仅在外环，
   叠加在有色材质层之下，制造玻璃折射的厚度感。 */
[data-interface-focus]::before {
  background: transparent;
  backdrop-filter: blur(var(--interface-focus-blur)) contrast(1.035) saturate(1.035);
  -webkit-backdrop-filter: blur(var(--interface-focus-blur)) contrast(1.035) saturate(1.035);
  /* 磨砂强度沿半径连续渐变：中心最清、越往外越磨砂，无硬边界。 */
  mask-image: radial-gradient(
    circle var(--interface-focus-radius) at var(--interface-focus-x) var(--interface-focus-y),
    transparent 0%,
    rgba(0,0,0,0.05) var(--interface-focus-vignette-stop-1),
    rgba(0,0,0,0.16) var(--interface-focus-vignette-stop-2),
    rgba(0,0,0,0.40) var(--interface-focus-vignette-stop-3),
    rgba(0,0,0,0.68) var(--interface-focus-vignette-stop-4),
    rgba(0,0,0,0.90) var(--interface-focus-vignette-stop-5),
    #000 var(--interface-focus-vignette-stop-6),
    #000 100%
  );
  -webkit-mask-image: radial-gradient(
    circle var(--interface-focus-radius) at var(--interface-focus-x) var(--interface-focus-y),
    transparent 0%,
    rgba(0,0,0,0.05) var(--interface-focus-vignette-stop-1),
    rgba(0,0,0,0.16) var(--interface-focus-vignette-stop-2),
    rgba(0,0,0,0.40) var(--interface-focus-vignette-stop-3),
    rgba(0,0,0,0.68) var(--interface-focus-vignette-stop-4),
    rgba(0,0,0,0.90) var(--interface-focus-vignette-stop-5),
    #000 var(--interface-focus-vignette-stop-6),
    #000 100%
  );
  z-index: 0;
}

/* 上层材质染色层：整块有色玻璃材质。
   颜色均匀存在于玻璃体内；叠加「镜面高光 + 内阴影」制造明暗与厚度，
   让它读作"上了色的液态玻璃"，而非一张平涂色膜。
   鼠标处由反向径向蒙版镂空成最清最透的窗口，颜色越往外越浓。 */
[data-interface-focus]::after {
  background:
    /* 镜面高光：左上亮斑，玻璃的反光"湿感" */
    radial-gradient(
      120% 90% at 24% 8%,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.12) 34%,
      rgba(255, 255, 255, 0) 60%
    ),
    /* 有色材质底 */
    rgba(
      var(--interface-surface-r),
      var(--interface-surface-g),
      var(--interface-surface-b),
      var(--interface-surface-alpha)
    );
  /* 折射式沁色：只做饱和 + 提亮，不施加 blur。
     blur 会在蒙版边界取样出背景、形成发白「镶边」；
     饱和/提亮是逐像素滤镜，不会产生晕边，却能像玻璃折射一样
     把底层地图的固有色彩"透"出来，叠加有色材质底即得内生梦幻色泽。 */
  backdrop-filter: saturate(1.30) brightness(1.02);
  -webkit-backdrop-filter: saturate(1.30) brightness(1.02);
  /* 有色材质沿半径连续渐变：中心清透、越往外越浓，与磨砂同步，无泾渭分明的界线。 */
  mask-image: radial-gradient(
    circle var(--interface-focus-radius) at var(--interface-focus-x) var(--interface-focus-y),
    transparent 0%,
    rgba(0,0,0,0.03) var(--interface-focus-vignette-stop-1),
    rgba(0,0,0,0.10) var(--interface-focus-vignette-stop-2),
    rgba(0,0,0,0.28) var(--interface-focus-vignette-stop-3),
    rgba(0,0,0,0.54) var(--interface-focus-vignette-stop-4),
    rgba(0,0,0,0.82) var(--interface-focus-vignette-stop-5),
    #000 var(--interface-focus-vignette-stop-6),
    #000 100%
  );
  -webkit-mask-image: radial-gradient(
    circle var(--interface-focus-radius) at var(--interface-focus-x) var(--interface-focus-y),
    transparent 0%,
    rgba(0,0,0,0.03) var(--interface-focus-vignette-stop-1),
    rgba(0,0,0,0.10) var(--interface-focus-vignette-stop-2),
    rgba(0,0,0,0.28) var(--interface-focus-vignette-stop-3),
    rgba(0,0,0,0.54) var(--interface-focus-vignette-stop-4),
    rgba(0,0,0,0.82) var(--interface-focus-vignette-stop-5),
    #000 var(--interface-focus-vignette-stop-6),
    #000 100%
  );
  z-index: 1;
}

/* 流光层（边缘亮/暗滚动辉光）：亮层与暗层共享布局、层级、蒙版与节奏，
   仅在混合模式上区分——亮层 color-dodge 提亮，暗层 color-burn 压暗。
   描边颜色由 SVG 内的径向渐变接管：流光中点最亮/最浓、沿边向两端透明渐隐。 */
.interface-focus-edge-light,
.interface-focus-edge-shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  visibility: hidden;
  /* 独立节奏：比动态聚焦更慢，缓缓进入、缓缓淡出。 */
  transition:
    opacity var(--interface-edge-fade-duration) var(--interface-edge-fade-easing),
    visibility 0s linear var(--interface-edge-fade-duration);
  /* 中央透白窗口优先：流光层在中央同样被反向镂空，绝不压过透白窗口。 */
  mask-image: radial-gradient(
    circle var(--interface-focus-radius) at var(--interface-focus-x) var(--interface-focus-y),
    transparent 0%,
    rgba(0,0,0,0.10) calc(var(--interface-focus-clear-stop) - 6%),
    rgba(0,0,0,0.45) calc(var(--interface-focus-clear-stop) + 10%),
    rgba(0,0,0,0.85) calc(var(--interface-focus-clear-stop) + 26%),
    #000 calc(var(--interface-focus-clear-stop) + 40%),
    #000 100%
  );
  -webkit-mask-image: radial-gradient(
    circle var(--interface-focus-radius) at var(--interface-focus-x) var(--interface-focus-y),
    transparent 0%,
    rgba(0,0,0,0.10) calc(var(--interface-focus-clear-stop) - 6%),
    rgba(0,0,0,0.45) calc(var(--interface-focus-clear-stop) + 10%),
    rgba(0,0,0,0.85) calc(var(--interface-focus-clear-stop) + 26%),
    #000 calc(var(--interface-focus-clear-stop) + 40%),
    #000 100%
  );
}

.interface-focus-edge-light {
  /* 颜色减淡：像 PS 减淡滤镜叠层，直接照亮下层玻璃，而非盖白色描边。 */
  mix-blend-mode: color-dodge;
}

.interface-focus-edge-shadow {
  /* 颜色加深：像 PS 加深滤镜叠层，压暗玻璃形成滚动明暗。 */
  mix-blend-mode: color-burn;
}

[data-interface-focus]:hover > .interface-focus-edge-light,
[data-interface-focus]:hover > .interface-focus-edge-shadow {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.interface-focus-edge-light path,
.interface-focus-edge-shadow path {
  fill: none;
  stroke-width: var(--interface-edge-light-width, 14px);
  stroke-linecap: round;
}

.interface-focus-edge-light path {
  filter: blur(15px) drop-shadow(0 0 8px rgba(216, 228, 255, 0.10));
}

.interface-focus-edge-shadow path {
  filter: blur(15px);
}

/* 信息内容独立承载透明度过渡，避免淡入淡出牵动面板材质层。 */
.info-content {
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  transition-property: opacity;
  transition-duration: var(--info-transition-duration, var(--info-content-fade-duration));
  transition-timing-function: ease;
}

.info-content.is-visible {
  opacity: 1;
}

/* 信息栏正文统一两端对齐；标题与操作按钮仍由各自组件样式控制。 */
#info-block .info-content {
  text-align: justify;
  text-justify: inter-character;
}

/* 子菜单覆盖信息栏时，压低底层诗文而不完全隐藏：让文字经液态玻璃
   模糊后成为若隐若现的背景纹理，同时避免与菜单文字争抢可读性。 */
body:has(.secondary-panel.is-open) #info-block .info-content {
  opacity: 0.64;
  pointer-events: none;
}

.info-content.is-leaving {
  opacity: 0;
}

/* 工具栏区 */
#function-block {
  position: absolute;
  z-index: 2;
  left: var(--panel-left);
  right: var(--panel-right);
  top: var(--function-panel-top);
  bottom: var(--function-panel-bottom);
  border-radius: var(--panel-radius);
  background-color: var(--panel-glass-bg);
  /* 柔光层：极弱的一层，避免大面积雾感。 */
  background-image: var(--panel-softlight);
  backdrop-filter: blur(var(--panel-glass-blur)) saturate(var(--panel-glass-saturate));
  -webkit-backdrop-filter: blur(var(--panel-glass-blur)) saturate(var(--panel-glass-saturate));
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  padding: 18px;
  gap: 10px;
  box-shadow:
    inset 0 var(--glass-hl-width) var(--glass-hl-blur) rgba(255,255,255,calc(var(--glass-hl-top) * 0.85)),
    inset 0 calc(-1 * var(--glass-hl-width)) var(--glass-hl-blur) rgba(255,255,255,calc(var(--glass-hl-bottom) * 0.85));
}

@media (max-width: 800px) {
  #function-block {
    grid-template-columns: 1fr;
    /* 不用 minmax(44px, 1fr)——SE3 上 4×44px 会溢出。
       1fr 让 4 个按钮严格均分面板高度，永不溢出。 */
    grid-auto-rows: 1fr;
    padding: 6px;
    gap: 4px;
  }
  #function-block button {
    font-size: 0.78em;
    line-height: 1.1;
    padding: 2px 4px;
    min-height: 0;
  }
}

/* 手机窄屏：信息栏改为全宽底部阅读面板，工具栏改为横向停靠条。
   桌面仍保留右侧栏；窄屏不再把正文挤进不足 100px 的侧边空间。 */
@media (max-width: 800px) {
  /* 【易错点】竖屏下信息栏+工具栏移到屏幕底部，地图「可用区」只到信息栏
     上沿为止。把底部间隙与信息栏高度抽成变量，供 #map-modal 复用，
     避免两处数值漂移导致弹窗退回以整屏中心为锚点。 */
  :root {
    --info-panel-bottom-gap: calc(64px + 1.5% + var(--safe-bottom) + 8px);
    --info-panel-height: clamp(150px, 34dvh, 270px);
    --function-panel-bottom-gap: calc(1.5% + var(--safe-bottom));
  }

  #info-block {
    left: 3%;
    right: 3%;
    top: auto;
    bottom: var(--info-panel-bottom-gap);
    height: var(--info-panel-height);
    box-sizing: border-box;
  }

  #info-block .info-scroll {
    overflow-x: hidden;
    transform: translateY(8px);
  }

  #info-block .info-content,
  #info-block .info-content > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  #info-block .literary-work,
  #info-block .literary-work-head,
  #info-block .literary-work-text,
  #info-block .region-metric {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #info-block .region-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
  }

  #function-block {
    left: 3%;
    right: 3%;
    top: auto;
    bottom: var(--function-panel-bottom-gap);
    height: 64px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    padding: 6px;
    gap: 6px;
    box-sizing: border-box;
  }

  #function-block button {
    min-width: 0;
  }

}

/* 极矮窄屏为地图筛选视图保留足够的真实显示高度。 */
@media (max-width: 800px) and (max-height: 480px) {
  :root {
    --info-panel-bottom-gap: calc(44px + 1% + var(--safe-bottom) + 4px);
    --info-panel-height: clamp(96px, 32dvh, 150px);
    --function-panel-bottom-gap: calc(1% + var(--safe-bottom));
    --info-panel-padding: 6px;
  }

  #function-block {
    height: 44px;
    padding: 4px;
    gap: 4px;
  }

  #function-block button {
    font-size: 0.72em;
  }
}

#function-block button {
  border-radius: var(--function-button-radius);
  font-size: 1em;
  line-height: var(--button-line-height);
  backdrop-filter: blur(var(--function-button-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--function-button-backdrop-blur));
  transition:
    background-color var(--interface-feedback-duration) var(--interface-feedback-easing),
    backdrop-filter var(--interface-feedback-duration) var(--interface-feedback-easing),
    -webkit-backdrop-filter var(--interface-feedback-duration) var(--interface-feedback-easing);
}

.glass-button-label {
  position: relative;
  z-index: 2;
  pointer-events: none;
  transition: color 200ms ease;
}


@media (hover: hover) and (pointer: fine) {
  [data-interface-focus]:hover::before,
  [data-interface-focus]:hover::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

/* 全局按下反馈：高光面反转 + 微缩。
   与液态玻璃的 inset 高光语言同源，不引入新视觉层。
   90ms 时长让按下"利落"，松开走原有 500ms 反馈节奏。 */
.glass-button:active,
#function-block button:active,
.menu-item:active,
.info-action-btn:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 calc(-1 * var(--glass-hl-width)) var(--glass-hl-blur)
      rgba(255,255,255, calc(var(--glass-hl-top) * 0.6)),
    inset 0 var(--glass-hl-width) var(--glass-hl-blur)
      rgba(255,255,255, calc(var(--glass-hl-bottom) * 1.2));
  transition:
    transform 90ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 90ms ease;
}

/* Logo 按钮没有圆角、背景透明，inset 高光会沿正方形描出一圈「方框」。
   Logo 有自己的按/悬停反馈（轮廓层 + 阴影），这里只保留微缩按下感。 */
#logo-button:active {
  transform: scale(0.97);
  transition: transform 90ms cubic-bezier(0.2, 0, 0, 1);
}

@media (hover: none) {
  /* 移动端没有 hover，按下反馈是主要反馈通路，加长到 140ms */
  .glass-button:active,
  #function-block button:active,
  .menu-item:active,
  .info-action-btn:active {
    transition:
      transform 140ms cubic-bezier(0.2, 0, 0, 1),
      box-shadow 140ms ease;
  }
  #logo-button:active {
    transition: transform 140ms cubic-bezier(0.2, 0, 0, 1);
  }
}

/* 触屏端液态玻璃采样降级。
   成因：backdrop-filter 会实时采样背后地图的像素；地图平移/缩放时，
  地图细节在玻璃层反复重采样可能留下拖影。触屏设备关闭面板、聚焦伪元素
  与按钮各自的实时滤镜，以静态底色维持质感；面板保持独立合成层。 */
@media (hover: none) and (pointer: coarse) {
  /* 伪元素独立持有滤镜，不受宿主的关闭规则影响，需单独禁用采样。 */
  [data-interface-focus]::before,
  [data-interface-focus]::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #info-block,
  #function-block {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* 略提底色，补偿失去的模糊遮挡，保持文字/按钮可读。 */
    background-color: rgba(255, 255, 255, 0.16);
    /* 固定独立合成层：面板不再跟随地图逐帧重排，消除自身残影。 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* 工具栏四键自己带 backdrop-filter（function-button-backdrop-blur），
     同样会逐帧采样移动中的地图，留下拖影/烧屏痕。
     移动端一并关闭实时磨砂，改用略实底色 + 独立合成层。 */
  #function-block button {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.28);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

/* 左上角 Logo */
#logo-block {
  position: absolute;
  top: var(--logo-top);
  left: var(--logo-left);
  width: var(--logo-size);
  height: var(--logo-size);
  padding: var(--logo-padding);
  border-radius: var(--logo-radius);
  background-color: var(--logo-background);
  backdrop-filter: var(--logo-backdrop-filter);
  -webkit-backdrop-filter: var(--logo-backdrop-filter);
  box-sizing: border-box;
  opacity: 0;
  transform: translateZ(0) scale(var(--logo-entrance-start-scale));
  filter: blur(var(--logo-entrance-start-blur));
  transform-origin: center;
  transition:
    opacity var(--logo-entrance-duration) var(--logo-entrance-easing) var(--logo-entrance-delay),
    transform var(--logo-entrance-duration) var(--logo-entrance-easing) var(--logo-entrance-delay),
    filter var(--logo-entrance-duration) var(--logo-entrance-easing) var(--logo-entrance-delay);
  will-change: opacity, transform, filter;
  z-index: var(--logo-z-index);

  /* 局部视觉状态；桌面:hover与移动端状态类共用。 */
  --logo-current-contrast: 1;
  --logo-current-contour-opacity: 0;
  --logo-current-shadow: var(--logo-feedback-idle-shadow);
  --logo-current-aura: drop-shadow(0 0 0 rgba(0,0,0,0));
}

html.app-revealing #logo-block.logo-visible,
html.app-ready #logo-block.logo-visible {
  opacity: 1;
  transform: translateZ(0) scale(1);
  filter: blur(0);
}

html.app-ready #logo-block.logo-visible {
  will-change: auto;
}

#logo-block.is-logo-interacting {
  --logo-current-contrast: var(--logo-feedback-active-contrast);
  --logo-current-contour-opacity: var(--logo-feedback-contour-opacity);
  --logo-current-shadow: var(--logo-feedback-active-shadow);
}

/* 现实轨常驻：深色阴影沿用悬停反馈（层次一致），
   另在主图 #logo-img 上叠加暖金 drop-shadow 作为「已进入现实轨」模式态。
   金晕贴图标实体边缘（非矩形框），退出时随 filter 过渡消失。 */
#logo-block.is-nominal {
  --logo-current-contrast: var(--logo-feedback-active-contrast);
  --logo-current-contour-opacity: var(--logo-feedback-contour-opacity);
  --logo-current-shadow: var(--logo-feedback-active-shadow);
  --logo-current-aura: var(--logo-nominal-aura);
}

@media (hover: hover) and (pointer: fine) {
  #logo-block:hover {
    --logo-current-contrast: var(--logo-feedback-active-contrast);
    --logo-current-contour-opacity: var(--logo-feedback-contour-opacity);
    --logo-current-shadow: var(--logo-feedback-active-shadow);
  }
}

#logo-block,
#logo-button,
#logo-img,
#logo-blur-img {
  -webkit-tap-highlight-color: transparent;
}

#logo-button {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  appearance: none;
  -webkit-appearance: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#logo-button:focus {
  outline: none;
}

#logo-button:focus-visible {
  outline: 2px solid rgba(50,50,50,0.38);
  outline-offset: 2px;
  border-radius: calc(var(--logo-radius) - var(--logo-padding));
}

#logo-img,
#logo-blur-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#logo-img {
  position: relative;
  z-index: 2;
  filter: contrast(var(--logo-current-contrast)) var(--logo-current-aura);
  transition: filter var(--logo-feedback-duration) var(--logo-feedback-easing);
  will-change: filter;
}

#logo-blur-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--logo-current-contour-opacity);
  /* 去掉 blur()：blur 会把整张 <img> 的矩形盒子（含 object-fit:contain
     留白边缘）一起模糊，长按时露出「朦胧的方框边界」。改用 drop-shadow
     沿图标 alpha 剪影扩散，既保留柔和深色轮廓，又不出现方框。 */
  filter:
    grayscale(1)
    brightness(var(--logo-feedback-contour-brightness))
    var(--logo-current-shadow);
  transition:
    opacity var(--logo-feedback-duration) var(--logo-feedback-easing),
    filter var(--logo-feedback-duration) var(--logo-feedback-easing);
  will-change: opacity, filter;
}

/* 竖屏（≤800px）：染色框铺满整屏，且对角蒙版在竖长比例下让「左上角」
   也变为可见墨边（不再是横屏时的透明角）。图标若仍贴左上角会压住染色框
   顶边/左边。把可见图标下移到染色框顶边之下（图标顶≈16px）、并内缩避开
   2px 左边框（图标左≈4px）。 */
@media (max-width: 800px) {
  #logo-block {
    top: -6px;
    left: -19px;
  }
}

/* 平板竖屏（>800px，如 iPad Pro 1024/834）：染色框回到横屏尺寸
   （left 0.5% / top 1% / width 72.8%），但竖长比例下对角蒙版同样让
   「左上角」变为可见墨边，墨角约在 (0.5%, 1%) ≈ (5px, 14px)。
   图标已继承 --logo-left 的 ≈18px 左边距避开左墨边；此处只需再下移
   避开顶墨边（图标顶≈25px，即 #logo-block top≈3px）。 */
@media (min-width: 801px) and (orientation: portrait) {
  #logo-block {
    top: 3px;
  }
}

/* 全局文字灰色外发光 */
#info-block,
#info-block *,
#function-block,
#function-block *,
button,
.info-content {
  text-shadow:
    0 0 var(--global-glow-tight-radius) var(--global-glow-color),
    0 0 var(--global-glow-medium-radius) var(--global-glow-color),
    0 0 var(--global-glow-wide-radius) var(--global-glow-soft);
}

#info-block h2,
#info-block p,
.info-content h2,
.info-content p {
  line-height: var(--global-content-line-height);
}

/* 信息栏纵向节奏：标题/正文/标量项的空行交由 flex/grid 的 gap 精确控制，
   消除浏览器默认 1em 上下外边距叠加造成的"空行过宽"。 */
.info-content h2 {
  margin: 0 0 6px;
}

.info-content > p {
  margin: 3px 0;
}

.merge-member-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: 0.45em;
  line-height: var(--global-content-line-height);
  max-height: 4.35em;
  overflow-y: auto;
/* 页面就绪后撤销长期合成层提示；过渡期间浏览器自行决定是否提升。 */
html.app-ready .info-content {
  will-change: auto;
}

  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(70, 70, 70, 0.38) transparent;
}

.merge-member-name {
  white-space: nowrap;
}

.merge-member-list::-webkit-scrollbar {
  width: 6px;
}

.merge-member-list::-webkit-scrollbar-track {
  background: transparent;
}

.merge-member-list::-webkit-scrollbar-thumb {
  background: rgba(70, 70, 70, 0.38);
  border-radius: 999px;
}

.literary-work p,
.region-metric {
  margin: 0;
}

svg text {
  filter:
    drop-shadow(0 0 var(--global-glow-tight-radius) var(--global-glow-color))
    drop-shadow(0 0 var(--svg-text-glow-wide-radius) var(--global-glow-soft));
}

/* 二级菜单统一滚动策略：数据/关于滚动整个面板；筛选/合并只滚动内层列表，
  退出筛选和域操作按钮留在固定操作区。断点只改变筛选网格列数。 */
.secondary-panel {
  --secondary-panel-transition-duration: 220ms;
  --secondary-panel-switch-duration: 150ms;
  position: absolute;
  left: var(--panel-left);
  right: var(--panel-right);
  bottom: calc(100% - var(--function-panel-top) + 12px);
  max-height: 55vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--panel-radius);
  background-color: var(--menu-glass-bg);
  /* 柔光层：极弱的一层，避免大面积雾感。 */
  background-image: var(--panel-softlight);
  backdrop-filter: blur(var(--menu-glass-blur)) saturate(var(--menu-glass-saturate));
  -webkit-backdrop-filter: blur(var(--menu-glass-blur)) saturate(var(--menu-glass-saturate));
  padding: 14px;
  display: grid;
  gap: 8px;
  box-shadow:
    inset 0 var(--glass-hl-width) var(--glass-hl-blur) rgba(255,255,255,calc(var(--glass-hl-top) * 0.85)),
    inset 0 calc(-1 * var(--glass-hl-width)) var(--glass-hl-blur) rgba(255,255,255,calc(var(--glass-hl-bottom) * 0.85)),
    0 0 var(--glass-outer-blur) rgba(255,255,255,var(--glass-outer-alpha));
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--secondary-panel-transition-duration) cubic-bezier(0.37, 0, 0.63, 1),
    transform var(--secondary-panel-transition-duration) cubic-bezier(0.37, 0, 0.63, 1),
    visibility 0s linear var(--secondary-panel-transition-duration);
  z-index: 40;
  contain: layout style paint;
}

.secondary-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity var(--secondary-panel-transition-duration) cubic-bezier(0.37, 0, 0.63, 1),
    transform var(--secondary-panel-transition-duration) cubic-bezier(0.37, 0, 0.63, 1),
    visibility 0s linear 0s;
}

/* 跨菜单时沿用普通关闭态；换完内容再移除此类，沿用普通打开态。 */
.secondary-panel.is-switching,
.secondary-panel.is-switch-entering {
  --secondary-panel-transition-duration: var(--secondary-panel-switch-duration);
}

.secondary-panel.is-switching {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

@media (max-width: 800px) {
  .secondary-panel {
    left: 3%;
    right: 3%;
    bottom: calc(64px + 1.5% + var(--safe-bottom) + 10px);
    /* 菜单底边比信息栏底边高 2px；以 border-box 计量，顶部不会越过信息栏。 */
    box-sizing: border-box;
    max-height: calc(var(--info-panel-height) - 2px);
  }
}

.secondary-panel--filter,
.secondary-panel--merge {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.secondary-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* 末项留少量滚动余量，避免设备像素取整时贴边裁切。 */
  padding-bottom: 4px;
  border-radius: 14px;
}

/* 固定 8px gap 决定行容量；核心只给已确定的非末行补余量，不改变装行结果。 */
.entity-menu-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 8px;
}

.entity-menu-flow > .menu-item {
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding-inline: 4px;
  word-spacing: normal;
  text-align: center;
  text-align-last: auto;
  box-sizing: border-box;
}

.entity-menu-flow > .menu-item .glass-button-label {
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-menu-flow > .menu-item--custom-name {
  padding-inline: clamp(2px, calc(7px - var(--entity-name-width) * 0.5px), 4px);
}

@media (min-width: 801px) and (max-width: 1200px) and (orientation: landscape) {
  .secondary-panel--filter .entity-menu-flow > .menu-item,
  .secondary-panel--merge .entity-menu-flow > .menu-item {
    min-width: calc((100% - 8px) / 2);
  }
}

.secondary-panel--data {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
  .secondary-panel--data {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  /* 数据字段：双字标签，自动排多列。 */
  .secondary-panel--data {
    grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
  }
}

.merge-list-empty {
  padding: 16px;
  text-align: center;
  font-size: 0.9em;
  color: rgba(70, 70, 70, 0.55);
}

/* 纳域、析域、合域、萃域并列固定在列表上方；不随势力列表滚动。 */
.merge-fixed-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  flex: 0 0 auto;
}

.merge-fixed-action {
  min-width: 0;
}

.merge-fixed-action:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* 固定操作不参与纵向压缩；列表项保持完整行高，在内层滚动。 */
.secondary-panel--filter > .menu-item--action:first-child {
  flex: 0 0 auto;
}

/* 关于面板桌面保持单列纵向流；竖屏下与其余菜单一致自动排多列。 */
.secondary-panel--about {
  grid-template-columns: 1fr;
}

@media (max-width: 800px) {
  .secondary-panel--about {
    grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
  }
}

/* 诗文块：信息栏里的文学作品列表 */
.literary-works {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.literary-work {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.literary-work-head {
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.9;
}

.literary-work-text {
  font-size: 0.92em;
  line-height: 1.5;
  white-space: pre-line;
  opacity: 0.92;
}

.glass-quote-bar {
  position: relative;
  padding-left: 12px;
}

/* 引用条：不描任何外轮廓，仅凭「材质 + 明暗」立起一根液态玻璃细条。
   材质 = 半透明玻璃底 + 磨砂/饱和折射；明暗 = 左侧受光高光、
   右侧背光内阴影 + 底部柔投影，读作悬浮在文字旁的玻璃棱，而非描边竖线。 */
.glass-quote-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.34),
    rgba(205, 224, 233, 0.16) 46%,
    rgba(255, 255, 255, 0.22) 74%,
    rgba(150, 172, 185, 0.10)
  );
  box-shadow:
    inset 1px 0 2px rgba(255, 255, 255, 0.55),
    inset -1px 0 2px rgba(95, 120, 133, 0.20),
    0 1px 4px rgba(65, 90, 104, 0.10);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  pointer-events: none;
}

/* 标量数据块：人口 / 经济 / 海拔 / 面积 */
.region-metrics {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 4px 16px;
  width: 100%;
  margin-top: 10px;
}

.region-metric {
  font-size: 0.9em;
  opacity: 0.92;
}

/* 信息栏操作区：势力专属。放在成员列表下方。 */
.info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
}

.info-action-btn {
  padding: 8px 16px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.9em;
  line-height: 1.2;
  color: var(--menu-item-action-color);
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
}

/* 信息栏标题就地编辑：h2 变 input。
   无边框、透明底，视觉上像"标题变成可输入"，不像"打开了一个表单"。 */
.info-title-input {
  width: 100%;
  padding: 0;
  border: none;
  border-bottom: 1px solid rgba(70, 70, 70, 0.35);
  font: inherit;
  color: inherit;
  background: transparent;
  outline: none;
  box-sizing: border-box;
}

/* 通用菜单项：所有二级、三级菜单共用视觉与动态聚焦宿主。 */
.menu-item {
  padding: 10px 6px;
  text-align: center;
  border-radius: 14px;
  font-size: 1em;
  line-height: 1.2;
  color: inherit;
  transition: background-color 180ms ease;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.42);
}

.menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.55);
}

.menu-item.is-active .glass-button-label {
  color: var(--menu-item-action-color);
}

/* 菜单项·行动：退出、返回、确认、取消、删除等动词按钮。
   横跨整行独占；文字色由 --menu-item-action-color 统一控制。 */
.menu-item--action {
  grid-column: 1 / -1;
  color: var(--menu-item-action-color);
}

.menu-item--action[hidden] {
  display: none;
}

/* 地图区域居中浮窗：关于 / 帮助 的内容层。
   占左侧地图可用区，绝对居中，玻璃底，不挂动态聚焦。 */
#map-modal {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--panel-left);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* 渐显只动画 .modal-backdrop 自身的 opacity；绝不动画 #map-modal 这个
     祖先的 opacity——祖先 opacity<1 会变成 backdrop root，让内层
     backdrop-filter 在过渡期间只采样透明底（玻璃发白），opacity 到 1
     的瞬间才采样到地图（骤深），即弹窗渐显末尾的"小跳变"。 */
  visibility: hidden;
  transition: visibility 0s linear 220ms;
  z-index: 35;
}

@media (max-width: 800px) {
  /* 【易错点】竖屏弹窗锚点 = 地图可用区中心，而非整屏中心。
     地图可用区 = 顶部 0 → 信息栏上沿；信息栏上沿距底部 =
     底部间隙 + 信息栏高度。bottom 必须与 #info-block 的变量同步，
     否则 flex 的 align-items:center 会把弹窗拉到屏幕正中心。 */
  #map-modal {
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    bottom: calc(var(--info-panel-bottom-gap) + var(--info-panel-height));
  }
}

@media (min-width: 801px) {
  /* 横屏：恢复首行与正文之间的呼吸空间，只修这一处。 */
  .info-content h2 {
    margin: 0 0 12px;
  }
}

#map-modal.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

/* 外层：专职 backdrop-filter。绝不挂 transform，iOS 才稳。 */
#map-modal .modal-backdrop {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: min(60%, 340px);
  min-width: 220px;
  border-radius: var(--panel-radius);
  background-color: var(--float-surface-bg, rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(var(--float-surface-blur, 2px)) saturate(var(--float-surface-saturate, 1));
  -webkit-backdrop-filter: blur(var(--float-surface-blur, 2px)) saturate(var(--float-surface-saturate, 1));
  box-shadow: var(--float-shadow, 0 16px 40px rgba(0,0,0,0.14));
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.37, 0, 0.63, 1);
}

/* 柔光层：让玻璃有厚度。 */
#map-modal .modal-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--float-softlight, transparent);
  z-index: 0;
}

/* 内层：专职 transform 入场 + 内容布局。 */
#map-modal .modal-surface {
  position: relative;
  padding: var(--float-padding-y, 22px) var(--float-padding-x, 28px);
  transform: translateY(8px) scale(0.985);
  transition: transform 220ms cubic-bezier(0.37, 0, 0.63, 1);
  text-align: center;
  pointer-events: none;
}

#map-modal .modal-surface > * {
  position: relative;
  z-index: 1;
}

#map-modal.is-open .modal-backdrop {
  pointer-events: auto;
  opacity: 1;
}

#map-modal.is-open .modal-surface {
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#map-modal .modal-title {
  margin: 0 0 18px;
  font-size: 1.25em;
  line-height: 1.3;
  color: #111;
}

#map-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

#map-modal .modal-line {
  margin: 0;
  font-size: 1em;
  line-height: 1.55;
  color: #333;
  overflow-wrap: anywhere;
}

#map-modal .modal-line-label {
  margin-top: 6px;
  color: rgba(70, 70, 70, 0.72);
  letter-spacing: 0.04em;
}

/* 合并裁决面板（4.0.4）：命名冲突候选按钮，单击即定，无确定/取消。
   候选按钮复用 .glass-button 液态玻璃基类 + 动态聚焦，与工具栏按钮同源。 */
#map-modal .arbitration {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
}

#map-modal .arbitration-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#map-modal .arbitration-options button {
  padding: 8px 18px;
  border-radius: 14px;
  font-size: 0.95em;
  line-height: 1.25;
  color: #111;
}

/* ============================================================================
   悬浮信息浮层（数据探针层）
   液态玻璃语言的缩略版：同 --glass-* 高光、同 --global-glow-* 发光。
   ============================================================================ */
#hover-info {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 100ms cubic-bezier(0.42, 0, 0.58, 1);
  will-change: transform, opacity;
  border-radius: 14px;
  padding: 6px 12px;
  /* 纯透色方案：无染色。文字色与发光由 JS 按当前区块 fillColor 写入。 */
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px) saturate(1.06);
  -webkit-backdrop-filter: blur(5px) saturate(1.06);
  box-shadow:
    inset 0 var(--glass-hl-width) var(--glass-hl-blur) rgba(255,255,255, calc(var(--glass-hl-top) * 0.75)),
    inset 0 calc(-1 * var(--glass-hl-width)) var(--glass-hl-blur) rgba(255,255,255, calc(var(--glass-hl-bottom) * 0.75)),
    0 0 var(--glass-outer-blur) rgba(255,255,255, var(--glass-outer-alpha));
  font-family: var(--app-font-family);
  font-size: 1.2em;
  line-height: 1.3;
  /* color / textShadow 由 JS 每次 renderContent 写入 inline style。
     这里不设默认值，避免与 inline 冲突时闪烁。 */
  max-width: calc(14em + 24px);
  word-break: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

#hover-info.is-visible {
  opacity: 1;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}

#hover-info.is-domain-preview {
  max-width: 190px;
  font-size: 0.75em;
  line-height: 1.22;
}

.hover-info-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hover-info-field {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.hover-info-field-label {
  font-size: 0.86em;
  opacity: 0.6;
  flex-shrink: 0;
}

.hover-info-operation-label {
  color: #111;
  text-shadow: none;
}

.hover-info-field-value {
  font-size: 1em;
  flex: 1;
}

.hover-info-field[data-field-id="name"] .hover-info-field-value {
  flex: 0 0 auto;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.hover-info-domain-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.45em;
  min-width: 0;
}

.hover-info-domain-member {
  white-space: nowrap;
}

@media (hover: none) {
  /* 隐藏：400ms 缓出，让浮层"褪去"而不是"啪一下没了"。
     显示：220ms 快一点，避免手指滑动时浮层拖泥带水。 */
  #hover-info {
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  #hover-info.is-visible {
    transition-duration: 220ms;
    transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
}

/* 悬浮字段开关：文字色表示状态。
   未开=inherit（菜单项默认色），已开=橙色行动色。 */
.menu-item[data-hover-field].is-active .glass-button-label {
  color: var(--menu-item-action-color);
}

.menu-item.is-disabled {
  opacity: 0.36;
  cursor: not-allowed;
  pointer-events: none;
}