body #skills-dialog.docked-panel{position:absolute;inset:calc(var(--panel-top,0px) + 4px) auto auto 4px;margin:0;width:min(49%,calc((var(--panel-height,90dvh) - 8px)*.716));height:auto;aspect-ratio:1062/1482;max-width:none;max-height:none;padding:0;border:0;overflow:visible;z-index:35;background:transparent url('assets/ui/Library.png?build=668f26ee093e63fd') center/100% 100% no-repeat;box-shadow:none;color:#eee9de}
.skills-title{position:absolute;left:30%;right:30%;top:5.5%;height:4.8%;margin:0;display:flex;align-items:center;justify-content:center;background:#101923;color:#f4dfb2;font:small-caps bold 18px Georgia,serif;letter-spacing:1px}
.skills-close{position:absolute;right:3.5%;top:5.7%;width:6%;height:4.2%;padding:0;min-height:0;background:#111925;color:#efdfbd;border:1px solid #a39780;line-height:1;font-size:17px}
.skills-body{position:absolute;inset:13% 8% 9%;overflow:auto;padding:0 3px 12px;font-size:12px;scrollbar-width:thin}
.skills-group>h3{margin:10px 0 6px;color:#e3c990;font:small-caps bold 15px Georgia,serif;border-bottom:1px solid #796743;padding-bottom:5px}
.skills-entry{padding:10px 8px;margin-bottom:8px;border:1px solid #74604466;background:#07111cd9;border-radius:3px}
.skills-heading{display:flex;align-items:center;gap:8px;color:#f3dfb3}.skills-heading strong{font-size:14px}.skills-heading>canvas,.skills-heading>img{width:42px;height:42px;object-fit:contain;flex-shrink:0}
.skills-entry p{margin:7px 0;line-height:1.45}.skills-values{color:#96d6ff}.skills-cost{color:#d9c69d}.skills-supports{border-top:1px solid #63708055;padding-top:7px;margin-top:8px}.skills-supports>span{display:block;color:#d7c598;margin-bottom:5px}.skills-entry select{width:100%;font-size:12px;padding:4px;margin-top:6px;background:#152131;color:#eee2ca}
.mobile-xp{display:none}
@media(pointer:coarse) and (hover:none){.touch-game .mobile-xp{display:block;position:fixed;left:50%;transform:translateX(-50%);bottom:env(safe-area-inset-bottom,0px);width:min(32vw,360px);height:17px;border:1px solid #a68f5d;background:#071420;box-shadow:0 0 0 2px #10121c;z-index:30;pointer-events:none;border-radius:4px;overflow:hidden}.mobile-xp[hidden]{display:none!important}.mobile-xp-fill{display:block;height:100%;background:linear-gradient(#60bfe8,#2764a1)}.mobile-xp-label{position:absolute;inset:0;text-align:center;font:11px/17px Georgia,serif;color:#fff3d5;text-shadow:0 1px 2px #000}.touch-game #mobile-points,.touch-game #mobile-skills-page{width:48px;height:48px;padding:2px;min-width:0;font-size:14px}.touch-game #mobile-points small{display:block;font-size:9px}}

@media(pointer:coarse) and (hover:none){
 html.touch-game .mobile-menus .mobile-art-button{width:52px;height:52px;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
 .mobile-art-button>img{display:block;width:76%;height:76%;margin:auto;object-fit:contain;pointer-events:none;image-rendering:auto}
 .mobile-art-button:focus-visible{outline:2px solid #e6d2a4;outline-offset:3px}
 .mobile-point-count{position:absolute;right:0;bottom:0;color:#fff1c4;font:bold 12px Georgia,serif;text-shadow:0 1px 3px #000,1px 0 2px #000;pointer-events:none}
 html.touch-game .mobile-xp{height:26px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
 .mobile-xp-track{position:absolute;left:3.18%;right:3.28%;top:42.3%;height:16.92%;background:#0a1726;overflow:hidden}
 .mobile-xp-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
 .mobile-xp-label{top:-7px;bottom:auto;height:13px;line-height:13px}
}

@media(pointer:coarse) and (hover:none){
 .mobile-layout-handle>img{display:block;width:76%;height:76%;max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;flex:none}
}

/* Painted Skills shortcut stays in the open space below the milestone title. */
body #milestones-dialog .skills-milestones-button{position:absolute;left:12%;top:9.3%;width:19%;height:6%;min-width:0;min-height:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent url('assets/ui/skills-button.png?build=eba0c191a7a97c6e') center/100% 100% no-repeat;color:#f4e5bb;font:bold clamp(10px,2.6cqw,17px) Georgia,serif;text-shadow:0 1px 2px #000;z-index:3}
body #milestones-dialog .skills-milestones-button:hover{filter:brightness(1.2)}
body #milestones-dialog .skills-milestones-button:focus-visible{outline:2px solid #e7d3a2;outline-offset:2px}


/* Fit Skills content to the Library frame's painted title and inner opening. */
body #skills-dialog.docked-panel{container-type:inline-size}
#skills-dialog .skills-title{left:36%;right:36%;top:7.15%;height:3.1%;padding:0;border:0;background:#07111c;color:#f4e8cf;font:small-caps normal clamp(10px,3.5cqw,22px)/1 Georgia,serif;letter-spacing:.8px;white-space:nowrap;box-sizing:border-box}
#skills-dialog .skills-close{right:3.3%;top:5.7%;width:6.5%;height:4.5%;border:0;background:transparent;color:transparent;box-shadow:none}
#skills-dialog .skills-close:focus-visible{outline:2px solid #f4dfb2;outline-offset:2px}
#skills-dialog .skills-body{inset:14% 8.5% 8%;padding:0 4px 10px;box-sizing:border-box;font:clamp(10px,2.25cqw,14px)/1.4 Arial,sans-serif;overflow:auto;scrollbar-gutter:stable}
#skills-dialog .skills-group>h3{margin:8px 0 7px;padding-bottom:4px;font:small-caps bold clamp(12px,2.7cqw,17px)/1.2 Georgia,serif}
#skills-dialog .skills-group:first-child>h3{margin-top:0}
#skills-dialog .skills-entry{padding:8px;margin:0 0 9px;min-width:0}
#skills-dialog .skills-entry p{margin:6px 0;font-size:inherit;line-height:1.4;overflow-wrap:anywhere}
#skills-dialog .skills-heading{gap:8px}
#skills-dialog .skills-heading strong{font-size:inherit}
#skills-dialog .skills-heading>canvas,#skills-dialog .skills-heading>img{width:clamp(26px,6.5cqw,40px);height:clamp(26px,6.5cqw,40px)}
#skills-dialog .skills-supports{margin-top:7px;padding-top:7px}
#skills-dialog .skills-entry select{box-sizing:border-box;max-width:100%;min-width:0;font-size:inherit;padding:5px;margin-top:5px}

@media(pointer:coarse) and (hover:none){
 html.touch-game .mobile-menus #mobile-skills-page{width:52px;height:52px;padding:0;border:0;background:transparent;box-shadow:none}
}
