/* Skill window (K): the original Shaiya EP4.5 layout. Art: /ui/sk_*.webp, cut from the client's Interface/skill.png etc. by tools/build_skillui.py.
   The window is the 336 x 492 art; client.js (skFit) scales it to the screen with transform. Rows sit on the 9 icon boxes baked into the art. */
#winSkills { width:336px; height:492px; min-width:0; padding:0; border:0; background:url(/ui/sk_frame.webp) 0 0/336px 492px no-repeat; box-shadow:none; transform-origin:0 0; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; font:700 12px/14px system-ui,"Segoe UI",Arial,sans-serif; }
#winSkills.pick { filter:drop-shadow(0 0 5px #e8b04a) drop-shadow(0 0 2px #e8b04a); }
#winSkills .wt { position:absolute; left:30px; top:0; width:276px; height:44px; padding:0; border:0; background:none; cursor:move; touch-action:none; font-size:0; color:transparent; }
#winSkills .wt span { display:none; }
#winSkills .wt .x { position:absolute; right:-24px; top:6px; width:28px; height:28px; font-size:20px; line-height:26px; font-weight:400; color:#cfc6b0; text-shadow:0 1px 2px #000; cursor:pointer; }
#skHint { position:absolute; left:40px; top:47px; width:124px; height:16px; font:700 11px/16px system-ui,Arial,sans-serif; color:#ffd36a; text-shadow:0 1px 1px #000; white-space:nowrap; overflow:hidden; pointer-events:none; }
#skPts { position:absolute; left:236px; top:48px; width:68px; height:14px; text-align:center; font:700 11px/14px system-ui,Arial,sans-serif; color:#f3e3b0; text-shadow:0 1px 1px #000; pointer-events:none; }
#skTabs { position:absolute; left:-1px; top:76px; display:flex; flex-direction:column; gap:4px; padding:0; margin:0; z-index:3; }
#skTabs button { display:block; width:32px; height:71px; padding:0; border:0; margin:0; background:url(/ui/sk_tabs.webp) calc(var(--i) * -32px) 0 no-repeat; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#skTabs button.on { background-position:calc(var(--i) * -32px) -71px; }
#skTabs button:not(.on):hover { filter:brightness(1.35); }
#skillList { position:absolute; left:40px; top:74px; width:262px; height:388px; overflow:hidden; touch-action:none; }
#skillList .sr { position:absolute; left:0; width:262px; height:43px; cursor:default; }
#skillList .sr.ok { cursor:pointer; }
.pick #skillList .sr.ok:hover { background:linear-gradient(90deg,rgba(232,176,74,.28),rgba(232,176,74,0)); }
#skillList .si { position:absolute; left:3px; top:0; width:38px; height:38px; box-sizing:border-box; padding:0; border:0; background:center/32px 32px no-repeat; font:700 18px/38px Georgia,serif; text-align:center; color:#e2a63c; }
#skillList .si:not(.pic) { background:none; }
#skillList .sr.lock .si { filter:grayscale(1) brightness(.5); }
#skillList .sr.drag .si { opacity:.4; }
#skillList .sn { position:absolute; left:48px; top:3px; width:172px; display:flex; gap:4px; color:#f4efe4; text-shadow:0 1px 1px #000,0 0 3px #000; white-space:nowrap; pointer-events:none; }
#skillList .sn i { font-style:normal; min-width:0; overflow:hidden; text-overflow:ellipsis; }
#skillList .sn span { flex:none; color:#f4efe4; }
#skillList .sr.lock .sn, #skillList .sr.lock .sn span { color:#9a9382; }
#skillList .sq, #skillList .sp { position:absolute; top:21px; font-weight:400; font-size:11px; color:#ddd6c4; text-shadow:0 1px 1px #000; white-space:nowrap; pointer-events:none; }
#skillList .sq { left:48px; } #skillList .sq.bad { color:#ff4a3a; } #skillList .sq.max { color:#a89f86; }
#skillList .sp { left:128px; } #skillList .sp.bad { color:#ff9a7a; }
#skillList .sa { position:absolute; right:-4px; top:0; width:42px; height:43px; cursor:pointer; background:url(/ui/sk_arrow.webp) 7px 8px no-repeat; -webkit-tap-highlight-color:transparent; }
#skillList .sa:not(.off):hover { background-position:-25px 8px; }
#skillList .sa:not(.off):active { background-position:-57px 8px; }
#skillList .sa.off { background-position:-89px 8px; cursor:default; }
#skSb { position:absolute; left:303px; top:66px; width:15px; height:402px; }
#skSb .up, #skSb .dn { position:absolute; left:0; width:15px; height:23px; cursor:pointer; background:url(/ui/sk_sb.webp) 0 0 no-repeat; }
#skSb .up:hover { background-position:-16px 0; } #skSb .up:active { background-position:-32px 0; }
#skSb .dn { top:379px; background-position:0 -24px; } #skSb .dn:hover { background-position:-16px -24px; } #skSb .dn:active { background-position:-32px -24px; }
#skSb .th { position:absolute; left:0; top:23px; width:15px; height:26px; cursor:pointer; background:linear-gradient(90deg,#1d1710,#5a4a34 35%,#46392a 70%,#1d1710); box-shadow:0 0 0 1px #000 inset, 0 0 3px #000; } /* body is a flat fill: the sprite column is only 4px of art per 48px, so repeat-y tiled it into stripes with transparent gaps */
#skSb .th::before { content:""; position:absolute; left:0; top:0; width:15px; height:4px; background:url(/ui/sk_sb.webp) -48px -8px no-repeat; }
#skSb .th::after { content:""; position:absolute; left:0; bottom:0; width:15px; height:4px; background:url(/ui/sk_sb.webp) -48px 0 no-repeat; }
#skSb.flat .th { display:none; }
#skSb.flat .up, #skSb.flat .dn { pointer-events:none; cursor:default; background-position:-32px 0; } #skSb.flat .dn { background-position:-32px -24px; } /* nothing to scroll: arrows show the dimmed state */
#skGhost { display:none; position:fixed; z-index:80; width:40px; height:40px; margin:-20px 0 0 -20px; pointer-events:none; background:center/contain no-repeat; opacity:.9; filter:drop-shadow(0 3px 5px #000); }
#skDetail { display:none; position:fixed; z-index:90; width:min(260px,70vw); padding:8px 10px; pointer-events:none; background:rgba(8,7,6,.96); border:1px solid #8a7c5e; box-shadow:0 0 0 1px #000, 0 6px 18px #000c; font:400 12px/1.35 system-ui,Arial,sans-serif; color:#d8cfb8; }
#skDetail.on { display:block; }
#skDetail b { display:block; font:700 13px system-ui,Arial,sans-serif; color:#fff; }
#skDetail .lvl { color:#f2b13c; font-weight:700; margin:1px 0 5px; }
#skDetail .meta { color:#b9b09a; font-size:11.5px; margin-top:6px; white-space:pre-line; }
#skDetail .meta.nx { color:#ffd36a; border-top:1px solid #3a342a; padding-top:5px; }

/* Basic Action window = the original Sub Skill window: art cut by tools/build_subui.py (280 x 472), icon-only 2 x 8 grid, scaled by bsFit() */
#winBasic { width:280px; height:472px; min-width:0; padding:0; border:0; background:url(/ui/sub_frame.webp) 0 0/280px 472px no-repeat; box-shadow:none; transform-origin:0 0; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#winBasic .wt { position:absolute; left:30px; top:0; width:222px; height:44px; padding:0; border:0; background:none; cursor:move; touch-action:none; font-size:0; color:transparent; }
#winBasic .wt span { display:none; }
#winBasic .wt .x { position:absolute; right:-26px; top:4px; width:30px; height:30px; font-size:20px; line-height:26px; font-weight:400; color:transparent; cursor:pointer; background:none; border:0; }
#bsTabs { position:absolute; left:-1px; top:56px; display:flex; flex-direction:column; gap:4px; z-index:3; }
#bsTabs button { display:block; width:32px; height:95px; padding:0; border:0; margin:0; background:url(/ui/sub_tabs.webp) 0 0 no-repeat; cursor:default; -webkit-tap-highlight-color:transparent; } /* inert: Craft Skill is "to be added in the future" in the original, Basic Action is the only page */
#bsTabs button:nth-child(2) { background-position:-32px 0; }
#bsTabs button.on { background-position:0 -95px; } #bsTabs button.on:nth-child(2) { background-position:-32px -95px; }
#basicBody { position:absolute; inset:0; pointer-events:none; }
#basicBody .bc { position:absolute; pointer-events:auto; touch-action:none; width:39px; height:39px; box-sizing:border-box; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#basicBody .bc:hover { box-shadow:0 0 0 1px #e8b04a inset; } #basicBody .bc:active { filter:brightness(1.4); }
#basicBody .bi { position:absolute; left:3px; top:3px; width:32px; height:32px; background-repeat:no-repeat; pointer-events:none; }