/* Original user artwork, complete fantasy trim, artifact-sized composition. */
@font-face{font-family:SkillSerifThai;src:url('../assets/ui/lobby-v3/fonts/NotoSerifThai.ttf') format('truetype');font-display:swap}
body #skills-dialog.skill-reference.sword-tree-reference{
 --st-gold:#ddb76a;--st-ivory:#fff0ce;--st-muted:#d0bddc;--st-panel:#17121f;
 width:min(1312px,calc(100vw - 40px),calc(100dvh + 192px));height:min(1080px,calc(100dvh - 40px));max-width:none;max-height:none;inset:0;margin:auto;padding:0;
 border:1px solid var(--st-gold);border-radius:0;background:#0b0810;color:var(--st-ivory);overflow:visible;
 font:15px/1.6 'Noto Sans Thai','Leelawadee UI',Tahoma,sans-serif;box-shadow:0 24px 72px #000d;
}
#skills-dialog.sword-tree-reference>:not(.sword-tree-shell){display:none!important}
#skills-dialog.sword-tree-reference::backdrop{background:#06050ce8}
.sword-tree-shell{position:relative;height:100%;width:100%;padding:12px;display:grid;grid-template-rows:68px minmax(0,1fr) 42px;isolation:isolate;border:3px double #836338;background:radial-gradient(ellipse at 70% 8%,#30213c 0,transparent 52%),#0b0810}
body #skills-dialog.skill-reference.sword-tree-reference{border:16px solid transparent!important;border-image:url('/assets/ui/player-modules/frame.svg') 70 fill /16px /0 stretch!important}
.st-title h2,.st-detail-titles h3{font-family:SkillSerifThai,'Noto Sans Thai',serif}
.st-ornament{display:none}
.sword-tree-shell *,.sword-tree-shell *::before,.sword-tree-shell *::after{box-sizing:border-box}
#skills-dialog.sword-tree-reference [hidden]{display:none!important}
#skills-dialog.sword-tree-reference :is(button,input){font:inherit;color:inherit}
#skills-dialog.sword-tree-reference button{cursor:pointer;touch-action:manipulation}
#skills-dialog.sword-tree-reference button:disabled{cursor:default}
#skills-dialog.sword-tree-reference button:focus-visible{outline:2px solid #fff3c5;outline-offset:3px}
.sword-tree-shell ::selection{background:#77499b;color:#fff3d7}
.sword-tree-shell *{scrollbar-width:thin;scrollbar-color:#b08b51 #17101f}
.st-ornament{position:absolute;width:34px;height:34px;z-index:8;pointer-events:none;border:2px solid #e6bd70;transform:rotate(45deg);background:#100915;box-shadow:inset 0 0 0 4px #704723}
.st-ornament::after{content:'';position:absolute;inset:7px;border:1px solid #ffe2a0;background:#4c176f}
.st-ornament-tl{left:-11px;top:-11px}.st-ornament-tr{right:-11px;top:-11px}.st-ornament-bl{left:-11px;bottom:-11px}.st-ornament-br{right:-11px;bottom:-11px}
.st-header{display:flex;align-items:center;gap:16px;padding:0 18px 10px;min-width:0;z-index:3;border-bottom:1px solid #b58b4e}
.st-title-crest{width:48px;height:48px;flex:none;fill:none;stroke:#efcb81;stroke-width:2;stroke-linejoin:round}
.st-title-crest path:first-child{fill:#42283c;stroke:#ffe3a4}
.st-title{flex:1;min-width:0}#skills-dialog.sword-tree-reference .st-title h2{margin:0!important;color:#ffe8b4;font-size:25px!important;font-weight:650;line-height:1.3!important}
.st-character{margin:3px 0 0;font-size:13px;color:#ddc9ab;line-height:1.5}
.st-draft-note{margin:0;padding:4px 14px;border:1px solid #795336;background:#1e1427;font-size:12px;color:#e4c488;white-space:nowrap;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
.st-close{display:grid;place-items:center;width:42px;height:42px;flex:none;padding:9px;border:1px solid #e0b36d;border-radius:0;background:#17101f;box-shadow:inset 0 0 0 3px #302031}
.st-close svg{width:24px;height:24px;fill:none;stroke:#ffe2aa;stroke-width:2}.st-close:hover{background:#45263b}
.st-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;padding:12px 0;min-width:0;min-height:0}
.st-wheel{position:relative;min-width:0;min-height:0;display:grid;place-items:center;container-type:size;background:#07060b;isolation:isolate;overflow:hidden;border:1px solid #6b4d2e}
.st-wheel::before,.st-wheel::after{content:'';position:absolute;left:10px;right:10px;height:1px;background:linear-gradient(90deg,transparent,#b68844,transparent);pointer-events:none}.st-wheel::before{top:6px}.st-wheel::after{bottom:6px}
.st-graph{position:relative;width:min(calc(100cqw - 112px),calc(100cqh - 78px));aspect-ratio:1;background:url('../assets/ui/skill-compass-v4/wheel.webp') center/100% 100% no-repeat;flex:none}
.st-links,.st-nodes,.st-branch-labels{position:absolute;inset:0;width:100%;height:100%}.st-links{z-index:1;pointer-events:none;visibility:hidden}
.st-branch-labels{z-index:5;pointer-events:none}.st-branch-label{position:absolute;transform:translate(-50%,-50%);margin:0;padding:3px 8px;width:max-content;color:var(--branch);font-size:18px;font-weight:650;line-height:1.4;text-align:center;white-space:nowrap;background:#07060b}
.st-branch-label::after{content:'';display:block;width:24px;height:1px;margin:4px auto 0;background:var(--branch);opacity:.7}
.st-nodes{z-index:2;pointer-events:none}.st-node{position:absolute;transform:translate(-50%,-50%);width:7.9745%;height:9.2504%;padding:0;border:0;background:none;color:var(--branch)!important;pointer-events:auto;isolation:isolate;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.st-hex{position:absolute;inset:0;display:block}.st-hex-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:none}
.st-hex-body{fill:#0a0610}.st-hex-ink{stroke:var(--branch);stroke-width:3}.st-hex-light{stroke:#ffe6b7;stroke-width:1;opacity:.8}.st-hex-gems{fill:#e2bd7b}
.st-node .st-hex-frame{opacity:0}.st-node :is(.st-hex-body,.st-hex-light,.st-hex-gems){display:none}
.st-node:hover .st-hex-frame,.st-node.selected .st-hex-frame,.st-node:focus-visible .st-hex-frame{opacity:1}
.st-node :is(.st-hex-ink){stroke:#fff2c6;stroke-width:3.5}
#skills-dialog.sword-tree-reference .st-node:focus-visible{outline:0}.st-node:focus-visible .st-hex-ink{stroke:#fff;stroke-width:5}
.st-basic{width:10%;height:10%;clip-path:none}.st-core{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#e6b659;stroke-width:1.2}
.st-basic .st-core{opacity:0}.st-basic.selected::after,.st-basic:hover::after,.st-basic:focus-visible::after{content:'';position:absolute;inset:0;border:1px solid #ffe6a2;border-radius:50%;pointer-events:none}
.st-basic-name{position:absolute;top:92%;left:50%;transform:translateX(-50%);padding:1px 7px;background:#0b0810d9;color:#ffe0a0;font-size:12px;line-height:1.5;white-space:nowrap}
.st-sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;background:radial-gradient(ellipse at 50% 0,#2a1a38 0,transparent 65%),#130e1b;border:1px solid #9e7440;overflow:auto}
.st-native{flex:none;padding:15px;border-bottom:1px solid #9e7440}.st-native h3{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:17px;font-weight:600;color:#f3d39a}.st-native h3::after{content:'';height:1px;flex:1;background:#806036}
.st-tabs{display:flex;gap:4px;margin:0 0 12px}.st-tabs button{flex:1;padding:5px;border:1px solid #68534b;border-radius:0;background:#1d1426;font-size:12px!important;line-height:1.5;min-height:30px;color:#e9ddc9!important}
.st-tabs button[aria-pressed="true"]{background:#46224f;border-color:#c69bdf;color:#fff0d1!important}.st-tabs button:hover{border-color:#ead3a3}
.st-native-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.st-native-skill{display:flex;align-items:center;gap:6px;min-width:0;min-height:62px;padding:7px 5px;border:1px solid #745839;border-radius:0;background:#1b1226;text-align:left}
.st-native-skill.selected{border-color:#f0c97c;background:#32203e}.st-native-skill:hover{border-color:#e2bb77}.st-native-skill.locked{background:#17121e}.st-native-skill.locked img{filter:grayscale(1) brightness(.7)}
.st-native-art{position:relative;display:block;width:34px;height:40px;flex:none;--branch:#d9b578}.st-native-art img,.st-detail-art img{position:absolute;inset:10%;width:80%;height:80%;object-fit:cover;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.st-native-art .st-hex-ink,.st-detail-art .st-hex-ink{stroke-width:2}.st-native-art .st-hex-light,.st-detail-art .st-hex-light{opacity:.3}.st-native-art .st-hex-body,.st-detail-art .st-hex-body{fill:none}
.st-native-text{min-width:0;display:block}.st-native-text strong{display:block;font-size:12px!important;font-weight:600;line-height:1.5;overflow-wrap:anywhere}.st-native-text small{display:block;margin-top:3px;font-size:11px!important;line-height:1.5;color:#dac9ae}.st-native-empty{grid-column:1/-1;margin:4px 0;font-size:13px;color:#dccbb6}
.st-detail{position:relative;display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;padding:22px 18px 18px;overflow:auto;color:#f3e7d2}
.st-detail-head{display:flex;align-items:center;gap:15px;flex:none;min-width:0;padding-bottom:18px;border-bottom:1px solid #8a613c}
.st-detail-art{position:relative;display:block;width:76px;height:88px;flex:none}.st-detail[data-kind="existing"] .st-detail-art{width:88px;height:102px}
.st-detail-titles{min-width:0;flex:1}.st-detail-titles h3{margin:0 0 7px;font-size:23px;line-height:1.4;font-weight:600;overflow-wrap:anywhere;color:#ffe5ae}
.st-branch-badge{display:inline-block;padding:2px 8px;border:1px solid #795044;background:#26182c;color:#dec6a0;font-size:12px;line-height:1.5}
.st-description{margin:0;font-size:14px;line-height:1.8;color:#e2d1b8;overflow-wrap:anywhere;flex:none}
.st-facts{margin:0;flex:none}.st-facts>div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid #493644;font-size:13px;line-height:1.5;min-height:40px}.st-facts dt{color:#dcc6a5}.st-facts dd{margin:0;text-align:right;color:#fff0c1;font-variant-numeric:tabular-nums}
.st-condition{margin:0;padding:10px 0;color:#d5c1dd;font-size:12px;line-height:1.7;flex:none}
.st-upgrade,.st-slot-action{display:block;width:100%;min-height:43px;padding:9px 12px;border:1px solid #b0864d;border-radius:0;background:#361a47;color:#ffe5bc!important;font-size:14px!important;line-height:1.5;flex:none;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.st-upgrade{margin-top:auto}.st-upgrade:disabled{background:#241b2e;border-color:#765847;color:#cbbbce!important}.st-slot-action{background:linear-gradient(#6c197b,#3b0d4d);border-color:#e3bd75;color:#fff0ca!important}.st-slot-action:hover{background:#7a278a}
.st-footer{display:flex;align-items:center;gap:12px;min-width:0;padding:8px 8px 0;border-top:1px solid #b58b4e;color:#d7c6ae;font-size:12px}.st-footer p{margin:0;color:#f0d8af;font-size:12px}.st-footer>span{flex:1;font-size:11px}.st-stats{padding:5px 12px;border:1px solid #ad8550;border-radius:0;background:#26182c;font-size:12px!important;white-space:nowrap}.st-footer kbd{font:inherit;font-size:12px;padding:2px 6px;border:1px solid #86714e;border-radius:0;background:#201324;color:#efdfc5}
@media(max-height:820px){.sword-tree-shell{grid-template-rows:60px minmax(0,1fr) 38px;padding:10px}.st-main{grid-template-columns:minmax(0,1fr) 300px;gap:10px;padding:10px 0}.st-title-crest{width:40px;height:40px}.st-header{padding:0 12px 8px;gap:12px}#skills-dialog.sword-tree-reference .st-title h2{font-size:23px!important}.st-draft-note{padding:3px 10px}.st-native{padding:12px}.st-native h3{font-size:16px;margin-bottom:8px}.st-tabs{margin-bottom:8px}.st-native-skill{min-height:58px;padding:5px}.st-native-art{width:30px;height:36px}.st-detail{padding:16px 14px;gap:12px}.st-detail-head{padding-bottom:12px}.st-detail-titles h3{font-size:21px}.st-detail[data-kind="existing"] .st-detail-art{width:66px;height:76px}.st-facts>div{padding:8px 0;min-height:34px}.st-description{font-size:13px}.st-condition{padding:3px 0}.st-branch-label{font-size:16px}.st-graph{width:min(calc(100cqw - 106px),calc(100cqh - 70px))}.st-footer>span{display:none}.st-footer p{flex:1}}
@media(max-width:980px){body #skills-dialog.skill-reference.sword-tree-reference{width:calc(100vw - 32px)}.st-main{grid-template-columns:minmax(0,1fr) 280px}.st-draft-note{display:none}.st-branch-label{font-size:15px}.st-native-text strong{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.sword-tree-shell *{animation:none!important;transition:none!important}}
/* Keep the actual native action visible, including short desktop windows. */
.st-graph{width:min(calc(100cqw - 124px),calc(100cqh - 78px))}
.st-native{display:grid;grid-template-columns:105px minmax(0,1fr);gap:10px 5px;padding:12px}
.st-native h3{margin:0;font-size:15px;white-space:nowrap}.st-native h3::after{display:none}
.st-tabs{margin:0}.st-tabs button{padding:4px 2px;font-size:11px!important;min-height:29px}
.st-native-list{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.st-native-skill{flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 2px;min-height:83px;text-align:center}
.st-native-art{width:31px;height:36px}.st-native-text strong{font-size:11px!important;line-height:1.5}.st-native-text small{font-size:10px!important;margin-top:1px;line-height:1.4}
.st-detail{gap:12px;padding:18px 16px}.st-detail-head{padding-bottom:13px}.st-detail[data-kind="existing"] .st-detail-art{width:72px;height:84px}
.st-detail[data-kind="existing"] .st-upgrade{display:none}.st-condition{padding:4px 0}.st-facts>div{padding:8px 0;min-height:34px}
@media(max-height:820px){.st-native{grid-template-columns:98px minmax(0,1fr);gap:8px 4px;padding:10px}.st-native h3{font-size:14px}.st-native-skill{min-height:75px;padding:3px 1px}.st-native-art{width:28px;height:32px}.st-native-text strong{font-size:10px!important}.st-detail{padding:12px;gap:8px}.st-detail-head{gap:10px;padding-bottom:9px}.st-detail[data-kind="existing"] .st-detail-art{width:52px;height:60px}.st-detail-titles h3{font-size:20px}.st-description{font-size:12px;line-height:1.7}.st-facts>div{padding:5px 0;min-height:29px;font-size:12px}.st-condition{font-size:11px;padding:2px 0}.st-slot-action,.st-upgrade{min-height:35px;padding:6px 9px;font-size:12px!important}.st-graph{width:min(calc(100cqw - 120px),calc(100cqh - 70px))}}