/* Native client assets and coordinates; scoped entirely to the left canvas. */
.client-canvas {padding:24px 12px 12px;min-height:0!important;}
.client-viewport {width:100%;max-width:540px;aspect-ratio:440/454;margin:0 auto;position:relative;}
.client-panel {position:absolute;width:440px;height:454px;transform-origin:top left;background:url('/source/skill-v6/panel.png') no-repeat;font-family:'Microsoft YaHei',sans-serif;}
.client-tabs {position:absolute;left:21px;top:35px;display:flex;gap:6px;z-index:5;}
.client-tabs button {width:54px;height:43px;border:0;padding:0;background-color:transparent;background-repeat:no-repeat;cursor:pointer;}
.client-tabs button:hover {filter:brightness(1.08);}
.client-tabs button:focus-visible {outline:2px solid #39baca;border-radius:5px;}
.client-sp {position:absolute;left:365px;top:46px;width:40px;text-align:center;font-size:11px;color:#5d4939;}
.client-title {position:absolute;left:25px;top:92px;color:#fff;font-size:11px;font-weight:bold;}
.client-title span {font-size:10px;font-weight:normal;margin-left:6px;}
.client-stage {position:absolute;inset:0;}
.client-tree-bg {position:absolute;background-repeat:no-repeat;pointer-events:none;}
.client-connectors {position:absolute;inset:0;width:440px;height:454px;pointer-events:none;}
.client-connectors path {fill:none;stroke:#9e8d7e;stroke-width:4;stroke-linejoin:miter;stroke-linecap:butt;shape-rendering:crispEdges;}
.client-node {position:absolute;width:34px;height:34px;padding:1px;cursor:pointer;z-index:3;background:url('/source/skill-v6/skilltree_slot.png') no-repeat;background-size:34px 34px;}
.client-node .skill_treeicon {float:none;display:inline-block;}
.client-node.is-locked .skill_treeicon {filter:grayscale(1) brightness(.65);}
.client-node.is-learned .skill_treeicon {filter:none;}
.client-node:hover {outline:2px solid #e7ba73;outline-offset:1px;border-radius:2px;}
.client-node .skill_treeicon:focus-visible {outline:2px solid #39baca;}
.client-level {position:absolute;right:-3px;bottom:-5px;min-width:20px;line-height:10px;padding:1px 2px;border:1px solid #927a5d;background:#fff3d6;color:#614d34;font-size:8px;text-align:center;border-radius:1px;pointer-events:none;}
.client-actions {position:absolute;top:422px;left:129px;display:flex;gap:7px;z-index:5;}
.client-actions button {width:86px;height:30px;border:0;padding:0;background:url('/source/skill-v6/skilltree_bg_New.png') no-repeat -455px -27px;color:#fff;font-size:11px;font-weight:bold;text-shadow:0 1px 2px #234054;cursor:pointer;}
.client-actions button:active {background-position:-455px -62px;}
.client-empty {position:absolute;left:30px;right:30px;top:195px;text-align:center;font-size:12px;color:#806c59;}
.client-help {margin-top:14px;text-align:center;color:#887a6b;font-size:11px;}