/* 系统骨架样式：移动端全宽，桌面端限宽居中（正文居视口中间）。。。。
   具体功能面板的视觉后续单独迭代，这里先把骨架立起来。 */
:root {
  --bg: #101418;
  --panel: #1a2028;
  --border: #2e3947;
  --text: #d8dee6;
  --dim: #8a97a5;
  --accent: #e8b93d;
  --ok: #7fbf7f;
  --warn: #e8b93d;
  --bad: #e07a6a;
  /* 四项状态色：体力黄 / 辐射抗性荧光绿 / 情绪蓝 / 生命红 */
  --c-stamina: #ffd23f;
  --c-radres: #4fda5d;
  --c-mood: #4da6ff;
  --c-hp: #ff5252;
  --shell-w: 960px;
  /* 核辐射警示黄：品牌 logo 的 R/C 用色 */
  --rad-yellow: #ffd60a;
  /* 移动端 fixed header 的实测高度（JS 动态更新），用于给正文补回滚动空间 */
  --header-h: 74px;
  /* tab 条实测高度（JS 动态更新），桌面端地图占满视口计算用；59px 为 JS 未跑时兜底 */
  --nav-h: 59px;
}
* { box-sizing: border-box; }
/* 全局禁用浏览器缩放手势（用户要求）：快速连点不触发双击放大、非地图区双指捏合不放大页面；
   保留单指滚动与拖动。地图容器由 Leaflet 动态类（.leaflet-touch-drag 等，优先级更高）自行管理，
   地图内的捏合缩放为 Leaflet 自实现，不受此处影响。 */
* { touch-action: pan-x pan-y; }
/* 全局去除焦点环（用户要求）：任何元素聚焦都不画 outline，含键盘 Tab */
:focus { outline: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}
/* 全局隐藏滚动条（用户要求）：所有可滚动区域只滚不显示滚动条本体；
   内容仍可通过触摸滑动 / 鼠标滚轮正常滚动。
   scrollbar-width: none 为标准属性（Firefox 及新版 Chrome），
   -ms-overflow-style 兜底旧 Edge/IE，::-webkit-scrollbar 兜底旧 WebKit。
   作用域用 * 而非仅 html/body：保证据点车库等任何内层滚动容器也彻底隐藏 */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.hidden { display: none !important; }
.dim { color: var(--dim); }
.mono { font-variant-numeric: tabular-nums; }
.error { color: var(--bad); min-height: 1.2em; }

button, input, select {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
}
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.ghost { background: transparent; }
button.active { border-color: var(--accent); color: var(--accent); }

/* Loading 视图：首屏默认可见，避免已登录用户看到登录页闪现；
   token 判定完成后由 showView() 切到 auth 或 game */
.loading-view {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
}
.loading-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
}
.loading-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: loading-spin 0.9s linear infinite;
}
.loading-text {
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.05em;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }

/* 登录页：纯黑背景，左侧 2/3 铺背景图（四周黑色渐隐），登录框靠右，左上角品牌名 */
#view-auth {
  position: relative;
  min-height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 max(6vw, 36px);
  overflow: hidden;
}
/* 背景图容器：桌面端绝对定位占左侧 2/3 并铺满；遮罩挂在本层，跟随图片尺寸 */
.auth-bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  pointer-events: none;
}
.auth-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 四周黑色渐隐遮罩：四边都向黑色过渡，右缘渐隐后与右侧纯黑区域自然融合；
   inset 阴影再加一层柔和暗角 */
.auth-bg-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, #000, transparent 25%),
    linear-gradient(to bottom, #000, transparent 25%),
    linear-gradient(to right, #000, transparent 30%),
    linear-gradient(to left, #000, transparent 16%);
  box-shadow: inset 0 0 130px rgba(0, 0, 0, 0.55);
}
/* 左上角品牌名 */
.auth-logo {
  position: absolute;
  top: 26px;
  left: 30px;
  z-index: 2;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
/* 右上角语言切换按钮 */
.auth-lang {
  position: absolute;
  top: 26px;
  right: 30px;
  z-index: 3;
}
/* 登录框：半透明浮层，靠右排列；窗口变窄时右侧放不下，自动向左压到图片上，
   阴影保证浮在图片上方的层次感 */
.auth-box {
  position: relative;
  z-index: 2;
  background: rgba(26, 32, 40, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(46, 57, 71, 0.85);
  border-radius: 8px;
  padding: 28px 32px;
  width: min(92vw, 380px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 3px 10px rgba(0, 0, 0, 0.5);
}
.auth-box h1 { margin: 0 0 4px; font-size: 26px; }
.auth-box .subtitle { margin: 0 0 18px; color: var(--dim); }
/* 输入框独占一行、全宽，宽度不再超出父容器 */
.auth-box input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.auth-box input::placeholder { color: var(--dim); opacity: 1; }
.auth-box .row { display: flex; gap: 8px; margin-bottom: 10px; }
.auth-box .row button { flex: 1; min-width: 0; }
/* 错误行：默认 0 高不占位，有消息时平滑展开 */
.auth-box .error {
  min-height: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.auth-box .error:not(:empty) { max-height: 3.6em; }
/* 游客入口：安全出口标志风格的暗绿色按钮 */
.auth-box .guest-btn {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #122a1c;
  border: 1px solid #2e5940;
  border-radius: 4px;
  color: #7ed49a;
  font-weight: 600;
  letter-spacing: 2px;
}
.auth-box .guest-btn:hover {
  border-color: #58a97b;
  color: #9fe8b8;
}

/* 游戏介绍区：登录页向下滚动展示；左图右文 / 右图左文 交替分屏，
   滚动进入视口时淡入上移（.show 由 app.js 挂载） */
#intro {
  background: #000;
  padding: 72px 0 56px;
}
#intro .tagline {
  max-width: 720px;
  margin: 0 auto 30px;
  padding: 0 24px;
  font-size: 20px;
  line-height: 1.7;
  text-align: center;
  color: #fff;
}
.intro-row {
  max-width: 980px;
  margin: 0 auto 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 36px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.intro-row.show { opacity: 1; transform: none; }
/* 右图左文的交替屏 */
.intro-row.flip { flex-direction: row-reverse; }
.intro-media {
  flex: 0 0 46%;
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
}
.intro-media img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
}
.intro-text {
  flex: 1;
  min-width: 0;
}
.intro-text .intro-num {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--accent);
  margin-bottom: 10px;
}
.intro-text h4 {
  margin: 0 0 12px;
  font-size: 22px;
  color: #fff;
}
.intro-text p {
  margin: 0;
  color: var(--dim);
  line-height: 1.8;
  font-size: 15px;
}
.intro-foot {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 2px;
}

/* 游戏内全局背景：非首页的所有页面共用 cover/bg.webp（2048×1151，压到 ~87KB；原 2848px/226KB）；
   fixed 层 inset -10% 让图片上下左右各超出视口 10%，cover 铺满放大后的区域；
   上层叠一层 75% 黑遮罩 + 轻微提亮降饱和，营造雾化氛围（遮罩下压缩损失不可见）
   ?v= 为缓存戳，换图后必须同步升版本并升 index.html 里的 style.css 版本号 */
#view-game::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  background:
linear-gradient(180deg, rgb(0 0 0 / 75%), rgb(0 0 0 / 75%), rgb(0 0 0 / 75%)), url(cover/bg.webp?v=20260914c) center / cover no-repeat;
  filter: brightness(1.06) saturate(0.88);
  pointer-events: none;
}

/* ---------------- 骨架布局 ----------------
   .shell：移动端 100% 宽；桌面端限宽并水平居中 */
.shell {
  width: 100%;
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 0 14px;
}

/* header：两行布局——第一行左组（汉堡+logo）贴左缘、用户菜单贴右缘；
   状态条独占第二行，桌面端与正文 .shell 同宽居中，移动端全宽；
   不透明背景，压住底层 fixed 背景图 */
header {
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  background: var(--bg);
  /* 桌面端吸顶悬浮：长内容（如市场列表）滚动时 header 停置视口顶部；
     移动端由下方 @media 覆盖为 fixed */
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 15px;
  padding: 10px 16px;
}
/* 左右两组自适应内容宽度：logo 贴左、用户菜单贴右（margin-left:auto 推右），
   中间留空给绝对居中的状态条，避免透明盒子拦截状态条 hover 事件 */
.header-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* 汉堡按钮：点击弹出左侧侧边栏 */
.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
}
.hamburger svg, .side-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 品牌 logo：R/C 用核辐射警示黄并微微发光 */
.game-logo {
  font-size: 17px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.game-logo .rad {
  font-style: normal;
  color: var(--rad-yellow);
  text-shadow: 0 0 10px rgba(255, 214, 10, 0.4);
}

/* 状态条：桌面端一行布局——绝对定位于 .header-row 内、视口水平居中，
   宽度与正文 .shell 完全一致（内容区严格同宽）：shell 有 padding 0 14px，
   这里用同 14px 内边距把内部状态项与 shell 内容对齐。
   两侧 header-left / user-menu 各 flex:1，保证 logo 贴左、用户按钮贴右、
   且不用三列等分也能让窗体 width 不限。移动端断点内恢复文档流、第二行全宽 */
.header-row .toolbar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--shell-w);
  max-width: var(--shell-w);
  margin: 0;
  padding: 0 14px;
}

/* header 紧凑态（仅桌面端，JS 检测：状态条与左侧 logo 组间距过近时加 .header-compact，
   见 app.js syncHeaderCompact）——只将 header-row 切换为移动端布局（状态条换行到第二行、
   logo 绝对居中），其余元素保持桌面样式；≤760px 由移动端断点整体接管，JS 不再加该 class */
@media (min-width: 761px) {
  .header-compact .header-row { padding: 10px 14px; }
  .header-compact .hamburger { height: 34px; }
  .header-compact .game-logo {
    position: absolute;
    left: 50%;
    top: 27px; /* padding 10px + 第一行 34px/2 */
    transform: translate(-50%, -50%);
    line-height: 1;
  }
  .header-compact .header-row .toolbar {
    position: static;
    transform: none;
    flex: 0 1 100%;
    width: 100%;
    max-width: none;
    padding: 0;
    margin-top: 2px;
    order: 3;
  }
}

/* 右侧用户下拉菜单：按钮只显示默认头像 icon（宽度固定，不随用户名变化）；
   margin-left:auto 贴右，盒子只含按钮宽度，不拦截状态条 hover */
.user-menu {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.user-btn {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
}
.user-avatar {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
/* 等级角标：用户头像右下角 */
.lvl-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 14px;
  height: 14px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border-radius: 8px;
  border: 2px solid var(--bg);
  background: var(--accent);
  color: #12161c;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
/* 钱 / 信标：头像左侧上下两行，总高不超过头像按钮（34px） */
.user-coins {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.user-coin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 14px;
  color: var(--dim);
  font-size: 14px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.user-coin svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 320px;
  max-width: calc(100vw - 24px);
  display: none;
  flex-direction: row;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
/* 点击头像后展开（桌面/移动共用）；左右分栏 */
.user-dropdown.open { display: flex; }
/* 左栏：菜单列表 */
.ud-menu {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  padding: 8px 6px;
  gap: 2px;
}
.ud-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border-color: transparent;
}
.ud-item svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ud-item:hover { background: rgba(255, 255, 255, 0.06); border-color: transparent; }
.ud-ops {
  display: flex;
  gap: 4px;
  margin-top: auto;
  padding: 8px 4px 0;
  border-top: 1px solid var(--border);
}
.ud-ops button { flex: 1; text-align: center; font-size: 11px; }
/* 右栏：头像占位 + 用户名 + 红色退出 */
.ud-info {
  flex: 1 1 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  border-left: 1px solid var(--border);
  background: #161b21;
}
.ud-avatar {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222a33;
}
.ud-avatar svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ud-name {
  max-width: 100%;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ud-logout {
  width: 112px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: #b23b32;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ud-logout:hover { background: #c94339; }

/* 左侧滑出侧边栏（汉堡菜单触发）：遮罩 + 面板 */
.sidebar-mask {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.sidebar-mask.show { opacity: 1; pointer-events: auto; }
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  width: 240px;
  max-width: 80vw;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  transform: translateX(-102%);
  transition: transform 0.22s ease;
}
.sidebar.open { transform: translateX(0); }
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.side-close { display: inline-flex; padding: 5px; }
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
}
.side-item:hover { background: rgba(255, 255, 255, 0.05); }
.side-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
/* 侧栏底部：第一行左在线人数 / 右版本号，第二行服务器时间；margin-top:auto 顶到底，弱化显示 */
.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.sidebar-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-clock {
  text-align: center;
  opacity: 0.9;
}

/* 状态工具条：icon + 数值在上，进度条在下（桌面/移动端统一） */
.toolbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.stat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.stat-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.stat-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: currentColor;
  stroke: none;
}
.stat-value {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.stat-bar {
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.stat-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.stat.stamina { color: var(--c-stamina); }
.stat.stamina .stat-bar i { background: var(--c-stamina); box-shadow: 0 0 6px var(--c-stamina); }
.stat.radres { color: var(--c-radres); }
.stat.radres .stat-bar i { background: var(--c-radres); box-shadow: 0 0 6px var(--c-radres); }
.stat.mood { color: var(--c-mood); }
.stat.mood .stat-bar i { background: var(--c-mood); box-shadow: 0 0 6px var(--c-mood); }
.stat.hp { color: var(--c-hp); }
.stat.hp .stat-bar i { background: var(--c-hp); box-shadow: 0 0 6px var(--c-hp); }

/* 状态 tooltip：桌面端仅 hover 浮出（不响应点击）；移动端（无 hover 能力）点按（.active）浮出。
   tooltip 物理上紧贴 stat 底边（视觉间隙由箭头填补），鼠标滑入不闪断 */
.stat { position: relative; }
.stat-tip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  width: 190px;
  padding: 8px 10px 9px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  text-align: left;
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
}
.stat-tip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top: none;
  border-bottom: 5px solid var(--border);
}
.stat-tip::after {
  content: "";
  position: absolute;
  top: -3.5px;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top: none;
  border-bottom: 4px solid var(--panel);
}
.stat-tip-title { display: block; font-size: 12px; line-height: 1.4; }
.stat-tip-title .mono { color: #fff; }
.stat-tip-desc { margin: 3px 0 0; font-size: 11px; line-height: 1.5; color: var(--dim); }
.stat:hover .stat-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* 两端元素改对齐边，防止浮层溢出视口；箭头随锚点内移 */
.stat:first-child .stat-tip { left: 0; transform: translate(0, -6px); }
.stat:last-child .stat-tip { left: auto; right: 0; transform: translate(0, -6px); }
.stat:first-child .stat-tip::before { left: 14px; margin-left: 0; }
.stat:first-child .stat-tip::after { left: 15px; margin-left: 0; }
.stat:last-child .stat-tip::before { left: auto; right: 14px; margin-left: 0; }
.stat:last-child .stat-tip::after { left: auto; right: 15px; margin-left: 0; }
.stat:first-child:hover .stat-tip { transform: translate(0, 0); }
.stat:last-child:hover .stat-tip { transform: translate(0, 0); }

/* 移动端无 hover 能力：点按切换浮层（JS 仅在此类设备绑定点击，桌面端 .active 永不产生） */
@media (hover: none) {
  .stat { cursor: pointer; }
  .stat.active .stat-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  .stat:first-child.active .stat-tip { transform: translate(0, 0); }
  .stat:last-child.active .stat-tip { transform: translate(0, 0); }
}

/* 功能导航：单行 tab 条。icon 在上、文本在下；移动端固定底部。
   桌面端下间距 44px：给场景左上角便签（top:-30px 突出图外）留出空间，
   便签顶部距导航条保持约 14px 间隙 */
.nav {
  display: flex;
  gap: 6px;
  margin: 4px 0 44px;
}
.nav .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 2px;
  font-size: 12px;
  white-space: nowrap;
}
/* 当前功能 tab 高亮：核警示黄（icon 用 currentColor 自动跟随）+ 底部指示条 */
.nav .tab.active {
  color: var(--rad-yellow);
  box-shadow: inset 0 -5px 0 var(--rad-yellow);
}

/* 二级 nav：仅当一级 tab 启用 SUBNAV 时显示（JS 控 .hidden 切换）。
   桌面/移动统一文档流（一级 nav 在移动端 fixed 底部，二级 nav 不会脱流冲突）；
   位置在 #scene 之下、#panel-actions 之上（场景大图下方、内容区上方）。
   视觉为细粒度的横向 tab 条，无 icon，纯文本。顶/底各一条与一级 nav 同色边框 */
/* 二级 nav：自带深色卡片背景（与一级 nav 区分）。位于场景图下方，
   scene 的 margin-bottom:14px 提供与场景图的间距，margin-bottom 再与内容区拉开 */
.subnav {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  background: rgba(20, 26, 34, 0.85);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav.hidden { display: none; }
.sub-tab {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.sub-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.sub-tab.active {
  background: rgba(255, 214, 10, 0.18);
  color: var(--rad-yellow);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--rad-yellow);
}
.sub-tab-text { display: inline-block; }
/* 市场二级 nav 右上角操作组（一键续单 / 一键撤单）：绝对定位在 nav 顶部留白区
   （.subnav-boxed 的 padding-top 为便签 scene-note 预留，右侧恰好空出）——
   不占 flex 位，不影响三个 sub-tab 平分整行。
   一键续单黄色（角标 = 当前 open 挂单数，0 时 JS 不渲染数字）；
   一键撤单红色警示（批量撤下全部挂单，与「卖出」侧同色系） */
.sub-acts {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sub-renew {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rad-yellow);
  background: rgba(255, 214, 10, 0.1);
  border: 1px solid rgba(255, 214, 10, 0.45);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.sub-renew:hover {
  background: rgba(255, 214, 10, 0.2);
  border-color: rgba(255, 214, 10, 0.7);
}
.sub-undo {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #e59a8f;
  background: rgba(224, 122, 106, 0.1);
  border: 1px solid rgba(224, 122, 106, 0.45);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.sub-undo:hover {
  background: rgba(224, 122, 106, 0.22);
  border-color: rgba(224, 122, 106, 0.7);
}
.sub-renew-badge {
  min-width: 16px;
  padding: 0 4px;
  font-size: 11px;
  font-style: normal;
  line-height: 16px;
  text-align: center;
  color: #101418;
  background: var(--rad-yellow);
  border-radius: 999px;
}
/* 据点占位说明：居中、最大宽度收紧，移动端不至于顶到屏边 */
.sub-placeholder-desc {
  text-align: center;
  max-width: 460px;
  margin: 8px auto 0;
  line-height: 1.6;
}

.tab-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 场景图：当前场景占位图，后期替换为当前界面 UI 显示。
   不再 overflow:hidden——左上角便签要跨出图片上边缘（一半在图外），
   圆角改由 img 自身承担 */
.scene-placeholder {
  position: relative;
  height: 150px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 14px;
}
.scene-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}
/* 左上角拟真便利贴：棕黄纸张，跨在场景图上边缘——一半在图外、一半在图中 */
.scene-note {
  position: absolute;
  top: -30px;
  left: 14px;
  width: fit-content;
  max-width: 74%;
  padding: 5px 15px 5px;
  background: #cfa25e;
  color: #3c2a12;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 4px rgba(90,55,10,.12);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)) drop-shadow(0 1px 1px rgba(0,0,0,.25));
  pointer-events: none;
}
/* 当前功能名：便利贴上大字 */
#panel-title {
  margin: 0 0 2px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
/* 城市 / 时间 / 天气：便利贴上小字 */
.scene-meta {
  margin: 0;
  font-size: 12px;
  color: #5a3c1c;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  font-variant-numeric: tabular-nums;
}
.scene-meta span + span::before {
  content: " · ";
  opacity: .6;
}

/* 地图 / 技能 / 市场 tab：隐藏场景占位图（app.js renderPanel 切换 .scene-hidden），
   便利贴 scene-note 直接跨在内容区块上边缘——相对位置与场景图模式一致（居中顶边）；
   z-index:3 压住 z-index:0 的地图容器；市场页便签跨在二级 nav 外框顶边，
   需高于 z-index:2 的 subnav；仍低于 header(10)/侧栏(110+) */
#scene.scene-hidden {
  height: 0;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  z-index: 3;
}
#scene.scene-hidden img { display: none; }
/* 便签相对 scene 的 padding box 定位：场景图有 1px border 会把便签向右/下顶回 1px，
   地图模式 border 被去掉后便签整体上移、左移 1px——补回 1px 保持与其他页跨边位置一致 */
#scene.scene-hidden .scene-note { top: -29px; left: 15px; }
/* 去掉操作区顶部内边距：地图顶边 = scene 顶边，便签跨边位置精确一致 */
#scene.scene-hidden + #panel-actions { padding-top: 0; }

/* 可用操作区：无操作时保留留白 */
#panel-actions {
  min-height: 120px;
  padding: 2px 0 16px;
}
#panel-actions .empty {
  color: var(--dim);
  text-align: center;
  padding: 28px 0;
}
/* 市场 / 无线电页操作区完整边框（盒装外框）：底色压深一点并微透明，与其余无框页区分 */
#panel-actions.panel-boxed {
  border: 1px solid rgba(46, 57, 71, 0.65);
  border-radius: 10px;
  background: rgba(12, 16, 21, 0.55);
  padding: 8px 14px 16px;
  margin-bottom: 24px;
}
@media (max-width: 760px) {
  #panel-actions.panel-boxed { padding: 2px 10px 14px; }
}
/* 地图页独立样式：仅保留盒装外框的边框/圆角/底色，去掉内边距与 24px 下边距，
   让地图贴边铺满（.panel-map 由 app.js 仅在 map tab 时挂上） */
#panel-actions.panel-boxed.panel-map {
  border: 1px solid rgba(46, 57, 71, 0.65);
  border-radius: 10px;
  background: rgba(12, 16, 21, 0.55);
  padding: 0px;
  margin-bottom: 0;
}
/* 收发室 mailroom：聊天区同样铺满盒装外框（panel 内边距清零，撑满 panel-actions 范围）；
   聊天框顶部直角（贴住上方二级 nav 底边，不再露出圆角缝隙）、底部保留圆角 */
#panel-actions.panel-boxed:has(#radio-mailroom) {
  padding: 0;
}
#panel-actions.panel-boxed:has(#radio-mailroom) .rdo-chat {
  border-radius: 0 0 8px 8px;
}
/* 盒装页（市场 / 无线电）：二级 nav 并入外框作首行（.subnav-boxed，app.js 随 tab 切换增删）——
   上圆角归 subnav、下圆角归 panel，subnav 底边框充当外框内分隔线；
   边框/底色对齐 panel-boxed 外框；顶部 padding 加大：给便签 scene-note 跨边留白
   （与技能页 .skills-canvas 顶部留白同思路，避免纸张盖住二级 tab 文字） */
.subnav.subnav-boxed {
      padding-bottom: 10px;
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 0;
  padding-top: 40px;
  border-color: rgba(46, 57, 71, 0.65);
  border-radius: 10px 10px 0 0;
  background: rgba(12, 16, 21, 0.55);
  box-shadow: none;
}
.subnav.subnav-boxed:not(.hidden) + #panel-actions.panel-boxed {
  border-top: none;
  border-radius: 0 0 10px 10px;
}

/* 城市地图（Leaflet 矢量快照）：背景 = 陆地色，海面用 sea 层盖蓝；容器自建层叠上下文，
   防止 Leaflet 内部高 z-index 控件穿透盖住全局导航/侧栏 */
#city-map {
  /* 占满视口（保留正常留白）：地图页 scene 已收起（高 0、panel 顶 padding 0），
     地图上方 = header 实测高 + header 下 margin 10 + nav 实测高 + nav 上下 margin 4/44，
     地图下方 = panel 底 padding 16，合计再减 74px */
  height: calc(100vh - var(--header-h) - var(--nav-h) - 74px);
  border-radius: 10px;
  background: transparent;
  position: relative;
  z-index: 0;
}
#city-map.leaflet-container { background: #141a20; outline: none; }   /* 不透明陆地色：杜绝透过地图看到页底 bg 图 */
#city-map .leaflet-control-zoom a {
  background: #1a2028; color: #cfd8e3; border-color: #2c3742;
}
#city-map .leaflet-control-zoom a:hover { background: #232b34; }
/* 缩放条底部"回据点"按钮（.mk-locate，追加在 zoom 条内）：继承同条按钮底色/尺寸，
   图标用 flex 居中；点击回到加载时的默认据点视图 */
#city-map .leaflet-bar a.mk-locate {
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
#city-map .leaflet-bar a.mk-locate svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 骨架加载指示：骨架就绪即撤（细节 tile 后台渐进补齐） */
.map-loading {
  position: absolute; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: #141a20; border-radius: 10px;
}
.map-loading-box {
  display: flex; align-items: center; gap: 10px;
  color: #8fa0b3; font-size: 14px;
}
.map-loading-box .spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #2c3742; border-top-color: #d8cfa8;
  animation: mapspin 0.9s linear infinite;
}
@keyframes mapspin { to { transform: rotate(360deg); } }

/* 常显标签：区/镇名、POI、路名（divIcon 内 span 负责居中与描边） */
#city-map .lbl {
  display: inline-block; transform: translate(-50%, -50%);
  position: relative;   /* 供 ::after 扩大命中区定位 */
  white-space: nowrap;
  padding: 3px 5px;   /* 扩大点击命中区 */
  pointer-events: auto;   /* 覆盖 Leaflet 默认 marker-icon none */
}
/* 可点击标签用伪元素撑出更大的命中区：文字本身太薄，密集区极易点空；
   伪元素属于 span 本身，closest([data-poi]/[data-area]) 依旧命中 */
#city-map .lbl[data-poi]::after, #city-map .lbl[data-area]::after {
  content: ""; position: absolute; inset: -6px -9px;
}
/* 命名建筑标签同样可点（data-poi，享受 ::after 扩大命中区），不再穿透吞点击 */
#city-map .place-label {
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-indent: 2px;
  color: #b9c2cc; text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px #000;
}
#city-map .place-label.c { font-size: 14px; color: #d8cfa8; letter-spacing: 3px; text-indent: 3px; }
#city-map .place-label.q { font-size: 10.5px; font-weight: 400; letter-spacing: 1px; color: #97a1ab; }
/* 视口空窗兜底标签：就地淡入，与常显标签同款样式 */
#city-map .lbl.dyn { animation: dynIn .25s ease-out; }
@keyframes dynIn { from { opacity: 0; } }
#city-map .poi-label {
  font-size: 11px; color: #aab6c2; text-shadow: 0 0 3px #000, 0 1px 2px #000;
}
#city-map .poi-label.airport, #city-map .poi-label.station { color: #7fb8c9; font-weight: 600; }
#city-map .poi-label.edu { color: #b8c99a; }
/* 新增 POI 类别配色（公司/商店/餐饮/酒店/医疗/金融/旅游/运动/公共服务） */
#city-map .poi-label.company { color: #d8c08a; font-weight: 600; }
#city-map .poi-label.shop { color: #c99ab0; }
#city-map .poi-label.food { color: #d0a37e; }
#city-map .poi-label.hotel { color: #a99ad0; }
#city-map .poi-label.health { color: #d09a9a; }
#city-map .poi-label.finance { color: #9ac9b0; }
#city-map .poi-label.tourism { color: #c9b89a; }
#city-map .poi-label.sport { color: #93c4a3; }
#city-map .poi-label.public { color: #9db0d0; }
/* 命名面标签（小区/公园/商区/校区…）：比 POI 更淡更小，按类别着色 */
#city-map .area-label {
  font-size: 10px; color: #97a1ab; text-shadow: 0 0 3px #000, 0 1px 2px #000; letter-spacing: .5px;
}
#city-map .area-label.residential { color: #c9b391; }
#city-map .area-label.park { color: #9dc49b; }
#city-map .area-label.commercial { color: #a8b8c9; }
#city-map .area-label.campus { color: #c0a8d0; }
#city-map .area-label.civic { color: #d0c098; }
#city-map .area-label.industrial { color: #b0a898; }
#city-map .area-label.sport { color: #98c4a8; }
#city-map .area-label.cemetery, #city-map .area-label.farm, #city-map .area-label.other { color: #8a929b; }
/* 命名建筑标签（xx楼/xx大厦）：最高档，最小最淡 */
#city-map .building-label {
  font-size: 9.5px; color: #b8b0a0; text-shadow: 0 0 3px #000, 0 1px 2px #000;
}

/* 最顶层叠加层：运营后台任务标点（divIcon，pane z-index 680，永远盖在地图要素之上） */
#city-map .mmk-wrap { background: transparent; border: none; }
#city-map .mmk {
  display: flex; flex-direction: column; align-items: center;
  width: 160px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.85));
  pointer-events: none;
}
#city-map .mmk svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
#city-map .mmk-name {
  margin-top: 1px;
  font-size: 10.5px; color: #e6ecf3; letter-spacing: .5px;
  white-space: nowrap;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
  background: rgba(16,20,24,.55);
  border-radius: 3px; padding: 0 4px;
}

/* 据点标记（滨江二村）：金色房子 + 名字，路径距离原点 */
#city-map .base-mk {
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(-50%);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.85));
  pointer-events: none;
}
#city-map .base-mk svg {
  width: 20px; height: 20px;
  fill: none; stroke: #e6d492; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
#city-map .base-mk span {
  margin-top: 1px;
  font-size: 10px; font-weight: 700; color: #e6d492; letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
  background: rgba(16,20,24,.55);
  border-radius: 3px; padding: 0 4px;
}

/* 据点 → POI 导航线：金色流动虚线（SVG renderer，pane z 470） */
#city-map .route-line {
  fill: none;
  stroke-dasharray: 7 7;
  animation: routeDash 1.1s linear infinite;
}
@keyframes routeDash { to { stroke-dashoffset: -14; } }

/* POI 浮窗：名称 + 类别徽章 + 一句话描述 + 路径距离/方位/步行时间 */
#city-map #poi-pop {
  position: absolute; z-index: 950;
  width: max-content; max-width: min(280px, calc(100% - 16px));
  background: #1b2129; border: 1px solid #3a4149; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.55);
  padding: 10px 12px 9px;
  color: #d6dde3;
  animation: poiPopIn .16s ease-out;
}
@keyframes poiPopIn { from { opacity: 0; transform: translateY(4px); } }
#city-map #poi-pop.below { animation: poiPopInB .16s ease-out; }
@keyframes poiPopInB { from { opacity: 0; transform: translateY(-4px); } }
/* 指向锚点的箭头：水平位置随 POI 屏幕坐标（--ax）动态写入 */
#city-map #poi-pop::after {
  content: ""; position: absolute; left: var(--ax, 50%); bottom: -10px;
  margin-left: -5px;
  border: 5px solid transparent; border-top-color: #3a4149;
}
#city-map #poi-pop.below::after {
  bottom: auto; top: -10px;
  border-top-color: transparent; border-bottom-color: #3a4149;
}
#city-map .poi-pop-x {
  position: absolute; top: 2px; right: 4px;
  width: 22px; height: 22px; line-height: 20px;
  background: none; border: none; color: #7d8791;
  font-size: 16px; cursor: pointer; padding: 0;
}
#city-map .poi-pop-x:hover { color: #d6dde3; }
#city-map .poi-pop-name {
  font-size: 14px; font-weight: 700; color: #e6ecf3;
  padding-right: 20px; word-break: break-all;
}
#city-map .poi-pop-kind {
  display: inline-block;
  margin-top: 5px;
  font-size: 10.5px; letter-spacing: .5px;
  color: #9db0d0; background: #262d36;
  border-radius: 4px; padding: 1px 7px;
}
/* 类别徽章配色与 .poi-label 色板一致 */
#city-map .poi-pop-kind.k-airport, #city-map .poi-pop-kind.k-station { color: #7fb8c9; }
#city-map .poi-pop-kind.k-edu { color: #b8c99a; }
#city-map .poi-pop-kind.k-company { color: #d8c08a; }
#city-map .poi-pop-kind.k-shop { color: #c99ab0; }
#city-map .poi-pop-kind.k-food { color: #d0a37e; }
#city-map .poi-pop-kind.k-hotel { color: #a99ad0; }
#city-map .poi-pop-kind.k-health { color: #d09a9a; }
#city-map .poi-pop-kind.k-finance { color: #9ac9b0; }
#city-map .poi-pop-kind.k-tourism { color: #c9b89a; }
#city-map .poi-pop-kind.k-sport { color: #93c4a3; }
/* 命名面类别徽章（配色与 .area-label 色板一致） */
#city-map .poi-pop-kind.k-residential { color: #c9b391; }
#city-map .poi-pop-kind.k-park { color: #9dc49b; }
#city-map .poi-pop-kind.k-commercial { color: #a8b8c9; }
#city-map .poi-pop-kind.k-campus { color: #c0a8d0; }
#city-map .poi-pop-kind.k-civic { color: #d0c098; }
#city-map .poi-pop-kind.k-industrial { color: #b0a898; }
#city-map .poi-pop-kind.k-cemetery, #city-map .poi-pop-kind.k-farm { color: #8a929b; }
#city-map .poi-pop-kind.k-building { color: #b8b0a0; }
#city-map .poi-pop-desc {
  margin: 7px 0 8px;
  font-size: 12px; line-height: 1.55; color: #a7b0b9;
}
#city-map .poi-pop-data {
  border-top: 1px solid #2c333b; padding-top: 7px;
}
#city-map .pd-row {
  display: flex; align-items: baseline; gap: 8px;
}
#city-map .pd-v {
  font-size: 14px; font-weight: 700; color: #e6d492;
  font-variant-numeric: tabular-nums;
}
#city-map .pd-tag {
  font-size: 10px; color: #7d8791;
  border: 1px solid #333b44; border-radius: 3px; padding: 0 5px;
}
#city-map .pd-row.dim {
  margin-top: 4px;
  font-size: 11.5px; color: #8a939c;
}
#city-map .pd-row.dim i { font-style: normal; color: #4a525b; }

/* 通用列表/标题 */
h3 { margin: 12px 0 6px; font-size: 15px; }
h4 { margin: 10px 0 4px; font-size: 13px; color: var(--dim); }
ul { margin: 4px 0; padding-left: 20px; }
li { margin: 3px 0; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }

.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  border: 1px solid var(--border);
}
.zone-recovered { color: var(--ok); }
.zone-contested { color: var(--warn); }
.zone-enemy { color: var(--bad); }

ul.sites { list-style: none; padding-left: 0px; }
ul.sites li {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
ul.sites li .dim { font-size: 12px; }
ul.sites li button { margin-left: auto; }

progress { width: 160px; }

/* ---------------- 技能页：技能列表 · 三线并排横向移动 ----------------
   三大类并排在同一个横向滚动画布里（拖动横移一览），
   每列一张技能卡列表：徽章（完整技能名）+ 等级 + XP 占位条；
   点卡片在其正下方百叶窗式展开详情（全局同时只展开一个） */
/* 横移画布：桌面端三列（300px×3）≈ 内容区宽，刚好一屏可览；
   窗口不够宽或移动端自然横向滚动，停在任意位置一览交界 */
.skills-canvas {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.skills-canvas::-webkit-scrollbar { display: none; }
.skills-track {
  display: flex;
  align-items: stretch;
  padding: 42px 0 12px 0;
  width: max-content;   /* 撑出画布宽度形成横移 */
}
.skills-branch {
  flex: 0 0 auto;
  width: 300px;
  padding: 0 14px;      /* 两侧均等内边距：相邻列间距对称 */
  display: flex;
  flex-direction: column;
}
.skills-branch + .skills-branch { border-left: 1px dashed var(--border); }
.skills-branch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.skills-branch-head b { font-size: 13px; }
.skill-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 卡片 + 详情成对：entry 之间 8px，详情展开时仍在 entry 内部——
   背景、圆角、边框都挂在 entry 上，按钮与详情共享同一背景与边框，
   hover 高亮的是整张卡片（横条 + 展开的详情），而非只有横条 */
.skill-entry {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.skill-entry:hover { border-color: var(--accent); }
/* 技能卡：方形图标位（后期放手绘图标）在左，名称+等级 / XP 条在右。
   width:100% —— wrapper 后 button 脱离 flex 拉伸，默认按内容收缩会参差不齐；
   自身去边框、去背景：统一由 .skill-entry 提供（避免 hover 只在横条上高亮） */
.skill-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  text-align: left;
  border: none;
  background: transparent;
}
/* 图标位：正方形，废土风技能图标（AI 生成精灵图裁切件，icons/skills/{id}.jpg，
   与 SKILL_GROUPS 的 id 一一对应；160px 源图按 100% 缩放填充 46px 框） */
.glyph {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #141a20;
  overflow: hidden;
}
.glyph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.skill-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 技能名称 + 等级：同行并排（名称在左、等级紧随） */
.skill-item-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
}
.skill-item-lv {
  font-size: 12px;
  line-height: 1;
  color: var(--dim);
}
/* XP 占位条：宽度由 --p 驱动（后端接入前为等级派生的伪百分比）；
   升级规则：技能被使用即积攒经验自动升级（后端结算），前端无手动入口 */
.skill-xp {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.skill-xp::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--p, 0%);
  border-radius: 2px;
  background: var(--accent);
}
/* 详情（百叶窗）：卡片正下方展开，grid 0fr→1fr 平滑过渡；
   收起时 clip 高度为 0，全部留白放在 inner 的 padding 上避免残留占高。
   无独立背景/边框：与上方卡片同处 .skill-entry，共享底色，视觉上在卡片内部 */
.skill-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.skill-detail.open { grid-template-rows: 1fr; }
.skill-detail-clip { overflow: hidden; min-height: 0; }
.skill-detail-inner {
  padding: 0 10px 10px;
}
.skill-detail-inner p {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--dim);
}
/* 详情为卡片正下方百叶窗展开（.skill-detail，样式见技能列表段） */

/* ---------------- 载具页（车库 · GitHub 热力图式改装格） ---------------- */
/* 外框：包住说明与全部载具卡；便利贴 scene-note 跨在其上边缘（框顶 = panel 顶） */
.veh-wrap {
  background: #10141891;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.veh-note {
  margin:0 0 10px;
  font-size: 12px;
  line-height: 1.6;
}
/* 桌面端：一行两卡；卡内上区=左图+右侧（标题/介绍），下区=加点行通栏 */
.veh-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.veh-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  grid-template-areas:
    "media head"
    "grid  grid";
  gap: 8px 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  align-content: start;
}
.veh-media {
  grid-area: media;
  position: relative;
}
.veh-body { display: contents; }
.veh-head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  background: transparent;
}
.veh-head b { font-size: 15px; }
.veh-head .dim { flex: 1 1 100%; font-size: 12px; line-height: 1.5; }
.veh-total { margin-left: auto; font-size: 12px; color: var(--dim); }
.veh-grid { grid-area: grid; display: flex; flex-direction: column; gap: 4px; }
.veh-media img {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #20262d;
}
.veh-cond-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid;
  background: rgba(16, 20, 24, 0.82);
}
.veh-cond-badge.new   { color: #7fe0a0; border-color: #2e7d4f; }
.veh-cond-badge.worn  { color: #e8c96a; border-color: #8a6d2f; }
.veh-cond-badge.wreck { color: #e07a6a; border-color: #8a3a30; }
/* 不展示损耗徽章（车况由图片本身呈现，两端一致） */
.veh-cond-badge { display: none; }
.veh-dim { display: flex; align-items: center; gap: 10px; }
.veh-dim-name {
  flex: 0 0 56px;
  font-size: 12px;
  color: var(--dim);
}
.veh-cells { display: flex; gap: 4px; flex: 1; }
.veh-cell {
  width: 14px;
  height: 11px;
  flex: 1 1 0;
  max-width: 14px;
  padding: 0;
  border: 1px solid #22303a;
  border-radius: 3px;
  background: #161c22;
  cursor: pointer;
  transition: border-color 0.12s;
}
.veh-cell:hover { border-color: #3f5666; }
.veh-dim-lv {
  flex: 0 0 44px;
  text-align: right;
  font-size: 11.5px;
  color: var(--dim);
  font-weight: 600;
}
/* 移动端：与桌面同构（上区=左图+右侧标题/介绍，下区=加点通栏），仅一行一卡、图列收窄、不显示每行 x/x */
@media (max-width: 760px) {
  .veh-wrap { padding: 8px; border-radius: 8px; }
  .veh-list { grid-template-columns: minmax(0, 1fr); }
  .veh-card { grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; padding: 10px; }
  .veh-dim-lv { display: none; }
  .veh-dim-name { flex-basis: 44px; font-size: 11.5px; }
  .veh-cell { max-width: 13px; }
}

/* ---------------- 后院 · 模拟种植区域（多区域 · 折叠苗床） ---------------- */
/* 页标题 + 区域外框（与 .veh-wrap 同语言：半透明底 + 细边框圆角卡） */
.yard-title {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--dim);
}
.yard-plot {
  background: #10141891;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: pointer;          /* 整卡可点（折叠/收起），格子与按钮有自己的 pointer 语义 */
  user-select: none;
  -webkit-user-select: none;
}
/* 表头：折叠钮（标题+摘要+箭头）与一键动作按钮，窄屏自动换行 */
.yard-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.yard-fold {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.yard-fold b { font-size: 14.5px; white-space: nowrap; }
.yard-sum { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yard-arrow {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 12px;
  color: var(--dim);
  transition: transform 0.25s ease;
}
.yard-plot.open .yard-arrow { transform: rotate(180deg); }
.yard-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.yard-actions button {
  font: inherit;
  font-size: 11.5px;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.yard-actions button:hover { color: inherit; border-color: #3f5666; }
/* 苗床百叶窗：grid 0fr→1fr 过渡（同 .skill-detail），收起不留占高 */
.yard-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.yard-detail.open { grid-template-rows: 1fr; }
.yard-detail-clip { overflow: hidden; min-height: 0; }
/* 种植格：桌面 10 列（20 格排 2 行），移动端 5 列（排 4 行）——同一批格子仅换列数 */
.yard-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  padding-top: 10px;
}
.yard-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.yard-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.25;
  filter: grayscale(0.6);
}
/* 空地=暗灰占位；种上后亮起并以 --ring 色描边区分作物；到点变绿 */
.yard-cell.planted { border: 2px solid var(--ring, var(--border)); }
.yard-cell.planted img { opacity: 0.9; filter: none; }
.yard-cell.ready { border-color: #39d353; }
/* 剩余收获时间徽标（格底常显） */
.yard-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.66);
}
.yard-cell.ready .yard-timer { background: #1a8b42; }
/* 浇水/施肥状态点（格右上角） */
.yard-dots {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 2px;
}
.yard-dots i { width: 6px; height: 6px; border-radius: 50%; }
.yard-dots .w { background: #4aa3e0; }
.yard-dots .f { background: #c98d52; }
/* 种植位浮动操作小窗：fixed 定位（JS 按格子矩形计算，越界翻转） */
.yard-pop {
  position: fixed;
  z-index: 90;
  min-width: 170px;
  max-width: 240px;
  background: #161c22;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.yard-pop.hidden { display: none; }
.yard-pop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.yard-pop-head b { font-size: 12.5px; }
.yard-pop-remain { font-size: 11px; white-space: nowrap; }
.yard-pop-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.yard-pop-actions button {
  font: inherit;
  font-size: 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.yard-pop-actions button:hover:not(:disabled) { border-color: #3f5666; }
.yard-pop-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
/* 移动端：外框收窄，网格换 5 列（4 行），格距/字号同步缩小 */
@media (max-width: 760px) {
  .yard-plot { padding: 8px 9px; border-radius: 8px; }
  .yard-fold b { font-size: 13.5px; }
  .yard-sum { font-size: 11px; }
  .yard-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .yard-actions button { padding: 3px 7px; font-size: 11px; }
}

/* ---------------- 阁楼 · 设施区（太阳能发电 / 无线电天线 / 无人机停机坪） ---------------- */
/* 卡片折叠/百叶窗结构与后院 .yard-* 同语言：半透明底 + 细边框圆角卡 */
.attic-title {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--dim);
}
.attic-note { margin: 0 0 10px; font-size: 12px; }
.attic-plot {
  background: #10141891;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: pointer;          /* 整卡可点（折叠/展开），按钮有自己的 pointer 语义 */
  user-select: none;
  -webkit-user-select: none;
}
.attic-head { display: flex; align-items: center; }
.attic-fold {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.attic-fold b { font-size: 14.5px; white-space: nowrap; }
.attic-lv {
  flex: 0 0 auto;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  color: #6fb7e8;
  background: rgba(74, 163, 224, 0.14);
  border: 1px solid rgba(74, 163, 224, 0.35);
}
.attic-sum { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attic-arrow {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 12px;
  color: var(--dim);
  transition: transform 0.25s ease;
}
.attic-plot.open .attic-arrow { transform: rotate(180deg); }
/* 折叠头右置版式（.fold-lv-end，用于阁楼 / 地下室 / 后院蜂箱）：
   移除右侧箭头；摘要右对齐、贴合排在等级左侧；等级居最右并放大 */
.attic-fold.fold-lv-end { gap: 10px; }
.attic-fold.fold-lv-end .attic-sum {
  margin-left: auto;
  min-width: 0;
  text-align: right;
}
.attic-fold.fold-lv-end .attic-lv { font-size: 14px; padding: 2px 9px; }
@media (max-width: 760px) {
  .attic-fold.fold-lv-end .attic-lv { font-size: 12.5px; padding: 1px 7px; }
}
/* 百叶窗：grid 0fr→1fr 过渡（同 .yard-detail），收起不留占高 */
.attic-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.attic-detail.open { grid-template-rows: 1fr; }
.attic-detail-clip { overflow: hidden; min-height: 0; }
/* 展开态三栏：左视觉区（定宽）· 中数值信息（自适应）· 右升级+需求（定宽） */
.attic-detail-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 168px;
  gap: 12px;
  padding-top: 10px;
  align-items: stretch;
}
/* 阁楼：左栏等级图视觉区整体缩小（桌面端 150→130），图片不再压过数值列 */
#attic-wrap .attic-detail-grid {
  grid-template-columns: 136px minmax(0, 1fr) 168px;
}
/* 左栏视觉区：深底内框，solar=日照模拟 / radio=等级天线图 / drone=占位图 */
.attic-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.attic-art { color: var(--dim); }
.attic-art svg { width: 92px; height: 66px; display: block; }
/* 等级建筑图（太阳能 img/solar/solar_lv1~10.webp / 无线电 img/antenna/antenna_lv1~10.webp /
   雨水过滤器 img/rain/rain_lv1~10.webp / 无人机 img/drone/drone_lv1~10.webp /
   燃油发电机 img/genset/genset_lv1~10.webp / 蓄电池组 img/batbank/batbank_lv1~10.webp，
   升级随等级换图）：
   整图铺满视觉区（100% 宽高）。
   太阳能另叠强度条+数值文字与左上角天气；雨水过滤器另叠水位条+储水量文字；
   无人机另叠电量条+电量文字；燃油发电机另叠油量条+状态文字；蓄电池组另叠电量条+状态文字；
   无线电只展示天线图。
   视觉区与图片统一 1:1 正方形（aspect-ratio + align-self 防止 grid stretch 拉伸） */
.solar-visual,
.radio-visual,
.rain-visual,
.drone-visual,
.gen-visual,
.bank-visual,
.tank-visual,
.frz-visual,
.oil-visual,
.gate-visual {
  position: relative;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1 / 1;
  align-self: start;
}
.solar-art,
.radio-art,
.rain-art,
.drone-art,
.gen-art,
.bank-art,
.tank-art,
.frz-art,
.oil-art,
.gate-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 左上角天气徽标（meteocons.com 风格）：img/weather/*.svg 动画图标 + 玻璃圆底。
   图标随 --sun（0–1）同步明暗，玻璃底保持照片上的可读性；昼夜/天气变化时由 app.js 换图 */
.solar-visual .solar-wx {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.18), rgba(8, 14, 22, 0.5) 74%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 calc(5px + 16px * var(--sun, 0.5)) rgba(255, 198, 92, calc(0.08 + 0.3 * var(--sun, 0.5))),
    0 2px 9px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: box-shadow 0.6s ease, border-color 0.6s ease;
  pointer-events: none;
}
.solar-wx .wx-icon {
  width: 34px;
  height: 34px;
  display: block;
  filter: brightness(calc(0.84 + 0.2 * var(--sun, 0.5))) saturate(1.05);
  transition: filter 0.6s ease;
}
.solar-wx.night {
  border-color: rgba(150, 190, 255, 0.2);
}
.solar-wx.night .wx-icon {
  filter: brightness(0.92) saturate(0.95);
}
/* 图片底部整体阴影：覆盖视觉区下半部的全宽渐变压暗，衬底提升文本/进度条可读性 */
.solar-visual::after,
.rain-visual::after,
.drone-visual::after,
.radio-visual::after,
.gen-visual::after,
.bank-visual::after,
.tank-visual::after,
.frz-visual::after,
.oil-visual::after,
.gate-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.34) 46%, transparent);
  pointer-events: none;
}
/* 底部信息层（压在整体阴影之上）：只负责排版，不再自带渐变底色 */
.solar-overlay,
.rain-overlay,
.drone-overlay,
.radio-overlay,
.gen-overlay,
.bank-overlay,
.tank-overlay,
.frz-overlay,
.oil-overlay,
.gate-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 6px 6px;
  pointer-events: none;
}
/* 粗体进度条（太阳能强度 / 无人机电量 / 雨水水位 / 无线电增益）：数值 + 状态文字内嵌条中。
   条体加高作"粗体"观感；加边框 + 深底 + 投影，让条体自浮于图片之上，文字更清晰 */
.attic-bar.bar-thick {
  --bar-r: 5px;                                    /* 外圆角半径 */
  height: 22px;
  border-radius: var(--bar-r);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.42);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
/* 填充色圆角 = 外圆角 − 边框宽：与边框内缘严丝合缝，消除四角露出底色的缝隙 */
.attic-bar.bar-thick b { border-radius: calc(var(--bar-r) - 1px); }
.bar-label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 6px;
  overflow: hidden;
  font-size: 11px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
/* 数值（左）保持完整不收缩；状态（右）可压缩省略号——窄条时优先保住数值 */
.bar-label .bar-val {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #fff;
}
.bar-label .bar-state {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}
/* 强度/电量通用条 */
.attic-bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.attic-bar b {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}
.attic-bar.sun b { background: linear-gradient(90deg, #8a6b2f, #f5b53f); }
.attic-bar.drone b { background: linear-gradient(90deg, #2f8a4c, #39d353); }
.attic-bar.rain b { background: linear-gradient(90deg, #2f6b8a, #4aa3e0); }
.attic-bar.radio b { background: linear-gradient(90deg, #2f8a8a, #3fd3d3); }
.attic-bar-val { font-size: 11px; }
.attic-state { font-size: 11px; }
/* 无线电信号灯：呼吸闪烁 */
.radio-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39d353;
  box-shadow: 0 0 6px rgba(57, 211, 83, 0.8);
  animation: attic-blink 1.6s ease infinite;
}
@keyframes attic-blink {
  0%, 60% { opacity: 1; }
  80% { opacity: 0.15; }
  100% { opacity: 1; }
}
/* 中栏数值信息：label … value 行 */
.attic-stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.attic-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  padding-bottom: 5px;
}
.attic-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.attic-stat span { color: var(--dim); }
.attic-stat b { font-weight: 600; }
/* 右栏：上半升级列（按钮 + 移动端倒计时位）+ 下半需求列表（虚线框，预留 icon × 数量） */
.attic-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.attic-up-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.attic-up {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  font-weight: 600;
  color: #7ee2a0;
  background: rgba(57, 211, 83, 0.12);
  border: 1px solid #2c7a44;
  border-radius: 6px;
}
.attic-up.maxed {
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}
/* 升级倒计时：桌面端嵌在按钮内部右侧的深色胶囊；
   满级按钮不渲染时间元素（JS 控制） */
.attic-up-time {
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #c9f5d6;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
/* 移动端倒计时位：桌面端隐藏（时间在按钮内展示），移动端显示在按钮下方 */
.attic-up-time-below {
  display: none;
  font-size: 10.5px;
  line-height: 1.7;
  text-align: center;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attic-reqs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 9px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.attic-reqs-title { font-size: 11px; color: var(--dim); }
.attic-req {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.attic-req i {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}
.attic-req i svg { width: 16px; height: 16px; }
.attic-req span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attic-req b { margin-left: auto; font-weight: 600; }
/* 移动端：展开态改上下结构——上半=占位图+数值（两列并排），
   下半=升级按钮+需求列表（横排一行，按钮等高拉伸） */
@media (max-width: 760px) {
  .attic-plot { padding: 8px 9px; border-radius: 8px; }
  .attic-fold b { font-size: 13.5px; }
  .attic-sum { font-size: 11px; }
  .attic-detail-grid {
    grid-template-columns: minmax(96px, 1fr) minmax(0, 1.4fr);
    grid-template-areas:
      "visual stats"
      "side   side";
    gap: 9px;
  }
  /* 阁楼：移动端视觉区进一步缩小（列宽比约 1 : 1.775），图片明显小于数值区 */
  #attic-wrap .attic-detail-grid {
    grid-template-columns: minmax(84px, 1fr) minmax(0, 1.775fr);
  }
  .attic-visual { grid-area: visual; padding: 9px 6px; }
  .attic-art svg { width: 76px; height: 54px; }
  .solar-visual,
  .rain-visual,
  .drone-visual,
  .radio-visual,
  .gen-visual,
  .bank-visual,
  .tank-visual,
  .frz-visual,
  .oil-visual,
  .gate-visual { padding: 0; }
  .solar-visual .solar-wx { width: 34px; height: 34px; top: 6px; left: 6px; }
  .solar-wx .wx-icon { width: 25px; height: 25px; }
  /* 移动端：粗条收窄高度、文字缩小内缩，保证窄视觉区内数值+状态仍单行放下 */
  .attic-bar.bar-thick { height: 20px; }
  .bar-label { font-size: 9.5px; padding: 0 5px; gap: 3px; }
  .attic-stats { grid-area: stats; }
  .attic-side {
    grid-area: side;
    flex-direction: row;
    align-items: stretch;
  }
  /* 移动端：按钮在上方，时间移出按钮、显示在按钮下方；
     两者各分得升级列一半高度（随需求框撑起的行高等分拉伸） */
  .attic-up-col { flex: 0 0 96px; }
  .attic-up { flex: 1 1 0; min-height: 0; padding: 4px 8px; }
  .attic-up .attic-up-time { display: none; }
  .attic-up-time-below {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .attic-reqs { flex: 1; }
}

/* ---------------- 地下室 · 设备机房（复用阁楼 .attic-* 折叠/三栏/升级结构） ---------------- */
/* 状态条配色：油量橙 / 电量青 / 水量蓝 / 温度冰蓝 */
.attic-bar.fuel b { background: linear-gradient(90deg, #8a5a2f, #f5863f); }
.attic-bar.oil b { background: linear-gradient(90deg, #7a5a20, #e8a53f); }
.attic-bar.bank b { background: linear-gradient(90deg, #2f6f8a, #39c0d3); }
.attic-bar.water b { background: linear-gradient(90deg, #2f5a8a, #3f9be8); }
.attic-bar.frost b { background: linear-gradient(90deg, #4d7fa8, #a8d8f0); }
.attic-bar.gate b { background: linear-gradient(90deg, #6fb7e8, #a3d8f5); }   /* 大门耐久：与概况 .ov-bar.def 同色 */

/* ---------------- 后院设施 · 畜栏 / 鱼塘 / 蜂箱（复用阁楼 .attic-* 折叠/三栏结构） ---------------- */
/* 区标题 + 说明（同 .yard-title 语言） */
.yard-fac-title {
  margin: 14px 0 6px;
  font-size: 13px;
  color: var(--dim);
}
.yard-fac-note { margin: 0 0 10px; font-size: 12px; }
/* 状态条配色：饲料橙 / 成长绿 / 储蜜琥珀 */
.attic-bar.feed b  { background: linear-gradient(90deg, #8a5a2f, #f5863f); }
.attic-bar.grow b  { background: linear-gradient(90deg, #2f8a4c, #39d353); }
.attic-bar.honey b { background: linear-gradient(90deg, #8a7a2f, #f5c83f); }
/* 收取/收获按钮：位于升级按钮下方，次级按钮样式（青/金描边区分） */
.attic-collect {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #4aa3e0;
  background: rgba(74, 163, 224, 0.1);
  border: 1px solid #2f6b8a;
  border-radius: 6px;
  cursor: pointer;
}
.attic-collect:hover:not(:disabled) { color: #7ec4e8; border-color: #4aa3e0; }
.attic-collect:disabled { opacity: 0.4; cursor: not-allowed; }
/* 移动端：收取按钮与升级按钮同列，各占升级列一半高度 */
@media (max-width: 760px) {
  .attic-collect { flex: 1 1 0; min-height: 0; padding: 4px 8px; font-size: 11.5px; }
}

/* ---------------- 后院 · 畜栏/鸡舍（固定 10 栏位，复用种植区 .yard-* 结构与样式） ----------------
   栏位格子沿用 .yard-cell 基础外观，仅以 .stocked 描边区分牲畜/家禽、.ready 转绿 */
.pen-cell.stocked, .coop-cell.stocked { border: 2px solid var(--ring, var(--border)); }
.pen-cell.stocked img, .coop-cell.stocked img { opacity: 0.9; filter: none; }
.pen-cell.ready, .coop-cell.ready { border-color: #39d353; }

/* ---------------- 后院 · 池塘（纯操作面板 · 四按钮） ---------------- */
.pond-panel {
  background: #10141891;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.pond-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pond-head b { font-size: 14.5px; }
.pond-lv { font-size: 12px; color: var(--dim); }
.pond-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pond-stat {
  flex: 1 1 0;
  min-width: 88px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
.pond-stat span { display: block; font-size: 11px; color: var(--dim); }
.pond-stat b { font-size: 14px; font-weight: 600; }
.pond-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pond-actions button {
  flex: 1 1 0;
  min-width: 88px;
  font: inherit;
  font-size: 12.5px;
  color: inherit;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
}
.pond-actions button:hover:not(:disabled) { border-color: #3f5666; }
.pond-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 760px) {
  .pond-panel { padding: 8px 9px; border-radius: 8px; }
  .pond-head b { font-size: 13.5px; }
  .pond-stat { min-width: 0; }
  .pond-actions button { min-width: 0; font-size: 11.5px; padding: 6px 8px; }
}

/* ---------------- 储物间 · 物资清单（列表 + 排序/搜索/分页） ----------------
   外层 .st-panel 统一边框包裹；顶部工具条（左=排序预设 / 右=搜索）；
   列表行以分隔线相连（非独立卡片）；底部页码工具条 */
.st-note { margin-bottom: 8px; }
.st-panel {
  background: #10141891;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.st-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(20, 26, 34, 0.6);
}
.st-sorts {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.st-sorts::-webkit-scrollbar { display: none; }
.st-sort {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.st-sort:hover:not(.active) { color: var(--text); border-color: var(--accent); }
.st-sort.active {
  color: var(--rad-yellow);
  border-color: var(--rad-yellow);
  background: rgba(255, 214, 10, 0.12);
  font-weight: 600;
}
.st-search { position: relative; flex: 0 0 auto; }
.st-search svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--dim);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.st-search input {
  width: 156px;
  padding: 5px 10px 5px 27px;
  font-size: 12.5px;
  border-radius: 999px;
}
.st-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
ul.sites.st-list { padding: 0; margin: 0; }
ul.sites.st-list li {
  align-items: center;
  padding: 9px 12px;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
ul.sites.st-list li:last-child { border-bottom: 0; }
ul.sites.st-list li.st-empty {
  justify-content: center;
  padding: 30px 12px;
  color: var(--dim);
  opacity: 1;
}
.st-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: rgba(20, 26, 34, 0.6);
}
.st-total { font-size: 12.5px; }
.st-page-ctrl { display: flex; align-items: center; gap: 8px; }
.st-page-ctrl button { padding: 4px 12px; font-size: 12.5px; }
.st-page-info { font-size: 12.5px; color: var(--dim); }
@media (max-width: 520px) {
  .st-search input { width: 118px; }
  .st-total { display: none; }
  .st-pager { justify-content: center; }
}

/* 物资行内容（沿用旧仓库行结构） */
.wh-list li { align-items: center; }
.wh-thumb {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0d1116;
}
.wh-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.wh-info .dim { font-size: 12px; }
.wh-count { margin-left: auto; color: #fff; }
.wh-list li.wh-empty { opacity: 0.55; }
.wh-list li.wh-empty .wh-count { color: var(--dim); }

/* ---------------- 工坊 · 配方制作 ---------------- */
.ws-note { margin-bottom: 8px; }
.ws-queue-bar { align-items: center; white-space: nowrap; font-size: 12.5px; color: var(--dim); }
.ws-queue-bar .ws-queue-busy { color: var(--rad-yellow); }
ul.sites.ws-list li.ws-row { align-items: center; }
/* 概况卡片跳转后定位的高亮行 */
ul.sites.ws-list li.ws-row.ws-now {
  border-color: var(--accent);
  background: rgba(232, 185, 61, 0.08);
}
.ws-inputs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
.ws-ing {
  font-size: 12px;
  color: var(--dim);
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.ws-ing b { color: var(--text); font-weight: 600; }
.ws-ing.lack { color: #e06c75; border-color: rgba(224, 108, 117, 0.5); }
.ws-ing.lack b { color: #e06c75; }
ul.sites.ws-list li.ws-row button { margin-left: auto; flex: 0 0 auto; }
ul.sites.ws-list li.ws-row button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------------- 宿舍 · 幸存者居住系统 ---------------- */
.bk-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.bk-summary { font-size: 13px; color: var(--dim); }
.bk-summary .bk-homeless { margin-left: 6px; }
.bk-toolbar button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}
.bk-toolbar button:hover { border-color: var(--rad-yellow); color: var(--rad-yellow); }

.bk-beds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.bk-bed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--dim);
  font-size: 12px;
}
.bk-bed.occupied {
  border-style: solid;
  border-color: var(--border);
  color: var(--text);
}
.bk-bed-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bk-bed-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bk-list { display: flex; flex-direction: column; gap: 8px; }
.bk-survivor {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.bk-survivor.homeless { border-color: rgba(224, 70, 70, 0.55); }
.bk-survivor-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.bk-avatar { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--text); flex-shrink: 0; }
.bk-name { flex: 0 1 auto; }
.bk-state { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--dim); }
.bk-state.working { color: #39d353; background: rgba(57, 211, 83, 0.12); }
.bk-homeless { font-size: 11px; padding: 2px 8px; border-radius: 10px; color: #ff7b7b; background: rgba(224, 70, 70, 0.14); }
.bk-survivor-body { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-task-label { font-size: 12px; color: var(--dim); }
.bk-task {
  padding: 5px 8px;
  background: #141a20;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
}
.bk-task:disabled { opacity: 0.45; }
.bk-dismiss {
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid rgba(224, 70, 70, 0.5);
  background: transparent;
  color: #ff7b7b;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}
.bk-dismiss:hover { background: rgba(224, 70, 70, 0.12); }
.bk-progress {
  flex: 1 1 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  overflow: hidden;
}
.bk-progress i { display: block; height: 100%; background: linear-gradient(90deg, #2f8a4c, #39d353); transition: width 200ms linear; }

.bk-output {
  margin-top: 12px;
  padding: 9px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bk-output-title { color: var(--dim); }
.bk-output-items { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-out-item { color: var(--text); }

/* 移动端：header 固定顶部，nav 固定底部，两者都是最顶层悬浮元素 */
@media (max-width: 760px) {
  /* 登录页：垂直布局——图片置顶（120% 宽、左右各超出视口 10%），登录框靠下居中；
     底部渐隐强化图片到黑色区域的过渡 */
  #view-auth {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    overflow-x: clip; /* 裁掉图片超宽部分，避免横向滚动；垂直方向仍可滚动到介绍区 */
  }
  .auth-bg-wrap {
    position: static;
    width: 120%;
    margin-left: -10%;
    height: auto;
  }
  .auth-bg {
    height: auto;
  }
  .auth-bg-wrap::after {
    background:
      linear-gradient(to top, #000, transparent 30%),
      linear-gradient(to bottom, #000, transparent 18%),
      linear-gradient(to right, #000, transparent 10%),
      linear-gradient(to left, #000, transparent 10%);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5);
  }
  .auth-box {
    margin: auto auto 48px; /* 靠下居中：顶部自动撑开，底部留 48px */
  }
  .auth-lang {
    top: 16px;
    right: 16px;
  }
  .auth-logo {
    top: 16px;
    left: 16px;
    font-size: 20px;
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg);
  }
  /* header 响应式：第一行 汉堡 + 用户菜单，logo 绝对定位严格视觉居中（不参与 flex 分配，
     永不被两侧元素挤动）；状态条换行到第二行。
     第一行元素统一 34px 高，logo top = padding 10px + 34px/2 = 27px */
  .header-row {
    position: relative;
    flex-wrap: wrap;
    padding: 10px 14px;
  }
  .hamburger { height: 34px; }
  .game-logo {
    position: absolute;
    left: 50%;
    top: 27px;
    transform: translate(-50%, -50%);
    line-height: 1;
  }
  .user-menu { flex: 0 0 auto; margin-left: auto; }
  /* 状态条用更高的 order，使头像(user-menu)优先占用第一行，状态条单独换行到第二行 */
  .header-row .toolbar {
    position: static;
    transform: none;
    flex: 0 1 100%;
    width: 100%;
    max-width: none;
    padding: 0;
    margin-top: 2px;
    order: 3;
  }
  .nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0;
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding: 4px 8px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .nav::-webkit-scrollbar { display: none; }
  /* 游戏介绍：移动端图上文下堆叠，图片压满两侧 */
  .intro-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 48px;
    padding: 0 16px;
  }
  /* 场景便签：移动端整体缩小（字号/字距/内边距调小），突出 18px 距 header 仍有余量；
     地图模式 scene 无 1px border，同桌面端补回 1px（top/left） */
  .scene-note { top: -18px; padding: 4px 10px 4px; max-width: 80%; }
  #scene.scene-hidden .scene-note { top: -17px; left: 15px; }
  .scene-note #panel-title { font-size: 15px; letter-spacing: 2px; }
  .scene-note .scene-meta { font-size: 11px; }
  .intro-row.flip { flex-direction: column; }
  .intro-media { flex: none; }
  .intro-media img { height: 190px; }
  .nav .tab {
    flex: 0 0 auto;
    min-width: 84px;
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px;
    font-size: 12px;
  }
  .nav .tab .tab-icon { width: 22px; height: 22px; }
  .nav .tab .tab-text { display: block; }
  /* 状态条：移动端更紧凑 */
  .stat-icon { width: 20px; height: 20px; }
  .stat-value { font-size: 10px; }
  .stat-body { gap: 3px; }
  .stat-bar { height: 3px; }
  .stat-tip { width: 170px; }
  /* 固定定位后补回被占用的滚动空间，避免内容被悬浮层遮住；
     --header-h 由 JS 按实际 header 高度动态更新（header 为双层：标题行 + 状态条）；
     额外 +30px：给场景便签（top:-20px 突出图外 + 投影）留出空间，避免被 z-index:10 的 header 盖住 */
  #view-game > .shell {
    padding-top: calc(var(--header-h) + 30px);
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  /* 移动端地图占满视口：header/nav 均 fixed 脱流，正文占位 = shell 顶(header-h+30)
     + shell 底(72+safe) + panel 底 padding 16，合计减 118px+safe；nav 不占文档流 */
  #city-map {
    height: calc(100vh - var(--header-h) - 118px - env(safe-area-inset-bottom));
  }
  @supports (height: 1dvh) {
    #city-map {
      height: calc(100dvh - var(--header-h) - 118px - env(safe-area-inset-bottom));
    }
  }
  /* 技能列表：小屏收紧间距，图标位缩小。branch 保持 300px：
     第一列右侧露出下一列的一部分，暗示可横移 */
  .skills-branch { width: 300px; padding: 0 12px; }
  .skill-item .glyph { width: 40px; height: 40px; }
  /* 二级 nav 移动端：位于场景图下方（.nav 已 fixed 底部脱流，不占此处文档流）。
     少数 tab（如无线电 3 个）自动平分整行；tab 很多时仍溢出横滚（flex-basis:auto 保底宽度） */
  .subnav {
    margin: 0 0 20px;
    gap: 2px;
    padding: 3px;
  }
  .sub-tab {
    flex: 1 1 auto;
    min-width: 70px;
    padding: 8px 6px;
    font-size: 13px;
  }
  .sub-placeholder-desc {
    padding: 0 16px;
    font-size: 13px;
  }
}

/* ---------------- 据点概况（防御/储藏/资源/工坊/后院总览） ----------------
   只读汇总卡：半透明底 + 细边框圆角，与 .attic-plot/.yard-plot 同语言 */
.ov-loc { margin: 0 0 10px; font-size: 12.5px; }
.ov-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.ov-card {
  background: #10141891;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.ov-wide { margin-bottom: 12px; }
/* 概况卡片可点击跳转：cursor + hover 描边反馈 */
[data-ov-goto] { cursor: pointer; transition: border-color 0.15s; }
[data-ov-goto]:hover { border-color: var(--accent); }
.ov-go:hover { border-color: #4aa3e0; }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ov-head b { font-size: 14.5px; }
.ov-label, .ov-note { margin: 8px 0 0; font-size: 11.5px; }
.ov-bar {
  height: 8px;
  border-radius: 5px;
  margin: 6px 0 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.ov-bar b { display: block; height: 100%; border-radius: 5px; transition: width 0.5s linear; }
.ov-bar.def b   { background: linear-gradient(90deg, #6fb7e8, #a3d8f5); }
.ov-bar.store b { background: linear-gradient(90deg, #e0b05a, #f0d08a); }
.ov-bar.water b { background: linear-gradient(90deg, #4aa3e0, #7ec4e8); }
.ov-bar.oil b   { background: linear-gradient(90deg, #c98d52, #e0b05a); }
.ov-bar.bank b  { background: linear-gradient(90deg, #7fb069, #a8cf8f); }
.ov-bar.pwr b   { background: linear-gradient(90deg, #e0b05a, #ffd88a); }
.ov-val { font-size: 12px; }
.ov-mods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ov-mods span {
  font-size: 11px;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
}
.ov-mods b { color: inherit; }
.ov-tag {
  font-size: 10.5px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.ov-tag.ok   { color: #7fb069; border-color: rgba(127, 176, 105, 0.4); background: rgba(127, 176, 105, 0.12); }
.ov-tag.warn { color: #e0b05a; border-color: rgba(224, 176, 90, 0.4);  background: rgba(224, 176, 90, 0.12); }
.ov-tag.crit { color: #e8796f; border-color: rgba(232, 121, 111, 0.4); background: rgba(232, 121, 111, 0.12); }
.ov-res-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ov-res {
  background: #10141891;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.ov-res-title { margin: 0 0 2px; font-size: 12.5px; }
.ov-res .mono { font-size: 11px; }
.ov-main { margin: 8px 0 0; font-size: 13px; }
.ov-go {
  font: inherit;
  font-size: 12px;
  color: #7ec4e8;
  background: rgba(74, 163, 224, 0.12);
  border: 1px solid rgba(74, 163, 224, 0.35);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
}
.ov-go:hover { border-color: #4aa3e0; }
.ov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ov-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
}
.ov-chip b { color: inherit; }
.ov-chip.zero { opacity: 0.45; }
.ov-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
.ov-chip[data-tone="plant"] .ov-dot { background: #7fb069; }
.ov-chip[data-tone="coop"]  .ov-dot { background: #e0b05a; }
.ov-chip[data-tone="pen"]   .ov-dot { background: #c98d52; }
.ov-chip[data-tone="pond"]  .ov-dot { background: #4aa3e0; }
.ov-chip[data-tone="hive"]  .ov-dot { background: #f0d08a; }

/* 移动端：双列大卡叠单列，资源四项折 2×2 */
@media (max-width: 760px) {
  .ov-cols { grid-template-columns: minmax(0, 1fr); }
  .ov-res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ---------------- 无线电 · 收发室 / 邮件 / 活动日志 ----------------
   核心玩法（纯前端演示）：收发室=平行时空电台聊天室（复古电台元素），
   邮件=市场交易物资送达，活动日志=战地信息+玩家行动（可按类别筛选） */
.radio-note { margin: 0 0 8px; font-size: 12.5px; }

/* —— 收发室：一体式电台窗口（列表 + 对话流同一面板）——
   桌面端高度 = 视口剩余空间（有最低高度兜底，确保可用）；
   340→228px：市场式改版无场景图（-164）+ subnav 便签留白加高（+20）+ 盒装外框边距（+32）；
   复古电台元素：呼吸信号灯 / 频道频率 / 呼号 / 扫描线底纹 */
.rdo-chat {
  display: flex;
  height: calc(100vh - var(--header-h) - var(--nav-h) - 228px);
  min-height: 420px;
  background: var(--panel);
  border-radius: 8px;
  overflow: hidden;
}
.rdo-ch-list { flex: 0 0 215px; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow-y: auto; background: #131920; border-right: 1px solid var(--border); }
.rdo-ch-head { font-size: 12px; color: var(--dim); padding: 2px 2px 6px; }
.rdo-ch-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 9px;
}
.rdo-ch-item:hover { border-color: var(--accent); }
.rdo-ch-item.active { border-color: var(--accent); }
.rdo-ch-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rdo-ch-name { font-weight: 600; font-size: 13px; }
.rdo-ch-flag { font-size: 10.5px; color: var(--dim); border: 1px solid var(--border); border-radius: 8px; padding: 0 5px; white-space: nowrap; }
.rdo-ch-unread { margin-left: auto; flex: 0 0 auto; min-width: 17px; text-align: center; background: var(--accent); color: #101418; font-size: 11px; font-weight: 700; border-radius: 9px; padding: 0 5px; line-height: 16px; }
.rdo-ch-sub { display: flex; align-items: center; gap: 6px; }
.rdo-ch-freq { font-size: 11px; color: var(--accent); }
.rdo-ch-last { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 对话区：收信机面板（扫描线 = 旧 CRT 屏幕质感）；返回键仅移动端显示 */
.rdo-dialog { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; background: var(--panel); }
.rdo-back { display: none; }
.rdo-recv { display: flex; align-items: center; gap: 10px; height: 54px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: #141a20; font-size: 13.5px; overflow: hidden; }
.rdo-lamp { width: 9px; height: 9px; border-radius: 50%; background: #3d464f; flex: 0 0 auto; }
.rdo-recv .rdo-lamp { background: var(--ok); box-shadow: 0 0 8px rgba(127, 191, 127, 0.9); animation: rdo-lamp 2.4s ease-in-out infinite; }
@keyframes rdo-lamp { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.rdo-ch-title { font-weight: 600; white-space: nowrap; }
.rdo-ch-cs { font-size: 10.5px; color: var(--dim); }
.rdo-note-btn { flex: 0 0 auto; padding: 10px 12px; font-size: 14px; border-radius: 8px; border-color: var(--border); background: transparent; color: var(--accent); }
.rdo-note-edit { display: flex; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: #141a20; }
.rdo-note-edit input { flex: 1 1 auto; min-width: 0; }
.rdo-freq { color: var(--accent); font-size: 11px; }
.rdo-flag { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--dim); margin-left: auto; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; white-space: nowrap; box-sizing: border-box; }
.rdo-msgs {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px), #0d1115;
}
.rdo-msg { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
/* 自己的消息整组靠右（时间贴气泡左侧、气泡贴右缘） */
.rdo-msg.me { justify-content: flex-end; }
.rdo-cs { font-size: 10.5px; color: var(--accent); opacity: 0.9; flex: 0 0 auto; line-height: 18px; }
/* 时间戳默认隐藏，点消息显示；visibility 占位不引发布局抖动：
   对方消息的时间在气泡右侧、自己的在左侧，上下居中于气泡外侧 */
.rdo-t { visibility: hidden; flex: 0 0 auto; font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.rdo-msg.on .rdo-t { visibility: visible; }
/* 气泡左右分列：最多占 80% 宽；短文本按实际内容宽度收缩 */
.rdo-bubble { width: fit-content; max-width: 80%; padding: 6px 9px; border-radius: 8px; font-size: 13px; line-height: 1.5; background: #1d2530; border: 1px solid var(--border); }
.rdo-msg.me .rdo-bubble { background: rgba(232, 185, 61, 0.12); border-color: rgba(232, 185, 61, 0.5); }
.rdo-hint { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; color: var(--dim); border-top: 1px dashed var(--border); }
.rdo-hint .rdo-lamp { width: 7px; height: 7px; background: var(--warn); animation: rdo-lamp 3s ease-in-out infinite; }
.rdo-send { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); background: #141a20; }
.rdo-send input { flex: 1 1 auto; min-width: 0; }
.rdo-send button { flex: 0 0 auto; border-color: var(--accent); color: var(--accent); }

/* —— 通用行卡 + 邮件：市场交易物资送达 —— */
.rdo-wrap { display: flex; flex-direction: column; gap: 8px; }
.rdo-head {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; font-size: 12.5px;
}
.rdo-stat { color: var(--dim); white-space: nowrap; }
.rdo-stat b { color: var(--accent); margin-left: 3px; }
.rdo-head button { margin-left: auto; flex: 0 0 auto; }
.rdo-row { align-items: center !important; }
.rdo-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.rdo-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }
.rdo-chips .badge {
  font-size: 11.5px; font-weight: 400; color: var(--text);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 8px;
}
.mdl-head { display: flex; align-items: center; gap: 6px; }
.mdl-tag { font-size: 10.5px; color: var(--accent); border: 1px solid rgba(232, 185, 61, 0.45); background: rgba(232, 185, 61, 0.1); border-radius: 8px; padding: 0 6px; line-height: 16px; white-space: nowrap; }
.rdo-row.mdl-row.claimed { opacity: 0.55; }
.mdl-claimed-tag { color: var(--ok); font-size: 12px; flex: 0 0 auto; }

/* —— 活动日志：分类筛选 + 战地信息/玩家活动两种条目 —— */
.rdo-f-tabs { display: flex; gap: 6px; }
.rdo-f-tab { font-size: 12.5px; padding: 3px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--dim); }
.rdo-f-tab.active { color: var(--accent); border-color: var(--accent); }
.rdo-row.rdo-log { align-items: flex-start !important; }
.rdo-log-time { color: var(--accent); font-size: 12px; flex: 0 0 auto; min-width: 72px; }
.rdo-log-text { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.rdo-log-tag { display: inline-block; font-size: 10.5px; border-radius: 8px; padding: 0 6px; line-height: 16px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.rdo-log-tag.intel { color: #e8796f; border: 1px solid rgba(232, 121, 111, 0.4); background: rgba(232, 121, 111, 0.1); }
.rdo-log-tag.act { color: #7ec4e8; border: 1px solid rgba(74, 163, 224, 0.35); background: rgba(74, 163, 224, 0.1); }

/* 移动端：收发室分页（先频道列表 → 点开对话 → 返回列表）；
   高度同样占满剩余空间，最低高度兜底 */
@media (max-width: 760px) {
  .rdo-chat {
    flex-direction: column;
    height: calc(100dvh - var(--header-h) - var(--nav-h) - 180px);
    min-height: 420px;
  }
  /* 一次只显示一页：.view-list 只显示列表，.view-chat 只显示对话 */
  .rdo-chat.view-list .rdo-dialog { display: none; }
  .rdo-chat.view-chat .rdo-ch-list { display: none; }
  .rdo-ch-list { flex: none; width: 100%; border-right: 0; border-bottom: 1px solid var(--border); }
  .rdo-ch-item { flex: none; }
  .rdo-ch-head { display: none; }
  .rdo-back { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 10px 12px; font-size: 14px; border-radius: 8px; border-color: var(--border); background: transparent; color: var(--accent); }
  .rdo-recv .rdo-freq { display: none; }
  .rdo-msgs { min-height: 240px; }
}

/* ---------------- 市场（一级 tab） ----------------
   列表页：品类条（chip 横滑）→ 搜索 → 商品行 → 最近购入；
   详情页：返回头 → 摘要卡（图/名/均价/基准价）→ 走势迷你图 → 报价表 → 买入弹窗 */
.mk-panel { position: relative; 
padding-top: 8px;
}
/* 品类条 */
.mk-chipbar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.mk-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12.5px;
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  border-color: var(--border);
  white-space: nowrap;
}
.mk-chip b { font-size: 11px; opacity: 0.75; }
.mk-chip.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(232, 185, 61, 0.08);
}
/* 搜索框（复用仓库 .st-search 结构，仅微调） */
.mk-search { margin: 0 0 8px; }
/* label 为行内元素且父级非 flex 容器（#mk-panel 仅 position:relative），其纵向 margin 不生效；
   由输入框自身补 8px 下边距，撑开与下方列表的间距 */
#mk-search { margin-bottom: 8px; }
/* 商品行 */
.mk-list li { align-items: center; }
.mk-list li.mk-row { cursor: pointer; }
.mk-list li.mk-row:hover .wh-info b { color: var(--accent); }
.mk-thumb { width: 40px; height: 40px; }
.mk-row-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row-price {
  margin-left: auto;
  padding: 0 10px;
  font-weight: 700;
  color: var(--rad-yellow);
  font-size: 13px;
}
.mk-offers-btn { flex: 0 0 auto; padding: 4px 12px; font-size: 12.5px; }
@media (max-width: 520px) {
  .mk-row-sub { max-width: 46vw; }
  .mk-row-price { padding: 0 6px; font-size: 12px; }
}
/* 最近购入 */
.mk-orders {
  margin-top: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.mk-orders-title { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.mk-orders-list { list-style: none; margin: 0; padding: 0; }
.mk-orders-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(46, 57, 71, 0.5);
}
.mk-orders-list li:last-child { border-bottom: 0; }
.mk-order-total { margin-left: auto; color: var(--bad); }
/* 详情页 */
.mk-dhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.mk-back { color: var(--accent); font-size: 15px; padding: 7px 16px; }
.mk-catname { font-size: 12px; }
.mk-summary {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(20, 26, 34, 0.55);
}
/* 上半部分（桌面为左侧）：图片 + 信息列 */
.mk-sum-main { flex: 1 1 auto; display: flex; gap: 12px; min-width: 0; }
.mk-sum-img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1116;
  padding: 4px;
}
/* 摘要卡内图标：随上半部分高度撑满，宽度按原图比例（上限 100px） */
.mk-summary .mk-sum-img { width: auto; height: 100%; max-width: 100px; }
/* 信息列：第一行=名称+均价同行（基线对齐），第二行=指标网格；占据剩余宽度避免留白；
   container-type 供指标区按本列实际宽度自适应（cqi 容器查询单位） */
.mk-sum-info {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 6px;
  min-width: 0;
  container-type: inline-size;
}
.mk-sum-name { flex: 0 1 auto; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sum-price { display: flex; align-items: baseline; gap: 7px; font-size: 13px; }
.mk-sum-price b { color: var(--rad-yellow); font-size: 19px; }
/* 指标区：独占整行、等分网格铺满信息列宽度，顶部细分隔线分割；
   列宽与字号按信息列剩余宽度自适应（cqi 随 .mk-sum-info 实测宽度变化）——
   空间充足自动放大、被图片挤压时自动收紧，保持一行放得下且不溢出 */
.mk-sum-stats {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(52px, 20cqi, 76px), 1fr));
  gap: 6px 10px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.mk-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  font-size: clamp(10px, 3.2cqi, 12px);
}
.mk-stat b { color: var(--text); font-weight: 700; }
.mk-stat i { font-style: normal; color: var(--dim); font-size: clamp(9px, 2.9cqi, 11px); }
/* 走势迷你图 */
.mk-chart { margin-top: 10px; padding: 10px 12px 6px; border: 1px solid var(--border); border-radius: 8px; }
.mk-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 13px;
}
.mk-chart-head b { color: var(--dim); font-size: 12px; font-weight: 600; }
/* 走势时间段切换：周/月/年（active 态复用全局 button.active） */
.mk-trend-tabs { display: flex; gap: 4px; }
.mk-trend-tab { padding: 1px 12px; font-size: 12px; line-height: 20px; }
.mk-reroll { font-size: 12px; color: var(--dim); padding: 2px 8px; }
.mk-spark { position: relative; display: flex; flex-direction: column; }
.mk-spark svg { display: block; width: 100%; flex: 1 1 0; min-height: 0; }
/* 悬停指示：竖线/高亮圆点/浮层（.active 由指针委托切换） */
.mk-spark-vline {
  stroke: rgba(232, 185, 61, 0.55);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.mk-spark-dot { fill: var(--accent); opacity: 0; }
.mk-spark.active .mk-spark-vline,
.mk-spark.active .mk-spark-dot { opacity: 1; }
.mk-spark-tip {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 8px;
  border: 1px solid rgba(232, 185, 61, 0.45);
  border-radius: 6px;
  background: rgba(10, 14, 18, 0.92);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.mk-spark.active .mk-spark-tip { display: flex; }
.mk-spark-tip b { color: var(--rad-yellow); font-size: 12px; }
.mk-spark-tip span { font-size: 10px; }
.mk-spark-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text);
  padding-top: 4px;
}
.mk-spark-meta .mk-up { color: #7fbf7f; }
.mk-spark-meta .mk-down { color: var(--bad); }
.mk-chart-note { margin: 4px 0 0; font-size: 11px; }
/* 报价表 */
.mk-offers-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 6px;
  font-size: 13px;
}
.mk-offers-hint { margin-left: auto; font-size: 11px; }
/* 报价表：list 模式（表头 + 单容器列表，行间细分隔线，不再逐行卡片）；容器兜底横向滑动（滚动条隐藏） */
.mk-offers-wrap { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.mk-offers-wrap::-webkit-scrollbar { display: none; }
.mk-offers-thead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--dim);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(10, 14, 18, 0.5);
}
/* 列宽：四列等分整行（flex: 1 1 0）；表头行与数据行共用同一组 .mk-col-* 类
   （数据行首列用 .mk-o-seller 同款等分），起点/间距一致才能对齐；
   卖方报价（卖家/数量/单价/买入）与买方报价（买家/数量/单价/卖出）两张表共用 */
.mk-col-seller { flex: 1 1 0; min-width: 0; }
.mk-col-qty { flex: 1 1 0; text-align: right; }
.mk-col-price { flex: 1 1 0; text-align: right; }
.mk-col-act { flex: 1 1 0; text-align: center; }
.mk-offers {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  background: rgba(20, 26, 34, 0.45);
}
.mk-offer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(46, 57, 71, 0.55);
}
.mk-offer:last-child { border-bottom: 0; }
.mk-ava {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 13px;
}
.mk-seller { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mk-seller b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-seller-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-dot { width: 7px; height: 7px; border-radius: 50%; background: #56616d; display: inline-block; flex: 0 0 auto; }
.mk-dot.on { background: #7fbf7f; box-shadow: 0 0 4px rgba(127, 191, 127, 0.7); }
.mk-fac {
  font-size: 10.5px;
  color: #7ec4e8;
  border: 1px solid rgba(74, 163, 224, 0.35);
  border-radius: 8px;
  padding: 0 6px;
  line-height: 15px;
  white-space: nowrap;
}
.mk-o-seller { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mk-o-qty { color: var(--dim); font-size: 12.5px; }
.mk-o-price { font-weight: 700; font-size: 13px; }
.mk-buy { padding: 4px 0; font-size: 12.5px; }
/* 买方报价行内「卖出」：与摘要卡卖出按钮同色系（红调）区分于买入 */
.mk-sell {
  padding: 4px 0;
  font-size: 12.5px;
  background: rgba(224, 122, 106, 0.1);
  border-color: rgba(224, 122, 106, 0.45);
  color: #e59a8f;
}
@media (max-width: 520px) {
  .mk-col-qty { display: none; }
  /* 摘要卡：上半=图片全高+信息（名称与均价同行、字段在下）；
     买入/卖出横排整行见下方 .mk-ask-btn 之后的窄屏块（须排在基础规则后） */
  .mk-summary { flex-direction: column; gap: 10px; padding: 10px; }
  .mk-sum-main { gap: 10px; }
  .mk-sum-name { font-size: 15px; }
  .mk-sum-price b { font-size: 17px; }
  .mk-sum-stats { gap: 5px 8px; }
}
/* 买入弹窗 */
.mk-mask {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(8, 11, 15, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mk-modal {
  width: min(360px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.mk-modal-title { font-size: 14px; margin-bottom: 10px; color: var(--accent); }
.mk-modal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}
.mk-modal-item .mk-sum-img { width: 42px; height: 42px; border-radius: 6px; }
.mk-modal-item div { display: flex; flex-direction: column; gap: 3px; }
.mk-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
}
.mk-qty-ctrl { display: inline-flex; align-items: center; gap: 10px; }
.mk-qty-ctrl button { width: 30px; height: 30px; padding: 0; font-size: 15px; line-height: 1; }
.mk-qty-ctrl b { min-width: 34px; text-align: center; font-size: 15px; }
.mk-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  margin-bottom: 10px;
}
.mk-total b { color: var(--rad-yellow); font-size: 17px; }
.mk-lack { color: var(--bad); font-size: 12.5px; margin: 0 0 8px; }
.mk-sell-have { font-size: 12px; margin: 0 0 8px; }
.mk-modal-ops { display: flex; justify-content: flex-end; gap: 8px; }
.mk-modal-ops button[data-mk-confirm] { background: rgba(232, 185, 61, 0.12); border-color: var(--accent); color: var(--accent); }
.mk-modal-ops button[data-mk-sell-confirm] { background: rgba(224, 122, 106, 0.12); border-color: rgba(224, 122, 106, 0.5); color: #e59a8f; }
/* ---------------- 全站统一提示条 toast（通用组件） ----------------
   任何界面需要操作反馈都调 toast(msg)（app.js）：提示条挂到 body 级 #toast-host，
   底部居中、多条并存时纵向自动堆叠、2.3s 后淡出移除。
   视觉规范 = 交易页原样式（深底 + 核警示黄描边 + 13px 居中文本），全站复用，
   不要在业务代码里另写一套提示样式 */
#toast-host {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 240;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: 86vw;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: rgba(20, 26, 34, 0.96);
  color: var(--text);
  font-size: 13px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 760px) {
  #toast-host { bottom: calc(var(--nav-h) + 14px); }
}

/* 列表实化：行背景不透明度拉高（长列表滚动的可视性），hover 微亮 */
.mk-list li.mk-row {
  background: rgba(26, 32, 40, 0.72);
}
.mk-list li.mk-row:hover {
  background: rgba(38, 48, 60, 0.8);
}
/* 分页条 */
.mk-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(20, 26, 34, 0.6);
}
.mk-page-ctrl { display: flex; align-items: center; gap: 8px; width: 100%; }
.mk-page-ctrl button { padding: 4px 12px; font-size: 12.5px; }
.mk-page-info { font-size: 12.5px; color: var(--text); font-weight: 600; }
.mk-page-info i { font-style: normal; color: var(--dim); padding: 0 2px; }
.mk-page-total { margin-left: auto; font-size: 12px; }
@media (max-width: 520px) { .mk-page-total { display: none; } .mk-pager { justify-content: center; } }
/* 摘要卡内的挂单按钮组：买入/卖出上下堆叠，靠右对齐 */
.mk-sum-ops {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mk-bid-btn {
  padding: 6px 12px;
  font-size: 12.5px;
  background: rgba(127, 191, 127, 0.1);
  border-color: rgba(127, 191, 127, 0.45);
  color: #a8d5a8;
}
.mk-ask-btn {
  padding: 6px 12px;
  font-size: 12.5px;
  background: rgba(224, 122, 106, 0.1);
  border-color: rgba(224, 122, 106, 0.45);
  color: #e59a8f;
}
/* 窄屏（移动端）：买入/卖出改横排铺满、左右各一均分——必须排在上方基础
   规则之后：同特异度下后写者生效，写在页面上方的媒体块里会被这里覆盖 */
@media (max-width: 520px) {
  .mk-sum-ops { flex-direction: row; align-self: stretch; margin-left: 0; gap: 8px; }
  .mk-sum-ops button { flex: 1 1 0; }
  .mk-bid-btn, .mk-ask-btn { padding: 7px 10px; font-size: 12px; }
  .mk-orders-page .mk-mybids-list li { gap: 6px; font-size: 12px; }
  .mk-orders-page .mk-orders-list li { gap: 6px; font-size: 12px; }
  .mk-orders-page .mk-orders-list li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* 盘口（仿股票盘口深度）：上半=买盘（绿，买一贴近中缝）| 中缝=当前交易价格 | 下半=卖盘（红，卖一贴近中缝）；
   行内实色深度条从最左向右按比例延伸（买/卖两侧各自以本侧最大挂单量=100% 独立标定），价格/数量文字叠于色条之上 */
.mk-book {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(20, 26, 34, 0.6);
}
.mk-book-rows { padding: 3px 0; }
.mk-book-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 22px;
  white-space: nowrap;
}
/* 实色深度条（无渐变）：absolute 背景层，宽度由行内 style 注入（最大值=100%） */
.mk-book-bar {
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  border-radius: 0 3px 3px 0;
}
.mk-book-bar.bid { background: rgba(127, 191, 127, 0.3); }
.mk-book-bar.ask { background: rgba(224, 122, 106, 0.3); }
.mk-book-p { position: relative; font-weight: 700; min-width: 52px; }
.mk-book-p.bid { color: #7fbf7f; }
.mk-book-p.ask { color: #e59a8f; }
.mk-book-q { position: relative; margin-left: auto; font-size: 11.5px; color: var(--text); }
.mk-book-row.mine { background: rgba(232, 185, 61, 0.08); }
.mk-mine {
  position: relative;
  flex: 0 0 auto;
  font-size: 9.5px;
  color: var(--accent);
  border: 1px solid rgba(232, 185, 61, 0.4);
  border-radius: 8px;
  padding: 0 5px;
  line-height: 14px;
}
.mk-book-empty { padding: 10px 12px; font-size: 12px; }
/* 中缝：当前交易价格 */
.mk-spread {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(10, 14, 18, 0.6);
}
.mk-spread b,
.mk-spread span { font-size: 14px; font-weight: 600; }
.mk-spread b { color: var(--rad-yellow); }

/* 详情页走势 + 盘口布局：全端左右并排（左=走势、右=盘口），两卡等高拉伸；
   走势图随卡片宽度等比放大，剩余空间内垂直居中 */
.mk-cb-wrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
}
.mk-cb-wrap .mk-chart {
  margin-top: 0;
  flex: 1 1 56%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mk-cb-wrap .mk-spark { flex: 1 1 0; min-height: 0; }
.mk-cb-wrap #mk-book { flex: 1 1 44%; min-width: 0; display: flex; flex-direction: column; }
.mk-cb-wrap #mk-book .mk-book { margin-top: 0; flex: 1 1 auto; }
/* 窄屏（移动端）同样保持左右并排，压紧盘口行尺寸 */
@media (max-width: 520px) {
  .mk-cb-wrap .mk-chart { flex: 1 1 52%; }
  .mk-cb-wrap #mk-book { flex: 1 1 20%; }
  .mk-book-row { padding: 0 6px; gap: 6px; }
  .mk-book-p { min-width: 44px; font-size: 11.5px; }
  .mk-book-q { font-size: 11px; }
}
/* 我的挂单 */
.mk-mybids { margin-top: 10px; }
.mk-mybids-title { font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.mk-mybids-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mk-mybids-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(46, 57, 71, 0.55);
}
.mk-mybids-list li:last-child { border-bottom: 0; }
.mk-mybids-list li.done { opacity: 0.6; }
.mk-myb-price { font-weight: 700; color: #7fbf7f; min-width: 46px; }
.mk-myb-price.ask { color: #e59a8f; }
/* 挂单行买卖角标 */
.mk-side {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  padding: 0 5px;
  border-radius: 4px;
}
.mk-side.buy { color: #7fbf7f; background: rgba(127, 191, 127, 0.12); }
.mk-side.sell { color: #e59a8f; background: rgba(224, 122, 106, 0.12); }
.mk-myb-total { margin-left: auto; color: var(--dim); }
.mk-myb-state { font-size: 11px; color: var(--dim); }
.mk-mybids-list li.open .mk-myb-state { color: var(--accent); }
.mk-mybids-list li.done .mk-myb-state { color: var(--ok); }
.mk-cancel-bid { font-size: 12px; padding: 2px 8px; color: var(--bad); border-color: rgba(224, 122, 106, 0.4); }
/* 二级 nav 页：我的挂单 / 交易记录（整页模式，去掉列表页内嵌盒子的顶部分割线） */
.mk-mybids.mk-orders-page, .mk-orders.mk-orders-page { margin-top: 0; border-top: 0; padding-top: 0; }
.mk-mo-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-order-total.gain { color: #7fbf7f; }
/* 挂单弹窗说明 */
.mk-place-note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--dim);
  background: rgba(232, 185, 61, 0.06);
  border: 1px solid rgba(232, 185, 61, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 10px;
}