img.skill-art-v2{background:none;object-fit:contain}
.skill-mastery{margin-top:10px;padding-top:8px;border-top:1px solid #65726840;color:#b7c9bf;font-size:11px;line-height:1.7}
.skill-mastery>div{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.skill-mastery progress{display:block;appearance:none;width:100%;height:4px;margin:5px 0 7px;border:0;background:#303c37;border-radius:0;overflow:hidden}
.skill-mastery progress::-webkit-progress-bar{background:#303c37}.skill-mastery progress::-webkit-progress-value{background:#91b7a6}.skill-mastery progress::-moz-progress-bar{background:#91b7a6}
.skill-mastery[data-mastered=true],.skill-mastery[data-mastered=true] small{color:#dec58c}
.skill-milestone{display:block;margin-top:5px}.skill-mastery .skill-milestone[data-active=false]{color:#aeb7ac}.skill-mastery .skill-milestone[data-tier="25"][data-active=true]{color:#b6d7c5}
.quick-change-settings{margin-top:22px}.quick-change-settings small{font-size:12px;color:#b8b39e}.quick-change-settings label{display:grid;gap:8px;min-width:0;color:#d8d1c0;font-size:13px}.quick-change-settings select{width:100%;min-width:0;padding:10px;background:#111a17;color:#e6ddc8;border:1px solid #635a42}.quick-change-weapons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.quick-change-after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:20px}.quick-change-icon{background-image:none;color:#dfc78f;fill:none;stroke:currentColor;stroke-width:3}
.content-release #modal:has(#content-root[data-screen=skills]){width:min(1080px,96cqw);height:min(740px,94cqh);display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;background:#171b19;border:10px solid transparent;border-image:url('/public/assets/rpg-window-frame-v1.webp') 30 fill / 10px;padding:20px}
#content-root[data-screen=skills]{min-width:0}
#modal:has(#content-root[data-screen=skills]) #modal-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:20px}
.skill-families{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px;padding-bottom:8px;background:#171b19}
#modal .skill-families>button{display:block;min-width:0;min-height:58px;padding:10px 16px;text-align:left;background:#141b18;border:1px solid #635a42;border-radius:0;color:#e1d8c5;font-size:16px;box-shadow:none}
#modal .skill-families>button[aria-pressed=true]{border-color:#cbb780;background:#293229;box-shadow:inset 0 -2px #cbb780}
.skill-families small{display:block;margin-top:4px;color:#a8b2a7;font-size:12px}
.skill-book{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px}
.skill-book>section{min-width:0}
.skill-book>.skill-passives{position:sticky;top:88px;align-self:start}
#content-root .skill-section-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid #756b493f;color:#eee1c1;font-size:15px;font-weight:550}
.skill-section-title small{font-size:12px;font-weight:400;color:#b8b39e}
.skill-list+.skill-section-title{margin-top:26px!important}
.skill-list{display:grid;gap:10px}
.skill-entry{display:grid;grid-template-columns:52px minmax(0,1fr) 88px;column-gap:12px;row-gap:8px;border-bottom:1px solid #7e725336;padding:14px 0;position:relative;align-items:center}
.skill-entry-icon{width:52px;height:52px;display:grid;place-items:center;background:url('/public/assets/rpg-item-slot-v1.webp') center/100% 100%}
.skill-entry-icon>.content-skill-art{width:46px;height:46px}
.skill-entry-main{min-width:0}
.skill-entry-title{display:flex;gap:10px;align-items:baseline;justify-content:space-between}
#modal .skill-entry-title h3{margin:0;font-size:15px;font-weight:550;color:#efdfba}
.skill-entry-title>span{white-space:nowrap;font-size:11px;color:#a9b1a5}
#modal-body .skill-entry p{margin:5px 0;line-height:1.6;font-size:12px;color:#e0dfd3;overflow-wrap:anywhere}
.skill-entry small,.skill-unlock{font-size:11px;color:#aeb7ac;line-height:1.7}
.skill-entry-main>small{display:block;overflow-wrap:anywhere}
.skill-entry-main>small+small{margin-top:5px;color:#d3c6a6}
.skill-entry-action{grid-column:3;grid-row:1;display:flex;justify-content:flex-end}
#modal .skill-entry-action>button{min-height:34px;margin:0;padding:5px 10px;font-size:12px;min-width:0;width:88px}
.skill-entry[data-selected=true]{box-shadow:inset 2px 0 #d2bb7c;padding-left:10px;background:#25312566}
.skill-entry[data-unlocked=false] .skill-entry-icon{filter:saturate(.35);opacity:.65}
.skill-unlock{display:grid;gap:3px;margin-top:8px}
.skill-level-requirement[data-met=false]{color:#e1b5a1}.skill-level-requirement[data-met=true]{color:#b3c7a4}
.skill-unlock progress{width:100%;height:4px;accent-color:#c3ac76}
.skill-locked{font-size:11px;color:#989e90}
.skill-town-rule,.skill-next{font-size:12px;color:#a6afa3;margin:0 0 12px;line-height:1.8}
#skill-buffs{position:absolute;left:calc(var(--hud-status-left,var(--minimap-right,246px)) + 8px * var(--inverse-ui-scale,1));top:14px;display:flex;flex-wrap:wrap;width:max-content;max-width:var(--hud-status-room,600px);gap:6px;z-index:7;pointer-events:none}
#skill-buffs[hidden]{display:none}
.skill-buff-status{position:relative;width:48px;min-height:48px;align-self:flex-start;background:#101a16d9;border:1px solid #8b805c}
.skill-buff-status .content-skill-art{display:block;width:36px;height:36px;margin:auto}
.skill-buff-status>span{display:block;text-align:center;font-size:10px;line-height:12px;color:#f4e3b8;background:#0c1310}
.skill-buff-status[data-active=false]{filter:grayscale(1);opacity:.5}
.spirit-fuel-status{width:112px;min-height:36px;display:flex;align-items:center;gap:4px;padding:3px}
.spirit-fuel-status .content-skill-art{width:28px;height:28px;flex:none;margin:0}
.spirit-fuel-status>span{font-size:11px;line-height:16px;white-space:nowrap;background:transparent}
.gamepad #game #skill-buffs{top:calc(8px * var(--inverse-ui-scale));max-width:calc(var(--hud-status-room,600px) * var(--ui-scale,1));transform:scale(var(--inverse-ui-scale));transform-origin:top left}
@container game-viewport (max-width:700px){.skill-book{gap:16px}.skill-entry{grid-template-columns:40px minmax(0,1fr);column-gap:8px}.skill-entry-icon{width:40px;height:40px}.skill-entry-icon>.content-skill-art{width:36px;height:36px}.skill-entry-action{grid-column:2;grid-row:auto}.skill-families{gap:8px}.skill-entry-title{flex-wrap:wrap;gap:4px}}

/* The graph is a movable engraved plate; text and controls remain live DOM. */
.content-release #modal:has(#content-root[data-screen=skills]):has(.skill-tree-book){width:min(1260px,96cqw);height:min(810px,94cqh);padding:16px 20px}
#modal:has(.skill-tree-book) #modal-body{overflow:hidden;padding:0;display:flex;flex-direction:column}
#content-root[data-screen=skills],#content-root[data-screen=skills]>.content-body{height:100%;min-height:0;display:flex;flex-direction:column}
.skill-tree-book{--rune:#b6a17b;flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 310px;gap:18px}
.skill-tree-book[data-family=bow]{--rune:#9eae9b}.skill-tree-book[data-family=staff]{--rune:#a5acc7}
.skill-families{position:static;flex:none;gap:10px;margin-bottom:12px;padding:0;background:transparent}
#modal .skill-families>button{display:flex;align-items:center;gap:12px;min-height:66px;padding:8px 14px;font-size:15px;background:#151a18;border-color:#635d493b}
#modal .skill-families>button[aria-pressed=true]{background:#242822;border-color:#bba578;box-shadow:inset 0 -1px #bba578}
.skill-families small{font-size:11px;line-height:1.5}
.skill-family-seal{width:42px;height:42px;flex:none;fill:none;stroke:#baaa87;stroke-width:2;stroke-linejoin:bevel}
.skill-family-seal .seal-symbol{stroke-width:5}.skill-family-seal .seal-rings{opacity:.7}
.skill-tree-map{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#101614;border:1px solid #6d69503d}
.skill-tree-toolbar{height:42px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border-bottom:1px solid #6d69503d;color:#b8b5a5;font-size:12px}
.skill-tree-toolbar>div{display:flex;gap:5px;align-items:center}
.skill-tree-toolbar>nav{display:flex;gap:4px;align-items:center}
#modal .skill-tree-toolbar button{margin:0;min-width:28px;min-height:28px;padding:3px 7px;border:1px solid #7e775c66;background:#1c231f;border-radius:0;box-shadow:none;color:#ded8c6;font-size:12px}
.skill-tree-scale{width:34px;text-align:center;font-variant-numeric:tabular-nums;color:#999e91;font-size:11px}
.skill-tree-viewport{position:relative;flex:1;min-height:0;overflow:hidden;cursor:grab;isolation:isolate;user-select:none;-webkit-user-select:none;overscroll-behavior:contain}
.skill-tree-viewport:active{cursor:grabbing}
#game .skill-tree-viewport,#game .skill-tree-viewport *{touch-action:none}
.skill-tree-plane{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.skill-domain-engraving{position:absolute;width:570px;height:570px;left:245px;top:50px;fill:none;stroke:var(--rune);stroke-width:1;opacity:.095;pointer-events:none}
.skill-domain-engraving .seal-symbol{stroke-width:2}.skill-domain-engraving .seal-rings{stroke-dasharray:none}
.skill-tree-links{position:absolute;inset:0;overflow:visible;fill:none;stroke:#4e5145;stroke-width:2;pointer-events:none}
.skill-tree-links path[data-active=true]{stroke:var(--rune);stroke-width:2.5}
#modal .skill-tree-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:142px;height:138px;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer;color:#ccc9b9;outline-offset:3px}
.skill-node-ring{position:relative;display:grid;place-items:center;flex:none;width:76px;height:76px;margin:6px 0 0;background:#171e19;border:2px solid #6e705c;border-radius:50%;box-shadow:0 0 0 3px #101614,0 0 0 4px #545a4a,inset 0 0 0 4px #0b100d}
.skill-node-ring:before,.skill-node-ring:after{content:'';position:absolute;width:6px;height:6px;top:-7px;left:calc(50% - 3px);border:1px solid currentColor;background:#101614;transform:rotate(45deg);color:#777c67}
.skill-node-ring:after{top:auto;bottom:-7px}
.skill-node-ring>.content-skill-art{width:62px;height:62px;object-fit:contain;border-radius:50%;pointer-events:none}
#modal .skill-tree-node strong{font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap;background:#101614db;padding:0 4px;text-shadow:0 1px 2px #000}
#modal .skill-tree-node small{font-size:12px;line-height:1.2;color:#90998c;background:#101614db;padding:0 4px}
.skill-tree-node[data-kind=buff] .skill-node-ring{border-radius:12px;transform:rotate(45deg);width:66px;height:66px;margin:11px 0 5px}
.skill-tree-node[data-kind=buff] .content-skill-art{transform:rotate(-45deg);width:54px;height:54px;border-radius:0}
.skill-tree-node[data-kind=passive] .skill-node-ring{width:58px;height:58px;margin-top:15px;margin-bottom:9px}
.skill-tree-node[data-kind=passive] .content-skill-art{width:46px;height:46px}
.skill-tree-node[data-state=unlocked] .skill-node-ring{border-color:var(--rune);box-shadow:0 0 0 3px #101614,0 0 0 4px var(--rune),inset 0 0 0 4px #0b100d}
.skill-tree-node[data-state=next] .content-skill-art{filter:grayscale(.8);opacity:.7}
.skill-tree-node[data-state=hidden] .skill-node-ring{border-style:dashed;border-color:#434e43;box-shadow:0 0 0 3px #101614,0 0 0 4px #343c33}
.skill-node-unknown{font-family:Georgia,serif;font-size:30px;color:#68725f}
.skill-tree-node[data-equipped=true] .skill-node-ring{border-color:#b3d7ae;box-shadow:0 0 0 3px #101614,0 0 0 5px #71916d}
#modal .skill-tree-node[data-equipped=true] small{color:#b3d7ae}
#modal .skill-tree-node[aria-pressed=true] .skill-node-ring{outline:2px solid #efdec0;outline-offset:7px}
#modal .skill-tree-node:hover strong,#modal .skill-tree-node[aria-pressed=true] strong{color:#f3e3c8}
.skill-tree-legend{flex:none;display:flex;align-items:center;gap:18px;min-height:34px;padding:0 12px;border-top:1px solid #6d69503d;font-size:10px;color:#a6ac9c}
.skill-tree-legend span:before{content:'';display:inline-block;width:5px;height:5px;transform:rotate(45deg);border:1px solid #bbb08d;margin-right:7px}
.skill-tree-legend [data-status=unlocked]:before{background:#bbb08d}.skill-tree-legend [data-status=equipped]:before{background:#b3d7ae;border-color:#b3d7ae}
.skill-tree-detail{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:12px 14px 16px;border-left:1px solid #77735c55;background:#141a17;scrollbar-gutter:stable}
.skill-tree-detail-header{display:flex;justify-content:space-between;gap:8px;padding-bottom:14px;border-bottom:1px solid #77735c44;font-size:12px;color:#c4b795}
.skill-tree-detail-header small{font-size:11px;color:#aab19f}
.skill-tree-detail .skill-entry{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:20px 0;border-bottom:0;box-shadow:none;background:transparent}
.skill-tree-detail .skill-entry-icon{width:70px;height:70px}.skill-tree-detail .skill-entry-icon>.content-skill-art{width:62px;height:62px}
#modal .skill-tree-detail .skill-entry-title h3{font-size:19px}
#modal-body .skill-tree-detail .skill-entry p{margin:12px 0;font-size:13px;line-height:1.8}
.skill-tree-detail .skill-entry-action{justify-content:stretch}
#modal .skill-tree-detail .skill-entry-action>button{width:100%;min-height:40px;font-size:13px}
.skill-tree-detail .skill-unlock{padding-top:12px;margin-top:14px;border-top:1px solid #77735c44;gap:6px}
.skill-tree-detail .skill-mastery{margin-top:18px;padding-top:12px}.skill-tree-detail .skill-milestone{margin-top:12px}
.skill-tree-detail .quick-change-settings{margin-top:16px}.skill-tree-detail .quick-change-weapons,.skill-tree-detail .quick-change-after{grid-template-columns:minmax(0,1fr);gap:12px}
.skill-tree-undiscovered{padding:45px 0;text-align:center;color:#a4ae9b;font-size:12px}.skill-tree-undiscovered>span{font:48px Georgia,serif;color:#b3ad93}
@container game-viewport (max-width:900px){.skill-tree-book{grid-template-columns:minmax(0,1fr) 260px;gap:10px}.skill-families small{font-size:10px}#modal .skill-families>button{gap:8px;padding:8px}.skill-family-seal{width:34px;height:34px}}
/* Isolate graph controls from the older generic modal button/header skin. */
#content-root[data-screen=skills] button.skill-tree-node{background:none;border:0;border-image:none;box-shadow:none;min-width:0;min-height:0;padding:0;text-shadow:none}
#content-root[data-screen=skills] .skill-tree-toolbar{display:flex;height:42px;padding:0 12px;margin:0;border-bottom:1px solid #6d69503d}
#content-root[data-screen=skills] .skill-tree-toolbar button{background:#1c231f;border:1px solid #7e775c66;border-image:none;min-width:28px;min-height:28px;padding:3px 7px;text-shadow:none}
#content-root[data-screen=skills] .skill-tree-detail-header{display:flex;padding:0 0 14px;margin:0;border-bottom:1px solid #77735c44}
#content-root[data-screen=skills] .skill-tree-legend{justify-content:flex-start;letter-spacing:0;margin:0;padding:0 12px;min-height:34px}
#content-root[data-screen=skills] .skill-families>button{background:#151a18;border:1px solid #635d493b;border-image:none;text-shadow:none}
#content-root[data-screen=skills] .skill-families>button[aria-pressed=true]{background:#242822;border-color:#bba578}
#content-root[data-screen=skills] .skill-tree-detail .content-button{background:#282e24;border:1px solid #897957;border-image:none;min-height:40px;text-shadow:none}

/* One continuous board. Domain titles move the camera; nothing is filtered. */
.skill-tree-book[data-family=all]{--rune:#bbaa83}
.skill-tree-plane [data-family=axe],.skill-tree-domain[data-domain=axe]{--rune:#bea27a}
.skill-tree-plane [data-family=bow],.skill-tree-domain[data-domain=bow]{--rune:#a9bca4}
.skill-tree-plane [data-family=staff],.skill-tree-domain[data-domain=staff]{--rune:#ada7c8}
.skill-tree-plane [data-family=common],.skill-tree-domain[data-domain=common]{--rune:#d1b67b}
.skill-tree-domain{position:absolute;pointer-events:none}
.skill-domain-art{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:440px;height:440px;object-fit:contain;opacity:.27;pointer-events:none;user-select:none}
#content-root[data-screen=skills] .skill-domain-heading{position:absolute;left:46%;top:10px;transform:translateX(-50%);padding:8px 20px;margin:0;min-width:100px;min-height:40px;border:0;border-bottom:1px solid #8e886355;border-image:none;background:none!important;box-shadow:none;color:var(--rune);font:28px/1.4 Georgia,'Malgun Gothic',serif;letter-spacing:5px;pointer-events:auto;cursor:zoom-in;text-shadow:0 2px 3px #000}
#content-root[data-screen=skills] .skill-domain-heading:hover{color:#f0dfba;border-bottom-color:#caba88}
#content-root[data-screen=skills] .skill-domain-heading{width:max-content;max-width:none;white-space:nowrap;z-index:3}
/* Spirit branches occupy the axe/bow/staff top rows. Keep enlarged overview
   headings above the domains instead of covering nodes or their pointer area. */
#content-root[data-screen=skills] .skill-tree-domain[data-domain=axe] .skill-domain-heading,
#content-root[data-screen=skills] .skill-tree-domain[data-domain=bow] .skill-domain-heading,
#content-root[data-screen=skills] .skill-tree-domain[data-domain=staff] .skill-domain-heading{top:0;transform:translate(-50%,-100%)}
.skill-tree-plane .skill-tree-links path{stroke:var(--rune);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.28}
.skill-tree-plane .skill-tree-links path[data-active=true]{opacity:.48}
.skill-tree-plane .skill-tree-links>path[data-related=true]{stroke:#d3bb88;stroke-width:1.8;opacity:.85}
#modal .skill-tree-viewport:not([data-overview=true]) .skill-tree-node strong{font-size:max(15px,calc(10px / var(--tree-screen-scale,1)))}
#modal .skill-tree-viewport:not([data-overview=true]) .skill-tree-node small{font-size:max(12px,calc(8px / var(--tree-screen-scale,1)))}
.skill-tree-node[data-relation=before] .skill-node-ring{border-color:#b9ab86}
.skill-tree-node[data-relation=after] .skill-node-ring{border-color:#b9ab86}
#modal .skill-tree-node:is([data-relation=before],[data-relation=after])>strong{color:#e7d2a8}
.skill-tree-legend [data-status=related]:before{background:#efcf8c;border-color:#efcf8c}
.skill-tree-related{display:grid;gap:10px;padding:16px 0;border-bottom:1px solid #77735c44}
.skill-tree-related:empty{display:none}
.skill-tree-related>div{display:flex;flex-wrap:wrap;gap:6px}
.skill-tree-related>div>span{flex-basis:100%;font-size:11px;color:#a9ae9f}
#content-root[data-screen=skills] .skill-tree-related button{display:flex;justify-content:space-between;gap:10px;min-width:0;min-height:32px;margin:0;padding:5px 9px;border:1px solid #70674c66;border-image:none;border-radius:0;background:#1c241e;box-shadow:none;text-shadow:none;color:#dfd1b1;font-size:12px;line-height:1.5}
#content-root[data-screen=skills] .skill-tree-related button:hover{border-color:#b6a17b;color:#fff0cc}
.skill-detail-domain{display:flex;gap:14px;align-items:center;padding:18px 0 0;color:#d7c69f;font-size:14px}
.skill-detail-domain>img{width:72px;height:72px;flex:none;object-fit:contain}
.skill-detail-domain small{display:block;font-size:11px;margin-top:5px;color:#969f91;line-height:1.6}
.skill-tree-viewport[data-overview=true] .skill-tree-node>small{visibility:hidden}
#content-root[data-screen=skills] .skill-tree-viewport[data-overview=true] .skill-domain-heading{font-size:calc(16px / var(--tree-scale));letter-spacing:3px}
.skill-tree-viewport[data-overview=true] .skill-tree-node:not([aria-pressed=true]):not(:hover):not(:focus-visible)>strong{visibility:hidden}
#modal .skill-tree-viewport[data-overview=true] .skill-tree-node:is([aria-pressed=true],:hover,:focus-visible)>strong{font-size:calc(12px / var(--tree-scale));position:relative;z-index:2}
.skill-tree-viewport[data-overview=true] .skill-tree-node:is([aria-pressed=true],:hover,:focus-visible){z-index:2}
.skill-tree-book[data-family=all] .skill-tree-viewport{background:radial-gradient(ellipse at 40% 40%,#25281f55,transparent 70%),#101614}