.skill-tree-layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:22px;align-items:start}.tree-map{height:320px;position:relative;background:radial-gradient(ellipse at 54% 50%,#fff,#f3f8fa 75%);border:1px solid #e0eaf0;border-radius:20px;overflow:hidden}.tree-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.tree-lines path{stroke:#d4dfe5;stroke-width:3;fill:none;stroke-dasharray:5 5;transition:stroke .4s,stroke-dasharray .4s}.tree-lines path.lit{stroke:var(--branch);stroke-dasharray:none}.tree-root{position:absolute;left:3%;top:39%;width:12%;display:grid;place-items:center}.tree-root img{width:100%;height:56px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 6px 6px #203b6220)}.tree-root span{font-size:9px;color:#8f9fa9;white-space:nowrap;margin-top:7px}.tree-branch-label{position:absolute;left:19%;top:calc(7px + var(--row)*100px);color:var(--branch);font-size:11px;font-weight:700;letter-spacing:.2em}.tree-node{position:absolute;left:calc(20.7% + var(--col)*27.85%);top:calc(28px + var(--row)*100px);width:15.5%;padding:0;background:none;border:0;color:#455568;display:grid;justify-items:center;transition:transform .18s,color .2s;animation:tree-appear .35s calc(var(--i)*30ms) backwards}.node-orb{display:grid;place-items:center;width:57px;height:57px;border-radius:50%;border:2px solid #ccdae2;background:#fff;box-shadow:0 5px 12px #2349590c;position:relative;transition:background .22s,border-color .22s,box-shadow .22s,transform .22s}.node-orb img{width:31px;height:31px;object-fit:contain;image-rendering:pixelated;transition:filter .2s,transform .2s}.tree-node b{font-size:10px;line-height:1.4;margin-top:5px;white-space:nowrap;font-weight:650}.tree-node small{font-size:9px;color:#8b9aa7}.tree-node.owned .node-orb,.tree-node.maxed .node-orb{border-color:var(--branch);background:color-mix(in srgb,var(--branch) 10%,white)}.tree-node.available .node-orb{border-style:dashed}.tree-node.locked{color:#91a1ad}.tree-node.locked img{filter:grayscale(.8);opacity:.55}.tree-node i{position:absolute;bottom:-3px;right:-4px;display:grid;place-items:center;background:#657e8d;border:2px solid #fff;border-radius:50%;width:20px;height:20px;color:white}.tree-node.maxed i{background:var(--branch)}.tree-node svg{width:10px;height:10px}.tree-node.keystone .node-orb{border-radius:17px;transform:rotate(8deg)}.tree-node.keystone img{transform:rotate(-8deg)}.tree-node:hover{transform:translateY(-3px)}.tree-node:active{transform:translateY(0) scale(.95)}.tree-node[aria-pressed=true] .node-orb{border-color:var(--branch);box-shadow:0 0 0 5px color-mix(in srgb,var(--branch) 14%,transparent),0 6px 15px #29495b15}.tree-node:focus-visible{outline:0}.tree-node:focus-visible .node-orb{outline:2px solid #174c8d;outline-offset:6px}.tree-detail-wrap{overflow:hidden;transition:height .24s cubic-bezier(.2,.8,.2,1)}.tree-detail{border:1px solid #dce8ef;border-radius:18px;background:#fff;padding:18px;animation:detail-appear .22s both}.tree-detail-top{display:flex;justify-content:space-between;gap:5px;font-size:10px;color:var(--branch)}.tree-detail-top>b{font-size:9px;font-weight:500;background:#edf3f6;border-radius:7px;padding:2px 5px}.tree-detail-art{position:relative;display:grid;place-items:center;width:60px;height:60px;background:color-mix(in srgb,var(--branch) 10%,white);border-radius:18px;margin:17px 0 12px}.tree-detail-art>img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}.tree-detail-art svg{position:absolute;width:20px;height:20px;right:-6px;bottom:-3px;color:var(--branch)}.tree-detail h3{font-size:18px;margin:0 0 6px}.tree-level{font-size:11px;color:#91a1ac}.tree-detail .upgrade-dots{margin-top:9px}.tree-detail .filled{background:var(--branch)}.tree-detail p{font-size:12px;line-height:1.7;color:#657a87;margin:12px 0}.tree-value{display:grid;gap:7px;border-radius:9px;padding:10px;background:#f5f8fa;color:#8b9aa5;font-size:10px}.tree-value>span{display:flex;gap:8px;justify-content:space-between}.tree-value b{color:#3d6881;font-size:11px}.tree-requirements{padding:0;margin:13px 0;list-style:none;display:grid;gap:6px}.tree-requirements li{display:flex;gap:5px;align-items:center;font-size:10px;color:#98a6af}.tree-requirements b{margin-left:auto;font-size:9px}.tree-requirements svg{width:12px;height:12px}.tree-requirements .met{color:#388979}.tree-detail button{width:100%;border:0;background:#367d9d;box-shadow:0 3px 0 #235875;color:#fff;padding:11px 5px;border-radius:10px;font-size:12px;font-weight:700;transition:transform .15s,background .15s;cursor:pointer}.tree-detail button:hover{background:#428dac;transform:translateY(-1px)}.tree-detail button:active{transform:scale(.97)}.tree-detail button:disabled{cursor:default;background:#edf2f5;box-shadow:none;color:#92a2ae;transform:none}.tree-detail>small{display:block;text-align:center;font-size:9px;margin-top:10px;color:#92a2ac}.tree-node.just-unlocked .node-orb{animation:node-unlock .6s}.tree-node.just-bought .node-orb{animation:node-unlock .5s}.growth-body.settled .tree-node{animation:none}.tree-map:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#b5c9d845 1px,transparent 1px);background-size:14px 14px;pointer-events:none}.tree-intro>span{white-space:nowrap;font-variant-numeric:tabular-nums}
@keyframes tree-appear{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}@keyframes detail-appear{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:none}}@keyframes node-unlock{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--branch) 45%,transparent);scale:.9}55%{scale:1.09}100%{box-shadow:0 0 0 19px transparent;scale:1}}
@media(max-height:600px) and (orientation:landscape){.skill-tree-layout{grid-template-columns:minmax(0,1fr) 220px;gap:14px}.tree-detail{padding:12px}.tree-detail-art{width:39px;height:39px;float:left;margin:10px 10px 8px 0}.tree-detail-art img{width:29px;height:29px}.tree-detail h3{font-size:15px;margin-top:12px}.tree-detail p{clear:both;font-size:11px;margin:9px 0}.tree-detail .upgrade-dots{margin-top:16px}.tree-detail button{padding:8px}.tree-intro h3{font-size:14px}.tree-intro p{font-size:10px}.tree-intro>span{font-size:10px}.tree-map{height:300px}.tree-node{top:calc(27px + var(--row)*94px)}.tree-branch-label{top:calc(5px + var(--row)*94px)}.node-orb{width:49px;height:49px}.tree-node b{font-size:9px}.tree-node small{font-size:8px}.tree-node .node-orb img{width:28px;height:28px}}
@media(max-width:720px){.skill-tree-layout{grid-template-columns:minmax(300px,1fr) 200px;gap:10px}.tree-node b{font-size:8px}.node-orb{width:42px;height:42px}.tree-root span{font-size:8px}}
.reduce-motion .tree-node,.reduce-motion .tree-detail,.reduce-motion .node-orb{animation:none!important;transition:none!important}.reduce-motion .tree-detail-wrap{transition:none}
@media(max-height:500px) and (orientation:landscape){
 #growth-modal .growth-head{padding:6px 14px;gap:10px}#growth-modal .growth-naiwa{width:36px;height:38px}#growth-modal h2{font-size:17px}#growth-modal .growth-tabs{padding:4px 14px}#growth-modal .growth-tabs button{font-size:10px;padding:5px 12px}#growth-modal .growth-footer{padding:6px 14px}#growth-modal .growth-body{padding:8px 16px}.tree-intro{margin-bottom:6px}.tree-intro h3{font-size:11px;margin:0}.tree-intro p{display:none}.tree-intro>span{font-size:9px}.skill-tree-layout{grid-template-columns:minmax(290px,1fr) 210px;gap:12px}.tree-map{height:194px;border-radius:13px}.tree-node{top:calc(19px + var(--row)*60px)}.node-orb{width:34px;height:34px}.tree-node .node-orb img{width:26px;height:26px}.tree-node b{font-size:8px;margin-top:3px;line-height:1.3}.tree-node small{font-size:7px;line-height:1.3}.tree-node i{width:15px;height:15px;right:-3px;bottom:-2px;border-width:1px}.tree-node svg{width:8px;height:8px}.tree-branch-label{font-size:8px;top:calc(2px + var(--row)*60px)}.tree-root{top:36%;left:3%}.tree-root img{height:38px}.tree-root span{font-size:7px;margin-top:4px}.tree-detail{padding:9px;border-radius:12px}.tree-detail-art,.tree-detail .tree-level,.tree-detail .upgrade-dots,.tree-detail>small,.tree-detail .tree-open-note{display:none}.tree-detail-top{font-size:8px}.tree-detail-top>b{font-size:8px;padding:0 4px}.tree-detail h3{font-size:13px;margin:6px 0 3px}.tree-detail p{font-size:10px;line-height:1.45;margin:5px 0}.tree-value{font-size:8px;padding:5px;gap:3px}.tree-value b{font-size:9px}.tree-requirements{margin:6px 0;gap:3px}.tree-requirements li{font-size:8px}.tree-requirements b{font-size:8px}.tree-requirements svg{width:9px;height:9px}.tree-detail button{font-size:10px;padding:6px;margin-top:5px}.tree-node[aria-pressed=true] .node-orb{box-shadow:0 0 0 3px color-mix(in srgb,var(--branch) 14%,transparent)}.tree-detail-wrap{align-self:start}
}
@media(prefers-reduced-motion:reduce){.tree-node,.tree-detail,.node-orb{animation:none!important;transition:none!important}.tree-detail-wrap{transition:none}}
.tree-detail-wrap{position:relative}
@media(max-height:500px) and (orientation:landscape){.tree-map{height:186px}.tree-node{top:calc(15px + var(--row)*57px)}.tree-branch-label{top:calc(0px + var(--row)*57px)}.tree-lines{top:-4px}}