/* 技能树：纵向长图，可以往下滚。线粗，节点只有实心（已点亮）和空心（未解锁）。 */
.tree-page.sk-page{height:auto!important;min-height:0!important;padding-bottom:40px}
.tree-page.sk-page:not([hidden]){display:block!important}   /* 只在显示时覆盖旧的网格布局，不能盖过 hidden */
.sk-legend{display:flex;gap:28px;align-items:center;font-size:10px;letter-spacing:.12em;color:var(--muted);margin:18px 0 0;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.sk-legend span{display:inline-flex;align-items:center;gap:9px}
.sk-legend i{display:inline-block;width:11px;height:11px;border-radius:50%}
.sk-legend .l-lit{background:var(--accent);box-shadow:0 0 10px rgba(var(--rgb),.5)}
.sk-legend .l-locked{border:2px solid rgba(220,228,240,.45)}
.sk-legend .l-rec{width:26px;height:0;border-radius:0;border-top:2px dashed rgba(220,228,240,.5)}
.sk-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.sk-scroll::-webkit-scrollbar{display:none}   /* 窄屏仍可拖动 / 触控板横向平移，只是不显示滚动条 */
.sk-stage{position:relative;margin:0 auto}
#sk-edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#sk-branches{position:absolute;left:0;right:0;top:16px;height:70px}
.sk-branch{position:absolute;transform:translateX(-50%);text-align:center;white-space:nowrap}
.sk-branch small{display:block;font-size:9px;letter-spacing:.3em;color:var(--muted)}
.sk-branch span{display:block;font-size:15px;letter-spacing:.12em;margin-top:7px;color:var(--text)}
.sk-branch b{display:block;font-weight:400;font-size:10px;letter-spacing:.2em;color:var(--accent);margin-top:6px;font-variant-numeric:tabular-nums}

/* 连线：已点亮=主题色实线；从已点亮通向未解锁=亮一点的实线；都未解锁=暗实线；推荐=虚线 */
.sk-edge{fill:none;stroke-width:2.2px;stroke-linecap:round;transition:opacity .3s}
.sk-edge.lit{stroke:var(--accent);stroke-width:2.6px;filter:drop-shadow(0 0 4px rgba(var(--rgb),.45))}
.sk-edge.open{stroke:rgba(220,228,240,.32)}
.sk-edge.dim{stroke:rgba(220,228,240,.14)}
.sk-edge.rec{stroke:rgba(220,228,240,.42);stroke-width:1.8px;stroke-dasharray:6 7}
.sk-edge.pending,.sk-node.pending{opacity:0}

.sk-node{position:absolute;transform:translate(-50%,-9px);width:150px;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:none;border:0;color:var(--text);padding:0;font-size:12.5px;letter-spacing:.06em;line-height:1.3;text-align:center}
.sk-dot{width:18px;height:18px;border-radius:50%;box-sizing:border-box;transition:box-shadow .3s,transform .3s}
.sk-node.lit .sk-dot{background:var(--accent);box-shadow:0 0 18px 2px rgba(var(--rgb),.45)}
.sk-node.locked .sk-dot{border:2px solid rgba(220,228,240,.45);background:var(--bg)}
.sk-node.locked{color:#a3abb7}
.sk-node.rec .sk-dot{border-color:rgba(220,228,240,.32)}
.sk-node.rec{color:#8d95a2}
.sk-node.root .sk-dot{width:28px;height:28px;margin-top:-5px;box-shadow:0 0 0 6px var(--bg),0 0 0 7px rgba(var(--rgb),.6),0 0 30px 4px rgba(var(--rgb),.4)}
.sk-node.root{transform:translate(-50%,-14px);font-size:14px;letter-spacing:.2em}
.sk-node small{font-size:8.5px;letter-spacing:.22em;color:var(--muted)}
/* 标签底衬：穿过的连线从文字后面走，不压字 */
.sk-name,.sk-node small{background:var(--bg);padding:1px 7px;border-radius:2px}
.sk-node:hover .sk-dot,.sk-node:focus-visible .sk-dot,.sk-node.chosen .sk-dot{transform:scale(1.18)}
.sk-node.locked:hover .sk-dot,.sk-node.locked.chosen .sk-dot{border-color:rgba(220,228,240,.8)}

/* 详情抽屉：固定在右侧，页面可以继续滚 */
#sk-drawer{position:fixed;right:0;top:0;bottom:0;width:min(360px,100%);z-index:60;background:rgba(10,13,19,.97);
  border-left:1px solid rgba(var(--rgb),.25);padding:34px 30px;overflow:auto;box-shadow:-30px 0 60px #0006;animation:arrive .35s ease}
#sk-drawer .sk-close{position:absolute;right:20px;top:18px;border:0;background:none;color:var(--muted);font-size:24px}
#sk-drawer .eyebrow{font-size:9px;letter-spacing:.3em;margin-top:8px}
#sk-drawer h3{font-size:24px;font-weight:400;margin:16px 0 6px}
#sk-drawer .en{font-size:9px;letter-spacing:.22em;color:var(--muted)}
#sk-drawer .node-state{display:inline-block;margin-top:16px;padding:6px 10px;font-size:10px;letter-spacing:.12em;border:1px solid var(--line);color:var(--muted)}
#sk-drawer .node-state.lit{color:var(--accent);border-color:rgba(var(--rgb),.4)}
#sk-drawer h4{font-size:10px;font-weight:400;letter-spacing:.2em;color:var(--accent);margin:26px 0 10px}
#sk-drawer p{font-size:12px;line-height:2;color:#b4bcc7;margin:0}
.sk-tags,.sk-links{display:flex;flex-wrap:wrap;gap:8px}
.sk-tags span{font-size:10px;letter-spacing:.06em;padding:5px 9px;border:1px solid var(--line);color:#b4bcc7}
.sk-links button{display:inline-flex;align-items:center;gap:8px;font-size:11px;padding:6px 10px 6px 8px;border:1px solid var(--line);background:none;color:#c3cad4}
.sk-links button i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(220,228,240,.5);box-sizing:border-box}
.sk-links button.lit i{background:var(--accent);border-color:var(--accent)}
.sk-links button:hover{border-color:rgba(var(--rgb),.5)}
@media(max-width:650px){.sk-legend{gap:16px;flex-wrap:wrap;font-size:9px}#sk-drawer{padding:28px 22px}}