/* 天赋树（第三版）：PoE 式密集天赋盘 + 方面分区底色 + 星座纹样 + 技能面板 + 目录 */
body[data-page="tree"] { overflow: hidden; height: 100vh; padding-bottom: 0 !important; }
.tree-viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(ellipse at 50% 45%, #1b1f26 0%, #121418 55%, #0a0b0d 100%); }
.tree-viewport::before { content: ""; position: absolute; inset: 0; background: url(art2/ui/pattern.svg) 0 0 / 72px; opacity: .8; pointer-events: none; }
.tree-viewport::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .7) 100%); }
.tree-viewport.is-dragging { cursor: grabbing; }
#tree { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }

/* 装饰层 */
.t-region { opacity: .07; }
.t-art { opacity: .13; }
.t-rune { opacity: .3; }
.t-orbit { fill: none; stroke: #6b5a3a; stroke-width: 3; stroke-dasharray: 4 10; opacity: .5; }
.t-orbit.is-lit { stroke: #b88a35; opacity: .8; }

/* 连线：粗黑墨底 + 芯线；点亮的是黄铜，未点亮的是暗铁 */
.t-e-base { stroke: #07080a; stroke-width: 11; stroke-linecap: round; }
.t-e-base.t-e-spoke { stroke-width: 8; }
.t-e { stroke-linecap: round; }
.t-e.is-lit { stroke: #e6ad44; stroke-width: 5; }
.t-e.is-off { stroke: #3a4048; stroke-width: 3.5; }
.t-e-spoke.is-lit { stroke-width: 3.5; }
.t-e-spoke.is-off { stroke-width: 2.5; }
.t-cross { fill: none; stroke: #3fe0cc; stroke-width: 4; stroke-dasharray: 3 9; stroke-linecap: round; opacity: .9; }

/* 节点 */
.t-n { outline: none; }
.t-n .disc { fill: #0d0f12; }
.t-n .glow { opacity: .22; }
.t-n--ring.is-lit:hover .glow { opacity: .45; }
.t-n .dim { fill: #0b0c0f; opacity: .62; }
.t-n.is-off image { opacity: .55; }
.t-n .pn { stroke: #07080a; stroke-width: 4; }
.t-n--path.is-lit .pn { fill: #e6ad44; }
.t-n--path.is-off .pn { fill: #2c3138; }
.t-n:hover .disc, .t-n:focus-visible .disc { fill: #2a2015; }
.t-n.is-off:hover .dim { opacity: .3; }
.t-n.is-lit:not(.t-n--path):hover image, .t-n:focus-visible image { filter: brightness(1.2); }
.t-n--keystone.is-off image { opacity: .75; }
.t-n .ring-match { fill: none; stroke: #ffe066; stroke-width: 6; opacity: 0; }
#tree.is-searching .t-n:not(.is-match) { opacity: .28; }
#tree.is-searching .t-n.is-match .ring-match { opacity: 1; animation: t-pulse 1.1s ease-in-out infinite; }
.t-n.is-target .ring-match { opacity: 1; stroke: #fff; animation: t-pulse 1s ease-in-out 4; }
@keyframes t-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .2; } }

.t-label { font-family: var(--font-ui); font-weight: 700; pointer-events: none; paint-order: stroke; stroke: #07080a; stroke-linejoin: round; }
.t-label--start, .t-label--hub, .t-label--theme { text-anchor: middle; }
.t-label--start { font: 400 46px var(--font-title); fill: #ffe1a0; stroke-width: 8px; letter-spacing: .1em; }
.t-label--hub { font-size: var(--fs-hub, 24px); fill: #ffd27a; stroke-width: 7px; }
.t-label--theme { font-size: var(--fs-theme, 20px); fill: #f4e2b6; stroke-width: 6px; display: none; }
.t-label--theme.is-off { fill: #9aa3ae; }
.t-label--ring { font: 500 var(--fs-ring, 15px) var(--font-ui); fill: #e8dcc0; stroke-width: calc(var(--fs-ring, 15px) * .3); display: none; text-anchor: inherit; }
.t-aspect { font: 700 var(--fs-aspect, 60px) var(--font-cn); text-anchor: middle; stroke: #07080a; stroke-width: 10px; paint-order: stroke; letter-spacing: .12em; pointer-events: none; opacity: 0; }
#tree.z-far .t-aspect { opacity: .95; }
#tree.z-far .t-label--hub { display: none; }
#tree.z-mid .t-label--theme { display: block; }
#tree.z-near .t-label--ring { display: block; }

/* 顶部标题 */
.tree-top { position: fixed; left: 0; right: 0; top: 8px; z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.tree-top .rpg-plate { position: relative; left: auto; top: auto; transform: none; width: 340px; }
.tree-search { position: fixed; right: 18px; top: 16px; z-index: 31; width: min(300px, 32vw); }
.tree-search small { display: block; margin-top: 4px; text-align: right; color: var(--text-dim); font-size: 12px; min-height: 1.2em; text-shadow: 0 1px 2px #000; }

/* 左侧：方面索引 */
.tree-legend { position: fixed; left: 12px; top: 92px; z-index: 30; width: 222px; padding: 8px 8px 10px; background: rgba(18, 20, 24, .92); }
.tree-legend .rpg-panel__title { margin: -2px -2px 6px; }
.tree-legend ul { list-style: none; margin: 0; padding: 0; }
.tree-legend button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; text-align: left; cursor: pointer;
  font: 700 14.5px/1.25 var(--font-ui); color: var(--text); background: transparent; border: 0; border-left: 3px solid var(--acc); }
.tree-legend button:hover { background: rgba(214, 163, 59, .14); color: #fff; }
.tree-legend li + li { margin-top: 4px; }
.lg-ic { width: 34px; height: 34px; flex: none; }
.tree-legend small { display: block; font: 400 11.5px var(--font-body); color: var(--text-faint); }
.legend-keys { margin-top: 8px; padding-top: 6px; border-top: 2px solid var(--ink); font-size: 12px; color: var(--text-dim); line-height: 1.9; }
.legend-keys i { display: inline-block; width: 22px; height: 5px; margin-right: 6px; vertical-align: middle; border: 1.5px solid #07080a; }
.legend-keys .k-lit { background: #e6ad44; }
.legend-keys .k-off { background: #3a4048; }
.legend-keys .k-cross { background: repeating-linear-gradient(90deg, #3fe0cc 0 3px, transparent 3px 7px); border: 0; }
.tree-tools { display: flex; gap: 6px; margin-top: 8px; }
.tree-tools .rpg-btn { flex: 1; }

/* 右侧：技能面板 */
.tree-drawer { position: fixed; right: 12px; top: 74px; bottom: calc(var(--hud-h) + 6px); z-index: 35; width: 360px; display: flex; flex-direction: column; background: rgba(20, 22, 27, .96); }
.tree-drawer__close { position: absolute; right: 6px; top: 4px; z-index: 2; width: 32px; height: 32px; border: 0; background: none; color: var(--text-dim); font: 400 22px/1 var(--font-body); cursor: pointer; }
.tree-drawer__close:hover { color: #fff; }
.tree-drawer__body { overflow: auto; padding: 12px 16px 16px; }
.sk-head { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 2px solid var(--ink); box-shadow: 0 1px 0 color-mix(in srgb, var(--acc) 50%, transparent); }
.sk-icon { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
.sk-aspect { margin: 0; font-size: 12.5px; color: var(--acc); letter-spacing: .08em; }
.sk-head h2 { margin: 0; font: 700 22px/1.3 var(--font-cn); color: var(--brass-hi); text-shadow: 0 2px 0 var(--ink); }
.sk-desc { margin: 10px 0; color: #e3d8c3; }
.sk-meta { color: var(--text-faint); font-size: 13px; }
.sk-h { margin: 14px 0 6px; font: 700 15px var(--font-ui); color: var(--brass-hi); letter-spacing: .06em; }
.sk-list, .sk-themes { list-style: none; margin: 0; padding: 0; }
.sk-list a, .sk-themes button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 6px; color: var(--text); text-align: left; background: none; border: 0; cursor: pointer; font: inherit; }
.sk-list a:hover, .sk-themes button:hover { background: rgba(214, 163, 59, .13); color: #fff; }
.sk-li-ic { width: 36px; height: 36px; flex: none; }
.sk-list b { display: block; font-weight: 500; line-height: 1.45; }
.sk-list small, .sk-themes small { color: var(--text-faint); font-size: 12px; }
.sk-themes span { flex: 1; font: 700 14.5px var(--font-ui); }
.sk-themes li.is-off { opacity: .6; }
.sk-work { display: flex; gap: 12px; align-items: center; margin: 10px 0; padding: 8px 10px; background: #15171b; }
.sk-item { width: 64px; height: 64px; flex: none; }
.sk-work b { display: block; font: 700 16px var(--font-ui); color: var(--unique); }
.sk-work span { display: block; font-size: 13px; color: var(--text-dim); }
.sk-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* 目录（替代原来的日志页） */
.tree-catalog { position: fixed; left: 50%; top: 80px; bottom: calc(var(--hud-h) + 6px); z-index: 36; transform: translateX(-50%); width: min(760px, calc(100vw - 24px)); display: flex; flex-direction: column; background: rgba(20, 22, 27, .97); }
.tree-catalog__body { overflow: auto; padding: 4px 20px 18px; columns: 2 300px; column-gap: 26px; }
.tree-catalog section { break-inside: avoid-column; margin-bottom: 12px; }
.tree-catalog h3 { margin: 12px 0 4px; font: 700 18px var(--font-cn); letter-spacing: .1em; text-shadow: 0 2px 0 var(--ink); }
.cat-theme { break-inside: avoid; margin: 6px 0 10px; }
.cat-theme button { padding: 0; border: 0; background: none; cursor: pointer; font: 700 15px var(--font-ui); color: var(--brass-hi); }
.cat-theme a { display: block; padding: 2px 0 2px 12px; color: var(--text); font-size: 14px; line-height: 1.55; border-left: 2px solid #3a4048; }
.cat-theme a:hover { color: #fff; border-left-color: var(--brass); }
.cat-theme a small { margin-left: 6px; color: var(--text-faint); font-size: 11.5px; }
.cat-theme a.cat-work { color: var(--unique); }

.tree-zoom { position: fixed; right: 18px; bottom: calc(var(--hud-h) + 12px); z-index: 30; display: flex; flex-direction: column; gap: 4px; }
.tree-zoom .rpg-btn { width: 44px; min-height: 40px; padding: 0; font-size: 20px; }
.tree-loading { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; font: 700 16px var(--font-ui); letter-spacing: .3em; color: var(--brass-hi); transition: opacity .5s; }
.tree-loading.is-done { opacity: 0; }
.mobile-catalog { display: none !important; position: fixed; right: 8px; top: 12px; z-index: 31; }

@media (max-width: 900px) {
  .tree-top { top: 66px; }
  .tree-top .rpg-plate { width: 250px; }
  .tree-search { left: 10px; right: 64px; top: auto; bottom: calc(var(--hud-h) + 10px); width: auto; }
  .tree-search small { position: absolute; right: 0; bottom: 100%; }
  .tree-legend { display: none; }
  .tree-drawer { left: 8px; right: 8px; width: auto; top: auto; height: 46vh; bottom: calc(var(--hud-h) + 4px); }
  .tree-catalog { top: 60px; }
  .tree-catalog__body { columns: 1; }
  .tree-zoom { right: 8px; bottom: calc(var(--hud-h) + 58px); }
  .tree-zoom .rpg-btn { width: 40px; min-height: 36px; }
  .mobile-catalog { display: inline-flex !important; }
}