/* Game-inspired presentation. The planner's layout and interactions stay intact. */
html,body{background:#07101d!important}.bg-layer{opacity:.2}.bg-gradient-1{background:#081220!important}
#pf-storm,#pf-energy{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#pf-storm{z-index:0;opacity:.85}#pf-energy{z-index:4}
.stage{background:transparent!important}.tree-title .heading{font-family:'Exo 2',sans-serif!important;font-size:26px!important;font-weight:900;letter-spacing:.07em!important;color:#edf4ff!important;text-shadow:0 2px 0 #000,0 0 10px #a9c9ec55!important}
.tree-title .line{opacity:.15}.panel,.essence-panel,.ctr-stat-box{background:linear-gradient(135deg,#08121bd9,#060d15c9)!important;border-radius:3px!important;border-color:#8eb1d030!important;box-shadow:0 0 0 1px #0008,inset 0 1px #c4e4ff0a!important;backdrop-filter:blur(5px)}
.panel-title,.essence-title{font-family:'Exo 2',sans-serif!important;font-weight:800;letter-spacing:.05em!important}.level-num{text-shadow:0 2px #000,0 0 14px #95cdff77!important}
.panel-sub,.lbl{letter-spacing:.06em!important}.ctr-stat-box{border-radius:3px!important}.ctr-stat-lbl{letter-spacing:.04em!important}
.skill-node{width:17px!important;height:17px!important;border:1px solid rgba(var(--sc),.6)!important;background:radial-gradient(circle,rgba(var(--sc),.92) 0 22%,#162336 35%,#03070d 70%)!important;box-shadow:0 0 7px rgba(var(--sc),.22)!important;overflow:visible!important;contain:none!important}
.skill-node.locked{background:radial-gradient(circle,rgba(var(--sc),.8) 0 22%,#1c2232 34%,#050b13 70%)!important;border-color:rgba(var(--sc),.35)!important;opacity:.8}
.skill-node.available{background:radial-gradient(circle,#ffe7fb 0 15%,rgba(var(--sc),1) 30%,#271e36 65%)!important;border-color:rgba(var(--sc),.9)!important;box-shadow:0 0 9px rgba(var(--sc),.45)!important}
.skill-node.unlocked,.skill-node.maxed{background:radial-gradient(circle,#fff 0 18%,#ffe9ff 22%,rgba(var(--sc),1) 43%,rgba(var(--sc),.35) 70%)!important;border-color:#f4e6ff!important;box-shadow:0 0 6px #fff6,0 0 15px rgba(var(--sc),.8),0 0 28px rgba(var(--sc),.25)!important}
.skill-node.selected{outline:1px solid #ebf5ff!important;outline-offset:7px;box-shadow:0 0 22px rgba(var(--sc),.6)!important}
.lock-icon,.skill-node .node-level{display:none!important}
.pf-node-label{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;font-family:'Exo 2',sans-serif;font-weight:600;font-size:10px;line-height:1.15;letter-spacing:.025em;color:rgba(var(--sc),.8);text-shadow:0 1px 2px #000,0 0 5px #000;opacity:.9}
.pf-node-rank{position:absolute;pointer-events:none;top:8px;left:50%;transform:translateX(-50%) rotate(9deg);font:italic 700 24px Georgia,serif;color:#f8f7ff;text-shadow:2px 2px #050509,-2px -1px #050509,0 0 6px #f5d9ff;z-index:4}
.skill-node.unlocked .pf-node-label{top:calc(100% + 20px);color:rgba(var(--sc),1)}
.skill-node[data-pf-passive=true]{width:16px!important;height:16px!important;background:transparent!important;border:0!important;box-shadow:none!important}
.skill-node[data-pf-passive=true]:before{content:'';display:block;position:absolute;inset:0;background:rgba(var(--sc),.8);clip-path:polygon(50% 0,58% 25%,75% 7%,73% 33%,97% 25%,81% 45%,100% 50%,77% 59%,94% 78%,69% 73%,75% 98%,55% 80%,50% 100%,43% 77%,23% 96%,28% 72%,4% 78%,22% 57%,0 50%,23% 42%,7% 22%,31% 28%,24% 4%,44% 25%);filter:drop-shadow(0 0 4px rgba(var(--sc),.7))}
.skill-node[data-pf-passive=true] .pf-node-label{display:none}.skill-node[data-pf-passive=true]:hover .pf-node-label{display:block}
.skill-node.ultimate,.skill-node.special{width:34px!important;height:34px!important;background:radial-gradient(circle,#fff6fd 0%,rgba(var(--sc),.95) 12%,rgba(var(--sc),.15) 45%,transparent 70%)!important;border:0!important;filter:none!important;box-shadow:0 0 15px rgba(var(--sc),.45),0 0 38px rgba(var(--sc),.15)!important;animation:pf-orb-breathe 3.8s ease-in-out infinite}
.skill-node.ultimate:before,.skill-node.special:before{content:'';display:block!important;position:absolute;inset:-7px;border:1px solid rgba(var(--sc),.75);border-radius:43% 57% 49% 51%;background:transparent!important;filter:drop-shadow(0 0 3px rgba(var(--sc),1))!important;animation:pf-orbit 6s linear infinite}
.skill-node.ultimate:after,.skill-node.special:after{content:'';display:block!important;position:absolute;inset:-13px;border:1px dashed rgba(var(--sc),.55);border-radius:56% 44% 62% 38%;background:transparent!important;filter:none!important;animation:pf-orbit 9s linear infinite reverse}
.core{background:radial-gradient(circle,#fff 0 5%,#dff7ff 10%,#8edbff88 25%,#73b7ff22 55%,transparent 70%)!important;filter:none!important;animation:pf-core-light 4s ease-in-out infinite!important}
.spoke-label{font-family:'Exo 2',sans-serif!important;font-size:12px!important;text-transform:none!important;letter-spacing:.02em!important;text-shadow:0 2px #000!important;opacity:1;filter:none!important}
#lines line{opacity:.65;stroke-width:1.3!important}#tree-svg>circle[fill="none"]{opacity:.25}#tree-inner:before{opacity:.5}
#sel-panel{background:#050b13e8!important}.pf-record-stats{background:#060d1600}.sk-name{font-family:'Exo 2',sans-serif!important;font-weight:800}.sk-upgrade-note{background:#15251d90!important;border-color:#9fca9f35!important;color:#a5dca7!important}
.hud{z-index:20!important}.tree-title,#skill-search-wrap,.hud-bc{z-index:21!important}
@keyframes pf-orbit{to{transform:rotate(360deg)}}@keyframes pf-orb-breathe{0%,100%{opacity:.8}50%{opacity:1}}@keyframes pf-core-light{0%,100%{opacity:.8;scale:.95}50%{opacity:1;scale:1.04}}
@media(max-width:768px){.pf-node-label{font-size:9px}.skill-node.ultimate:after,.skill-node.special:after{animation:none}#pf-storm{opacity:.7}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Close reference pass: fine luminous geometry over streaked blue-gray vapor. */
.bg-layer{display:none!important}
#pf-storm{position:fixed;inset:-3%;width:106%;height:106%;opacity:1;background:#122034 url('/assets/game-clouds.webp') center/cover;z-index:0;animation:pf-cloud-drift 80s linear infinite alternate}
#pf-storm:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 65% 50%,transparent 15%,#01081555 100%)}
#pf-energy{position:absolute!important;inset:0!important;width:3200px!important;height:3200px!important;z-index:2;overflow:visible;pointer-events:none;contain:layout style}
#tree-inner:before{display:none!important}.core{background:transparent!important;animation:none!important;box-shadow:none!important}
.pf-core-filament{transform-origin:0 0;animation:pf-filament var(--duration) linear infinite;filter:drop-shadow(0 0 3px #83d4ff)}
.pf-core-heart{filter:blur(5px);animation:pf-heart 2s ease-in-out infinite alternate}
.pf-core-spark,.pf-node-spark{animation:pf-spark 1.7s ease-in-out infinite alternate}
.pf-path-sparks{animation:pf-flow 3s linear infinite}
.pf-learned-energy{filter:drop-shadow(0 0 3px #f6bbec)}
.skill-node{--pf-color:var(--sc);width:12px!important;height:12px!important;border:0!important;border-radius:50%!important;background:radial-gradient(circle,#ffc0da 0 12%,rgb(var(--pf-color)) 25%,rgba(var(--pf-color),.25) 45%,transparent 72%)!important;box-shadow:none!important;transition:none!important;opacity:1!important}
.skill-node.locked{background:radial-gradient(circle,#dba0b7 0 10%,rgba(var(--pf-color),.95) 26%,rgba(var(--pf-color),.22) 44%,transparent 72%)!important;border:0!important;opacity:.86!important}
.skill-node.available{background:radial-gradient(circle,#ffe1f1 0 14%,rgb(var(--pf-color)) 29%,rgba(var(--pf-color),.3) 47%,transparent 72%)!important;box-shadow:0 0 5px rgba(var(--pf-color),.45)!important}
.skill-node.unlocked,.skill-node.maxed{background:radial-gradient(circle,#fff 0 20%,#fff1fa 25%,rgb(var(--pf-color)) 43%,rgba(var(--pf-color),.25) 62%,transparent 75%)!important;box-shadow:0 0 5px #fff9,0 0 12px rgba(var(--pf-color),.75)!important;border:0!important}
.skill-node.selected{outline:1px solid #fff9!important;outline-offset:3px;box-shadow:0 0 9px rgba(var(--pf-color),.8)!important}
.skill-node:hover{transform:translate(-50%,-50%)!important}
.skill-node .pf-node-label{top:calc(100% + 3px)!important;font:500 10px/1.1 'Exo 2',sans-serif;letter-spacing:0;color:rgb(var(--pf-color));opacity:.85;text-shadow:0 1px 2px #070914}
.skill-node[data-pf-learned=true] .pf-node-label{top:calc(100% + 19px)!important}
.pf-node-rank{top:8px!important;font:italic 700 23px/1 Georgia,serif!important;color:#fff!important;-webkit-text-stroke:1px #101016;paint-order:stroke fill;text-shadow:1px 2px #000}
.skill-node[data-pf-passive=true]{width:14px!important;height:14px!important;background:transparent!important;border:0!important;box-shadow:none!important}
.skill-node[data-pf-passive=true]:before{inset:1px;background:rgb(var(--pf-color));clip-path:polygon(50% 0,58% 31%,85% 10%,69% 40%,100% 50%,69% 59%,86% 87%,57% 69%,50% 100%,41% 70%,12% 88%,31% 59%,0 50%,31% 41%,13% 13%,41% 30%);filter:none!important}
.skill-node[data-pf-passive=true] .pf-node-label{display:none!important}
.skill-node.ultimate,.skill-node.special{width:24px!important;height:24px!important;background:radial-gradient(ellipse,#ffe6ff 0 6%,rgb(var(--pf-color)) 18%,rgba(var(--pf-color),.3) 35%,transparent 70%)!important;box-shadow:0 0 11px rgba(var(--pf-color),.45)!important;animation:pf-heart 2.3s ease-in-out infinite alternate}
.skill-node.ultimate:before,.skill-node.special:before{inset:7px -13px!important;height:5px!important;background:linear-gradient(90deg,transparent,rgba(var(--pf-color),.8),#ffe2ff,rgba(var(--pf-color),.8),transparent)!important;border:0!important;border-radius:50%!important;animation:none!important;filter:blur(1px)!important;clip-path:none!important}
.skill-node.ultimate:after,.skill-node.special:after{inset:-5px 5px!important;border:1px solid rgba(var(--pf-color),.6)!important;border-radius:50%!important;animation:pf-orbit 4s linear infinite!important;opacity:.8!important}
#lines line{stroke-width:.8!important;opacity:.23!important}#lines line.pf-line-lit{opacity:.9!important;stroke:rgb(var(--pf-line-color))!important}
.spoke-label{font:600 13px/1 'Exo 2',sans-serif!important;color:#cde8ff!important;text-shadow:0 1px 2px #000!important;letter-spacing:0!important}
.tree-title .heading{font-family:Impact,'Arial Black',sans-serif!important;letter-spacing:.03em!important;font-size:26px!important;-webkit-text-stroke:.7px #06101b;paint-order:stroke fill;text-shadow:0 2px #000!important}
.panel,.essence-panel,.ctr-stat-box{background:#030a1399!important;border:1px solid #acbfd525!important;border-radius:0!important;backdrop-filter:none!important;box-shadow:none!important}
.panel .corner{display:none}.panel-title{color:#e7edf1!important}.panel-sub{color:#a9b6c4!important}.level-num{font-family:'Exo 2',sans-serif!important;font-size:32px!important;text-shadow:0 2px #000!important;color:#e2dca0!important}
.diamond-wrap{filter:none!important;isolation:isolate}
.diamond-wrap svg{z-index:1;background:linear-gradient(135deg,#07090de8,#111319dd);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.diamond-wrap svg>polygon:not(#attr-poly){fill:#0a0c11!important;stroke:#000!important;stroke-width:2!important}
#attr-poly{fill:#8ed8ff!important;stroke:#a9e7ff!important;stroke-width:.6!important;filter:none!important}
.pf-stat-aura{display:none;position:absolute;width:85px;height:85px;pointer-events:none;z-index:0;border-radius:50%;background:radial-gradient(ellipse,#f9acff88 0,#cd29e35e 20%,#ad18ec22 45%,transparent 70%);filter:blur(2px)}
.pf-stat-aura.active{display:block;animation:pf-stat-flame 2s ease-in-out infinite alternate}
.pf-stat-kido{right:-30px;top:calc(50% - 42px);opacity:var(--kido-energy)}.pf-stat-strength{left:-30px;top:calc(50% - 42px);opacity:var(--strength-energy)}.pf-stat-speed{top:-30px;left:calc(50% - 42px);opacity:var(--speed-energy)}.pf-stat-hakuda{bottom:-30px;left:calc(50% - 42px);opacity:var(--hakuda-energy)}
.pf-stat-aura:before,.pf-stat-aura:after{content:'';position:absolute;inset:15% 30%;border-radius:40% 60% 50% 40%;border-left:2px solid #f6b9ff99;border-right:1px solid #ed9bff66;transform:rotate(20deg);animation:pf-stat-flame 1.3s ease-in-out infinite alternate-reverse}.pf-stat-aura:after{inset:20% 18%;transform:rotate(-25deg)}
#skill-tooltip,#bp-tip{animation:none!important;transition:none!important;backdrop-filter:none!important;border-radius:0!important;background:#02080edb!important;border:1px solid #9eacbb55!important;box-shadow:none!important;will-change:left,top}
#skill-tooltip{padding:8px 10px!important}.tt-section{font-size:10px!important}.tt-divider{margin:5px 0!important}.tt-title{font-size:12px!important}
@keyframes pf-cloud-drift{to{transform:translateX(-2%)}}
@keyframes pf-filament{from{transform:rotate(var(--tilt))}to{transform:rotate(calc(var(--tilt) + var(--turn)*360deg))}}
@keyframes pf-heart{from{opacity:.7}to{opacity:1}}
@keyframes pf-spark{0%,15%{opacity:.1}65%,100%{opacity:1}}
@keyframes pf-flow{to{stroke-dashoffset:-74}}
@keyframes pf-stat-flame{from{transform:translateY(3px) scale(.9,.94)}to{transform:translateY(-3px) scale(1.08,1.15)}}
@media(prefers-reduced-motion:reduce){#pf-storm,.pf-core-filament,.pf-core-heart,.pf-core-spark,.pf-node-spark,.pf-path-sparks,.pf-stat-aura,.pf-stat-aura:before,.pf-stat-aura:after{animation:none!important}}