/* User-pinned fantasy skill tree: live four-skill catalog and original automatic unlocks. */
body #skills-dialog.skill-reference{--sk-u:min(1px,calc(100vw / 1672),calc(100dvh / 941));position:fixed;inset:0;box-sizing:border-box;margin:auto;width:min(1672px,100vw,calc(100dvh * 1.776833));height:min(941px,100dvh,calc(100vw / 1.776833));max-width:none;max-height:none;padding:0;overflow:hidden;border:0;border-radius:0;outline:none;background:#0e0c1a url('../assets/ui/skill-reference-v1/world.webp') center/100% 100% no-repeat;color:#f9f3ff;box-shadow:0 18px 70px #000a;font-family:'Noto Sans Thai',sans-serif;zoom:1}
#skills-dialog.skill-reference::backdrop{background:#080610bb;backdrop-filter:blur(3px)}
#skills-dialog.skill-reference .skill-reference-source{display:none}
#skills-dialog.skill-reference button{font:inherit;color:#fff5fc;cursor:pointer;touch-action:manipulation}
#skills-dialog.skill-reference button:focus-visible{outline:2px solid #fff0b5;outline-offset:4px}
#skills-dialog.skill-reference button:disabled{cursor:default}
#skills-dialog.skill-reference .skill-reference-heading{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:calc(23 * var(--sk-u));height:calc(82 * var(--sk-u));box-sizing:border-box;padding:calc(7 * var(--sk-u)) calc(20 * var(--sk-u));z-index:2}
#skills-dialog.skill-reference .skill-reference-brand .adventure-icon{width:calc(87 * var(--sk-u));height:calc(69 * var(--sk-u));stroke:#ffe2a0;fill:none;stroke-width:1.3;filter:drop-shadow(0 3px 2px #6e310e)}
#skills-dialog.skill-reference .skill-reference-title{flex:1;min-width:0}
#skills-dialog.skill-reference h2{font-size:calc(39 * var(--sk-u) * var(--ui-zoom,1));line-height:1.35;font-weight:600;margin:0;color:#fff1b9}
#skills-dialog.skill-reference .skill-reference-character{font-size:calc(20 * var(--sk-u) * var(--ui-zoom,1));line-height:1.3;margin:0;color:#fcf5ff}
#skills-dialog.skill-reference .skills-close{width:max(44px,calc(56 * var(--sk-u)));height:max(44px,calc(56 * var(--sk-u)));flex:none;border-radius:5px;border:1px solid #fce099;background:#10111c;color:#ffe4a9;box-shadow:inset 0 0 0 3px #504533}
#skills-dialog.skill-reference .skills-close .adventure-icon{width:calc(39 * var(--sk-u));height:calc(39 * var(--sk-u));stroke-width:1.5}
#skills-dialog.skill-reference .skill-reference-unlocked{padding:calc(9 * var(--sk-u)) calc(30 * var(--sk-u));border:1px solid #f6ce74;border-radius:5px;background:#290337;font-size:calc(22 * var(--sk-u) * var(--ui-zoom,1));line-height:1.4;white-space:nowrap;color:#f5e5ff;box-shadow:inset 0 0 16px #76238080}
#skills-dialog.skill-reference .skill-reference-tabs{position:absolute;left:calc(27 * var(--sk-u));top:calc(93 * var(--sk-u));display:flex;gap:calc(9 * var(--sk-u));z-index:2}
#skills-dialog.skill-reference .skill-reference-tab{width:calc(220 * var(--sk-u));height:max(44px,calc(41 * var(--sk-u)));min-width:44px;border:1px solid #6d527c;border-radius:4px;background:#12101f;color:#ebdff8;font-size:calc(22 * var(--sk-u) * var(--ui-zoom,1));font-weight:500}
#skills-dialog.skill-reference .skill-reference-tab.active{border:2px solid #ffc0e3;background:#5d063b;box-shadow:inset 0 0 14px #e329a68c,0 0 6px #ff62c5;color:#fff1fa}
#skills-dialog.skill-reference .skill-reference-tree{position:absolute;inset:0 26.92% 0 0}
#skills-dialog.skill-reference .skill-reference-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#ffe19e;stroke-width:2;filter:drop-shadow(0 0 3px #dc9833)}
#skills-dialog.skill-reference .skill-reference-lines g{fill:#251729;stroke:#ffe0a0;stroke-width:2}
#skills-dialog.skill-reference .skill-reference-root{position:absolute;left:53.69%;top:calc(108 * var(--sk-u));transform:translateX(-50%);width:calc(145 * var(--sk-u));height:calc(150 * var(--sk-u));display:flex;flex-direction:column;align-items:center;justify-content:center}
#skills-dialog.skill-reference .skill-reference-root .adventure-icon{width:calc(121 * var(--sk-u));height:calc(124 * var(--sk-u));padding:calc(14 * var(--sk-u));border:2px solid #edc575;border-radius:50%;stroke:#ffe4a4;fill:none;stroke-width:1;box-sizing:border-box;background:#0c0d1fc4;box-shadow:inset 0 0 0 6px #342239,0 0 18px #ad6f3640;filter:drop-shadow(0 3px 4px #000a)}
#skills-dialog.skill-reference .skill-reference-root strong{position:absolute;bottom:calc(-6 * var(--sk-u));min-width:calc(135 * var(--sk-u));text-align:center;padding:calc(3 * var(--sk-u)) calc(12 * var(--sk-u));border:1px solid #e4b960;border-radius:4px;background:#110f1b;color:#fff1b4;font-size:calc(24 * var(--sk-u) * var(--ui-zoom,1));font-weight:600;white-space:nowrap}
#skills-dialog.skill-reference .skill-reference-branch{position:absolute;top:calc(281 * var(--sk-u));width:calc(190 * var(--sk-u));display:flex;align-items:center;flex-direction:column;transform:translateX(-50%)}
#skills-dialog.skill-reference .skill-reference-branch.attack{left:25.82%}
#skills-dialog.skill-reference .skill-reference-branch.movement{left:53.69%}
#skills-dialog.skill-reference .skill-reference-branch.buff{left:80.32%}
#skills-dialog.skill-reference .skill-reference-branch .adventure-icon{width:calc(52 * var(--sk-u));height:calc(52 * var(--sk-u));fill:none;stroke:#ffe7a4;stroke-width:1.5;background:#291c29;border:1px solid #dcbd73;border-radius:50%;padding:calc(6 * var(--sk-u));box-sizing:border-box}
#skills-dialog.skill-reference .skill-reference-branch strong{position:relative;top:calc(-10 * var(--sk-u));width:100%;border:1px solid #d3a350;border-radius:3px;background:#321020;text-align:center;font-size:calc(24 * var(--sk-u) * var(--ui-zoom,1));font-weight:500;line-height:1.5;color:#fff2b0}
#skills-dialog.skill-reference .skill-reference-branch.movement strong{background:#101b42}
#skills-dialog.skill-reference .skill-reference-branch.buff strong{background:#372505}
#skills-dialog.skill-reference .skill-reference-node{position:absolute;top:calc(419 * var(--sk-u));width:calc(156 * var(--sk-u));transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:calc(7 * var(--sk-u));padding:0;border:0;background:transparent;text-align:center}
#skills-dialog.skill-reference .skill-reference-node.node-0{left:18.61%}
#skills-dialog.skill-reference .skill-reference-node.node-1{left:32.62%}
#skills-dialog.skill-reference .skill-reference-node.node-2{left:53.69%}
#skills-dialog.skill-reference .skill-reference-node.node-3{left:80.32%}
#skills-dialog.skill-reference .skill-reference-picture{position:relative;width:calc(111 * var(--sk-u));height:calc(108 * var(--sk-u));border:2px solid #f5d28f;border-radius:3px;background:#101020;box-shadow:inset 0 0 0 2px #775937,0 4px 8px #000b;box-sizing:border-box}
#skills-dialog.skill-reference .skill-reference-picture img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
#skills-dialog.skill-reference .skill-reference-node.selected .skill-reference-picture{border-color:#ffe7b1;box-shadow:0 0 0 3px #ef328e,0 0 22px #ff00b5a1,0 4px 8px #000a}
#skills-dialog.skill-reference .skill-reference-node.locked img{filter:grayscale(1) brightness(.55)}
#skills-dialog.skill-reference .skill-reference-node strong{font-size:calc(21 * var(--sk-u) * var(--ui-zoom,1));font-weight:600;line-height:1.3;color:#fef2ff}
#skills-dialog.skill-reference .skill-reference-node small{font-size:calc(18 * var(--sk-u) * var(--ui-zoom,1));color:#eadbf6;line-height:1.4}
#skills-dialog.skill-reference .skill-reference-lock{position:absolute;bottom:calc(-13 * var(--sk-u));left:50%;transform:translateX(-50%);width:calc(29 * var(--sk-u));height:calc(29 * var(--sk-u));padding:calc(3 * var(--sk-u));background:#10111d;border:1px solid #9c9aa8;border-radius:3px}
#skills-dialog.skill-reference .skill-reference-lock svg{width:100%;height:100%;stroke:#e1d8e6;fill:#393843;stroke-width:1.5}
#skills-dialog.skill-reference .skill-reference-tree-note{position:absolute;left:13%;right:10%;top:calc(676 * var(--sk-u));margin:0;padding:calc(18 * var(--sk-u));background:#100b1eb0;color:#f1e1ff;border:1px solid #987b9959;border-radius:4px;font-size:calc(21 * var(--sk-u) * var(--ui-zoom,1));line-height:1.5;text-align:center}
#skills-dialog.skill-reference .skill-reference-tree.empty :is(.skill-reference-lines,.skill-reference-root,.skill-reference-branches){display:none}
#skills-dialog.skill-reference .skill-reference-detail{position:absolute;left:74.2%;right:1%;top:14.2%;bottom:13.3%;padding:calc(22 * var(--sk-u)) calc(20 * var(--sk-u));box-sizing:border-box;overflow:auto;scrollbar-width:thin;scrollbar-color:#ae8753 #151020}
#skills-dialog.skill-reference .skill-reference-detail-head{display:flex;align-items:flex-start;gap:calc(14 * var(--sk-u))}
#skills-dialog.skill-reference .skill-reference-detail-head>img{width:calc(96 * var(--sk-u));height:calc(96 * var(--sk-u));object-fit:cover;border:2px solid #fce1a1;border-radius:3px;box-sizing:border-box;box-shadow:0 3px 12px #c831676b;flex:none}
#skills-dialog.skill-reference .skill-reference-detail-head>div{min-width:0}
#skills-dialog.skill-reference .skill-reference-detail h3{font-size:calc(32 * var(--sk-u) * var(--ui-zoom,1));line-height:1.35;font-weight:600;color:#fff0b4;margin:0 0 calc(5 * var(--sk-u))}
#skills-dialog.skill-reference .skill-reference-detail-head p{margin:0;font-size:calc(22 * var(--sk-u) * var(--ui-zoom,1));line-height:1.5;color:#fff0df}
#skills-dialog.skill-reference .skill-reference-detail-head p.skill-reference-description{margin-top:calc(10 * var(--sk-u));font-size:calc(18 * var(--sk-u) * var(--ui-zoom,1));line-height:1.55;color:#ded1ec}
#skills-dialog.skill-reference .skill-reference-facts{margin:calc(14 * var(--sk-u)) 0 0;border-top:1px solid #d2ae6b;padding-top:calc(8 * var(--sk-u))}
#skills-dialog.skill-reference .skill-reference-facts>div{display:flex;align-items:center;gap:calc(17 * var(--sk-u));min-height:calc(44 * var(--sk-u));border-bottom:1px solid #89728e66}
#skills-dialog.skill-reference .skill-reference-facts .adventure-icon{width:calc(30 * var(--sk-u));height:calc(32 * var(--sk-u));flex:none;fill:none;stroke:#ffd98c;stroke-width:1.5}
#skills-dialog.skill-reference .skill-reference-facts dt{font-size:calc(19 * var(--sk-u) * var(--ui-zoom,1));flex:1;min-width:0}
#skills-dialog.skill-reference .skill-reference-facts dd{margin:0;font-size:calc(20 * var(--sk-u) * var(--ui-zoom,1));white-space:nowrap;font-variant-numeric:tabular-nums}
#skills-dialog.skill-reference .skill-reference-condition{margin-top:calc(15 * var(--sk-u))}
#skills-dialog.skill-reference .skill-reference-condition h4{display:flex;align-items:center;gap:calc(14 * var(--sk-u));margin:0 0 calc(8 * var(--sk-u));font-size:calc(22 * var(--sk-u) * var(--ui-zoom,1));font-weight:600;color:#ffe2a1}
#skills-dialog.skill-reference .skill-reference-condition h4::after{content:'';flex:1;height:1px;background:#b3905d}
#skills-dialog.skill-reference .skill-reference-condition p{margin:0;padding:calc(12 * var(--sk-u));border:1px solid #665470;background:#23192a7d;font-size:calc(19 * var(--sk-u) * var(--ui-zoom,1));line-height:1.5}
#skills-dialog.skill-reference .skill-reference-condition small{display:block;margin:calc(9 * var(--sk-u)) 0;text-align:center;color:#dacee6;font-size:calc(17 * var(--sk-u) * var(--ui-zoom,1));line-height:1.4}
#skills-dialog.skill-reference :is(.skill-reference-upgrade,.skill-reference-slot-action){display:block;box-sizing:border-box;width:90%;margin:calc(13 * var(--sk-u)) auto 0;min-height:calc(52 * var(--sk-u));padding:calc(7 * var(--sk-u));border:2px solid #f4d294;border-radius:6px;background:linear-gradient(#900665,#390429);font-size:calc(28 * var(--sk-u) * var(--ui-zoom,1));font-weight:600;line-height:1.3;box-shadow:inset 0 0 0 3px #4a1827,0 3px 7px #0009}
#skills-dialog.skill-reference .skill-reference-upgrade:disabled{color:#ffeaf2;background:linear-gradient(#581045,#2c0828)}
#skills-dialog.skill-reference .skill-reference-auto-note{font-size:calc(16 * var(--sk-u) * var(--ui-zoom,1));color:#d8c7e2;text-align:center;margin:calc(7 * var(--sk-u)) 0}
#skills-dialog.skill-reference .skill-reference-slot-action{background:#0d1220;font-size:calc(22 * var(--sk-u) * var(--ui-zoom,1));min-height:calc(53 * var(--sk-u));margin-top:calc(10 * var(--sk-u))}
#skills-dialog.skill-reference .skill-reference-footer{position:absolute;inset:auto 0 0;height:10.8%;display:flex;align-items:center;justify-content:center;gap:calc(16 * var(--sk-u));box-sizing:border-box;padding:calc(9 * var(--sk-u)) calc(32 * var(--sk-u));z-index:2}
#skills-dialog.skill-reference .skill-reference-back{position:absolute;left:calc(30 * var(--sk-u));display:flex;align-items:center;gap:calc(15 * var(--sk-u));min-height:44px;padding:0;border:0;background:transparent;color:#ffe2a6;font-size:calc(26 * var(--sk-u) * var(--ui-zoom,1))}
#skills-dialog.skill-reference .skill-reference-back .adventure-icon{width:calc(31 * var(--sk-u));height:calc(31 * var(--sk-u));stroke:#ffe3a6;fill:none;stroke-width:2}
#skills-dialog.skill-reference .skill-reference-slots{display:flex;gap:calc(15 * var(--sk-u));position:absolute;left:47.3%;transform:translateX(-50%)}
#skills-dialog.skill-reference .skill-reference-slot{position:relative;width:max(44px,calc(69 * var(--sk-u)));height:max(44px,calc(72 * var(--sk-u)));padding:0;border:1px solid #e7c578;border-radius:5px;overflow:hidden;background:#0a0c1a;box-shadow:inset 0 0 0 3px #6d532e,0 3px 6px #0009}
#skills-dialog.skill-reference .skill-reference-slot img{width:100%;height:100%;object-fit:cover}
#skills-dialog.skill-reference .skill-reference-slot.locked img{filter:grayscale(.8) brightness(.5)}
#skills-dialog.skill-reference .skill-reference-slot kbd{position:absolute;left:0;top:0;min-width:calc(20 * var(--sk-u));height:calc(22 * var(--sk-u));font:inherit;font-size:calc(17 * var(--sk-u) * var(--ui-zoom,1));line-height:1.3;color:#fff9ff;background:#13121e;border:1px solid #9e8a78;z-index:1}
#skills-dialog.skill-reference .skill-reference-slot.empty{border-color:#777181;box-shadow:inset 0 0 0 2px #262330}
#skills-dialog.skill-reference .skill-reference-slot.empty::after{content:'';position:absolute;inset:32%;border:1px solid #464050;transform:rotate(45deg)}
#skills-dialog.skill-reference .skill-reference-slot.selected{outline:2px solid #d749ad;outline-offset:1px}
#skills-dialog.skill-reference .skill-reference-escape{position:absolute;right:calc(29 * var(--sk-u));font-size:calc(20 * var(--sk-u) * var(--ui-zoom,1));color:#d8c8e3}
#skills-dialog.skill-reference ::selection{background:#903997;color:#fff0fa}
@media(max-width:900px),(max-height:600px){
 body #skills-dialog.skill-reference{--sk-u:1px;width:100vw;height:100dvh}
 #skills-dialog.skill-reference .skill-reference-heading{height:52px;padding:4px 10px;gap:10px}
 #skills-dialog.skill-reference .skill-reference-brand .adventure-icon{width:42px;height:44px}
 #skills-dialog.skill-reference h2{font-size:calc(23px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-character{font-size:calc(12px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-unlocked{font-size:calc(13px * var(--ui-zoom,1));padding:6px 12px}
 #skills-dialog.skill-reference .skills-close{width:44px;height:44px}
 #skills-dialog.skill-reference .skills-close .adventure-icon{width:30px;height:30px}
 #skills-dialog.skill-reference .skill-reference-tabs{left:10px;top:58px;gap:6px}
 #skills-dialog.skill-reference .skill-reference-tab{width:112px;height:44px;font-size:calc(14px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-tree{right:41%}
 #skills-dialog.skill-reference .skill-reference-root{top:16%;width:76px;height:68px}
 #skills-dialog.skill-reference .skill-reference-root .adventure-icon{width:62px;height:62px;padding:7px}
 #skills-dialog.skill-reference .skill-reference-root strong{font-size:calc(13px * var(--ui-zoom,1));min-width:60px;bottom:-14px;padding:2px 7px}
 #skills-dialog.skill-reference .skill-reference-branch{top:36%;width:95px}
 #skills-dialog.skill-reference .skill-reference-branch .adventure-icon{width:30px;height:30px;padding:4px}
 #skills-dialog.skill-reference .skill-reference-branch strong{font-size:calc(14px * var(--ui-zoom,1));top:-3px}
 #skills-dialog.skill-reference .skill-reference-node{top:55%;width:87px;gap:5px}
 #skills-dialog.skill-reference .skill-reference-picture{width:54px;height:54px}
 #skills-dialog.skill-reference .skill-reference-node strong{font-size:calc(12px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-node small{font-size:calc(11px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-lock{width:18px;height:18px;padding:2px;bottom:-8px}
 #skills-dialog.skill-reference .skill-reference-tree-note{top:81%;font-size:calc(11px * var(--ui-zoom,1));padding:5px;margin:0;left:8%;right:8%}
 #skills-dialog.skill-reference .skill-reference-detail{left:60%;right:2%;top:17%;bottom:16%;padding:10px 12px;background:#0c0b17f0;border:1px solid #b09252;border-radius:3px}
 #skills-dialog.skill-reference .skill-reference-detail-head{gap:12px}
 #skills-dialog.skill-reference .skill-reference-detail-head>img{width:64px;height:64px}
 #skills-dialog.skill-reference .skill-reference-detail h3{font-size:calc(20px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-detail-head p{font-size:calc(13px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-detail-head p.skill-reference-description{font-size:calc(12px * var(--ui-zoom,1));margin-top:8px}
 #skills-dialog.skill-reference .skill-reference-facts{margin-top:14px;padding-top:4px}
 #skills-dialog.skill-reference .skill-reference-facts>div{min-height:38px;gap:8px}
 #skills-dialog.skill-reference .skill-reference-facts .adventure-icon{width:23px;height:23px}
 #skills-dialog.skill-reference .skill-reference-facts dt,#skills-dialog.skill-reference .skill-reference-facts dd{font-size:calc(13px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-condition{margin-top:12px}
 #skills-dialog.skill-reference .skill-reference-condition h4{font-size:calc(14px * var(--ui-zoom,1));gap:8px}
 #skills-dialog.skill-reference .skill-reference-condition p{font-size:calc(13px * var(--ui-zoom,1));padding:8px}
 #skills-dialog.skill-reference .skill-reference-condition small{font-size:calc(12px * var(--ui-zoom,1));margin:5px 0}
 #skills-dialog.skill-reference :is(.skill-reference-upgrade,.skill-reference-slot-action){min-height:44px;margin-top:10px;font-size:calc(17px * var(--ui-zoom,1));padding:5px}
 #skills-dialog.skill-reference .skill-reference-auto-note{font-size:calc(11px * var(--ui-zoom,1));margin:6px 0}
 #skills-dialog.skill-reference .skill-reference-footer{height:14%;padding:5px 10px;background:#0c0a17e0;border-top:1px solid #a58752}
 #skills-dialog.skill-reference .skill-reference-back{left:10px;font-size:calc(15px * var(--ui-zoom,1));gap:8px}
 #skills-dialog.skill-reference .skill-reference-back .adventure-icon{width:20px;height:20px}
 #skills-dialog.skill-reference .skill-reference-slots{gap:6px;left:50%}
 #skills-dialog.skill-reference .skill-reference-slot{width:44px;height:44px}
 #skills-dialog.skill-reference .skill-reference-slot kbd{height:15px;min-width:14px;font-size:calc(11px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-escape{right:10px;font-size:calc(12px * var(--ui-zoom,1))}
}
@media(max-width:500px){
 #skills-dialog.skill-reference .skill-reference-heading{gap:6px}
 #skills-dialog.skill-reference .skill-reference-brand{display:none}
 #skills-dialog.skill-reference h2{font-size:calc(19px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-unlocked{font-size:calc(11px * var(--ui-zoom,1));padding:4px 6px}
 #skills-dialog.skill-reference .skill-reference-tree{inset:110px 0 auto;height:35dvh}
 #skills-dialog.skill-reference .skill-reference-root{top:0;width:65px;height:68px}
 #skills-dialog.skill-reference .skill-reference-root .adventure-icon{width:55px;height:55px}
 #skills-dialog.skill-reference .skill-reference-root strong{font-size:calc(12px * var(--ui-zoom,1));bottom:0}
 #skills-dialog.skill-reference .skill-reference-branch{top:30%;width:80px}
 #skills-dialog.skill-reference .skill-reference-branch strong{font-size:calc(12px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-node{top:59%;width:73px;gap:5px}
 #skills-dialog.skill-reference .skill-reference-picture{width:44px;height:44px}
 #skills-dialog.skill-reference .skill-reference-node strong{font-size:calc(10px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-node small{font-size:calc(9px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-tree-note{display:none}
 #skills-dialog.skill-reference .skill-reference-detail{top:calc(115px + 35dvh);bottom:116px;left:4%;right:4%;padding:12px}
 #skills-dialog.skill-reference .skill-reference-footer{height:110px}
 #skills-dialog.skill-reference .skill-reference-slots{display:grid;grid-template-columns:repeat(4,44px);gap:6px;left:61%}
 #skills-dialog.skill-reference .skill-reference-escape{display:none}
}
@media(prefers-reduced-motion:reduce){#skills-dialog.skill-reference *{scroll-behavior:auto}}

/* Keep the authored plate bounded while honoring the game's text preference. */
html[data-ui-text] body #skills-dialog.skill-reference[open]{zoom:1;max-width:none!important;max-height:none!important;overflow:hidden!important}
html[data-ui-contrast=high] body #skills-dialog.skill-reference .skill-reference-detail :is(p,small,dt,dd,strong){color:#fff8ff}
html[data-ui-contrast=high] body #skills-dialog.skill-reference .skill-reference-node :is(strong,small){color:#fff8ff}
html[data-ui-contrast=high] body #skills-dialog.skill-reference :is(.skill-reference-condition p,.skill-reference-detail){background-color:#120b20}


/* Review fixes: responsive scenery, measured branches, bounded copy and ceremonial actions. */
#skills-dialog.skill-reference .skill-reference-level{display:block;white-space:nowrap}
#skills-dialog.skill-reference .skill-reference-node :is(strong,small){box-sizing:border-box;max-width:100%;overflow-wrap:anywhere;white-space:normal}
#skills-dialog.skill-reference :is(.skill-reference-upgrade,.skill-reference-slot-action){position:relative;isolation:isolate;padding-inline:24px;border:0;border-radius:0;box-shadow:none;clip-path:polygon(5% 0,95% 0,98% 14%,98% 35%,100% 50%,98% 65%,98% 86%,95% 100%,5% 100%,2% 86%,2% 65%,0 50%,2% 35%,2% 14%)}
#skills-dialog.skill-reference .skill-reference-action-trim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#f5d698;stroke-width:1.5}
#skills-dialog.skill-reference .skill-reference-action-trim .skill-reference-jewel{fill:#30103d;stroke:#ffe6b1}
html[data-ui-text] body #skills-dialog.skill-reference .skill-reference-heading{height:calc(110 * var(--sk-u));background:#110e20;border-bottom:1px solid #dbb572}
html[data-ui-text] body #skills-dialog.skill-reference h2{line-height:1.1}
html[data-ui-text] body #skills-dialog.skill-reference .skill-reference-character{line-height:1.2}
html[data-ui-text] body #skills-dialog.skill-reference .skill-reference-tabs{top:calc(119 * var(--sk-u))}
@media(max-width:900px),(max-height:600px){
 body #skills-dialog.skill-reference{background-size:auto 125%;background-position:left center}
 #skills-dialog.skill-reference .skill-reference-heading{border-bottom:1px solid #dbb572;background:#100d20d9}
 #skills-dialog.skill-reference .skill-reference-node{top:51%;width:13.5%;gap:4px}
 #skills-dialog.skill-reference .skill-reference-node strong{line-height:1.25}
 #skills-dialog.skill-reference .skill-reference-node small{font-size:calc(10px * var(--ui-zoom,1));line-height:1.2}
 #skills-dialog.skill-reference .skill-reference-tree-note{display:none}
 html[data-ui-text] body #skills-dialog.skill-reference .skill-reference-heading{height:64px}
 html[data-ui-text] body #skills-dialog.skill-reference .skill-reference-tabs{top:70px}
}
@media(max-width:500px){
 #skills-dialog.skill-reference .skill-reference-node{top:57%;width:13.5%}
 #skills-dialog.skill-reference .skill-reference-node strong{font-size:calc(11px * var(--ui-zoom,1))}
 #skills-dialog.skill-reference .skill-reference-node small{font-size:calc(10px * var(--ui-zoom,1))}
 html[data-ui-text] body #skills-dialog.skill-reference .skill-reference-tree{top:128px}
 html[data-ui-text] body #skills-dialog.skill-reference .skill-reference-detail{top:calc(133px + 35dvh)}
}