:root {
  --cell: 44px;
  --hr: 25.4px;              /* 六边形内切半径，由 JS 按缩放同步 */
  --bg: #0f1420;
  --bg2: #151c2b;
  --panel: #18202f;
  --line: #263146;
  --line2: #1d2637;
  --text: #e6ecf7;
  --muted: #8b98ae;
  --accent: #6ea8fe;
  --accent2: #7ee0c0;
  --danger: #ef7a85;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
/* hidden 属性必须真的隐藏：很多元素自带 display（.field / .row2 / .iconOps…），
   作者样式优先级高于浏览器默认的 [hidden]{display:none}，不加这条就等于没隐藏 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 页面本身永远不横滚：内容比窗口宽时由各自的条自己滚，
     否则一拖顶栏/底栏，整页（连同地图）会一起横移 */
  overflow: hidden;
}

.app {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* --- 顶栏 --- */
.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #182134, #141b29);
  border-bottom: 1px solid var(--line);
  /* 窄屏时顶栏自己横向滚动，跟地图互不牵连 */
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
/* 顶栏里的东西一律按自然宽度排、不压缩：
   压缩只会让文字溢出到框外，跟右边的按钮叠在一起（窄屏就是这么叠的）。
   内容比屏幕宽时，多出来的部分交给 .bar 自己横向滚动。 */
.brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5a6a80; box-shadow: 0 0 0 3px rgba(110, 168, 254, .08);
}
.dot.online { background: var(--accent2); box-shadow: 0 0 0 3px rgba(126, 224, 192, .12); }
.dot.offline { background: var(--danger); }
/* 状态文字是唯一允许截断的一项：太长会把顶栏拉得很宽，但绝不压别的控件 */
.hint {
  flex: 0 0 auto;
  color: var(--muted); font-size: 12px; white-space: nowrap;
  min-width: 0; max-width: min(240px, 30vw);
  overflow: hidden; text-overflow: ellipsis;
}

/* 世界名顶替原来的「战术地图」标题：当标题用，但可点开身份/诊断 */
.worldChip {
  margin-left: 2px;
  max-width: 240px;
  padding: 1px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.worldChip::before { content: '◈ '; font-size: 11px; opacity: .55; font-weight: 400; }
.worldChip:hover { background: #1b2436; }
/* 没拿到世界标识：所有世界会共用一张图，标橙提示 */
.worldChip.warn { color: #ffcba4; }
.worldChip.warn::before { content: '◇ '; }

/* 地图页下拉：自绘菜单，跟地图浮层同一套深色基调（原生 select 的灰色列表不搭） */
.pagePick { position: relative; display: inline-flex; align-items: center; }
.pageBtn {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 176px;
  padding: 3px 9px;
  border: 1px solid #2b4a75;
  border-radius: 999px;
  background: #131f31;
  color: #a8c6ee;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.5;
  cursor: pointer;
  outline: none;
}
.pageBtn:hover, .pageBtn.open { color: #dbe9ff; border-color: #3c5a8a; background: #18263c; }
.pageBtn:disabled { color: var(--muted); border-color: var(--line2); background: transparent; cursor: default; }
.pageBtn .pageName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pageBtn .caret {
  flex: none; width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .75;
  transition: transform .15s ease;
}
.pageBtn.open .caret { transform: rotate(180deg); }

.pageMenu {
  /* fixed：顶栏在窄屏下是横向滚动容器，跟着按钮走会被它裁掉；
     位置由 openPageMenu() 按按钮矩形算好写进内联样式 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  min-width: 172px;
  max-width: 250px;
  max-height: 264px;
  overflow: auto;
  padding: 6px;
  background: #18202f;
  border: 1px solid #33415c;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}
.pageMenu[hidden] { display: none; }
.pageMenu .pageItem {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.pageMenu .pageItem:last-child { margin-bottom: 0; }
.pageMenu .pageItem:hover { background: #1f2a3d; border-color: var(--line); }
.pageMenu .pageItem.on { background: #1c2a44; border-color: #35507a; }
.pageMenu .pageItem .pgTick { flex: none; width: 11px; font-size: 11px; color: #7fa9e6; }
.pageMenu .pageItem .pgNm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pageMenu .pageItem .pgEmpty { flex: none; margin-left: auto; font-size: 10.5px; color: var(--muted); }
.pageMenu .pageItem .pgLive { flex: none; margin-left: auto; font-size: 10px; color: #7fa9e6; opacity: .85; }
/* 发布项：把编辑中的页推给所有玩家 */
.pageMenu .pageItem.pagePublish {
  margin-top: 4px;
  border-style: dashed;
  border-color: #35507a;
}
.pageMenu .pageItem.pagePublish.hot {
  border-style: solid;
  border-color: #4b7fc4;
  background: #1a2a44;
  color: #dbe9ff;
}
.pageMenu .pageItem.pagePublish .pgTick { color: #8fb0d8; }
.pageMenu .pageHint {
  padding: 5px 8px 2px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
  white-space: normal;
}

/* 身份胶囊：没设置时用虚线提示，设置了显示昵称，世界主染成金色 */
.meChip {
  margin-left: 4px;
  max-width: 190px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meChip:hover { color: var(--text); border-color: #3c5a8a; }
.meChip.set { border-style: solid; color: #cfe0ff; border-color: #35507a; background: #16233a; }
.meChip.admin { color: #ffe6a8; border-color: #7a5f22; background: #2a2213; }
/* 身份识别到了，但没拿到世界标识：所有世界会共用一张图，给个显眼提示 */
.meChip.noscope { color: #ffd9a8; border-color: #8a5a1e; border-style: dashed; }

.tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: nowrap; }
/* 顶栏的直接子项都不许被 flex 压扁（否则按钮变窄、里面的字溢出去叠在一起） */
.bar > *, .brand > *, .tools > *, .togs > * { flex: 0 0 auto; }

/* 侧栏三块面板的显示开关 */
.togs { display: flex; align-items: center; gap: 4px; }
.sep {
  display: inline-block;
  width: 1px; height: 18px;
  background: var(--line);
  margin: 0 4px;
}
.btn.tog {
  background: transparent;
  border-color: var(--line2);
  color: #7d8ba1;
  padding: 4px 9px;
  font-size: 12px;
  border-radius: 999px;
}
.btn.tog:hover { color: var(--text); border-color: #3a4a66; }
.btn.tog.on {
  color: #cfe1ff;
  border-color: #3f5f92;
  background: rgba(110, 168, 254, .14);
}

.btn {
  appearance: none;
  border: 1px solid #2f4a75;
  background: linear-gradient(180deg, #2b4a7a, #223a5f);
  color: #e9f1ff;
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 13px;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.ghost:hover { border-color: #3a4a66; background: #1a2333; }
.btn.danger { color: var(--danger); border-color: #4a2a33; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* --- 主区 --- */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  min-height: 0;
  transition: grid-template-columns .18s ease;
}
/* 三块面板全部收起时，地图占满整行 */
.stage.noSide { grid-template-columns: minmax(0, 1fr); }

.boardWrap {
  position: relative;
  overflow: auto;
  padding: 14px;
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;      /* 滚到头也不许把页面带走 */
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(110, 168, 254, .06), transparent 60%),
    var(--bg);
}

/* 缩放层：尺寸由 JS 按「地图大小 + 四周留白」× 缩放算好写进 --zw / --zh，
   滚动范围才等于缩放后的真实大小（transform 本身不影响布局尺寸） */
.zoomBox {
  position: relative;
  flex: none;
  width: var(--zw, 320px);
  height: var(--zh, 240px);
}

.board {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--cell) * var(--cols, 20));
  height: calc(var(--cell) * var(--rows, 15));
  /* 整块地图（含棋子、底图、坐标尺）一次性缩放：--zoom 只改这里 */
  transform-origin: 0 0;
  transform: translate(var(--zg, 0px), var(--zg, 0px)) scale(var(--zoom, 1));
  border: 1px solid #33415c;
  border-radius: 4px;
  background-color: #101826;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .45), var(--shadow);
  cursor: default;
}

/* 六边形网格：宽高由 JS 按几何算好写进 --hw / --hh（错位那排会多出半格） */
.board.hex {
  border-radius: 6px;
  background-image: none;      /* 六边形不用方格背景线 */
  background-color: #101826;
  width: var(--hw, 100px);
  height: var(--hh, 100px);
}
/* 六边形下图标大小 = 一格的宽度，正好塞进格子 */
.board.hex .token { font-size: calc(var(--hr) * .95); }

/* 底图：铺在格线下面，尺寸与位置由 JS 按对齐参数算好写进内联样式 */
.backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  border-radius: inherit;
}
.backdrop.on { opacity: 1; }

/* 网格线图层：方格用 SVG 线段、六边形用 polygon；两层都不可点，避免挡住图标 */
.gridLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: block;
}
.board.hex .gridLayer { display: none; }
/* 格线外观：颜色 / 粗细 / 不透明度由 JS 按当前页的网格设置写进这三个变量
   （--gl-color 在「跟随底图」时由 JS 按有无底图算好，CSS 只负责用） */
.gridLayer line {
  stroke: var(--gl-color, rgba(150, 172, 205, .30));
  stroke-width: var(--gl-w, 1);
  opacity: var(--gl-op, 1);
  shape-rendering: crispEdges;
}
.hexLayer {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
  overflow: visible;
}
.board.hex .hexLayer { display: block; }
.hexLayer polygon {
  fill: none;
  stroke: var(--gl-color, #2b3950);
  stroke-width: var(--gl-w, 1);
  opacity: var(--gl-op, 1);
  vector-effect: non-scaling-stroke;
}

/* 坐标尺 */
.ruler {
  position: absolute;
  color: #64748b;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.ruler.x { top: calc(var(--cell) * -0.9); height: calc(var(--cell) * .9); display: flex; align-items: center; justify-content: center; width: var(--cell); }
.ruler.y { left: calc(var(--cell) * -0.9); width: calc(var(--cell) * .9); display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; height: var(--cell); }

.tokens { position: absolute; inset: 0; z-index: 2; }

/* 极小格子（< 22px）下坐标尺与名字会糊成一团，直接藏掉 */
.board.tiny .ruler { display: none; }
.board.tiny .token .tag { display: none; }
.board.tiny .token .disc { border-width: 1px; box-shadow: 0 2px 5px rgba(0, 0, 0, .45); }
/* 六边形网格里不画坐标尺（错位行标数字反而更乱） */
.board.hex .ruler { display: none; }

/* --- 图标 --- */
.token {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
  font-size: calc(var(--cell) * .56);
  cursor: grab;
  /* touch-action:none 让手指拖动不被页面滚动抢走，否则 pointermove 会变成 pointercancel */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: left .22s cubic-bezier(.2, .8, .3, 1), top .22s cubic-bezier(.2, .8, .3, 1);
  z-index: 2;
}
.token.dragging {
  transition: none;          /* 拖动时跟手，不要缓动 */
  z-index: 9;
  cursor: grabbing;
}
.token.dragging .disc {
  transform: scale(1.12);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .6);
  border-color: #fff;
}
.token .disc {
  width: calc(var(--cell) * .8);
  height: calc(var(--cell) * .8);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 60%), var(--tint, #2b3a55);
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.token:hover .disc { transform: translateY(-2px) scale(1.05); }
/* 选中的图标提到最上层：同格重叠时，从清单里选过的那个能直接拖 */
.token.sel { z-index: 5; }
/* 别人的图标：不显示抓取手势，拖的时候会提示只能本人移动 */
.token.locked { cursor: default; }
.token.sel .disc {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(110, 168, 254, .55), 0 6px 16px rgba(0, 0, 0, .5);
  transform: scale(1.08);
}
.token .tag {
  position: absolute;
  bottom: calc(var(--cell) * -0.02);
  left: 50%;
  transform: translate(-50%, 100%);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(8, 12, 20, .82);
  border: 1px solid var(--line);
  color: #cbd5e1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.token:hover .tag, .token.sel .tag { opacity: 1; }

/* --- 拖拽参考线 --- */
.dragLayer {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.dragLayer.on { display: block; }
#dragLine {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  opacity: .95;
}
#dragDot { fill: var(--accent); opacity: .95; }
#dragText {
  fill: #eaf2ff;
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #0b1220;
  stroke-width: 3.5;
  stroke-linejoin: round;
}

/* --- 图标状态徽章 --- */
.token .sbadges {
  position: absolute;
  top: calc(var(--cell) * -0.08);
  right: calc(var(--cell) * -0.04);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  pointer-events: none;
}
.token .sb {
  font-size: 9px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  font-weight: 600;
}
.token .sb.neg { color: #ffd3d8; background: #552229; border-color: #8c3a46; }
.token .sb.act { color: #d8e6ff; background: #1d3050; border-color: #3a5a8e; }
/* 选中时白色描边优先，状态只在未选中时染边框 */
.token.hasNeg:not(.sel) .disc { border-color: #b25d6a; }
.token.hasAct:not(.sel) .disc { border-color: #537ec0; }
.board.tiny .token .sbadges { transform: scale(.8); transform-origin: top right; }

/* --- 图标浮层（同格选项 / 状态勾选） --- */
.pop {
  position: absolute;
  z-index: 12;
  min-width: 146px;
  max-width: 208px;
  padding: 8px;
  background: #18202f;
  border: 1px solid #33415c;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  /* 浮层是界面不是地图：地图缩小时把它按反比例放大回去，字号才不至于糊成一片
     （锚点留在左上角，位置仍按格算） */
  transform-origin: 0 0;
  transform: scale(var(--unzoom, 1));
}
.pop[hidden] { display: none; }
.popTitle {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pop .pickItem {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 6px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.pop .pickItem:hover { background: #1f2a3d; border-color: var(--line); }
.pop .pickItem.on { background: #1c2a44; border-color: #35507a; }
.pop .pickItem .ic {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: var(--tint, #2b3a55); flex: none;
}
.pop .pickItem .meta { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.pop .pickItem .nm {
  font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pop .pickItem .sub { font-size: 10.5px; color: var(--muted); }
/* 选项右侧三角：展开状态栏 */
.pop .pickItem .pickSt {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #7fa6e8;
  cursor: pointer;
}
.pop .pickItem .pickSt:hover { background: #223049; color: #cfe0ff; }
.pop .grp { margin-top: 2px; }
/* 状态勾选项（地图状态栏） */
.grpName {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .06em;
  margin: 3px 0;
}
.chk {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #c6d3e6;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.chk:hover { background: #1f2a3d; }
.chk:disabled { opacity: .45; cursor: default; }
.chk:disabled:hover { background: transparent; }
.chk .box {
  width: 13px; height: 13px; flex: none;
  border: 1px solid #3a4a66;
  border-radius: 3px;
  display: grid; place-items: center;
  font-size: 9px; line-height: 1;
  color: #0d1522;
}
.chk.on { background: #1c2a44; border-color: #35507a; color: #eaf2ff; }
.chk.on .box { background: var(--accent); border-color: var(--accent); }
.chk.neg.on .box { background: var(--danger); border-color: var(--danger); }
.pop .popMore {
  width: 100%;
  margin-top: 6px;
  padding: 5px 6px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.pop .popMore:hover { color: var(--text); border-color: #3a4a66; }

/* --- 侧栏 --- */
.side {
  border-left: 1px solid var(--line);
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;      /* 窄屏下侧栏横向滚到头，不要传给地图 */
}
.side.isHidden { display: none; }
.panel { border-bottom: 1px solid var(--line); padding: 10px 12px; }
.panel.grow { flex: 1; min-height: 90px; display: flex; flex-direction: column; }
.panel.isCollapsed { display: none; }
.panelTitle { font-size: 12px; color: var(--muted); letter-spacing: .08em; margin-bottom: 8px; text-transform: uppercase; }
.panelTitle.foldable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  margin: -4px -4px 6px;
  padding: 3px 4px;
}
.panelTitle.foldable:hover { color: var(--text); background: #1b2436; }
.foldIco { font-size: 13px; line-height: 1; opacity: .7; }
.muted { color: var(--muted); font-size: 12px; }

.tokList, .logList { overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.tokItem {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent;
}
.tokItem:hover { background: #1b2436; border-color: var(--line); }
.tokItem.sel { background: #1c2a44; border-color: #35507a; }
/* 别人的图标：名字后面标一下，避免误以为能改 */
.tokItem.locked .nm::after { content: '只读'; margin-left: 5px; font-size: 10px; color: var(--muted); }
.tokItem .ic {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  background: var(--tint, #2b3a55); flex: none;
}
.tokItem .meta { min-width: 0; flex: 1 1 auto; }
.tokItem .nm { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tokItem .sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 准备区：还没放上地图的图标 */
.stageHead {
  margin: 8px 2px 2px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  color: #8fb0d8;
  letter-spacing: .3px;
}
.tokItem .triBtn.placeBtn {
  width: auto;
  padding: 2px 8px;
  font-size: 11px;
  color: #a8c6ee;
  border: 1px solid #2b4a75;
  background: #131f31;
}
.tokItem .triBtn.placeBtn:hover { color: #dbe9ff; border-color: #3c5a8a; background: #1b2a44; }

/* 布置模式：光标提示点格放置 */
.board.placing { cursor: crosshair; }
.board.placing .tokens { pointer-events: none; }

/* 列表项右侧三角：打开设置 */
.tokItem .triBtn {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.tokItem .triBtn:hover { background: #223049; color: var(--text); }
.tri {
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.logList { font-size: 11.5px; color: #9fb0c8; gap: 3px; }
.logItem { padding: 2px 0; border-bottom: 1px dashed rgba(38, 49, 70, .55); }
.logItem:last-child { border-bottom: 0; }
.logItem b { color: #d7e3f5; font-weight: 600; }

/* --- 底栏 --- */
.foot {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;                   /* grid 项默认 min-width:auto，nowrap 提示会把底栏撑出屏幕 */
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  background: #121928;
  color: #b8c4d8;
  font-size: 12px;
  /* 同顶栏：底栏自己滚，不带动地图 */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.foot .muted { margin-left: auto; }
#footHint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footBtn { padding: 3px 10px; font-size: 11.5px; flex: none; }
.footBtn.on { background: #1c2a44; border-color: #35507a; color: #eaf2ff; }

/* --- 操作说明面板（底栏按钮开关） --- */
.help {
  display: flex;
  flex-direction: column;
  max-height: min(46vh, 340px);
  border-top: 1px solid var(--line);
  background: #141b2a;
}
.help[hidden] { display: none; }
.helpHead {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line2);
}
.helpHead strong { font-size: 12.5px; letter-spacing: .06em; }
.helpClose { margin-left: auto; padding: 1px 8px; font-size: 12px; }
.helpBody {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 14px 12px;
  font-size: 12px;
  color: #c2cfe2;
}
.helpBody h4 {
  margin: 10px 0 3px;
  font-size: 11.5px;
  color: var(--accent);
  letter-spacing: .05em;
}
.helpBody h4:first-child { margin-top: 2px; }
.helpBody ul { margin: 0; padding-left: 16px; }
.helpBody li { margin: 2px 0; line-height: 1.7; }
.helpBody b { color: #e6ecf7; font-weight: 600; }

/* --- 弹窗 --- */
.modal {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(4, 8, 15, .62);
  backdrop-filter: blur(2px);
  display: flex;
  padding: 16px;
  overflow: auto;                 /* 卡片比屏幕高时可滚动，不会被裁掉顶部 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal[hidden] { display: none; }
#confirmModal { z-index: 30; }
/* 立绘设置 / 库管理：压在图标弹窗上面，但要被确认框压住 */
#libSetModal, #libManageModal { z-index: 26; }
#libManageModal .card { width: min(400px, 100%); }

/* 立绘大图：选中一张后再点一次就压在所有弹窗上面看一眼（点哪都关） */
.viewer {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(3, 6, 12, .93);
  cursor: zoom-out;
  animation: pvFade .12s ease-out;
}
.viewer[hidden] { display: none; }
@keyframes pvFade { from { opacity: 0; } to { opacity: 1; } }
.pvBox {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  width: min(94vw, 720px); cursor: default;
}
.pvBox img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 74vh;
  object-fit: contain;
  border-radius: 12px; border: 1px solid #3a4f74;
  background: #0d1520;
  box-shadow: 0 22px 64px rgba(0, 0, 0, .65);
}
.pvBar { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 2px; }
.pvBar b {
  font-size: 13px; font-weight: 600; color: #dbe9ff; min-width: 0;
  max-width: 56%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pvBar em {
  font-style: normal; font-size: 11.5px; color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pvBar .btn { flex: none; }
.confirmText { margin: 0 0 14px; font-size: 12.5px; line-height: 1.65; color: #c6d3e6; }
/* 身份自动识别的诊断日志（默认折叠，出问题时展开看/复制） */
.diag { margin: -4px 0 4px; }
.diag summary { cursor: pointer; font-size: 12px; color: var(--muted); user-select: none; }
.diag summary:hover { color: #9fb3cf; }
.diag pre {
  margin: 6px 0 0; padding: 8px 9px; max-height: 168px; overflow: auto;
  background: #0f1622; border: 1px solid var(--line); border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.55; white-space: pre-wrap; word-break: break-all;
  color: #b9c6da; user-select: text;
}
.card {
  width: min(420px, 100%);
  margin: auto;                   /* 配合 flex 实现「有余量时居中、超出时可滚」 */
  background: #161f2e;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.cardBody { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.card.small { width: min(300px, 100%); }
/* 底图弹窗要放预览，单独放宽；窄屏时自动收到满宽 */
.card.wide { width: min(720px, 100%); }
.cardTitle { font-size: 14px; margin-bottom: 12px; letter-spacing: .04em; }
.field { display: block; margin-bottom: 10px; }
.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input {
  width: 100%;
  background: #0f1622;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 9px;
  font-size: 13px;
  outline: none;
}
.field input:focus { border-color: #3c5a8a; box-shadow: 0 0 0 3px rgba(110, 168, 254, .12); }
/* 下拉统一风格：原生 select 的箭头是系统画的（浅色、方块状、跟字号不匹配），
   展开的列表在 Windows 上还是白底，放在这套深色界面里很跳。
   这里去掉系统外观、自己画一个箭头，外形与输入框保持一致。 */
select,
.field select,
.libPick select,
.libRow select,
.libNew select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #0f1622;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8c6ee' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #cfe0ff;
  padding: 7px 26px 7px 9px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
select:hover { border-color: #3c5a8a; }
select:focus { border-color: #3c5a8a; box-shadow: 0 0 0 3px rgba(110, 168, 254, .12); }
/* 展开的候选列表：跟着深色走 */
select option { background: #18202f; color: #e6ecf7; }
.field select { width: 100%; }
/* 勾选项：自定义复选框，跟弹窗里的其它控件同一视觉 */
.checkRow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.checkRow input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; flex: none; }
.checkRow span { min-width: 0; }
.bgGridRow { margin-bottom: 10px; }
.bgGridRow .field { margin-bottom: 0; }
/* 干扰项：range 控件不走 input 通用样式，否则被撑成整块背景 */
.field input[type="range"] {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
}
.field input[type="range"]:focus { box-shadow: none; }
.field input.num { width: 68px; }
.field input[readonly], .field input:disabled { color: var(--muted); background: #121a26; cursor: default; }
.fieldTip { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.55; color: var(--muted); font-style: normal; }
/* 立绘库网格下面那行小字：说清「选中 → 再点一次看大图」 */
.gridTip { margin: 4px 0 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.iconGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-height: 210px; overflow: auto; padding: 6px; background: #0f1622; border: 1px solid var(--line); border-radius: 8px; }
/* 公用立绘库：缩略图 + 名字 */
.iconGrid button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 2px; border: 1px solid transparent; background: transparent; border-radius: 6px;
  cursor: pointer; min-width: 0;
}
.iconGrid button img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block;
  border: 1px solid rgba(255, 255, 255, .25); background: var(--tint, #2b3a55); pointer-events: none;
}
.iconGrid button span {
  font-size: 10px; line-height: 1.3; color: var(--muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iconGrid button:hover { background: #1b2436; }
.iconGrid button:hover span { color: #c6d3e6; }
.iconGrid.ro button { cursor: default; opacity: .8; }
.iconGrid.ro button:hover { background: transparent; }
.iconGrid button.on { border-color: var(--accent); background: rgba(110, 168, 254, .12); }
.iconGrid button.on span { color: #dbe9ff; }
/* 图标弹窗顶部：当前选择预览 + 上传按钮 */
.iconHead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.iconPrev {
  width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 60%), var(--tint, #2b3a55);
  border: 1px solid rgba(255, 255, 255, .35);
}
.iconOps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.iconOps .fieldTip { margin: 0; flex: 1 1 100%; }
/* 「上传存到哪个库」下拉：世界主专用，跟在按钮后面同一行，省一行高度 */
.iconOps .libPick { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.iconOps .libPick[hidden] { display: none; }
.libPick > span { font-size: 12px; line-height: 1.5; color: var(--muted); white-space: nowrap; }
/* 内联小尺寸：跟旁边的 ghost 按钮同高同一圈圆角，只是更窄 */
.libPick select {
  max-width: 154px;
  padding: 6px 24px 6px 9px;
  border-radius: 8px;
  font-size: 13px;
  background-position: right 8px center;
}
.seg {
  font: inherit; font-size: 10.5px; line-height: 1.5; padding: 1px 8px;
  border-radius: 999px; border: 1px solid var(--line); background: #121a26;
  color: var(--muted); cursor: pointer;
}
.seg:hover { color: #c6d3e6; border-color: #35507a; }
.seg.on { background: rgba(110, 168, 254, .16); border-color: #3c5a8a; color: #dbe9ff; }
/* 立绘库分组标题（公用 / 仅世界主） */
.iconGrid .libHead {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px;
  padding: 6px 2px 2px; border-top: 1px dashed rgba(255, 255, 255, .09);
  font-size: 10px; color: var(--muted);
}
.iconGrid .libHead:first-child { border-top: 0; padding-top: 0; }
.iconGrid .libHead b { color: #c6d3e6; font-weight: 600; font-size: 10.5px; }
.iconGrid .libHead em { font-style: normal; opacity: .8; }
/* 缩略图角上的设置小钮（齿轮）：只有世界主看得到 */
.iconGrid button { position: relative; }
.iconGrid .pSet {
  position: absolute; top: -2px; right: -2px; width: 15px; height: 15px; padding: 0;
  border-radius: 999px; display: grid; place-items: center;
  font-size: 10px; font-style: normal; line-height: 1;
  background: #22304a; color: #cfe0ff; border: 1px solid #3a4f74;
  opacity: .28; transition: opacity .12s;
}
.iconGrid button:hover .pSet { opacity: 1; }
.iconGrid button.on .pSet { opacity: .85; }
/* 立绘设置弹窗：缩略图 + 元信息一行 */
.libSetHead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.libSetPrev {
  width: 52px; height: 52px; border-radius: 50%; flex: none; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 60%), #2b3a55;
  border: 1px solid rgba(255, 255, 255, .3);
}
.libSetPrev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.libSetHead .fieldTip { margin: 0; }
/* 立绘库管理：一行一个库 */
.libRows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.libRow {
  display: flex; align-items: center; gap: 6px;
  padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #0f1622;
}
.libRow input[type="text"] {
  flex: 1 1 40%; min-width: 0;
  background: #121a26; border: 1px solid var(--line); border-radius: 7px;
  color: var(--text); padding: 4px 7px; font-size: 12px; outline: none;
}
.libRow input[type="text"]:focus { border-color: #3c5a8a; }
.libRow select {
  flex: none; min-width: 118px; font-size: 11.5px; padding: 4px 22px 4px 8px;
  border-radius: 7px; background-position: right 7px center;
  background-color: #121a26;          /* 跟这一行的输入框同底色，别一个深一个浅 */
}
.libRow .libCount { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.libRow .libDel {
  flex: none; font: inherit; font-size: 10.5px; padding: 2px 7px; border-radius: 6px;
  background: transparent; border: 1px solid rgba(255, 120, 120, .35); color: #ff9a9a;
  cursor: pointer;
}
.libRow .libDel:hover { background: rgba(255, 90, 90, .12); }
.libRow .libDel[disabled] { opacity: .35; cursor: default; }
.libNew { display: flex; align-items: center; gap: 6px; }
.libNew input {
  flex: 1 1 auto; min-width: 0; background: #121a26; border: 1px solid var(--line);
  border-radius: 7px; color: var(--text); padding: 5px 8px; font-size: 12px; outline: none;
}
.libNew input:focus { border-color: #3c5a8a; }
.libNew select {
  flex: none; min-width: 118px; font-size: 11.5px; padding: 5px 22px 5px 8px;
  border-radius: 7px; background-position: right 7px center;
  background-color: #121a26;
}
/* 上传的图片统一按圆形铺满（地图上的图标 / 清单 / 侧栏） */
.face { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.token .disc { overflow: hidden; }

/* 头像裁剪器 */
.cropWrap {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(4, 8, 15, .66);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cropWrap[hidden] { display: none; }
.cropCard {
  background: var(--panel, #101a2a); border: 1px solid var(--line2, #2b4a75); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.cropTitle { font-size: 13.5px; color: #dbe9ff; }
.cropView {
  position: relative; width: 280px; height: 280px; margin: 0 auto;
  overflow: hidden; border-radius: 6px; background: #0a101c;
  border: 1px solid var(--line, #1d2c44);
}
.cropView canvas { display: block; cursor: grab; touch-action: none; }
.cropView canvas.grabbing { cursor: grabbing; }
.cropMask {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 9999px rgba(4, 8, 15, .55);
}
.cropRow { display: flex; align-items: center; gap: 8px; width: 280px; margin: 0 auto; }
.cropZoom { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 12px; color: var(--muted); }
.cropZoom input { flex: 1; }
.cropRow .spacer { flex: 1; }
.cropRow .fieldTip { width: 280px; margin: 0 auto; }
.cropCard > .fieldTip { display: block; width: 280px; margin: 0 auto; }

/* --- 底图裁剪：整张图铺在舞台里，框外的区域压暗 --- */
.bgCropWrap { z-index: 42; }
.bgCropCard { width: min(760px, 100%); }
.bgCropCard .cropRow,
.bgCropCard > .fieldTip { width: 100%; margin: 0; }   /* 头像裁剪是定宽 280，这里跟着卡片走 */
.bgCropCard > .fieldTip { display: block; }
.bgCropStage {
  position: relative;
  height: min(52vh, 400px);
  min-height: 180px;
  display: grid;
  place-items: center;
  background: #0a101c;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  touch-action: none;          /* 拖选框时不要让页面/地图跟着滚 */
  user-select: none;
}
.bgCropBox { position: relative; line-height: 0; }
.bgCropBox img {
  display: block; width: 100%; height: 100%;
  pointer-events: none; -webkit-user-drag: none;
}
.bgCropSel {
  position: absolute;
  border: 1px solid rgba(110, 168, 254, .95);
  box-shadow: 0 0 0 9999px rgba(3, 7, 14, .58);
  cursor: move;
}
.bgCropH {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 3px;
  background: #dbe9ff;
  border: 1px solid #3c5a8a;
}
.bgCropH.nw { left: 0; top: 0; cursor: nwse-resize; }
.bgCropH.ne { left: 100%; top: 0; cursor: nesw-resize; }
.bgCropH.sw { left: 0; top: 100%; cursor: nesw-resize; }
.bgCropH.se { left: 100%; top: 100%; cursor: nwse-resize; }
.bgCropSize { font-size: 11.5px; color: var(--muted); }
.cardFoot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.cardFoot .spacer { flex: 1; }

/* --- 分段选择（方格 / 六边形、朝向） --- */
.segs { display: flex; gap: 6px; }
.seg {
  flex: 1 1 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f1622;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seg:hover { color: var(--text); border-color: #3a4a66; }
.seg.on {
  color: #eaf2ff;
  border-color: #3f5f92;
  background: rgba(110, 168, 254, .16);
  box-shadow: inset 0 0 0 1px rgba(110, 168, 254, .25);
}
.hexOpts[hidden] { display: none; }

/* --- 地图设置弹窗 --- */
.bgBody {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr);
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.bgStage {
  position: relative;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0b111b;
  overflow: hidden;
  touch-action: none;
}
/* 右侧面板内容多，单独滚动，预览区始终可见 */
.bgPanel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}
/* 弹窗里的小节：地图页 / 底图 / 网格 / 格线 */
.mSec {
  padding: 9px 0 10px;
  border-top: 1px solid var(--line2);
}
.mSec:first-child { border-top: 0; padding-top: 0; }
.mSecHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: .06em;
  color: #9fb3cf;
}
.mSecHead > span { flex: 1; }
.btn.mini { padding: 2px 8px; font-size: 11px; border-radius: 999px; }

/* 地图页列表 */
.pgList { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.pgRow {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: #0f1622;
}
.pgRow.on { border-color: #3f5f92; background: rgba(110, 168, 254, .12); }
.pgRow input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 3px 4px;
  outline: none;
}
.pgRow input:hover { border-color: #2b3950; }
.pgRow input:focus { border-color: #3c5a8a; background: #0b111b; }
.pgRow.on input { color: #eaf2ff; font-weight: 600; }
.pgRow .pgCur { font-size: 10.5px; color: var(--accent2); padding: 0 2px; white-space: nowrap; }
.pgRow .pgCur.pgEdit { color: #ffd28a; }
.pgPublishBtn { align-self: flex-start; margin-top: 8px; font-size: 12px; }
.pgRow button {
  flex: none;
  border: 1px solid var(--line2);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.pgRow button:hover { color: var(--text); border-color: #3a4a66; }
.pgRow button.pgDel:hover { color: var(--danger); border-color: #7a3b42; }
.pgEmpty { font-size: 11.5px; color: var(--muted); padding: 2px 0 4px; }

/* 格线：颜色 + 粗细 + 不透明度 */
.lineRow { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.lineRow input[type="color"] {
  width: 42px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0f1622;
  cursor: pointer;
}
.lineHint { font-size: 11.5px; color: var(--muted); }
/* 拖图片进来时给个落点提示 */
.bgStage.drop {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(110, 168, 254, .18);
}
.bgGrid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;            /* 格线要压在图片上面，不然图一铺就看不见线 */
}
/* 预览格线：颜色/粗细/不透明度由 JS 按草稿设置写到 path 上，
   这里只留描边打底（跟随底图时用，压在图上看不清就靠它） */
.bgGrid path { fill: none; stroke-linejoin: round; }
.bgGrid path.halo { stroke: rgba(255, 255, 255, .30); }
.bgImg {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
}
.bgImg.dragging { cursor: grabbing; }
.bgEmpty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
  /* 半透明：还没选图时也能看见下面的格子，方便先定格数 */
  background: rgba(9, 14, 22, .62);
  z-index: 3;
}
.bgEmpty[hidden] { display: none; }
.bgEmptyTitle { color: var(--text); font-size: 13px; }
.bgEmpty p { margin: 0 0 4px; font-size: 11.5px; line-height: 1.7; }
.bgName { font-size: 12.5px; color: #cfe0ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgSize { font-size: 10.5px; line-height: 1.6; color: var(--muted); margin: 2px 0 8px; }
.bgSize.warn { color: #ffcf8a; }
.bgReplaceBtn { align-self: flex-start; padding: 4px 10px; font-size: 11.5px; margin-bottom: 10px; }
.rangeRow { display: flex; align-items: center; gap: 8px; }
.rangeRow input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.rangeRow .num { width: 68px; flex: none; }
.field input.num { width: 68px; }
.bgTools { display: flex; gap: 8px; margin-top: 2px; }
.bgTools .btn { flex: 1 1 0; padding: 5px 8px; font-size: 12px; }
.bgBusy {
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #1c2a44;
  border: 1px solid #35507a;
  color: #cfe0ff;
  font-size: 12px;
}
.bgBusy[hidden] { display: none; }

/* 选图用的 input：不用 hidden，改成视觉隐藏。
   iOS Safari 对 display:none 的 file input 会忽略程序化 click()，点「选择图片」没反应。 */
.fileHid {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* 窄屏：预览在上、设置在下，整块一起滚（面板自己滚会只剩一条缝） */
@media (max-width: 860px) {
  .bgBody { grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: auto; }
  .bgStage { min-height: 220px; }
  .bgPanel { overflow: visible; }
}

@media (max-width: 720px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  /* 顶栏窄：页名先截断，菜单跟着收窄，别顶出屏幕 */
  .pageBtn { max-width: 128px; }
  .pageMenu { min-width: 150px; max-width: 210px; }
  .bgStage { min-height: 190px; }
  .side { flex-direction: row; overflow-x: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 38vh; }
  .panel { min-width: 220px; border-bottom: 0; border-right: 1px solid var(--line); }
}

/* --- 手机 / 矮窗口：编辑弹窗单独适配 --- */
@media (max-width: 720px), (max-height: 620px) {
  .modal { padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .card {
    /* 与常规宽度保持一致：窄屏只压缩内边距，宽度上限不变，
       这样桌面端把窗口拖小时卡片宽度是连续的，不会从 420 猛撑到满宽 */
    width: min(420px, 100%);
    max-height: 100%;
    padding: 10px 11px;
    border-radius: 12px;
  }
  .card.small { width: min(300px, 100%); }
  /* 底图弹窗有预览，窄屏/矮屏里放宽一点，否则预览太小没法对齐 */
  .card.wide { width: min(560px, 100%); }
  .cardTitle { font-size: 13px; margin-bottom: 7px; }
  .field { margin-bottom: 7px; }
  .field > span { font-size: 10.5px; margin-bottom: 3px; }
  /* 16px 以下 iOS 会在聚焦时自动放大页面，这里固定 16px 防跳版 */
  .field input { font-size: 16px; padding: 7px 9px; }
  .field input[type="range"] { padding: 0; }
  .iconGrid { grid-template-columns: repeat(5, 1fr); max-height: 120px; padding: 4px; }
  .row2 { gap: 7px; }
  .bgBody { grid-template-columns: minmax(0, 1fr); }
  .bgStage { min-height: 210px; }
  .seg { font-size: 12px; padding: 8px 6px; }
  .cardFoot { margin-top: 8px; gap: 6px; }
  .cardFoot .spacer { display: none; }
  .cardFoot .btn { flex: 1 1 0; min-height: 38px; }
  .confirmText { font-size: 12px; margin-bottom: 10px; }
}