.growth-dialog .skill-viewport{display:block;position:relative;overflow:hidden;touch-action:none;cursor:grab;min-height:230px;background:radial-gradient(ellipse at 35% 40%,#30403250,transparent 65%),#0c1713}
.growth-dialog .skill-viewport.dragging{cursor:grabbing;user-select:none}
.growth-dialog .skill-frame{position:absolute;inset:0;width:100%;height:100%;margin:0}
.growth-dialog .skill-tree{position:absolute;top:0;left:0;margin:0;transform-origin:0 0;will-change:transform}
.skill-tree .tree-lines{top:0;left:0;position:absolute;pointer-events:none;overflow:visible}
.skill-tree .tree-lines path{fill:none;stroke:#445440;stroke-width:2;stroke-dasharray:5 5}
.skill-tree .tree-lines .lit{stroke:#b7c78a;stroke-dasharray:none}
.skill-tree .growth-node{width:66px;height:66px;top:var(--node-y);border-radius:50%;z-index:2}
.skill-tree .growth-node.active,.skill-tree .growth-node.normal{width:80px;height:80px;border-radius:10px}
.skill-tree .growth-node.enhancement{border-color:#688e91}
.skill-tree .growth-node.enhancement>small{width:138px}
.skill-tree .growth-node.passive{width:58px;height:58px;border-radius:50%;border-color:#758156}
.skill-tree .growth-node.learned{border-color:#d8be81;box-shadow:0 0 24px #dfb95b30}
.skill-tree .growth-node.selected{outline:2px solid #f5e1a5;outline-offset:5px}
.skill-tree .growth-node.locked{opacity:.7}
.skill-tree .growth-node.locked .node-art{opacity:.8;filter:grayscale(.65)}
.skill-tree .growth-node.locked .node-art img{opacity:1;filter:none}
.skill-tree .growth-node.locked>small{color:#96a88c}
.skill-tree .growth-node .node-art img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;mix-blend-mode:normal}
.skill-tree .growth-node>small{top:calc(100% + 27px);bottom:auto;font-size:var(--tree-label-size,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;line-height:1.4;color:#d8dcc3;width:170px;left:50%;transform:translateX(-50%)}
.skill-tree .rank-pips{position:absolute;top:calc(100% + 9px);display:flex;gap:4px;left:50%;transform:translateX(-50%)}
.rank-pips i{width:7px;height:4px;background:#44513d;border-radius:1px}.rank-pips .on{background:#f1cb79;box-shadow:0 0 5px #f1b64460}
.unlock-tag{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);font-size:var(--tree-unlock-size,10px);color:#bac5a6;white-space:nowrap}
.skill-tree .growth-node.active .unlock-tag,.skill-tree .growth-node.normal .unlock-tag{display:none}
.skill-tree .growth-node.enhancement .unlock-tag,.skill-tree .growth-node.passive .unlock-tag{top:calc(100% + 65px);bottom:auto}
.level-column{position:absolute;top:18px;bottom:25px;width:1px;background:linear-gradient(#53613b75,#53613b20);pointer-events:none}.level-column>b{position:absolute;left:0;transform:translateX(-50%);top:0;color:#788674;font:14px Georgia,serif;background:#0c1713;padding:6px 14px;white-space:nowrap}.level-column.unlocked>b{color:#e1c995}
.tree-navigation{display:flex;align-items:center;justify-content:space-between;padding:13px 26px 8px;gap:12px;color:#99ac91;font-size:10px;flex-shrink:0}
.tree-navigation>span{display:flex;align-items:center;gap:7px}.tree-navigation i{width:7px;height:7px;border:1px solid;border-radius:2px;margin-left:5px}.active-key{color:#dfbe73}.enhance-key{color:#86b4b9}.passive-key{color:#9dae73}
.tree-navigation>div{display:flex;align-items:center;gap:6px}.tree-navigation button{border:1px solid #46543c;border-radius:4px;min-width:27px;height:27px;font-size:12px;color:#d9d6af;background:#1c2a20;cursor:pointer}.tree-navigation output{width:42px;text-align:center;font-variant-numeric:tabular-nums}
.tree-gesture-hint{position:absolute;bottom:10px;right:16px;color:#778a75;font-size:10px;pointer-events:none}.motion-link{font-size:10px;color:#edce8a;margin-left:15px;text-decoration:none}.motion-link:hover{text-decoration:underline}
.skill-level-actions{display:flex;align-items:stretch;gap:6px}
.skill-level-actions .node-buy{flex:1;min-width:0;width:auto}
.node-decrease{display:grid;place-items:center;flex:0 0 37px;min-height:37px;border:1px solid #877346;border-radius:3px;background:#302e1d;color:#edce8a;font-size:22px;line-height:1;cursor:pointer}
.node-decrease:hover:not(:disabled){border-color:#edce8a;background:#494023;box-shadow:0 0 14px #edce8a25}
.node-decrease:focus-visible{outline:2px solid #f5e1a5;outline-offset:3px}
.node-decrease:disabled{opacity:.4;border-color:#4a563b;background:#20301e;color:#93a27b;cursor:default}
@media(max-width:580px){.skill-level-actions{flex:1;max-width:240px}.skill-level-actions .node-buy{min-width:0}}
@media(max-width:580px){.tree-navigation{padding:10px 12px;font-size:9px}.tree-navigation>span{gap:3px}.tree-navigation>div{gap:3px}.tree-navigation output{width:32px}.skill-tree .growth-node>small{font-size:12px}.growth-dialog .skill-viewport{min-height:220px}}
@media(max-width:380px){.tree-navigation{flex-wrap:wrap}.tree-navigation>span{white-space:nowrap}.tree-navigation>div{margin-left:auto}}
@media(max-width:580px) and (max-height:780px){.growth-dialog .skill-viewport{min-height:180px}}