/* Cửa sổ PC nhóm misc (game/js/pcwin/misc.js, docs/ui.md §9.6). Ảnh: game/assets/ui/pc/misc (tools/build_pcwin_misc.py):
   page = common\page_button_small.spr (3 khung 55×28: thường / rê / đang mở), partner / life = lòng trong bg_partner.spr /
   lifeskill_page1.spr (toạ độ ini − (8, 34)), inc / dec = playerpanel\increase_button / decrease_button (4 khung 15×15),
   attrl / attrpt = cột chỉ số / khối cộng điểm của playerpanel\basic_backgroud.spr, eqhl = equip_heightlight.spr.
   Màu chữ theo ini: tiêu đề 170,230,130, nhãn 148,174,165. Bố cục toạ độ tuyệt đối trên máy tính; màn gọn (.pcm-c, misc.js đặt
   theo matchMedia như win.js: ≤ 820 rộng hoặc ≤ 500 cao — cửa sổ thành tấm phủ) → xếp dọc, nút ≥ 30 px. */
.pcm{color:#e8ece6;font-size:12px}
.pcm .tab,.pcm .pcm-host{display:block}
.pcm .hidden{display:none!important}
.pcm-note{color:#94aea5;font-size:11px;margin:6px 0;line-height:1.4}
.pcm .ok{color:#7be07b}
.pcm-adm{margin-top:8px;color:#94aea5}

/* ---- nút trang PC (page_button_small.spr) — trang của cửa sổ và hàng mục con của module */
.pcm-pg,.pcm .pcm-pages{display:flex!important;flex-wrap:wrap;gap:2px;margin:0 0 6px!important;align-items:flex-end}
.pcm-pb,.pcm .pcm-pages .btn,.pcm .pcm-pages button{flex:0 0 auto!important;min-width:55px;height:28px;padding:7px 9px 3px!important;border:0!important;border-radius:0!important;
  font-size:12px;line-height:16px;color:#d6dad4!important;text-shadow:0 1px 0 #000;cursor:pointer;filter:none!important;box-shadow:none!important;
  background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url(../../assets/ui/pc/misc/page.webp) 0 0/300% 100% no-repeat!important}
.pcm-pb:hover,.pcm .pcm-pages button:hover{background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url(../../assets/ui/pc/misc/page.webp) 50% 0/300% 100% no-repeat!important}
.pcm-pb.on,.pcm .pcm-pages button.on{color:#fff!important;padding-top:6px!important;
  background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),url(../../assets/ui/pc/misc/page.webp) 100% 0/300% 100% no-repeat!important;box-shadow:inset 0 -2px 0 #aae682!important}
.pcm-pb:focus-visible,.pcm .pcm-pages button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* ---- hộp / hàng chung */
.pcm-box{background:rgba(0,0,0,.25);border:1px solid #5d625c;padding:6px 8px;margin:6px 0;font-size:12px}
.pcm-box .t{color:#aae682;margin-bottom:3px;display:flex;align-items:center;gap:6px}
.pcm-box .t .btn{margin-left:auto}
.pcm-row{display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid #3c403b;font-size:12px}
.pcm-row .n{flex:1;min-width:0;overflow-wrap:anywhere}
.pcm-row .n small{color:#94aea5}
.pcm-acts{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.pcm h3{color:#aae682}
.pcm .ph{font-size:10px;color:#94aea5;text-align:center;line-height:1.1}

/* ================= Đồng hành (partner.ini, lòng 504×378) */
.pt-stage{position:relative;width:504px;height:378px;margin:0 auto;background:url(../../assets/ui/pc/misc/partner.webp) 0 0 no-repeat}
.pt-stage>*{position:absolute}
.pt-lt{left:12px;top:9px;color:#aae682}
.pt-lt small{color:#94aea5}
.pt-list{left:16px;top:29px;width:180px;height:119px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.pt-row{display:flex;align-items:center;gap:4px;min-height:22px;padding:2px 6px;border:0;background:none;color:#94aea5;text-align:left;font-size:12px;cursor:pointer;flex:none}
.pt-row em{font-style:normal;color:#f0a03a;width:10px}
.pt-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-row small{color:#ecdf9c}
.pt-row:hover{background:rgba(255,255,255,.07);color:#e8ece6}
.pt-row.on{background:rgba(200,0,0,.35);color:#fff;box-shadow:inset 3px 0 0 #aae682}
.pt-empty{color:#94aea5;padding:6px}
.pt-b1,.pt-b2,.pt-b3,.pt-b4,.pt-b5{width:63px;height:19px;min-height:19px!important;padding:0!important;font-size:12px;line-height:17px}
.pt-b1{left:37px;top:156px}.pt-b2{left:112px;top:156px}
.pt-b3{left:422px;top:11px}.pt-b4{left:422px;top:71px}.pt-b5{left:421px;top:163px}
.pt-pv{left:18px;top:186px;width:178px;height:173px}
.pt-info{left:222px;top:9px;width:194px;line-height:20px}
.pt-nm{position:absolute;left:0;top:-2px;display:none}
.pt-i{display:flex;gap:6px;white-space:nowrap}
.pt-i span{color:#94aea5}
.pt-i b{color:#ecdf9c;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.pt-i.low b{color:var(--red-t)}
.pt-i .st{letter-spacing:-1px;color:#f0b040}
.pt-i .st.c-blue{color:#5aa8ff}.pt-i .st.c-purple{color:#c58cff}.pt-i .st.c-orange{color:#ff9a3a}.pt-i .st.c-yellow{color:#ffe14a}.pt-i .st.c-green{color:#7be07b}
.pt-pot{display:grid;grid-template-columns:120px 150px;margin-top:5px}
.pt-pot span{color:#94aea5}.pt-pot b{color:#ecdf9c}
.pt-eqt{left:222px;top:166px;color:#aae682}
.pt-eq{left:232px;top:194px;display:flex;gap:17px}
.pt-eqc{width:36px;height:36px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
.pt-eqc img{max-width:34px;max-height:34px}
.pt-eqc .en{position:absolute;right:1px;bottom:0;font:700 11px/1 Tahoma,Arial;color:#fff;text-shadow:0 0 2px #000}
.pt-eqc:hover{background:url(../../assets/ui/pc/misc/eqhl.webp)}
.pt-skt{left:222px;top:243px;color:#aae682}
.pt-sk{left:229px;top:270px;width:265px;display:grid;grid-template-columns:repeat(5,42px);grid-auto-rows:42px;gap:6px 11px}
.pt-skc{position:relative;cursor:pointer}
.pt-skc .ic{display:block;margin:1px}
.pt-skc em{position:absolute;right:2px;bottom:1px;font:700 11px/1 Tahoma,Arial;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000;font-style:normal}
.pt-skc.div em{color:#ffe14a}
.pt-skc.sel{outline:2px solid #aae682;outline-offset:-1px}
.pt-skc.ph{cursor:default}
.pcm-partner .pcm-flow{margin-top:6px}
/* thân hẹp (màn gọn): xếp dọc, bỏ ảnh nền cố định */
.pcm-c .pt-stage{width:auto;height:auto;background:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.pcm-c .pt-stage>*{position:static}
.pcm-c .pt-lt{grid-column:1/-1}
.pcm-c .pt-list{width:auto;height:auto;max-height:132px;grid-column:1/-1;background:rgba(0,0,0,.25);border:1px solid #5d625c}
.pcm-c .pt-b1,.pcm-c .pt-b2,.pcm-c .pt-b3,.pcm-c .pt-b4,.pcm-c .pt-b5{width:auto;min-height:32px!important;height:32px}
.pcm-c .pt-pv{width:100%;height:160px;grid-column:1/-1;background:#1a1d1a;border:1px solid #5d625c}
.pcm-c .pt-info{width:auto;grid-column:1/-1}
.pcm-c .pt-i{white-space:normal}
.pcm-c .pt-pot{grid-template-columns:1fr 1fr}
.pcm-c .pt-eqt,.pcm-c .pt-skt{grid-column:1/-1}
.pcm-c .pt-eq{grid-column:1/-1;gap:6px;flex-wrap:wrap}
.pcm-c .pt-eqc{background:url(../../assets/ui/pc/slot.webp) 0 0/100% 100%;width:44px;height:44px}
.pcm-c .pt-sk{width:auto;grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,44px));gap:6px;justify-content:start}
.pcm-c .pt-skc{width:44px;height:44px}

/* ================= Kỹ năng sống (lifeskill.ini, lòng 303×434) */
.lf-stage{position:relative;width:303px;height:434px;margin:0 auto;background:url(../../assets/ui/pc/misc/life.webp) 0 0 no-repeat}
.lf-stage>*{position:absolute}
.lf-pool{left:19px;width:266px;height:16px;line-height:16px;display:flex;gap:5px;white-space:nowrap;overflow:hidden}
.lf-pool span{color:#94aea5}.lf-pool .lf-pv{color:#ecdf9c}.lf-pool small{color:#94aea5}
.lf-ti{left:14px;color:#aae682}
.lf-c{width:122px;height:40px;padding:0;border:0;background:none;color:#e8ece6;text-align:left;cursor:pointer}
.lf-c i{position:absolute;left:2px;top:2px;width:36px;height:36px;background:0 0/36px 36px no-repeat}
.lf-c b{position:absolute;left:48px;top:1px;font-weight:400;font-size:12px;white-space:nowrap}
.lf-c span{position:absolute;left:48px;top:19px;color:#ecdf9c;font-size:12px}
.lf-c u{position:absolute;left:48px;top:35px;width:66px;height:3px;background:#0c0907;text-decoration:none}
.lf-c u s{display:block;height:100%;background:#aae682}
.lf-c:hover i,.lf-c.on i{box-shadow:0 0 0 2px #aae682}
.lf-c:focus-visible{outline:2px solid var(--gold)}
.lf-job .t{justify-content:space-between}
.lf-bar{height:6px;background:#0c0907;border:1px solid #3a2d1c;margin-top:3px}
.lf-bar i{display:block;height:100%;background:#aae682}
.pcm-c .lf-stage{width:auto;height:auto;background:none}
.pcm-c .lf-stage>*{position:static}
.pcm-c .lf-pool{width:auto;margin:6px 0 2px}
.pcm-c .lf-ti{margin:2px 0 4px}
.pcm-c .lf-c{position:relative!important;left:auto!important;top:auto!important;display:inline-block;width:calc(50% - 4px);height:44px;vertical-align:top;margin:0 2px 4px}
/* Phối phương (produce.ini): nội dung life.js — điểm và lưới kỹ năng đã ở cửa sổ Kỹ năng sống */
.pcm-produce .sys-life-top{display:none}

/* ================= Thuộc tính nhân vật (playerpanel.ini PageBasic 345×385) */
.at-stage{position:relative;width:345px;height:430px;margin:0 auto;background:url(../../assets/ui/pc/misc/attrl.webp) 0 0 no-repeat}
.at-stage>*{position:absolute}
.at-l{left:2px;width:110px;height:14px;display:flex;justify-content:space-between;gap:4px;font-size:11px;line-height:14px;white-space:nowrap}
.at-l span{color:#94aea5;overflow:hidden;text-overflow:ellipsis}.at-l span i{font-style:normal}
.at-l b{color:#ecdf9c;font-weight:600}
.at-por{left:118px;top:5px;width:42px;height:42px;background:url(../../assets/ui/pc/misc/portrait.webp) 0 0 no-repeat;display:flex;align-items:center;justify-content:center}
.at-por i{display:block;width:30px;height:30px}
.at-r{font-size:12px;white-space:nowrap;color:#e8ece6}
.at-nm{color:#ecdf9c}
.at-mid{left:120px;top:74px;width:222px}
.at-mid .kv{font-size:12px;gap:2px 8px}
.at-mid .kv span{color:#94aea5}
.at-go{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
/* ô trang bị phụ (UI.charExtra: gear.js Ngựa / Phi phong / Mật tịch / Trận / Quan ấn / Ấn + power.js Chân Nguyên / Huy Chương / Thánh
   Linh) ở giữa trang Thuộc tính — chỗ ImgHorse / ImgMantle / ImgBook / ImgZhen / ImgChop / ImgSignet của playerpanel.ini */
.at-ex{max-height:180px;overflow:auto}
.at-ex .sys-gear-char{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin:0 0 4px}
.at-ex .sys-gear-char small{white-space:normal;overflow:visible;line-height:1.05;overflow-wrap:anywhere}   /* «Ngũ Hành Ấn» dưới ô 35 px: xuống dòng, không cắt */
.at-ex .sys-power-char{display:flex;flex-wrap:wrap;gap:3px;margin:0}
.at-ex .sys-power-char .btn{font-size:11px;padding:2px 5px;display:inline-flex;align-items:center;gap:3px}
.at-pt{left:114px;top:352px;width:230px;height:75px;background:url(../../assets/ui/pc/misc/attrpt.webp) 0 0 no-repeat}
.at-pt>*{position:absolute}
.at-pl{left:4px;width:36px;color:#94aea5;line-height:14px}
.at-pv{left:40px;width:40px;text-align:right;color:#ecdf9c;line-height:14px}
.at-pv.up{color:#7be07b}
.at-inc,.at-dec{width:15px;height:15px;border:0;padding:0;cursor:pointer;background:url(../../assets/ui/pc/misc/inc.webp) 0 0/60px 15px no-repeat}
.at-inc{left:87px}.at-dec{left:104px;background-image:url(../../assets/ui/pc/misc/dec.webp)}
.at-inc:hover,.at-dec:hover{background-position:-15px 0}.at-inc:active,.at-dec:active{background-position:-30px 0}
.at-inc:disabled,.at-dec:disabled{background-position:-45px 0;cursor:default}
.at-rem{left:122px;top:10px;color:#94aea5}.at-rem b{color:#ecdf9c}
.at-auto{left:121px;top:30px;width:107px;height:19px;min-height:19px!important;padding:0!important;font-size:12px;line-height:17px}
.at-ok,.at-no{top:54px;width:51px;height:19px;min-height:19px!important;padding:0!important;font-size:12px;line-height:17px}
.at-ok{left:122px}.at-no{left:178px}
.at-list{background:rgba(0,0,0,.3);border:1px solid #5d625c;padding:4px 8px;margin-bottom:6px}
.at-h{color:#aae682;padding:2px 0 4px}
.at-row{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid #3c403b}
.at-row span{color:#94aea5}.at-row b{color:#ecdf9c;font-weight:600;text-align:right}
.at-row small{color:#94aea5;font-weight:400}
.pcm-c .at-stage{width:auto;height:auto;background:none;display:flex;flex-direction:column}
.pcm-c .at-stage>*{position:static}
.pcm-c .at-l{width:auto;height:auto;padding:2px 0;border-bottom:1px solid #3c403b;font-size:12px}
.pcm-c .at-por{display:none}
.pcm-c .at-r{display:inline}
.pcm-c .at-mid{width:auto;margin:8px 0}
.pcm-c .at-ex{max-height:none}
.pcm-c .at-pt{width:auto;height:auto;background:rgba(0,0,0,.3);border:1px solid #5d625c;display:grid;grid-template-columns:auto 1fr 32px 32px;gap:6px;padding:6px;align-items:center}
.pcm-c .at-pt>*{position:static}
.pcm-c .at-pl,.pcm-c .at-pv{width:auto;text-align:left}
.pcm-c .at-inc,.pcm-c .at-dec{width:30px;height:30px;background-size:120px 30px}
.pcm-c .at-inc:hover,.pcm-c .at-dec:hover{background-position:-30px 0}.at-inc:disabled,.at-dec:disabled{background-position:-90px 0}
.pcm-c .at-rem{grid-column:1/-1}
.pcm-c .at-auto,.pcm-c .at-ok,.pcm-c .at-no{width:auto;height:32px;min-height:32px!important;grid-column:span 2}
.pcm-attr .pcm-pg{justify-content:flex-start}

/* ================= Tọa kỵ */
.hs-top{display:flex;gap:10px;align-items:center;margin:4px 0 6px}
.hs-slot{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;background:url(../../assets/ui/pc/slot.webp) 0 0/100% 100%}
.hs-slot:hover{box-shadow:0 0 0 2px #aae682}
.hs-n{display:flex;flex-direction:column;gap:2px;min-width:0}
.hs-n small{color:#94aea5}