/* Nhóm cửa sổ "Hệ thống" kiểu client PC (game/js/pcwin/system.js, docs/ui.md §10). Ảnh: tools/build_pcwin_system.py ->
   assets/ui/pc/system/*.webp — trang xám system\bg_system_page1 (9-slice 12), nút trang common\btn_page (3 khung), ô đánh dấu
   team\team_checkbox (5 khung 15×15), trượt common\transverse_scroll + dec_button / add_button, ô lõm autofight (inset),
   nền rồng worldmap\bg_background, nút đóng đỏ common\button_close_red, ô nhập common\black_9, nút login\btn_login. */
.pcs{display:flex;flex-direction:column;gap:6px;color:var(--txt);font-size:13px}
/* nút trang (BtnShow / BtnAudio / BtnPlugin 78×28): thường · rê · đang mở */
.pcs-pages{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid #000;box-shadow:0 1px 0 #727272;padding:0 4px}
.pcs-pg{min-width:64px;min-height:26px;padding:6px 8px 2px;font-size:12.5px;color:#fff;text-shadow:0 1px 1px #000;cursor:pointer;
  border:0 solid transparent;background:#484848 content-box;border-image:url(../../assets/ui/pc/system/tab0.webp) 10 4 2 4 fill / 10px 4px 2px 4px stretch}
.pcs-pg:hover{border-image-source:url(../../assets/ui/pc/system/tab1.webp)}
.pcs-pg.on{background-color:#595959;border-image-source:url(../../assets/ui/pc/system/tab2.webp);padding-top:4px;padding-bottom:4px}
.pcs-pg:focus-visible{outline:1px solid var(--title);outline-offset:-3px}
/* trang (PageShow / PageAudio / PagePlugin: bg_system_page1) */
.pcs-page{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:0 solid transparent;background:#414141 content-box;
  border-image:url(../../assets/ui/pc/system/page.webp) 12 fill / 12px stretch}
.pcs-cap{color:var(--title);font-weight:600;margin:4px 0 1px}
.pcs-cap:first-child{margin-top:0}
.pcs-grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.pcs-frame{border:1px solid #6c6c6c;box-shadow:inset 0 0 0 1px #000;margin:6px 0 0;padding:4px 8px 6px;display:grid;grid-template-columns:1fr;gap:3px}
.pcs-frame legend{color:var(--title);padding:0 4px;font-weight:600}
.pcs-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pcs-note{font-size:12px;color:var(--dim);margin:4px 0 0}
/* chữ mờ trên trang xám #414141: var(--dim) chỉ 4,3:1 → sáng hơn đủ 4,5:1 (WCAG) */
.pcs-page .pcs-note,.pcs-page .muted{color:#b0c4bc}
.pcs-foot{display:flex;justify-content:center;gap:12px;padding:6px 0 2px;flex-wrap:wrap}
.pcs-foot .btn{min-width:72px}
/* ô đánh dấu team_checkbox.spr: 0 trống · 1 trống+rê · 2 chọn · 3 chọn+rê · 4 mờ */
.pcs-ck,.pcs-auto label:has(>input[type=checkbox]){display:flex;align-items:center;gap:6px;cursor:pointer;min-height:24px;line-height:1.25}
:is(#app,#panel) .pcs input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 15px;width:15px;height:15px;margin:0;vertical-align:-3px;border:0;border-radius:0;box-shadow:none;
  background:url(../../assets/ui/pc/system/chk.webp) 0 0/75px 15px no-repeat;cursor:pointer;position:relative}
:is(#app,#panel) .pcs input[type=checkbox]::before{display:none}
:is(#app,#panel) .pcs input[type=checkbox]::after{content:"";position:absolute;inset:-5px}  /* vùng chạm 25 px */
:is(#app,#panel) .pcs label:hover>input[type=checkbox],:is(#app,#panel) .pcs input[type=checkbox]:hover{background-position:-15px 0}
:is(#app,#panel) .pcs input[type=checkbox]:checked{background-position:-30px 0;background-color:transparent}
:is(#app,#panel) .pcs label:hover>input[type=checkbox]:checked,:is(#app,#panel) .pcs input[type=checkbox]:checked:hover{background-position:-45px 0}
:is(#app,#panel) .pcs input[type=checkbox]:disabled{background-position:-60px 0;cursor:default}
:is(#app,#panel) .pcs input[type=checkbox]:focus-visible{outline:1px solid var(--title);outline-offset:1px}
/* thanh trượt âm lượng (ScrbarMusic 265×18): − [rãnh + con trượt transverse_scroll] + */
.pcs-sl{margin:4px 0}
.pcs-sl-t{display:flex;gap:6px;color:#dfe5e0}
.pcs-sl-t b{color:var(--gold)}
.pcs-sl-r{display:flex;align-items:center;gap:2px;max-width:300px}
.pcs-sl-b{flex:0 0 17px;width:17px;height:17px;border:0;padding:0;cursor:pointer;background:url(../../assets/ui/pc/system/sldec.webp) 0 0/51px 17px no-repeat;position:relative}
.pcs-sl-b::after{content:"";position:absolute;inset:-4px}
.pcs-sl-b.add{background-image:url(../../assets/ui/pc/system/sladd.webp)}
.pcs-sl-b:hover{background-position:-17px 0}
.pcs-sl-b:active{background-position:-34px 0}
.pcs input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:18px;margin:0;background:#0c100e;border:1px solid #6c6c6c;box-shadow:inset 0 0 0 1px #000}
.pcs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:15px;border:0;background:url(../../assets/ui/pc/system/slthumb.webp) -16px 0/48px 15px no-repeat;cursor:pointer}
.pcs input[type=range]::-moz-range-thumb{width:16px;height:15px;border:0;border-radius:0;background:url(../../assets/ui/pc/system/slthumb.webp) -16px 0/48px 15px no-repeat}
.pcs input[type=range]:focus-visible{outline:1px solid var(--title)}
/* Plug-in: mô tả (TxtPluginDescr) + danh sách (PluginScrolPanel) */
.pcs-desc{min-height:34px;font-size:12px;color:#dfe5e0;line-height:1.4}
.pcs-desc b{color:var(--gold)}
.pcs-plist{border:1px solid #6c6c6c;box-shadow:inset 0 0 0 1px #000;background:#2a2a2a;padding:3px 6px;max-height:190px;overflow:auto}
.pcs-prow.on .pcs-ck span{color:var(--gold)}
.pcs-keys{font-size:12px;grid-template-columns:auto 1fr}
.pcs-pot{display:flex;flex-direction:column;gap:3px;margin-bottom:3px}
.pcs-ta{width:100%;height:160px;background:#0c100e;color:var(--txt);border:1px solid #727272}

/* ---- Thiết lập tự đánh (autofight.ini 305×430): thẻ = ô lõm của autofight.spr */
.pcs-auto .sys-auto-sub{gap:2px;border-bottom:1px solid #000;box-shadow:0 1px 0 #727272;padding:0 2px;margin-bottom:6px}
.pcs-auto .sys-auto-sub .btn{min-height:26px;padding:6px 6px 2px;font-size:12px;border-image:url(../../assets/ui/pc/system/tab0.webp) 10 4 2 4 fill / 10px 4px 2px 4px stretch;background:#484848 content-box;filter:none}
.pcs-auto .sys-auto-sub .btn:hover{border-image-source:url(../../assets/ui/pc/system/tab1.webp)}
.pcs-auto .sys-auto-sub .btn.on{border-image-source:url(../../assets/ui/pc/system/tab2.webp);background-color:#595959;border-color:transparent;padding-top:4px;padding-bottom:4px}
.pcs-auto .sys-auto-card{border:0 solid transparent;border-radius:0;background:#2a2a2a content-box;padding:8px 10px;
  border-image:url(../../assets/ui/pc/system/inset.webp) 12 fill / 12px stretch}
.pcs-auto .sys-auto-card h4{color:var(--title)}
.pcs-auto select,.pcs-auto input[type=number],.pcs-auto input[type=text]{background:#0c100e;border:1px solid #727272;border-radius:0;color:var(--txt);min-height:24px}
.pcs-auto .sys-auto-skills{grid-template-columns:auto minmax(0,1fr)}

/* ---- Bản đồ thế giới (worldmap_sub.ini 800×600) */
.pcs-wm{gap:4px}
.pcs-wm-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 2px 4px;border-bottom:1px solid #000;box-shadow:0 1px 0 #727272}
.pcs-wm-top .sp,.pcs-wm-sp{flex:1}
.pcs-wm-sel{display:inline-flex;align-items:center;gap:4px;color:#dfe5e0}
.pcs-wm-sel select{background:#0c100e;border:1px solid #727272;color:var(--txt);min-height:24px;max-width:140px}
.pcs-wm-name{color:var(--gold);font-size:14px}
.pcs-wm-body{background:#1b2226 url(../../assets/ui/pc/system/wmbg.webp) center/cover;border:1px solid #000;box-shadow:inset 0 0 0 1px #6c6c6c;padding:3px}
.pcs-wm .pcs-wm-body .wm-bar{display:none}   /* khu vực chọn ở "Chọn khu" (ComboxSub) */
.pcs-wm .wmap{margin:0}
.pcs-wm-list .wmap,.pcs-wm-list .wm-bar,.pcs-wm-list #bBig{display:none}
.pcs-wm-res{display:flex;gap:4px;flex-wrap:wrap}
.pcs-wm-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#dfe5e0;font-size:12px;padding-top:2px}
.pcs-wm-foot label{display:inline-flex;align-items:center;gap:4px}
.pcs-wm-pos{min-width:110px;text-align:center;padding:1px 6px;background:url(../../assets/ui/pc/system/inp.webp) 0 0/100% 100%}
.pcs-wm-foot input{background:#000;border:1px solid #4a4a4a;color:var(--txt);border-radius:0;min-height:24px;padding:1px 4px}
.pcs-wm-foot input[type=number]{width:56px}
.pcs-wm-foot input[type=search]{width:120px}
@media (max-width:820px),(max-height:500px){
  .pcs-wm-foot .pcs-wm-sp{flex-basis:100%;height:0}
  .pcs-wm-foot input[type=search]{width:min(120px,30vw)}
}

/* ---- Bảng Admin trong cửa sổ PC */
.pcs-adm .adtabs{margin-bottom:6px}
.pcs-adm input,.pcs-adm select{background:#0c100e;border:1px solid #727272;border-radius:0;color:var(--txt);min-height:24px;max-width:100%}

/* ---- Trọng thương: bảng renascencepanel.ini (155×172, khung deathoperation\main = win.webp) giữa màn chơi */
#deadOv .pcs-rv{pointer-events:auto;display:flex;flex-direction:column;align-items:stretch;min-width:170px;max-width:calc(100% - 24px);
  border:0 solid transparent;border-image:url(../../assets/ui/pc/win0.webp) 38 30 17 48 fill / 38px 30px 17px 48px round stretch;background:none;padding:6px 16px 16px}
#deadOv .pcs-rv-h{height:26px;display:flex;align-items:center;justify-content:center}
#deadOv .pcs-rv-h b{font-family:inherit;font-size:14px;font-weight:600;line-height:1;color:var(--title);text-shadow:0 1px 1px #000}
#deadOv .pcs-rv-b{display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:6px}
#deadOv .pcs-rv-b small#deadTxt{color:#dfe5e0;font-size:12px;text-shadow:none;text-align:center}
#deadOv .pcs-rv-b .btn,#deadOv .pcs-rv #deadMed{width:118px;margin:0;padding:3px 6px;min-height:26px;font-size:12.5px;line-height:1.2}
#deadOv .pcs-rv #deadMed.hidden{display:block!important;pointer-events:none;color:#141414;text-shadow:none;background-color:#7e7e7e;border-image-source:url(../../assets/ui/pc/btn3.webp)}
#deadOv .pcs-rv #deadMed small{font-size:10.5px}

/* ---- Bản đồ khu vực (M): nút đóng đỏ common\button_close_red (worldmap_sub BtnClose 23×23), nền rồng sau canvas */
#bigMap #bmClose{width:30px;height:30px;min-height:0;padding:0;border:0;color:transparent;overflow:hidden;position:relative;background:none;border-image:none}
#bigMap #bmClose::before{content:"";position:absolute;left:3px;top:3px;width:23px;height:23px;background:url(../../assets/ui/pc/system/closer.webp) 0 0/92px 23px no-repeat}
#bigMap #bmClose:hover::before{background-position:-23px 0}
#bigMap #bmClose:active::before{background-position:-46px 0}
#bigMap #bmWrap{background:#1b2226 url(../../assets/ui/pc/system/wmbg.webp) center/cover}

/* ---- hộp xác nhận (msgbox.ini: lời nhắn trong ô lõm SpMsg, nút btn_2ch 51×19 căn phải) */
#confirm #cfBody{margin:0 8px 6px;padding:8px 10px;background:#283039;border:1px solid #000;box-shadow:inset 0 0 0 1px #5d6a72}
#confirm #cfBody h3{border:0;margin:0 0 4px;color:var(--title)}
#confirm .cfbtn .btn{min-width:72px}

/* ---- đăng nhập / tạo nhân vật: nút lớn = login\btn_login.spr (98×25, hoa văn hai đầu) */
#auth .btn.big,#create #cGo{border:0 solid transparent;border-image:url(../../assets/ui/pc/system/login0.webp) 4 26 fill / 4px 26px stretch;background:#1d3934 content-box;
  padding:8px 34px;color:#fff;text-shadow:0 1px 1px #000}
#auth .btn.big:hover,#create #cGo:hover{border-image-source:url(../../assets/ui/pc/system/login1.webp);background-color:#2a6e4e}
#auth .btn.big:active,#create #cGo:active{border-image-source:url(../../assets/ui/pc/system/login2.webp);background-color:#031a16}
#auth .btn.big:disabled,#create #cGo:disabled{border-image-source:url(../../assets/ui/pc/system/login3.webp);background-color:#4a4a4a;color:#141414;text-shadow:none}

/* bản đồ thế giới: vừa khung cửa sổ 800×600 (ảnh giữ tỉ lệ 794:535, thanh Toạ độ / Bản đồ luôn ở đáy như worldmap_sub.ini) */
.pcs-wm{height:100%;min-height:0}
.pcs-wm.pg-world .pcs-wm-body{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcs-wm.pg-world .pcs-wm-body .wmap{width:min(100cqw,calc(100cqh * 794 / 535));max-width:none;margin:0;flex:0 0 auto}
.pcs-wm.pg-world .pcs-wm-body .wm-in.pc{min-width:0}
.pcs-wm.pg-list .pcs-wm-list{flex:1;min-height:0;overflow:auto}
@media (max-width:820px),(max-height:500px){
  .pcs-wm{height:auto}
  .pcs-wm.pg-world .pcs-wm-body{flex:none;container-type:normal;display:block;overflow:visible}
  .pcs-wm.pg-world .pcs-wm-body .wmap{width:auto}
  .pcs-wm.pg-world .pcs-wm-body .wm-in.pc{min-width:600px}
}
/* Hệ thống: 5 nút trang một hàng; nút đáy luôn ở đáy khung 353×396 */
.pcs-sys{min-height:100%}
.pcs-sys .pcs-pg{min-width:0;padding-left:7px;padding-right:7px}
.pcs-sys .pcs-foot{margin-top:auto}
@media (pointer:fine) and (min-width:821px) and (min-height:501px){
  .pcs-ck,.pcs-auto label:has(>input[type=checkbox]){min-height:20px}
  .pcs-page{gap:2px}
}
/* màn gọn (chạm): nút − / + và rãnh trượt âm lượng ≥ 28 px (vùng chạm ::after không tính là phần tử) */
@media (max-width:820px),(max-height:500px){
  .pcs-sl-r{gap:6px;max-width:none}
  .pcs-sl-b{flex:0 0 28px;width:28px;height:28px;background-size:84px 28px}
  .pcs-sl-b:hover{background-position:-28px 0}
  .pcs-sl-b:active{background-position:-56px 0}
  .pcs input[type=range]{height:28px}
}
/* Thông báo hoạt động (Hiển thị — pcwin/eventnotice.js) */
.pcs-evn .pcs-grid2{gap:2px 10px}
.pcs-evn.off .pcs-grid2{opacity:.5}