/* ===== 技能系統（js/skillui.js）：技能列（6～8 攻擊格＋保命格＋全部技能抽屜＋自動戰鬥小開關）、技能樹前置網、技能組編輯、轉職清單。
   面板內只用 sk3／jc3 開頭的 class；技能列只動 .sk 裡的按鈕與 #potb 的位置 ===== */
/* --- 直式手機：攻擊格排成右下角兩圈弧形（大拇指範圍），格子 58px --- */
#hud .sk{right:6px;bottom:calc(var(--sab) + 30px);width:232px;height:262px!important}
#hud .sk .sb{width:58px;height:58px;background-position:0 0}
#hud .sk .sb:after{left:-4px;top:-4px;width:66px;height:69px}
#hud #s0{right:89px;bottom:23px}#hud #s1{right:53px;bottom:75px}#hud #s2{right:1px;bottom:113px}
#hud #s3{right:139px;bottom:101px}#hud #s4{right:85px;bottom:147px}#hud #s5{right:15px;bottom:171px}
@media not ((orientation:landscape) and (max-height:540px)){html:not(.pc) #hud .sk .sb7{display:none!important}}
#hud #s8{width:46px;height:46px;right:1px;bottom:49px}#hud #s8:after{left:-3px;top:-3px;width:52px;height:55px}
#hud #s8:before{content:"保命";position:absolute;left:50%;top:-12px;transform:translateX(-50%);font:900 9.5px/12px ui-rounded,"PingFang TC",sans-serif;color:#ffd0e0;text-shadow:0 1px 2px #000;white-space:nowrap;pointer-events:none}
/* 自動戰鬥：縮成小開關 */
#hud #auto{width:42px;height:42px;right:0;bottom:0;animation:none;background-size:118% 118%;background-position:center;border-radius:50%}
#hud #auto b{bottom:3px;font-size:9px;letter-spacing:0;line-height:10px}
/* 全部技能抽屜按鈕 */
#skd{position:absolute;right:47px;bottom:0;width:38px;height:38px;border-radius:50%;border:2px solid #f6c95a;background:rgba(27,20,48,.82);padding:0;color:#ffe38a;box-shadow:0 2px 4px rgba(0,0,0,.4)}
#skd i{position:absolute;left:9px;top:6px;width:16px;height:14px;background:linear-gradient(#ffe38a,#ffe38a) 0 0/7px 6px no-repeat,linear-gradient(#ffe38a,#ffe38a) 9px 0/7px 6px no-repeat,linear-gradient(#ffe38a,#ffe38a) 0 8px/7px 6px no-repeat,linear-gradient(#ffe38a,#ffe38a) 9px 8px/7px 6px no-repeat}
#skd b{position:absolute;left:0;right:0;bottom:3px;font-size:8.5px;line-height:9px}
#skd.on{background:#ffb03a;color:#fff}
#hud #potb{bottom:calc(var(--sab) + 300px)}
/* --- 橫式手機與桌機：兩排，每排 4 格，最多 8 攻擊格 --- */
@media (orientation:landscape) and (max-height:540px){
  #hud .sk{right:calc(var(--sar) + 8px);bottom:calc(var(--sab) + 25px);width:332px;height:124px!important}
  #hud .sk .sb{width:54px;height:54px}#hud .sk .sb:after{left:-4px;top:-4px;width:62px;height:65px}
  #hud #s0{right:96px;bottom:4px}#hud #s1{right:155px;bottom:4px}#hud #s2{right:214px;bottom:4px}#hud #s3{right:273px;bottom:4px}
  #hud #s4{right:96px;bottom:66px}#hud #s5{right:155px;bottom:66px}#hud #s6{right:214px;bottom:66px}#hud #s7{right:273px;bottom:66px}
  #hud #s8{right:30px;bottom:68px}#hud #auto{right:46px;bottom:6px}#skd{right:4px;bottom:8px}
  body #hud #potb{right:calc(var(--sar) + 346px);bottom:calc(var(--sab) + 30px)}}
html.pc #hud .sk{width:332px;height:124px!important}
html.pc #hud .sk .sb{width:54px;height:54px}html.pc #hud .sk .sb:after{left:-4px;top:-4px;width:62px;height:65px}
html.pc #hud #s0{right:273px;bottom:66px}html.pc #hud #s1{right:214px;bottom:66px}html.pc #hud #s2{right:155px;bottom:66px}html.pc #hud #s3{right:96px;bottom:66px}
html.pc #hud #s4{right:273px;bottom:4px}html.pc #hud #s5{right:214px;bottom:4px}html.pc #hud #s6{right:155px;bottom:4px}html.pc #hud #s7{right:96px;bottom:4px}   /* 桌機：鍵盤 1～4 上排、5～8 下排，由左到右 */
html.pc #hud #s8{right:30px;bottom:68px}html.pc #hud #auto{right:46px;bottom:6px}html.pc #skd{right:4px;bottom:8px}
html.pc #hud #s8:before{content:"0";left:auto;top:auto;transform:none}
/* 技能抽屜 */
#skdr{position:absolute;right:6px;bottom:calc(var(--sab) + 74px);width:min(372px,calc(100vw - 12px));max-height:62vh;overflow:auto;z-index:30;background:rgba(27,20,48,.94);border:2px solid #f6c95a;border-radius:16px;padding:8px;color:#fff;display:none;pointer-events:auto;box-shadow:0 4px 14px rgba(0,0,0,.5)}
#skdr.on{display:block}
#skdr .hd2{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:6px}#skdr .hd2 b{flex:1}#skdr .hd2 button{border:1.5px solid #f6c95a;background:transparent;color:#ffe38a;border-radius:10px;font:900 11.5px ui-rounded,"PingFang TC",sans-serif;padding:3px 8px}
#skdr .hd2 button.on{background:#ffb03a;color:#fff}
#skdr .g{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
#skdr .it3{position:relative;text-align:center;cursor:pointer;-webkit-touch-callout:none;user-select:none}
#skdr .it3 .ic{position:relative;width:52px;height:52px;margin:0 auto;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #f6c95a}
#skdr .it3 .ic .ski{width:52px!important;height:52px!important;border-radius:50%}
#skdr .it3 .ic u{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(10,10,30,.74) var(--cd,0deg),transparent 0)}
#skdr .it3 small{display:block;font-size:10.5px;font-weight:800;line-height:12px;margin-top:2px}#skdr .it3 em{position:absolute;right:2px;top:-2px;font-style:normal;font-size:9.5px;background:#ff8a2e;color:#fff;border-radius:6px;padding:0 3px}
#skdr .it3.cool small{opacity:.6}#skdr .tip{font-size:10.5px;opacity:.75;margin-top:6px}
/* 橫式與桌機：抽屜開在「全部」鈕左邊，鈕和自動戰鬥開關不會被蓋住 */
@media (orientation:landscape) and (max-height:540px){#skdr{right:calc(var(--sar) + 104px);bottom:calc(var(--sab) + 25px);max-height:calc(100vh - 40px);width:min(372px,calc(100vw - var(--sar) - 110px))}}
html.pc #skdr{zoom:var(--skz,1);right:56px}
/* 標頭：職業等級條 */
.sk3hd .sk3jl{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}.sk3hd .sk3jl .pbar{flex:1;min-width:90px;margin:0}
/* 分段按鈕 */
.sk3seg{display:flex;gap:4px;margin:6px 0}.sk3seg button{flex:1;border:2px solid #c9a05a;background:rgba(255,255,255,.45);border-radius:10px;padding:4px 2px;font:900 12.5px ui-rounded,"PingFang TC",sans-serif;color:#3b2a45;line-height:1.15}
.sk3seg button small{display:block;font-size:9.5px;font-weight:700;opacity:.7}.sk3seg button.on{background:#ffb03a;border-color:#d07a1a;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.sk3seg.sk3v button{font-size:13.5px;padding:6px 2px}
.sk3note{margin:4px 0}.sk3leg{font-size:10.5px}
/* 技能節點：類型小標籤＋前置 */
.sk3n{width:auto;max-width:100%;padding:0 1px}.sk3n .ski{width:44px;height:44px}
.sk3n u{top:30px;right:calc(50% - 30px)}
.sk3t{display:inline-block;font-style:normal;font-size:9.5px;font-weight:900;line-height:13px;color:#fff;border-radius:6px;padding:0 4px;margin:1px 0;text-shadow:0 1px 1px rgba(0,0,0,.4);vertical-align:middle;white-space:nowrap}
.sk3rq{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;margin-top:1px}
.sk3r{display:inline-block;font-size:9.5px;line-height:12px;font-weight:800;border:1.5px solid #c0392b;color:#c0392b;border-radius:6px;padding:0 3px;background:rgba(255,255,255,.6);white-space:nowrap}
.sk3r.ok{border-color:#2f9a3f;color:#2f7f3f}.sk3r.sk3x{border-style:dashed}
.tn.q .ski{box-shadow:0 0 0 2px #2f8a7a}
/* 技能組 */
.sk3slots{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0}@media (orientation:landscape) and (max-height:540px){.sk3slots{grid-template-columns:repeat(5,1fr)}}html.pc .sk3slots{grid-template-columns:repeat(5,1fr)}
.sk3slot{text-align:center;border:2px solid #c9a05a;border-radius:10px;padding:4px 1px;background:rgba(255,255,255,.4);min-width:0}
.sk3slot.em{border-color:#d0457f;background:rgba(255,220,235,.5)}.sk3slot.on{box-shadow:0 0 0 2.5px #ff8a2e,0 0 10px #ffb03a}
.sk3slot small{display:block;font-size:9.5px;opacity:.7}.sk3slot>b{display:block;font-size:11px;line-height:13px;height:26px;overflow:hidden;word-break:break-all}
.sk3slot select{width:100%;font-size:10px;padding:1px 0;border-radius:6px;border:1px solid #c9a05a;background:#fffaf0;color:#3b2a45}
.sk3sb{width:48px;height:48px;margin:0 auto;border-radius:50%;background:rgba(60,50,100,.18);border:2px dashed #9a8a6a;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sk3sb .ski{width:44px!important;height:44px!important;border-radius:50%}.sk3e{font-size:20px;color:#9a8a6a}
.sk3pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px;margin:4px 0 8px}
.sk3p{text-align:center;border:2px solid transparent;border-radius:10px;padding:3px 1px;background:rgba(255,255,255,.4);cursor:pointer}.sk3p.on{border-color:#ff8a2e}
.sk3p small{display:block;font-size:10.5px;font-weight:800;line-height:12px}.sk3p .ski{border-radius:50%}
/* 轉職條件 */
.jc3ck{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.jc3c{font-size:11.5px;font-weight:800;border-radius:8px;padding:1px 6px;background:rgba(192,57,43,.12);color:#c0392b}.jc3c.ok{background:rgba(47,154,63,.15);color:#2f7f3f}
@media (max-width:372px){.sk3slot>b{font-size:10px}.sk3sb{width:42px;height:42px}.sk3sb .ski{width:38px!important;height:38px!important}}