/* ============================================================
 * apps/tech.css —— 科技树（js/apps/tech.js / tech-tree.js）
 *
 * 由原 css/apps.css 按既有的分节标记切分而来（0.3.1 架构整理）。
 * 内容与切分前逐字节一致 —— 只换了存放位置，没动一个字符。
 * 新增样式请放进对应 App 的分片，不要再往 apps.css 里堆。
 * ============================================================ */
/* ============================================================
 * 科技树（tech.js / tech-tree.js）
 *
 * 树状图用 SVG 画，节点是 <g> + <rect> + <text>，连线是 <path>。
 * 这里只负责"容器"和"能点/能滚/有反馈"这三件事 ——
 * 颜色全部由 tech-tree.js 内联写进 SVG（节点状态有 4 种，
 * 写在 CSS 里要 4×3 个选择器，还不如跟着数据走）。
 * ============================================================ */

/*
 * 横向滚动容器。
 *
 * 22 个节点分 5 层，宽度必然超出手机屏。缩放塞进一屏的代价是
 * 节点小到读不出名字 —— 那画这棵树就没意义了。所以横向滚动。
 *
 * 滚动条：移动端不显示，桌面端（双击 index.html 调试时）给一条细的，
 * 免得不知道能滚。
 */
.tt-wrap {
  margin: 10px 0 4px;
  background: var(--surface-2);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.tt-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  scrollbar-width: thin;
}
.tt-scroll::-webkit-scrollbar { height: 6px; }
.tt-scroll::-webkit-scrollbar-thumb {
  background: rgba(78, 100, 114, .22);
  border-radius: 3px;
}
.tt-scroll::-webkit-scrollbar-track { background: transparent; }

.tt-svg { display: block; }

/* 节点：默认不可点，只有能学的才给"可以去"的手感 */
.tt-node { cursor: default; }
.tt-node.tt-ready,
.tt-node.tt-hint { cursor: pointer; }
.tt-node rect { transition: fill .16s ease, stroke .16s ease; }
.tt-node.tt-ready:active rect { fill: #FDF3E4; }

/*
 * 高亮：从线索页跳过来时，把目标节点圈出来。
 * 用滤镜发光而不是换色 —— 节点的填充色已经承载了"状态"这个语义，
 * 再用颜色标"这是你刚点的那个"会串味。
 */
.tt-hl rect {
  stroke-width: 2.4 !important;
  filter: drop-shadow(0 0 5px rgba(208, 138, 56, .55));
}

/* 图例 */
.tt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 14px 16px 20px;
  font-size: 11.5px;
  color: var(--text-2);
}
.tt-lg { display: inline-flex; align-items: center; gap: 6px; }
.tt-lg-dot {
  width: 11px; height: 11px; border-radius: 3px;
  border: 1.3px solid var(--divider); flex: none;
}
.tt-lg-line {
  width: 18px; height: 0;
  border-top: 1.8px solid #4E6472; flex: none;
}
.tt-lg-line.dashed { border-top-style: dashed; border-top-color: #C4C0B8; }

/*
 * 树状图下方的"从哪儿学"提示条。
 * 树只回答"有什么"，不回答"怎么拿到" —— 补一行通道说明，
 * 不然玩家看完树还是不知道该干嘛。
 */
.tt-channels {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 16px;
}