/* ==================================================================
   武器 / 图鉴 / 地图 / 迫击炮 · 区域补充样式
   ------------------------------------------------------------------
   约束（与 tokens.css 一致）：
   - 颜色只用令牌，不出现色值字面量
   - 圆角只用 --r-s / --r-m / --r-l（或 0 / 50% / 999px）
   - 字重只用 400 / 500 / 600（600 仅页面主标题）
   - 字号只用 --t-* 七档
   - 不新增立体投影，层级靠底色与描边区分
   ================================================================== */

/* ---------- 状态块（与 hub-data.js 的 statusBlock 配套） ---------- */
.hub-state{
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 16px;border-radius:var(--r-m);
  background:var(--wash);color:var(--t2);
  font-size:var(--t-sm);line-height:1.7;
}
.hub-state > b{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  background:var(--card);color:var(--t2);
}
.hub-state.is-loading{background:var(--blue-soft);color:var(--blue)}
.hub-state.is-loading > b{color:var(--blue)}
.hub-state.is-empty{background:var(--wash);color:var(--t2)}
.hub-state.is-error{background:var(--red-soft);color:var(--red)}
.hub-state.is-error > b{color:var(--red)}

/* ---------- 图鉴卡片图片（完整显示，不裁切） ---------- */
.tile-img img{width:100%;height:100%;object-fit:contain;display:block}
.tile-img .tile-fb{font-size:var(--t-xs);color:var(--t2)}
.tile.is-on{box-shadow:inset 0 0 0 2px var(--blue)}

/* 分类条在窄屏允许换行，避免横向溢出（基线 .seg 为不换行的 inline-flex） */
.cats > .seg,.mapbar > .seg{max-width:100%;flex-wrap:wrap}
.cats > .seg button,.mapbar > .seg button{flex-shrink:0}

/* 搜索框放进 .cats 一行里 */
.cats .ars-field{flex:1 1 200px;min-width:0}
/* 13.7-052：搜索框热区补到 44px（原 42px 低于最小热区） */
.cats .ars-field .input{height:44px;min-height:44px}
/* G1：武器搜索框——字号锁 16px，避免 iOS 聚焦时整页缩放 */
.cats .ars-search{flex:1 1 220px}
.cats .ars-search .input{font-size:var(--t-lock-16)}
.cats .ars-search .input::-webkit-search-cancel-button{-webkit-appearance:none}
/* G1：清空按钮与搜索框同高，热区 ≥44px */
.cats .ars-clear{height:44px;min-height:44px;padding-inline:18px}
.cats .ars-clear:disabled{opacity:.45;cursor:default}

/* ---------- 抽屉里的键值表 / 原始来源 ---------- */
.kv td .src-link{color:var(--blue);font-weight:500}
.kv td .src-link:hover{text-decoration:underline}
.rawsrc{
  margin-top:var(--gap-s);
  padding:12px 14px;border-radius:var(--r-s);
  background:var(--wash);
  font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.7;
  color:var(--t2);white-space:pre-wrap;word-break:break-all;
  max-height:44vh;overflow:auto;
}
.drawer-bd .sec-note{margin-bottom:var(--gap-s);font-size:var(--t-sm);color:var(--t1);line-height:1.7}

/* ---------- 地图：瓦片舞台 ---------- */
/* 13.7-053：×1 时整图可见，放开纵向滚动让页面能翻；放大后才需要拦截手势做拖拽平移 */
.plan.is-map{cursor:grab;touch-action:pan-y;user-select:none}
.plan.is-map.is-zoom{touch-action:none}
.plan.is-map.is-drag{cursor:grabbing}
/* 13.7-054：缩放到达边界时置灰 */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:auto}
.map-tools .tag{min-height:32px;display:inline-flex;align-items:center}
.plan.is-map .plan-badge{z-index:3}

.mapstage{
  position:absolute;left:50%;top:50%;
  width:var(--w,100%);aspect-ratio:1;
  transform:translate(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px)));
}
.maptiles{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(var(--n,1),1fr);
  grid-template-rows:repeat(var(--n,1),1fr);
  background:var(--wash);
}
.maptiles img{width:100%;height:100%;display:block;object-fit:contain}
/* 瓦片缺失占位：不留白图，给出可读提示 */
.maptile-miss{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:repeating-linear-gradient(135deg,var(--wash) 0 8px,transparent 8px 16px);
  border:1px dashed var(--line);
  color:var(--t3);font-size:var(--t-xxs,10px);line-height:1.2;text-align:center;overflow:hidden;
}
.maptile-miss em{font-style:normal}
.maptile-miss-x{font-size:12px;opacity:.8}
.maptile-none{
  grid-column:1/-1;grid-row:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:24px;text-align:center;color:var(--t2);font-size:var(--t-xs);
}
.maptile-none strong{font-size:var(--t-sm);color:var(--t1)}

.maproute{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.maproute polyline{
  fill:none;stroke:var(--red);stroke-width:14;
  stroke-linejoin:round;stroke-linecap:round;opacity:.9;
}

.mappins{position:absolute;inset:0;z-index:2}
/* 13.7-008：视觉直径保持 14px，靠 ::after 把可点热区撑到 44×44（见 ui-fix.css），
   密集区用 is-cluster 聚合（见 arsenal.js drawPins 的 LOD 逻辑） */
/* R3-016：点位按 type 分色。颜色令牌集中在 tokens.css（--pt-*），
   这里只做「type → 令牌」的映射，页面里不出现色值字面量。 */
[data-pt="location"]{--pin-c:var(--pt-location)}
[data-pt="secret_room"]{--pin-c:var(--pt-secret_room)}
[data-pt="bunker"]{--pin-c:var(--pt-bunker)}
[data-pt="lab_camp"]{--pin-c:var(--pt-lab_camp)}
[data-pt="bear_cave"]{--pin-c:var(--pt-bear_cave)}
[data-pt="crowbar"]{--pin-c:var(--pt-crowbar)}
[data-pt="car_fixed"]{--pin-c:var(--pt-car_fixed)}
[data-pt="boat"]{--pin-c:var(--pt-boat)}
[data-pt="garage"]{--pin-c:var(--pt-garage)}
[data-pt="gas_station"]{--pin-c:var(--pt-gas_station)}
[data-pt="glider"]{--pin-c:var(--pt-glider)}
[data-pt="revive_station"]{--pin-c:var(--pt-revive_station)}
[data-pt="jump_tower"]{--pin-c:var(--pt-jump_tower)}

.mappin{
  position:absolute;left:var(--x,50%);top:var(--y,50%);
  width:14px;height:14px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--pin-c,var(--blue));
  box-shadow:inset 0 0 0 2px var(--card);
  transition:width var(--t-fast),height var(--t-fast);
  cursor:pointer;z-index:1;padding:0;border:0;
}
.mappin:hover{width:18px;height:18px;z-index:5}
.mappin:focus-visible{outline:2px solid var(--blue);outline-offset:3px;z-index:5}
/* 形状是颜色的第二重区分（色弱可辨）：圆=地点类 方=载具类 菱=复活站 三角=跳伞塔 */
.mappin.is-square{border-radius:var(--r-xs)}
.mappin.is-diamond{border-radius:var(--r-xs);transform:translate(-50%,-50%) rotate(45deg)}
.mappin.is-triangle{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.mappin.is-on{width:20px;height:20px;z-index:6;box-shadow:0 0 0 4px var(--blue-soft)}
.mappin.is-cluster{box-shadow:inset 0 0 0 2px var(--card),0 0 0 3px var(--blue-soft)}
.mappin-n{
  position:absolute;left:calc(100% + 2px);top:-6px;
  min-width:16px;height:16px;padding:0 3px;border-radius:999px;
  background:var(--blue);color:var(--card);
  font-size:9px;line-height:16px;font-weight:600;text-align:center;
  pointer-events:none;
}
.mappin.is-a{background:var(--blue);width:19px;height:19px;box-shadow:0 0 0 4px var(--blue-soft)}
.mappin.is-b{background:var(--red);width:19px;height:19px;box-shadow:0 0 0 4px var(--red-soft)}

.map-lbl{
  position:absolute;left:var(--x,50%);top:var(--y,50%);
  transform:translate(-50%,calc(-50% - 16px));
  padding:1px 6px;border-radius:999px;
  background:var(--glass);
  font-size:var(--t-xs);color:var(--t1);white-space:nowrap;
  pointer-events:none;z-index:2;
}

/* 地图侧栏：点位类型说明 */
.pinfos .tag{white-space:nowrap}
.map-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* 迫击炮：测量点读数 */
.readout{display:flex;flex-direction:column;gap:2px}
.readout .k{font-size:var(--t-xs);color:var(--t2)}
.readout .v{font-family:var(--f-mono);font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.readout + .readout{margin-top:var(--gap-s)}

/* ---------- R3-017：地图卡片头部（地图名一行 + 点位类型复选框一行） ---------- */
.mapcard-hd{
  margin-bottom:10px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--card);
}
.mapcard-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.map-title{margin:0;font-size:var(--t-h3);font-weight:600;color:var(--ink)}
.mapcard-t .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptypes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px}
.ptype-g{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.ptype-gl{
  font-size:var(--t-xs);color:var(--t3);
  padding-right:8px;margin-right:2px;border-right:1px solid var(--line);
}
.pchk{
  display:inline-flex;align-items:center;gap:6px;
  min-height:30px;padding:3px 9px 3px 7px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--t1);font-size:var(--t-xs);
  cursor:pointer;user-select:none;
}
.pchk:hover{background:var(--wash)}
.pchk input{
  width:14px;height:14px;margin:0;flex-shrink:0;
  accent-color:var(--pin-c,var(--blue));cursor:pointer;
}
.pchk:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.pchk.is-on{background:var(--wash);border-color:var(--blue-line);color:var(--ink)}
/* 颜色示例：与地图上同类型图标同色同形（R3-016：一一对应） */
.pchk-d{
  width:11px;height:11px;flex-shrink:0;border-radius:50%;
  background:var(--pin-c,var(--blue));
  box-shadow:inset 0 0 0 1px var(--card);
}
.pchk-d.is-square{border-radius:var(--r-xs)}
.pchk-d.is-diamond{border-radius:var(--r-xs);transform:rotate(45deg)}
.pchk-d.is-triangle{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.pchk-l{white-space:nowrap}
.pchk-n{font-family:var(--f-mono);font-style:normal;color:var(--t3)}
.ptypes-acts{margin-top:8px}

/* ---------- R3-018：地图内测距 ---------- */
.plan.is-measure{cursor:crosshair}
.mapmeasure{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.mapmeasure polyline{
  fill:none;stroke:var(--blue);stroke-width:12;
  stroke-linejoin:round;stroke-linecap:round;opacity:.95;
}
.mapmeasure .mm-casing{
  fill:none;stroke:var(--card);stroke-width:20;
  stroke-linejoin:round;stroke-linecap:round;opacity:.75;
}
.mapmeasure-pts{position:absolute;inset:0;z-index:4;pointer-events:none}
.mm-pt{
  position:absolute;left:var(--x,50%);top:var(--y,50%);
  transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:4px;
  white-space:nowrap;pointer-events:none;
}
.mm-pt > i{
  width:16px;height:16px;flex-shrink:0;border-radius:50%;
  background:var(--blue);color:var(--card);
  font-family:var(--f-mono);font-size:9px;font-style:normal;font-weight:600;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px var(--card);
}
.mm-pt > b{
  padding:1px 6px;border-radius:999px;
  background:var(--card);border:1px solid var(--blue-line);
  font-size:var(--t-xs);font-weight:500;color:var(--ink);
}
.measure-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:10px;padding:10px 12px;
  border:1px solid var(--blue-line);border-radius:var(--r-m);
  background:var(--blue-soft);
}
.measure-bar[hidden]{display:none}

/* G5：模式切换的容器带 hidden 时必须真的隐藏（.cats / .panel 自带 display 会盖掉 [hidden]） */
[data-arsenal="cat-filters"][hidden],
[data-arsenal="cat-items"][hidden],
[data-arsenal="cat-updates"][hidden],
[data-arsenal="cat-detail"][hidden]{display:none!important}  /* important-ok: 压同元素上的 display:flex */

/* G5：最新入库顶部的一行（日期 + 件数），条目本身复用图鉴 .tile 网格 */
.upd-issue{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--t2)}
.upd-issue[hidden]{display:none}
.upd-issue b{font-weight:600;color:var(--ink)}
/* 最新更新的一行：左侧期号文案，右侧版本下拉（原生 select 复用 .select 表单样式） */
.upd-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap-s)}
.upd-bar .upd-issue{flex:1 1 220px;min-width:0}
.upd-bar .upd-pick{flex:0 0 auto;width:clamp(170px,26vw,240px);max-width:100%}
.upd-bar .select{height:38px;font-size:var(--t-sm);background-position:calc(100% - 19px) 17px,calc(100% - 14px) 17px}
@media (max-width:520px){
  /* 窄屏「最新入库」在面板里可用宽度更窄，固定 2 列，避免几十条排成单列 */
  [data-arsenal="cat-updates-list"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* G4：图鉴页触控目标 ≥44px（基线 .seg button ≈40px / .pager button 32px） */
body[data-page="arsenal-catalog"] .cats .seg button,
body[data-page="arsenal-catalog"] .pager button,
body[data-page="arsenal-catalog"] .pager a{min-height:44px;min-width:44px}

/* G4：搜索 0 结果的标题行 */
.cat-empty-t{
  margin:0 0 4px;font-size:var(--t-sm);font-weight:600;color:var(--ink);
}

@media (max-width:680px){
  .mappin{width:12px;height:12px}
  .mappin:hover{width:16px;height:16px}
  /* 窄屏把地图容器改成正方形：底图舞台本身就是正方形，×1 时整张图都在可视区内 */
  body[data-page="arsenal-map"] .plan-lg{aspect-ratio:1/1}
  /* 复选框组在窄屏换行铺开，不横向溢出 */
  .mapcard-hd{padding:10px}
  .ptypes{gap:6px}
  .pchk{min-height:34px}
}


/* ---------- R27：图鉴条目独立页（/catalog/<id>.html 静态页） ---------- */
a.tile{display:block;color:inherit;text-decoration:none}
.ci-wrap{max-width:960px}
.ci-hero{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:var(--gap);align-items:start;margin-top:var(--gap)}
.ci-hero-img{max-width:480px;background:var(--wash);border-radius:var(--r-m);display:grid;place-items:center}
.ci-hero-img img{width:100%;height:auto;object-fit:contain;display:block}
.ci-kv{margin:0}
.ci-kv .ci-row{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.ci-kv .ci-row:last-child{border-bottom:none}
.ci-kv dt{font-size:var(--t-xs);color:var(--t2)}
.ci-kv dd{margin:2px 0 0;font-size:var(--t-sm);font-weight:500;color:var(--ink);word-break:break-all}
.ci-view{margin-top:var(--gap)}
.ci-related{margin-top:var(--gap-sec,var(--gap))}
.ci-related h2{font-size:var(--t-h3);font-weight:500;color:var(--ink);margin-bottom:12px}
@media (max-width:720px){.ci-hero{grid-template-columns:1fr}}