/* ========================================================================== */
/* MYTHAVON — UI readability pass                                        */
/* รูป/สี/ค่าหลักเห็นทันที · รายละเอียดอยู่ใน tooltip/แท็บ · 1 งานต่อ 1 หน้า */
/* ========================================================================== */
:root{
 --mu-bg:#0a0d16;--mu-bg2:#121929;--mu-line:#806532;--mu-line2:#29354a;
 --mu-gold:#e3bd67;--mu-text:#f3f5fb;--mu-dim:#aeb8ca;--mu-green:#54e39a;
 --mu-blue:#73b8f4;--mu-danger:#ff7890;--mu-panel:rgba(10,14,25,.94);
}

/* กรอบหน้าต่างใช้ภาษาภาพเดียวกันทุกระบบ */
.modalPanel{
 background:
  radial-gradient(circle at 16% -10%,rgba(65,110,165,.18),transparent 38%),
  linear-gradient(150deg,rgba(18,25,41,.985),rgba(7,10,18,.99))!important;
 border:1px solid #94753a!important;border-radius:12px!important;
 box-shadow:0 24px 70px rgba(0,0,0,.82),inset 0 0 0 1px rgba(255,225,155,.055),
  0 0 28px rgba(71,116,176,.10)!important;
 color:var(--mu-text);
 /* 🔴 บั๊ก(เจ้าของทัก "overlay จมหลังหน้าต่าง" — ป้ายไอเท็มไปอยู่ข้างหลัง ฯลฯ):
    เดิมตั้ง z-index:9000 ทำให้ทุกอย่างที่ควรลอย "เหนือ" หน้าต่าง —
    ป้ายรายละเอียดไอเท็ม(140) · toast(99) · ตัวลากของ ghost(99) · กล่องยืนยัน pick(40) ·
    ป้ายประกาศ(118) — กลับจมอยู่ "หลัง" หน้าต่างทั้งหมด (เพราะทั้งชุดตั้งไว้ 40-140)
    → คืนหน้าต่างให้ต่ำกว่า overlay เหล่านั้น (ยังสูงกว่า HUD 5-12 / แถบข้าง 22) = แก้บั๊กทั้งชุดทีเดียว
    เมนูรวม/หน้าต่อเน็ต/tooltip uikit อยู่ที่ 9999-10000 ยังสูงกว่าอยู่แล้ว ไม่กระทบ */
 z-index:35!important;
}
.modalPanel .invHead{
 position:sticky;top:0;z-index:12;min-height:38px;margin:-10px -12px 10px!important;
 padding:8px 12px!important;background:linear-gradient(90deg,#202d43,#101724 72%)!important;
 border-bottom:1px solid #715a31!important;box-shadow:0 5px 18px rgba(0,0,0,.36);
}
.modalPanel .invHead b{color:#f3d58b!important}
.modalPanel .pClose,.modalPanel .invClose{color:#f0a4b2!important}
.secT{color:#e4c170!important;border-bottom-color:rgba(215,174,85,.22)!important}
.btn,.bfB,.hbSel{border-radius:5px!important}
.btn.up{color:#071b0d!important}

/* ═══ HUD: เหลือเฉพาะข้อมูลที่ต้องดูระหว่างต่อสู้ ═══ */
#stats{width:214px!important;padding:8px 10px!important;border-radius:8px!important;
 background:linear-gradient(145deg,rgba(20,17,28,.95),rgba(10,9,15,.94))!important}
#stats #nameRow{margin-bottom:4px}
#stats .bar{height:16px!important;margin:3px 0!important}
#stats .bar span{font-size:12px!important;line-height:16px!important}
#purse{top:136px!important;width:224px!important;padding:7px 9px!important;border-radius:9px!important}
#purse .prRow{display:flex!important;text-align:left!important;gap:7px!important}
#purse .prI{display:block!important;font-size:12px!important;min-width:0}
#purse .walletPremium{padding-top:4px;margin-top:4px!important;border-top:1px solid rgba(255,255,255,.1)}
/* 💱 แถบสกุลเงิน/ทรัพยากรในกระเป๋า (I) — ย้ายมาจาก HUD ซ้ายบน */
#invPurse{display:flex;flex-wrap:wrap;gap:5px 14px;padding:8px 16px;margin:0;
 border-bottom:1px solid #4e402b;background:rgba(0,0,0,.2);font-size:13px}
#invPurse b{display:flex;align-items:center;gap:4px;white-space:nowrap;color:#ffe9bd;font-weight:900}
#invPurse b small{color:#a99fc0;font-weight:700;font-size:11.5px}
#invPurse b em{color:#fff;font-style:normal;font-weight:900}
#questBox{width:205px!important;padding:8px 10px!important;border-radius:7px!important}
#questBox #qDesc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px!important}
#questBox #qGuide{font-size:12px}
#questBox #qNum{font-size:12px!important}
#zone{padding:6px 13px!important;font-size:12.5px!important;border-radius:6px!important;
 opacity:.55;transition:opacity .2s,transform .2s}
#zone.muFlash{opacity:1;transform:translate(-50%,1px)!important}
#mmoChip{font-size:11.5px!important;padding:4px 9px!important;opacity:.82!important}
#skills{gap:4px!important;bottom:10px!important}
#skills .sk{width:48px!important;height:48px!important;border-radius:7px!important;
 background:linear-gradient(145deg,#292332,#14111b)!important}
#skills .skGap{width:5px!important}
#menuBtn{width:48px!important;height:48px!important;border-radius:9px!important;font-size:20px!important}
#menuBtn small{font-size:10px!important}
#mini{--miniS:142px}
#miniLegend{display:none!important}

/* ═══ เควส: 3 แท็บ ไม่เทข้อมูลทั้งหมดในหน้าเดียว ═══ */
#qpanel{--pw:650px;--ph:620px;overflow:hidden!important;padding:10px 12px!important}
#qpanel #qpBody{overflow:hidden;min-height:0}
.muTabs{display:flex;align-items:center;gap:4px;margin:0 0 8px;padding:4px;
 background:#0d0b12;border:1px solid #31293e;border-radius:7px}
.muTab{flex:1;min-height:34px;padding:5px 9px;border:1px solid transparent;border-radius:5px;
 background:transparent;color:#a9a0ba;font:800 12.5px system-ui;cursor:pointer}
.muTab:hover{color:#f5e6bd;background:#211b2b}
.muTab.on{color:#1a1307;background:linear-gradient(#e9c775,#b88935);border-color:#f6dea3}
.muQPage{display:none;max-height:calc(min(88dvh,620px) - 92px);overflow-y:auto;overflow-x:hidden;
 padding:1px 5px 7px 1px;scrollbar-gutter:stable}
.muQPage.on{display:block}
.muQPage .setCard{padding:8px 10px!important;margin-bottom:6px!important}
.muQPage .setCard .sl{font-size:12.5px!important;line-height:1.45!important}
.muQEmpty{display:grid;place-items:center;min-height:180px;color:var(--mu-dim);font-size:13px}

/* ═══ แผนที่: เปิดทีละงาน — แผนที่ / วาร์ป / จุดฟาร์ม ═══ */
#mapPanel{--pw:920px;--ph:680px;overflow:hidden!important;padding:10px 12px!important}
#mapPanel .muMapTabs{margin-bottom:7px}
#mapPanel .mapCols{display:block!important;min-height:0!important}
#mapPanel .mapColL,#mapPanel .mapColC,#mapPanel .mapColR{display:none!important;width:100%!important;
 max-width:none!important;min-width:0!important;border:0!important;padding:0!important}
#mapPanel[data-mu-tab="map"] .mapColC{display:block!important}
#mapPanel[data-mu-tab="warp"] .mapColL{display:block!important}
#mapPanel[data-mu-tab="farm"] .mapColR{display:block!important}
#mapPanel[data-mu-tab="map"] #bigMap{width:auto!important;height:min(56dvh,500px)!important;
 max-width:100%!important;margin:0 auto!important;border-radius:6px!important}
#mapLegend{display:flex!important;justify-content:center;flex-wrap:wrap;gap:4px;margin-bottom:5px!important}
#mapLegend span{font-size:11.5px!important;padding:2px 6px!important}
#mapInfo{max-width:700px;margin:5px auto 0!important;font-size:12px!important;text-align:center}
#zoneList,#farmList{max-height:calc(min(88dvh,680px) - 145px)!important;overflow-y:auto!important;
 overflow-x:hidden!important;padding-right:5px;scrollbar-gutter:stable}
.muWarpSub{display:flex;gap:5px;margin-bottom:7px;position:sticky;top:0;z-index:4;background:var(--mu-bg);padding-bottom:5px}
.muWarpSub .muTab{flex:0 1 220px}
.muWarpPage{display:none}.muWarpPage.on{display:flex;flex-direction:column;gap:4px}
.zAct,.zRow,.fRow{min-height:38px!important;border-radius:5px!important}
.zRow.zMap{margin-left:0!important}
.zRow .zn{min-width:0!important;flex:1!important}

/* ═══ กระเป๋า: paper doll ซ้าย + ตารางจริงขวา ไม่มีข้อมูลยศแทรก ═══ */
#inv{--pw:920px!important;--ph:620px!important;border-radius:8px!important}
#inv .invLayout{grid-template-columns:350px minmax(0,1fr)!important;gap:7px!important;padding:7px!important}
#inv .invPane{border-radius:6px!important;padding:8px!important}
#inv .invEquipPane{overflow:hidden!important;max-height:none!important}
#inv .invBagPane{max-height:none!important}
#inv .paneHint,#inv .invFoot,#dollBranch{display:none!important}
#inv .dollFrame{height:326px!important;min-height:326px!important}
#inv #invCv{height:316px!important}
#inv .dollRail{gap:3px!important;padding:3px 0!important}
#inv .dollRail .ds{width:46px!important;height:46px!important;min-height:46px!important}
/* 🔴 บั๊ก(เจ้าของทัก "ช่องที่ใส่ของ ไอคอนรูปหาย"): translate(-50%,-50%) จัดกึ่งกลางได้เฉพาะกับ
   element ที่เป็น position:absolute + top/left:50% เท่านั้น · แต่ .gart ในช่องตุ๊กตาอยู่ flow ปกติ
   (base ใช้แค่ translateY) → transform นี้เลยดันรูปไอเท็มหลุดออกนอกช่องซ้าย-บน = รูปหาย เหลือแต่ emoji+ปุ่มถอด
   → ตั้ง absolute + top/left:50% ให้ translate จัดกึ่งกลาง "จริง" ในช่อง */
#inv .dollRail .ds .gart{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%) scale(.88)!important}
#inv .dollRail .ds .petIco{font-size:20px!important}
#inv .dollRail .ds .lbl{max-width:43px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8.5px!important}
#inv .dollRail .ds .petEye{transform:scale(.82);transform-origin:top left}
#inv .dollMid{padding-top:5px!important}
#inv .heroStats{margin-top:5px!important}
#inv .heroMoney{margin-top:4px!important}
#inv #bagWrap{flex:1;min-height:330px;max-height:430px!important;overflow-y:auto!important;overflow-x:hidden!important;
 background-color:#0b0910!important;border-radius:4px!important}
#inv .bagFilt{gap:4px!important;margin:4px 0 6px!important}
#inv .bfB{padding:5px 8px!important;font-size:11.5px!important}
#inv .bfI{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;display:grid!important;place-items:center!important}
#inv .bagTop{margin-bottom:4px!important}
#inv.sellMode .bagFilt,#inv.sellMode #bagHelp{display:none!important}
#inv .sellBar{padding:7px!important;gap:5px!important;border-radius:6px!important;margin-bottom:6px!important}
#inv .sellFiltBox{flex:1 0 100%;display:grid;grid-template-columns:repeat(3,minmax(105px,1fr)) auto auto;
 gap:5px;align-items:end;padding:6px;background:#100d16;border:1px solid #3c3149;border-radius:5px}
#inv .sellFiltBox .sfTitle{grid-column:1/-1;color:#e8c66f;font-size:12px;font-weight:900}
#inv .sellFiltBox label{display:flex;flex-direction:column;gap:2px;color:#aaa1b9;font-size:10.5px;font-weight:800}
#inv .sellFiltBox select{width:100%;min-height:29px;padding:3px 24px 3px 7px;border:1px solid #55466a;border-radius:4px;
 background:#211a2c;color:#f1eaf8;font:800 11.5px system-ui;outline:none}
#inv .sellFiltBox select:focus{border-color:#d7ae55}
#inv .sellFiltBox .sfSafe{height:29px;display:flex;flex-direction:row;align-items:center;white-space:nowrap;
 padding:0 7px;border:1px solid #4d6047;border-radius:4px;background:#172019;color:#bce9c1;cursor:pointer}
#inv .sellFiltBox .sfSafe input{accent-color:#47de83}
#inv .sellFiltBox .sfPick{height:29px;margin:0!important;padding:4px 9px!important;white-space:nowrap;font-size:11.5px!important}
#inv .sellFiltBox .sfMatch{grid-column:1/-1;min-height:16px;color:#a9a0b5;font-size:11px}
#inv .sellFiltBox .sfMatch b{color:#f2d27f}
#bagGrid.selling .gi.sellMiss:not(.sellPick){opacity:.22;filter:grayscale(.75)}
#bagGrid.selling .gi.sellProtected:not(.sellPick){opacity:.58;box-shadow:inset 0 0 0 2px #6f8e74!important}
#bagGrid.selling .gi.sellPick{opacity:1!important;filter:none!important}
/* 🔴 เคยตั้ง top:108px ซึ่ง "ทับแถวปุ่มกรอง" พอดี — รวมถึงปุ่ม ⓘ ที่ใช้เปิด/ปิดกล่องนี้เอง
   (วัดจริง: กล่องกิน x 691-1081 · ปุ่ม ⓘ อยู่ 1053-1083 → elementFromPoint ตรงกลางปุ่ม
    ไม่คืนปุ่มกลับมา = คลิกไม่โดน) ผลคือเปิดแล้ว "ปิดไม่ได้เลย" ต้องปิดทั้งกระเป๋าทิ้ง
   → ดันลงมาให้พ้นแถวปุ่ม + คลิกที่ตัวกล่องเองก็ปิดได้ (เผื่อพลาดอีก) */
#inv .bagHelp{position:absolute;z-index:20;right:18px;top:152px;width:390px;padding:8px;
 cursor:pointer;
 background:#16111f;border:1px solid #6f5930;border-radius:6px;box-shadow:0 10px 30px #000}
#invItemTip{max-width:310px!important;font-size:12.5px!important;line-height:1.48!important}

/* ═══ ตัวละคร: ตัวเลขก่อน คำแนะนำพับเก็บ ═══ */
#charPanel{--pw:560px;--ph:620px;padding:10px 12px!important}
#charBody{max-height:calc(min(88dvh,620px) - 54px);overflow-y:auto;overflow-x:hidden;padding-right:4px}
#charBody .bigStats{gap:4px!important}
#charBody .bigStat{min-height:42px!important;padding:5px 7px!important;border-radius:5px!important}
#charBody .pickStats{grid-template-columns:1fr 1fr!important;gap:5px!important}
#charBody .pickStat{padding:7px!important;border-radius:6px!important}
.muBuildFold,.muProgressFold{margin:7px 0;border:1px solid #3c3349;border-radius:6px;background:#14101c}
.muBuildFold>summary,.muProgressFold>summary{cursor:pointer;padding:7px 9px;color:#d9bd78;font-weight:800;font-size:12.5px}
.muBuildFold>div,.muProgressFold>div{margin:0!important;border:0!important;border-top:1px solid #30283a!important;border-radius:0!important}

/* ═══ สกิล: ไอคอนกริด รายละเอียดเต็มดูตอนชี้ ═══ */
#tree{--pw:700px;--ph:610px;overflow:hidden!important;padding:10px 12px!important}
#treeBody{max-height:calc(min(88dvh,610px) - 65px);overflow-y:auto;padding-right:4px}
#treeBody.muSkillBody{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:start}
#treeBody.muSkillBody>.ezTodo{grid-column:1/-1;margin-bottom:1px}
#treeBody.muSkillBody .skRow{margin:0!important;min-height:76px;padding:7px!important;border-radius:6px!important}
#treeBody.muSkillBody .skRow>div:nth-child(2)>div:not(:first-child){display:none!important}
#treeBody.muSkillBody .skIco{width:42px!important;height:42px!important;font-size:22px!important;border-radius:6px!important}
#treeBody.muSkillBody .btn{padding:3px 7px!important;font-size:11.5px!important}
#treeBody.muSkillBody .hbSel{max-width:92px;font-size:11px!important}

/* ═══ NPC/ร้าน/ช่าง/คลัง: ตารางกับ tooltip เป็นภาษากลางเดียวกับกระเป๋า ═══ */
#npcPanel{--pw:820px;--ph:650px;padding:10px 12px!important}
#npcPanel .invHead{gap:10px}
#npcPanel #npcTitle{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#npcSay{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 9px!important;margin-bottom:7px!important}
#npcBody{max-height:calc(min(88dvh,650px) - 94px);overflow-y:auto;overflow-x:hidden;padding-right:4px}
#npcBody .card,#npcBody .ezCard{border-radius:6px!important;padding:7px 9px!important;margin-bottom:6px!important}
#npcBody .invCols{gap:8px!important}
#npcBody .bagWrap{min-height:210px;max-height:310px!important;overflow-y:auto!important;overflow-x:hidden!important;
 background:#0b0910;border:1px solid #30273a;border-radius:5px;padding:5px!important}
#npcBody .gradeRow{min-height:32px!important;padding:4px 7px!important}
#npcBody .wsGrp{border-radius:5px!important}
#npcBody .wsRow{font-size:12px!important}

/* หน้ารองทั้งหมดไม่ควรยาวเกินจอและมี scroll ซ้อนหลายชั้น */
#mktPanel,#gpanel,#vpanel,#help,#botPanel{border-radius:8px!important}

/* ข้อความอธิบายเดิมย้ายไปอยู่ในเนื้อหา/แท็บแล้ว ไม่ให้ซ้ำบนหัวหน้าต่าง */
#qpanel .invHead>span:not(.pClose){display:none!important}

@media(max-width:700px){
 #npcPanel .invHead{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;
  min-height:62px!important;align-items:center!important;padding-right:8px!important}
 #npcPanel #npcTitle{grid-column:1;grid-row:1;font-size:15px!important}
 #npcPanel .invHead>span:nth-child(2){grid-column:1/-1;grid-row:2;display:block!important;
  width:100%;font-size:11.5px!important;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #npcPanel #npcClose{grid-column:2;grid-row:1;justify-self:end;position:static!important}
 #npcSay{font-size:11.5px!important}
}

/* Mobile cutouts and home indicators: keep every modal action reachable. */
@supports(padding:max(0px)){
 @media(max-width:760px){
  .modalPanel{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important;padding-bottom:max(10px,env(safe-area-inset-bottom))!important}
  .modalPanel .invHead{padding-top:max(0px,env(safe-area-inset-top))!important}
  #mainMenu{padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
 }
}

/* ═══ ROUND 6 · SETTINGS / PROGRESSION / HELP / WARDROBE ═══ */
#charPanel .muClassCrest{display:inline-flex;align-items:center;gap:6px;min-width:0;margin-right:auto}
#charPanel .muClassCrest img{width:38px;height:38px;object-fit:contain;border:1px solid #71542d;border-radius:3px;
 background:radial-gradient(circle,#372817,#0c0d10);filter:drop-shadow(0 2px 4px #000)}
#charPanel .muClassCrest i{display:none}
.muSubPanel{--pw:620px!important;--ph:760px!important;padding:10px 12px!important}
.muSubPanel.muInitiallyHidden{display:none;pointer-events:auto}
.muSubPanel .muSubBody{max-height:calc(min(90dvh,760px) - 60px);overflow:auto;padding:2px 5px 10px}
#gameSettingsPanel #setBox{display:block!important;margin:0!important;border:0!important;background:transparent!important}
#gameSettingsPanel .secT{position:sticky;top:0;z-index:2;background:#111114!important;margin-top:8px!important}
#gameSettingsPanel .botSk{border-radius:3px!important}
#charProgressPanel .muSubBody>div{border-radius:3px!important}

#help{--pw:900px!important;--ph:720px!important}
#helpBody{max-height:calc(min(90dvh,720px) - 60px)!important;padding:6px 10px 14px!important}
#helpBody .muTabs,#helpBody>div:first-child:has(>.btn){position:sticky;top:0;z-index:5;padding:4px!important;
 border:1px solid #3a3338;border-radius:3px;background:#0b0c0f!important}
#helpBody .card,#helpBody .setCard{border-radius:3px!important}

#wardrobe{--pw:900px!important;--ph:740px!important}
#wdBody{display:grid!important;grid-template-columns:minmax(360px,1.15fr) minmax(310px,.85fr)!important;gap:8px!important}
#wdStage{border:1px solid #544128!important;border-radius:3px!important;box-shadow:inset 0 0 28px #000!important}
.wdCls,.wdTog,.wdNav{min-height:38px!important;border-radius:3px!important;border-color:#4a4036!important;
 background:linear-gradient(#29272b,#17171a)!important;color:#c1b7a7!important}
.wdNav{min-width:38px!important}
.wdCls.on,.wdTog.on{background:linear-gradient(#d9b45e,#8b6124)!important;border-color:#e6c477!important;color:#191105!important}
.wdSet{min-height:42px!important;border-radius:3px!important;border-color:#3e383b!important;background:#17171a!important}
.wdSet.on{border-color:var(--sc,#d2a64e)!important;box-shadow:inset 3px 0 var(--sc,#d2a64e)!important}
.wdLab{color:#d9ba73!important;border-bottom:1px solid #3d3428;padding-bottom:3px}

@media(max-width:700px){
 .muSubPanel{--pw:100vw!important;--ph:calc(100dvh - 16px)!important}
 .muSubPanel .muSubBody{max-height:calc(100dvh - 76px)}
 #wdBody{grid-template-columns:1fr!important}
 #wdStage{max-height:44dvh;aspect-ratio:1.25/1!important}
 .wdRow{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:4px}.wdRow>*{flex:0 0 auto}
 .wdSets{display:grid!important;grid-template-columns:1fr!important;max-height:34dvh!important;overflow-y:auto!important}
 .wdSet{width:100%}
}

#invInfoBtn{min-width:38px!important;min-height:38px!important}

/* ═══ ROUND 5 · SKILLS / BOT / MAP / SOCIAL ═══ */
#tree,#botPanel,#mapPanel,#gpanel{background:radial-gradient(circle at 50% -15%,rgba(130,84,25,.13),transparent 38%),
 linear-gradient(145deg,#151519,#08090c 74%)!important}
#treeBody.muSkillBody .skRow{border-radius:3px!important;border-left:3px solid #8f6a35!important;
 background:linear-gradient(145deg,rgba(37,35,37,.82),rgba(12,13,16,.9))!important}
#treeBody.muSkillBody .skIco{border-radius:3px!important;border-color:#6c5431!important;
 background:radial-gradient(circle at 50% 35%,#49351d,#151318)!important}
#treeBody.muSkillBody .hbSel{border-radius:3px!important;border-color:#514537!important;background:#111114!important}

#botTabs{position:sticky;top:0;z-index:5;display:flex!important;gap:4px!important;padding:4px!important;
 border:1px solid #3b3439;border-radius:3px;background:#0b0c0f}
#botTabs .btn{flex:1!important;margin:0!important;border-radius:3px!important;white-space:nowrap}
#botPanel .botTab{padding:2px}
#botPanel .botSk{min-height:44px;border-radius:3px!important;border-color:#39343a!important;
 background:linear-gradient(145deg,rgba(35,33,36,.74),rgba(13,14,17,.84))!important}
#botPanel input[type=range]{height:28px}

#mapPanel .muMapTabs,#zoneList .muWarpSub{padding:4px;border:1px solid #3b3438;border-radius:3px;background:#0a0b0e}
#mapPanel .muTab,#zoneList .muTab{border-radius:3px!important;border-color:#473f38!important;background:#1b1a1e!important;color:#bdb3a5!important}
#mapPanel .muTab.on,#zoneList .muTab.on{background:linear-gradient(#d9b45f,#8b6124)!important;color:#191105!important;border-color:#e5c478!important}
#mapPanel .zAct,#mapPanel .zRow,#mapPanel .fRow{border-radius:3px!important;border-color:#39343a!important;
 background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(0,0,0,.08))!important}

#gpanel .gpTabs{display:grid!important;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid #3b3438;
 border-radius:3px;background:#0a0b0e}
#gpanel .gpTab{min-height:42px;border:1px solid #453d39;border-radius:3px;background:#1c1a1e;color:#bdb4a6;font-weight:900}
#gpanel .gpTab.on{background:linear-gradient(#d9b45f,#8b6124);border-color:#e6c678;color:#1a1206}
#gpanel .setCard,#gpanel .card{border-radius:3px!important;border-color:#39343a!important}

@media(max-width:700px){
 #treeBody.muSkillBody{grid-template-columns:1fr!important}
 #botTabs{overflow-x:auto}#botTabs .btn{flex:0 0 auto!important;min-width:108px}
 #mapPanel .muMapTabs{overflow-x:auto;flex-wrap:nowrap!important}
 #gpanel .gpTabs{position:sticky;top:0;z-index:5}
}

/* toast ไม่ลอยทับปุ่มใน modal */
body.modal #toast{top:72px!important;bottom:auto!important;max-width:min(520px,calc(100vw - 32px))!important;
 border-radius:4px!important;background:rgba(18,15,13,.97)!important;border:1px solid #b78a3e!important;
 box-shadow:0 10px 30px rgba(0,0,0,.72)!important;font-size:12.5px!important}
body.modal #chatBox,body.modal #chatFab{opacity:.12!important;pointer-events:none!important}

/* ═══ ROUND 4 · NPC / ECONOMY ═══ */
#npcPanel{--pw:860px!important;--ph:700px!important}
#npcPanel .invHead{background:linear-gradient(90deg,#392817,#17161a 58%,#241a12)!important}
#npcSay{padding:7px 10px!important;border:1px solid #3e3529!important;border-radius:3px!important;
 background:rgba(0,0,0,.26)!important;color:#bcb2a3!important;font-size:12.5px!important}
#npcBody>div:first-child:has(>.btn){display:flex;gap:4px;padding:4px;margin-bottom:7px;
 border:1px solid #393238;border-radius:3px;background:rgba(0,0,0,.26)}
#npcBody>div:first-child:has(>.btn)>.btn{flex:0 1 auto;margin:0!important;min-height:38px!important}
#npcBody .ezTodo{border-radius:3px!important;border-color:#4c3e2b!important;background:linear-gradient(90deg,rgba(129,86,27,.13),rgba(0,0,0,.14))!important}
#npcBody .ezCard{display:grid!important;grid-template-columns:58px minmax(0,1fr) minmax(76px,auto)!important;
 align-items:center!important;gap:9px!important;min-height:76px!important;margin-bottom:5px!important;
 border:1px solid #38333a!important;border-left:3px solid var(--c,#876737)!important;border-radius:3px!important;
 background:linear-gradient(145deg,rgba(36,34,36,.82),rgba(12,13,16,.9))!important}
#npcBody .ezCard .cell{grid-column:1;grid-row:1}
#npcBody .ezCard .ezMid{grid-column:2;min-width:0}
#npcBody .ezCard .ezBtn{grid-column:3;min-width:76px;min-height:44px;border-radius:3px!important;
 border:1px solid #b78a3f!important;background:linear-gradient(#d6b05a,#8c6124)!important;color:#1a1206!important;font-weight:900}
#npcBody .ezCard .ezBtn:disabled{filter:grayscale(.8);opacity:.38}
#npcBody .ezNote{margin-top:3px;font-size:11.5px!important}
#npcBody .invCols{gap:8px!important}
#npcBody .invCols>div{padding:6px;border:1px solid #373138;border-radius:3px;background:rgba(0,0,0,.22)}
#npcBody .bagWrap{border-radius:2px!important;border-color:#342f35!important;background:#08090c!important}
#npcPanel #npcGold,#npcPanel #npcGem,#npcPanel #npcGuard,#npcPanel #npcBless{font-variant-numeric:tabular-nums;color:#f0d28a!important}

@media(max-width:700px){
 #npcBody>div:first-child:has(>.btn){overflow-x:auto;flex-wrap:nowrap!important}
 #npcBody>div:first-child:has(>.btn)>.btn{flex:0 0 auto!important;white-space:nowrap}
 #npcBody .ezCard{grid-template-columns:50px minmax(0,1fr)!important;min-height:92px!important;padding:7px!important}
 #npcBody .ezCard .cell{grid-column:1;grid-row:1}
 #npcBody .ezCard .ezMid{grid-column:2;grid-row:1}
 #npcBody .ezCard .ezBtn{grid-column:1/-1;grid-row:2;width:100%;min-height:44px}
 #npcBody .invCols{grid-template-columns:1fr!important}
 #npcBody .bagWrap{min-height:190px!important;max-height:34dvh!important}
}

/* ตลาด: ราคาอยู่คอลัมน์เดิมเสมอและปุ่มซื้อไม่ปนกับรายละเอียด */
#mktPanel{--pw:940px!important;--ph:700px!important}
#mktPanel .mkTabs{padding:4px;border:1px solid #3a3339;border-radius:3px;background:rgba(0,0,0,.25)}
#mktPanel .mkTab{min-height:40px;border-radius:3px!important;border-color:#443d3c!important;
 background:linear-gradient(#29272b,#17171a)!important;color:#bdb4a8!important}
#mktPanel .mkTab.on{background:linear-gradient(#d9b55f,#8d6224)!important;border-color:#e5c477!important;color:#1a1206!important}
#mktPanel .mkPurse,#mktPanel .mkBan{border-radius:3px!important;border-color:#493d2a!important;background:rgba(116,80,28,.10)!important}
#mktPanel .mkRow{display:grid!important;grid-template-columns:58px minmax(0,1fr) 126px auto!important;
 gap:9px!important;min-height:72px;border-radius:3px!important;border-color:#373239!important;
 background:linear-gradient(145deg,rgba(35,33,36,.8),rgba(12,13,16,.9))!important}
#mktPanel .mkPrice{min-width:116px;padding:4px 8px;border-left:1px solid #393238}
#mktPanel .mkAct .btn{min-width:82px}
#mktPanel .mkChip{min-height:36px;border-radius:3px!important;border-color:#423b3d!important;background:#1b1a1e!important}
#mktPanel .mkChip.on{background:#b78a3d!important;border-color:#d9b55f!important;color:#160f05!important}
@media(max-width:700px){
 #mktPanel .mkRow{grid-template-columns:50px minmax(0,1fr)!important}
 #mktPanel .mkArt{grid-column:1;grid-row:1}#mktPanel .mkInfo{grid-column:2;grid-row:1}
 #mktPanel .mkPrice{grid-column:1/2;grid-row:2;border-left:0;padding:4px 0;text-align:left!important}
 #mktPanel .mkAct{grid-column:2;grid-row:2;text-align:right}#mktPanel .mkAct .btn{min-width:100px}
 #mktPanel .mkBar{overflow-x:auto;flex-wrap:nowrap!important}#mktPanel .mkBar>*{flex:0 0 auto}
}

/* ═══ ROUND 2 · COMBAT HUD ═══
   คอม: ข้อมูลต่อสู้อยู่ล่างใกล้ hotbar · ข้อมูลโลกอยู่ขอบจอ
   มือถือยังให้ touch.js จัดตำแหน่ง แต่ใช้ภาษาภาพเดียวกัน */
@media(min-width:761px){
 #stats{top:auto!important;bottom:12px!important;left:78px!important;width:236px!important;
  padding:7px 9px 8px!important;border:1px solid #8b6835!important;border-left-width:3px!important;
  border-radius:4px!important;background:linear-gradient(145deg,rgba(24,22,24,.98),rgba(7,8,10,.97))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.68),inset 0 0 15px #000!important}
 #purse{top:12px!important;left:12px!important;width:238px!important}
}
#stats #nameRow{height:22px;padding:0 2px 4px!important;border-bottom:1px solid #4e402b!important;
 color:#e8ddc6;font-size:13px!important;text-shadow:0 1px 3px #000}
#stats #lv{color:#e5bc5e!important}
#stats .bar{height:17px!important;margin:4px 0!important;border:1px solid #443a37!important;border-radius:3px!important;
 background:#050608!important;box-shadow:inset 0 2px 5px #000!important}
#stats .bar i{border-radius:2px!important}
#stats .bar span{line-height:17px!important;font-size:11.5px!important;letter-spacing:.15px}
#stats .hp i{background:linear-gradient(#e65e58,#8e171c 55%,#5b0e14)!important}
#stats .mp i{background:linear-gradient(#538bdc,#214d9b 55%,#102b64)!important}
#stats .xp{height:6px!important;margin-top:5px!important;border-color:#574520!important}
#stats .xp span{font-size:0!important}#stats .xp i{background:linear-gradient(90deg,#a97420,#f1cf6c)!important}

#skills{padding:6px 8px 8px!important;border:1px solid rgba(139,104,53,.62)!important;border-radius:5px!important;
 background:linear-gradient(180deg,rgba(32,28,29,.88),rgba(7,8,10,.96))!important;
 box-shadow:0 12px 32px rgba(0,0,0,.66),inset 0 1px rgba(255,231,173,.07)!important}
#skills:before,#skills:after{content:'◆';position:absolute;top:50%;transform:translateY(-50%);color:#c29645;
 font-size:11px;text-shadow:0 0 7px #cf9b3d;pointer-events:none}
#skills:before{left:-17px}#skills:after{right:-17px}
#skills .sk{border-width:2px!important;border-radius:3px!important;box-shadow:inset 0 0 9px #000,0 3px 8px #000!important}
#skills .sk small{top:-8px!important;left:-5px!important;min-width:16px;padding:0 3px!important;border:1px solid #d9c18c!important;
 border-radius:3px!important;background:#24252b!important;color:#f4e1b0!important;font-size:10px!important;line-height:16px!important}
#skills .sk:active{transform:translateY(1px)!important}

#questBox{border:1px solid #6f5733!important;border-left:3px solid #c09646!important;border-radius:4px!important;
 background:linear-gradient(145deg,rgba(25,23,26,.96),rgba(9,10,13,.96))!important;
 box-shadow:0 10px 28px rgba(0,0,0,.58),inset 0 0 12px rgba(0,0,0,.55)!important}
#questBox #qTitle{color:#e3c171!important;border-bottom:1px solid #443824;padding-bottom:4px}
#questBox #qBar{background:linear-gradient(#83bd5c,#39762d)!important}
#mini{border:2px solid #9c763a!important;box-shadow:0 0 0 3px #272328,0 9px 28px rgba(0,0,0,.72)!important}
#bossBar{border:1px solid #b78b3b!important;border-radius:4px!important;
 background:linear-gradient(145deg,rgba(35,20,20,.98),rgba(10,8,11,.97))!important;
 box-shadow:0 12px 35px rgba(0,0,0,.75),inset 0 0 18px rgba(112,22,18,.24)!important}
#bossName{color:#f0ce78!important;letter-spacing:.3px}

@media(max-width:760px){
 #skills{padding:5px!important;border-radius:5px!important;max-width:calc(100vw - 12px)}
 #skills:before,#skills:after{display:none}
 #stats{border-radius:4px!important;border-left-width:3px!important}
 #stats .xp{height:5px!important}
 #bossBar{top:66px!important;width:calc(100vw - 90px)!important;max-width:430px!important}
}

/* ═══ ROUND 3 · INVENTORY / EQUIPMENT ═══ */
#inv{--pw:940px!important;--ph:620px!important;background:
 radial-gradient(circle at 18% 20%,rgba(133,84,24,.13),transparent 35%),
 linear-gradient(145deg,#151519,#08090c 74%)!important}
#inv .invHead{background:linear-gradient(90deg,#3a2a17,#18171b 48%,#211a13)!important}
#inv .invLayout{grid-template-columns:370px minmax(0,1fr)!important;gap:8px!important;padding:8px!important}
#inv .invPane{border:1px solid #373238!important;border-radius:3px!important;
 background:linear-gradient(145deg,rgba(35,33,35,.76),rgba(10,11,14,.88))!important;
 box-shadow:inset 0 0 18px rgba(0,0,0,.55)!important}
#inv .invEquipPane{border-color:#59472d!important;background:
 radial-gradient(ellipse at 50% 40%,rgba(139,92,31,.14),transparent 48%),
 linear-gradient(145deg,rgba(32,30,31,.82),rgba(9,10,13,.92))!important}
#inv .paneTitle{color:#dfc27f!important;font-size:12.5px!important;letter-spacing:.15px}
#inv .dollFrame{border:1px solid #4f4029!important;border-radius:2px!important;
 background:radial-gradient(ellipse at 50% 66%,rgba(119,82,31,.22),transparent 45%),
 linear-gradient(#151419,#08090c)!important;box-shadow:inset 0 0 28px #000!important}
#inv .dollFrame:after{content:'';position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
 width:64%;height:16px;border:1px solid rgba(200,157,73,.3);border-radius:50%;
 box-shadow:0 0 16px rgba(196,145,55,.15),inset 0 0 12px rgba(0,0,0,.8);pointer-events:none}
#inv .dollRail .ds{border:1px solid #55452e!important;border-radius:3px!important;
 background:linear-gradient(145deg,#252329,#111216)!important;box-shadow:inset 0 0 9px #000!important}
#inv .dollRail .ds:hover{border-color:#d1a650!important;box-shadow:inset 0 0 9px #000,0 0 9px rgba(209,166,80,.24)!important}
#inv .dollRail .ds .dsOff,#inv .dollRail .ds .petEye{width:34px!important;height:34px!important;min-width:34px!important;
 padding:0!important;border-radius:3px!important;display:grid!important;place-items:center!important;font-size:14px!important;transform:none!important}
#inv .dollRail .ds .dsOff{left:-5px!important;top:-5px!important}
#inv .dollRail .ds .petEye{left:-5px!important;top:-5px!important}
#inv .bagTop .bfI{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
#wardrobe button{min-width:38px;min-height:38px}
.muEmptyState,.muQEmpty,.mkEmpty,.fEmpty,.empty-bag{
 display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;
 min-height:128px;padding:22px!important;text-align:center!important;color:#9c968f!important;
 border:1px dashed #49423a;border-radius:4px;background:radial-gradient(circle at 50% 20%,rgba(184,139,60,.08),transparent 55%)!important
}
.muEmptyState::before{content:attr(data-icon);font-size:30px;line-height:1;filter:saturate(.7);opacity:.86}
.muEmptyState b{color:#dfcfaa;font-size:14px}.muEmptyState span{max-width:360px;font-size:12px;line-height:1.55}
.muEmptyState .btn{margin-top:5px!important}
@media(pointer:coarse){.muEmptyState .btn{min-height:44px!important}}
#inv .muBagEmpty{position:absolute;inset:8px;min-height:0}
.mkMsg.empty{padding:16px!important;border:1px dashed #49423a!important;border-radius:4px!important;text-align:center;color:#9c968f!important}
.muConfirmLayer{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:18px;background:rgba(3,4,7,.82);backdrop-filter:blur(7px)}
.muConfirmBox{width:min(430px,100%);padding:22px;border:1px solid #9c783e;border-radius:6px;background:radial-gradient(circle at 100% 0,rgba(184,134,48,.12),transparent 42%),linear-gradient(145deg,#1b1a1e,#090a0d);box-shadow:0 0 0 2px #272429,0 26px 75px #000}
.muConfirmBox.danger{border-color:#b45561;box-shadow:0 0 0 2px #322329,0 26px 75px #000}
.muConfirmKicker{color:#bd9954;font-size:10.5px;font-weight:950;letter-spacing:1px;text-transform:uppercase}.muConfirmBox.danger .muConfirmKicker{color:#e07886}
.muConfirmBox h2{margin:6px 0 9px;color:#f3dfad;font-size:21px}.muConfirmBody{color:#c7c1ba;font-size:13px;line-height:1.6}
.muConfirmCost{margin:14px 0 8px;padding:10px 12px;border:1px solid #454038;background:#0b0c0f;color:#f0cc76;font-size:14px;font-weight:900}
.muConfirmNote{margin-top:8px;color:#de7c88;font-size:12px;line-height:1.5}.muConfirmActions{display:grid;grid-template-columns:1fr 1.35fr;gap:7px;margin-top:17px}
.muConfirmActions .btn{margin:0!important;min-height:44px!important}.muConfirmActions .danger{background:linear-gradient(#a84c5c,#682b38)!important;border-color:#d56b7b!important;color:#fff!important}
.muSettingsTabs{position:sticky;top:52px;z-index:7;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:5px;margin:-2px 0 8px;background:#090a0d;border:1px solid #3c352d}
.muSettingsTab{min-height:40px;border:1px solid #443d36;border-radius:3px;background:linear-gradient(#29272a,#17171a);color:#bdb5aa;font-weight:850;cursor:pointer}.muSettingsTab.on{border-color:#d3aa55;background:linear-gradient(#d9b660,#8d6325);color:#191105}
.muSettingsPane{display:block}.muSettingsPane[hidden]{display:none!important}.muSettingsPane>.secT:first-child{margin-top:3px!important}
.muAccessIntro{display:flex;flex-direction:column;gap:3px;margin:4px 0 8px;padding:11px;border-left:3px solid #c6a15a;background:#121115}.muAccessIntro b{color:#e6cb8f}.muAccessIntro span{color:#918b92;font-size:11.5px}
html.reduceMotion *,html.reduceMotion *::before,html.reduceMotion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
html.uiHighContrast{--ui-text:#fff;--ui-muted:#c8c8c8}html.uiHighContrast .modalPanel,html.uiHighContrast .panel{border-color:#e0bd70!important}html.uiHighContrast .modalPanel{color:#fff!important}html.uiHighContrast .botSk,html.uiHighContrast .card{border-color:#71695e!important}html.uiHighContrast input,html.uiHighContrast select{border-color:#8f8578!important}

/* Shared presentation utilities replacing repeated legacy inline declarations. */
.u-text-gold{color:#ffd54a}.u-text-good{color:#7ee06a}.u-text-muted{color:#8f88a6}
.u-text-danger{color:#ff8a7a}.u-text-cyan{color:#5ae0d0}.u-text-info{color:#8fd0ff}
.u-text-soft{color:#9f98af}.u-text-magic{color:#c08aff}.u-text-white{color:#fff}
.u-grow{flex:1}.u-hidden{display:none}.u-mt-4{margin-top:4px}.u-mt-8{margin-top:8px}
.u-mt-10{margin-top:10px}.u-mt-12{margin-top:12px}.u-note{font-size:13px;color:#8f88a6}
.u-section-title{font-size:17px;color:var(--gold)}.u-btn-wide{width:auto;padding:5px 14px}
@media(max-width:560px){.muSettingsTabs{grid-template-columns:repeat(2,1fr);top:54px}.muSettingsTab{min-height:44px}}
#codePanel{--pw:500px!important}#codePanel .invHead{align-items:center!important}#codePanel .pClose{margin-left:auto;min-width:38px!important;width:38px!important;height:38px!important}
@media(pointer:coarse){#codePanel .pClose{min-width:44px!important;width:44px!important;height:44px!important}}
.codeHeadHint{color:#8f8991;font-size:11.5px}.codeBody{padding:5px 3px 2px}.codeIntro{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:12px;border:1px solid #433b31;background:linear-gradient(135deg,#191713,#0e0e11)}
.codeIntro>span{font-size:29px}.codeIntro b,.codeIntro small{display:block}.codeIntro b{color:#e7cc8d;font-size:13.5px}.codeIntro small{margin-top:3px;color:#99939b;font-size:11.5px;line-height:1.45}
.codeLabel{display:block;margin:0 0 5px;color:#c9bea5;font-size:12px;font-weight:850}#codePanel #codeIn{height:48px!important;border-radius:4px!important;border-color:#645238!important;background:#090a0d!important;color:#f1d98f!important}
#codePanel #codeIn:focus{border-color:#dcaf54!important;box-shadow:0 0 0 3px rgba(220,175,84,.16)!important}#codePanel .codeSubmit{width:100%;min-height:44px!important;margin:0!important}
#codeMsg:empty{display:none}#codeMsg:not(:empty){padding:8px 10px;border-left:3px solid currentColor;background:rgba(255,255,255,.035)}.codeEmpty{padding:10px;text-align:center;border:1px dashed #403b3d;color:#77727a}
#inv .bagTop button[title*="ข้อมูล"],#inv .bagTop button[aria-label*="ข้อมูล"]{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
@media(min-width:761px){#inv .bagTop .bfI,#inv .bagTop button[title*="ข้อมูล"],#inv .bagTop button[aria-label*="ข้อมูล"]{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important}}
#inv #bagWrap{border:1px solid #322e34!important;border-radius:2px!important;
 background-color:#07080b!important;background-image:
 linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px)!important;
 background-size:12px 12px!important;box-shadow:inset 0 0 20px #000!important}
#inv #bagGrid{gap:5px!important;padding:6px!important}
#inv .cell{border-radius:3px!important;border-color:#3c3842!important;background:linear-gradient(145deg,#201f24,#0e0f12)!important;
 box-shadow:inset 0 0 10px #000!important}
#inv .cell:hover{transform:translateY(-1px) scale(1.025)!important;border-color:var(--kc,#b68b43)!important;
 box-shadow:inset 0 0 10px #000,0 4px 12px rgba(0,0,0,.58)!important}
#invItemTip .ttCompare{margin:8px 0 4px;padding:8px;border:1px solid #4b4032;border-left:3px solid #b79249;
 border-radius:3px;background:linear-gradient(135deg,#17171a,#0d0e11);box-shadow:inset 0 1px rgba(255,255,255,.03)}
#invItemTip .ttCompare>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0}
#invItemTip .ttCompare span{color:#999083;font-size:11.5px}#invItemTip .ttCompare b{max-width:230px;text-align:right;color:#ddd4c5;font-size:11.5px}
#invItemTip .ttCompare strong{font-size:15px}#invItemTip .ttCompare small{display:block;margin-top:5px;color:#aaa191;font-size:10.5px}
#invItemTip .ttCompare.up{border-left-color:#57bc76}#invItemTip .ttCompare.down{border-left-color:#d45f59}
#inv .cmpTag{position:absolute;left:2px;top:2px;z-index:8;display:grid;place-items:center;min-width:18px;height:18px;
 border:1px solid currentColor;border-radius:2px;background:#08090cee;font-size:11px;font-weight:950;line-height:1;pointer-events:none}
#inv .cmpTag.up{color:#69df8d}#inv .cmpTag.down{color:#ff8279}#inv .cmpTag.same{color:#bbb3a7}
#inv .bagTop{padding-bottom:6px;border-bottom:1px solid #383038}
#inv .bagFilt{padding:4px;border:1px solid #302b31;border-radius:3px;background:rgba(0,0,0,.22)}
#inv .bfB{border-radius:3px!important;min-height:34px!important;padding:5px 8px!important}
#inv .bfB.on{background:linear-gradient(#d8b45f,#8d6224)!important;color:#191105!important}
#inv .sellBar{border:1px solid #865f2c!important;border-radius:3px!important;background:#17120d!important}
.muInvTabs{display:none}

@media(max-width:760px){
 .muInvTabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px 6px;border-bottom:1px solid #463923;
  background:#0c0d10;position:sticky;top:54px;z-index:9}
 .muInvTab{min-height:44px;border:1px solid #443c35;border-radius:3px;background:linear-gradient(#29272a,#17171a);
  color:#bdb4a5;font:800 13px system-ui}
 .muInvTab.on{border-color:#d0a650;background:linear-gradient(#d9b55f,#8c6225);color:#1a1206}
 #inv .invLayout{grid-template-columns:1fr!important;gap:6px!important;padding:6px!important}
 #inv[data-mu-inv="equip"] .invBagPane{display:none!important}
 #inv[data-mu-inv="bag"] .invEquipPane{display:none!important}
 #inv .dollFrame{height:280px!important;min-height:280px!important}
 #inv #invCv{height:270px!important}
 #inv .invEquipPane{max-height:none!important}
 #inv #bagWrap{min-height:320px!important;max-height:48dvh!important}
 #inv .bagTop{align-items:flex-start!important;flex-direction:column!important}
 #inv .bagTop>div:last-child{width:100%;display:grid!important;grid-template-columns:1fr 1fr 1fr!important}
 #inv .bagTop .btn{width:100%!important;margin:0!important;min-width:0!important;padding:6px 4px!important}
 #charBody .muStat{min-height:62px!important}
 #charBody .muStatEffect{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.25!important}
}
#mktBody,#gpBody,#vpBody,#helpBody{scrollbar-gutter:stable}

@media(max-width:760px){
 #inv .invLayout{grid-template-columns:1fr!important;overflow-y:auto!important;max-height:calc(94dvh - 52px)}
 #inv .invEquipPane{overflow:visible!important}
 #inv #bagWrap{min-height:300px}
 #treeBody.muSkillBody{grid-template-columns:1fr}
 #treeBody.muSkillBody>.ezTodo{grid-column:1}
 #mapPanel[data-mu-tab="map"] #bigMap{height:auto!important;width:100%!important}
 #stats{width:min(200px,52vw)!important}
 #questBox{width:min(195px,46vw)!important}
 #inv .sellFiltBox{grid-template-columns:1fr 1fr!important}
 #inv .sellFiltBox .sfTitle,#inv .sellFiltBox .sfMatch{grid-column:1/-1}
 #inv .sellFiltBox .sfSafe,#inv .sellFiltBox .sfPick{width:100%;justify-content:center}
}

/* ========================================================================== */
/* Interaction clarity pass — one visual language, larger targets, less guesswork */
/* ========================================================================== */
button,.btn,.bfB,.hbSel,.agTab,.agGo,.zAct,.zRow,.fRow{touch-action:manipulation}
button:focus-visible,.btn:focus-visible,.bfB:focus-visible,.hbSel:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
 outline:3px solid #75c9ff!important;outline-offset:2px!important;
 box-shadow:0 0 0 5px rgba(55,160,235,.22)!important;
}
.btn,.bfB,.hbSel{min-height:38px!important;padding:7px 12px!important;font-size:13px!important;
 display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pClose,.invClose,.mmX{width:42px!important;height:42px!important;min-width:42px!important;
 display:grid!important;place-items:center!important;border-radius:9px!important;
 background:#2b2131!important;border:1px solid #65506f!important;color:#ffd8df!important}
.pClose:hover,.invClose:hover,.mmX:hover{background:#6a2e42!important;border-color:#ff91a8!important;color:#fff!important}
.modalPanel .invHead b{font-size:16px!important;line-height:1.25}
.modalPanel .invHead{min-height:46px!important;align-items:center!important}

/* Permanent HUD: important values are named instead of being icon-only. */
#purse{width:240px!important;background:rgba(12,10,18,.92)!important;border-color:#544766!important}
#purse .prRow{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px!important;margin-bottom:5px}
#purse .prRow:nth-child(2){grid-template-columns:repeat(3,minmax(0,1fr))}
#purse .prI{min-height:34px;padding:4px 6px;border:1px solid rgba(255,255,255,.075);border-radius:7px;
 display:flex!important;align-items:center;gap:5px;background:rgba(255,255,255,.035);font-style:normal}
#purse .prI>span{display:flex;min-width:0;flex-direction:column;line-height:1.08}
#purse .prI small{font-size:9px;color:#aaa1b9;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#purse .prI em{font-size:13px;color:#f4edf9;font-style:normal;font-weight:900}
#purse:hover{border-color:#c49d4b!important;transform:translateY(-1px)}

#questBox{border-left:4px solid #d7ae55!important;background:rgba(13,11,20,.94)!important}
#questBox:hover{border-color:#f0ca70!important;transform:translateY(-1px)}
#questBox #qTitle{font-size:13px!important}
#questBox #qGuide{padding:5px 0!important}
#questBox #qGo{min-height:36px!important}

/* Combat actions are the largest recurring targets and communicate their states. */
#skills .sk{width:54px!important;height:54px!important;border-width:2px!important;
 box-shadow:0 5px 13px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.08)!important;
 transition:transform .12s,border-color .12s,filter .12s!important}
#skills .sk:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.18)}
#skills .sk:active{transform:translateY(1px) scale(.96)}
#skills .sk small{min-width:19px;height:19px;display:grid;place-items:center;border-radius:5px!important;
 background:#3b65a0!important;color:#fff!important;font-size:11px!important}
#skills .sk.pot{background:linear-gradient(145deg,#302536,#17131d)!important}
#skills .sk.pot small{background:#853954!important}
#skills .skGap{width:14px!important;flex:0 0 14px!important}
#menuBtn{width:58px!important;height:58px!important;border:2px solid #d7ae55!important}

/* Main menu: clearer hierarchy and forgiving cards. */
#mainMenuIn{width:min(840px,94vw)!important;padding:18px 20px!important;border-radius:14px!important}
#mainMenu{position:fixed!important;inset:0!important;z-index:10000!important}
#hud:has(#mainMenu.on){z-index:10000!important}
.mmHead{position:sticky;top:-18px;z-index:3;margin:-18px -20px 10px;padding:14px 18px;
 background:linear-gradient(90deg,#292139,#181321);border-bottom:1px solid #6f5930}
.mmSub{font-size:13px!important;line-height:1.55!important;color:#bcb3ca!important}
.mmGrp{font-size:14px!important;margin-top:16px!important}
.mmRow{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;gap:10px!important}
.mmB{min-height:68px!important;padding:10px 12px!important;border-width:1px!important;border-radius:9px!important;
 background:linear-gradient(145deg,rgba(49,41,63,.92),rgba(25,21,34,.94))!important}
.mmB:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.mmB i{width:36px;text-align:center;font-size:27px!important}
.mmB span b{font-size:14px}.mmB u{font-size:11.5px!important;line-height:1.35;color:#b1a8bf!important}
.mmB kbd{margin-left:auto;min-width:22px;text-align:center;padding:3px 6px!important}

/* Tabs and lists must look selectable and keep a minimum finger target. */
.muTabs{gap:7px!important;padding:6px!important}
.muTab{min-height:42px!important;font-size:13px!important;border:1px solid #3c3349!important}
.muTab.on{box-shadow:inset 0 -3px rgba(87,53,11,.36)!important}
.zAct,.zRow,.fRow{min-height:46px!important;padding:7px 10px!important}

@media(max-width:760px){
 #purse{top:126px!important;width:min(224px,58vw)!important}
 #purse .prI small{font-size:8.5px}
 #skills{max-width:calc(100vw - 16px);overflow-x:auto;padding:5px 3px;scrollbar-width:none}
 #skills::-webkit-scrollbar{display:none}
 #skills .sk{width:48px!important;height:48px!important;flex:0 0 48px!important}
 #menuBtn{width:52px!important;height:52px!important}
 #mainMenuIn{width:96vw!important;max-height:92dvh!important;padding:14px!important}
 .mmHead{top:-14px;margin:-14px -14px 8px;padding:11px 12px}
 .mmRow{grid-template-columns:1fr 1fr!important;gap:7px!important}
 .mmB{min-height:64px!important;padding:8px!important}
 .mmB u{display:none}
}
@media(max-width:430px){.mmRow{grid-template-columns:1fr!important}.mmB u{display:block}}

/* ========================================================================== */
/* Whole-game usability pass — protect play space and keep every panel scannable */
/* ========================================================================== */
body{--ui-safe-top:12px;--ui-safe-side:12px;--ui-safe-bottom:12px}

/* HUD groups communicate priority: combat status > quest > secondary balances. */
#stats,#purse,#questBox,#mini{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#stats{z-index:8!important}
#purse{opacity:.88;transition:opacity .15s,transform .15s,border-color .15s!important}
#purse:hover{opacity:1}
#questBox{max-height:145px;overflow:hidden}
#questBox #qTitle,#questBox #qDesc{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Open system windows own the user's attention; background HUD should stop
   competing while remaining faintly visible for orientation. */
/* 🔴 บั๊ก(เจ้าของทัก "บอทสีเทากดไม่ได้"): เดิมหรี่ #botPanel ตอน body.modal ด้วย (คิดว่าเป็น HUD พื้นหลัง)
   แต่หน้าต่างตั้งค่าบอทเองก็เปิดเป็น modal → มันหรี่ตัวเองเหลือ opacity .18 + pointer-events:none = เทา กดไม่ได้
   → เอา #botPanel ออกจากลิสต์หรี่ (single-window ปิดหน้าอื่นให้อยู่แล้ว ไม่ต้องหรี่มันในฐานะพื้นหลัง) */
body.modal #stats,body.modal #purse,body.modal #questBox,body.modal #mini,
body.modal #miniLegend{opacity:.18!important;pointer-events:none!important}
body.modal #tutBox{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* Consistent readable structure across every large system window. */
.modalPanel{max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important}
.modalPanel .invHead{gap:10px!important}
.modalPanel .invHead>b,.modalPanel .invHead>div{min-width:0}
.modalPanel button,.modalPanel .btn,.modalPanel select,.modalPanel input{font-family:system-ui,'Segoe UI',sans-serif}
.modalPanel button:disabled,.modalPanel .btn.disabled{opacity:.42!important;filter:saturate(.45);cursor:not-allowed!important}
.modalPanel [title]{scroll-margin:64px}

/* Repeated action rows wrap instead of shrinking labels into unreadable chips. */
.bagFilt,.sellBar,.muTabs,.invActions,.npcActions{flex-wrap:wrap!important}
.bagFilt .bfB,.muTabs .muTab{white-space:nowrap}
.bagTop{gap:8px!important}

/* Scrollbars remain visible enough to signal that more content exists. */
.modalPanel *{scrollbar-color:#667994 #111827;scrollbar-width:thin}
.modalPanel *::-webkit-scrollbar{width:9px;height:9px}
.modalPanel *::-webkit-scrollbar-thumb{background:#667994;border:2px solid #111827;border-radius:8px}

@media(max-width:900px){
 #purse{width:218px!important}
 #mini{--miniS:128px}
 .modalPanel{width:calc(100vw - 20px)!important;left:10px!important;right:auto!important;
  transform:none!important;top:10px!important}
}
@media(max-width:760px){
 #purse{display:none!important}
 #questBox{top:70px!important;right:8px!important;width:min(210px,56vw)!important}
 #mini{--miniS:112px}
 .modalPanel{max-height:calc(100dvh - 16px)!important;top:8px!important;left:8px!important;
  width:calc(100vw - 16px)!important;max-width:none!important;border-radius:10px!important}
 .modalPanel .invHead{position:sticky!important;top:0!important}
 .modalPanel .invHead b{font-size:15px!important}
 .muTabs{overflow-x:auto!important;flex-wrap:nowrap!important;scroll-snap-type:x proximity}
 .muTabs .muTab{flex:0 0 auto!important;min-width:112px;scroll-snap-align:start}
}
@media(max-width:480px){
 #stats{width:178px!important;padding:6px 8px!important}
 #stats .bar{height:14px!important}
 #stats .bar span{line-height:14px!important;font-size:10.5px!important}
 #questBox{top:62px!important;width:min(190px,52vw)!important}
 #questBox #qDesc{display:none}
 .btn,.bfB,.hbSel{min-height:42px!important}
}

/* ========================================================================== */
/* Mythavon fantasy finish — visual depth without adding HUD noise             */
/* ========================================================================== */
.panel:not(.modalPanel){
 background:
  linear-gradient(145deg,rgba(21,29,46,.95),rgba(7,10,18,.94))!important;
 border:1px solid rgba(166,132,67,.72)!important;
 box-shadow:0 10px 28px rgba(0,0,0,.48),inset 0 1px rgba(255,235,185,.07)!important;
}
#stats{border-left:3px solid #d6ad57!important}
#stats #nameRow{padding:1px 2px 5px;border-bottom:1px solid rgba(255,255,255,.07)}
#stats .bar{background:#070a11!important;border-color:#2b3548!important;box-shadow:inset 0 2px 5px #000!important}
#stats .bar i{box-shadow:inset 0 1px rgba(255,255,255,.25),0 0 10px currentColor}
#purse{border-left:3px solid #62aee8!important}
#purse .prI{border:0!important;background:rgba(93,119,155,.085)!important}
#purse .prI:hover{background:rgba(112,157,211,.16)!important}

.btn,.bfB,.hbSel,.muTab{
 border:1px solid #42516a!important;
 background:linear-gradient(#26334a,#151d2d)!important;color:#eaf0fa!important;
 box-shadow:inset 0 1px rgba(255,255,255,.08),0 3px 8px rgba(0,0,0,.28)!important;
 transition:transform .12s,filter .12s,border-color .12s,box-shadow .12s!important;
}
.btn:hover,.bfB:hover,.hbSel:hover,.muTab:hover{
 filter:brightness(1.14);border-color:#77a9da!important;transform:translateY(-1px)
}
.btn:active,.bfB:active,.hbSel:active,.muTab:active{transform:translateY(1px);box-shadow:inset 0 2px 7px #000!important}
.btn.up,.btn.go,.muTab.on,.bfB.on{
 background:linear-gradient(#f1cf7b,#ad7d30)!important;border-color:#ffe0a0!important;
 color:#191204!important;text-shadow:0 1px rgba(255,255,255,.35)!important;
 box-shadow:inset 0 1px #fff1c5,0 5px 14px rgba(201,145,47,.24)!important;
}
.btn.no,.btn.danger{background:linear-gradient(#8f3d51,#542333)!important;border-color:#d16980!important;color:#fff!important}

.secT,.mmGrp{color:#e9c778!important;text-shadow:0 1px 5px rgba(220,168,65,.18)}
.secT::before{content:'';display:inline-block;width:3px;height:1em;margin-right:7px;vertical-align:-2px;
 background:linear-gradient(#ffe39c,#9a6f28);border-radius:3px;box-shadow:0 0 7px rgba(255,200,90,.35)}
.invPane,.card,.ezCard,.setCard,.skRow,.pickStat,.bigStat{
 background:linear-gradient(145deg,rgba(31,42,62,.72),rgba(13,18,29,.78))!important;
 border-color:#33435b!important;box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
}

#skills{padding:7px 9px!important;border-radius:14px;background:linear-gradient(180deg,rgba(11,15,25,.22),rgba(5,7,12,.75));
 box-shadow:0 10px 30px rgba(0,0,0,.32)}
#skills .sk{background:
 radial-gradient(circle at 35% 25%,rgba(90,129,183,.20),transparent 36%),
 linear-gradient(145deg,#202b40,#0b101a)!important;border-color:#59677d!important}
#skills .sk:hover{border-color:#e0b85f!important;box-shadow:0 6px 17px rgba(0,0,0,.55),0 0 12px rgba(224,184,95,.20)!important}
#skills .sk.pot{border-color:#7d5870!important}

#mainMenu{background:rgba(4,7,13,.78)!important;backdrop-filter:blur(7px) saturate(.75)!important}
#mainMenu .mmB{position:relative}#mainMenu .mmB.recent{border-color:#b58c46!important;box-shadow:inset 3px 0 #d2aa58!important}
#mainMenu .mmB.recent::after{content:'ล่าสุด';position:absolute;right:7px;bottom:5px;color:#b99a5d;font-size:9px;font-weight:900}
#buffBox{display:flex!important;align-items:center;justify-content:center;gap:5px;max-width:min(760px,92vw);flex-wrap:wrap}
#buffBox .hudBuff{display:inline-flex;align-items:center;gap:5px;min-height:31px;padding:4px 8px;border:1px solid #426177;border-radius:8px;
 background:linear-gradient(145deg,rgba(17,37,52,.96),rgba(9,20,31,.96));color:#c8e6f3;box-shadow:0 4px 12px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.07);white-space:nowrap}
#buffBox .hudBuff b{display:inline-flex;align-items:center;gap:4px;color:#e8f7ff;font-size:11.5px}#buffBox .hudBuff b em{font-style:normal;font-size:14px}
#buffBox .hudBuff strong{color:#8be7b0;font-size:11.5px}#buffBox .hudBuff i{padding-left:5px;border-left:1px solid rgba(117,179,194,.38);color:#a8d3df;font-style:normal;font-size:10px}
#buffBox .hudBuff.hudScroll{border-color:#8a6cb8;background:linear-gradient(145deg,rgba(38,28,67,.96),rgba(18,16,38,.96))}#buffBox .hudBuff.hudScroll strong{color:#d4aaff}
#buffBox .hudBuff.hudRate{border-color:#aa8748;background:linear-gradient(145deg,rgba(62,45,18,.96),rgba(30,22,12,.96))}#buffBox .hudBuff.hudRate strong{color:#ffe09a}
#buffBox .hudBuff.expiring{border-color:#dc7656;background:linear-gradient(145deg,rgba(76,31,25,.96),rgba(37,15,18,.96));animation:muBuffWarn .8s ease-in-out infinite alternate}
#buffBox .hudBuffMore{min-width:34px;min-height:31px;border:1px solid #856735;border-radius:8px;background:#17130d;color:#e3bd68;font-weight:900}
@media(max-width:600px){#buffBox{gap:4px}#buffBox .hudBuff{min-height:29px;padding:3px 7px}#buffBox .hudBuff b{font-size:10.5px}#buffBox .hudBuff strong{font-size:10.5px}}
body.modal #toast{display:none!important}
#inv #bagWrap:has(.muBagEmpty){display:grid!important;place-items:center!important}
#inv #bagWrap:has(.muBagEmpty) #bagGrid{width:calc(100% - 16px);min-height:136px}
.modalPanel .invClose:focus-visible,.modalPanel .pClose:focus-visible,#offsHd .x:focus-visible{outline:2px solid #d9b45f!important;outline-offset:2px!important;box-shadow:0 0 0 4px rgba(217,180,95,.14)!important}
@keyframes muBuffWarn{to{filter:brightness(1.25)}}
#mainMenuIn{background:
 radial-gradient(circle at 10% 0,rgba(61,105,164,.18),transparent 35%),
 linear-gradient(145deg,#151e30,#080c15)!important;border:1px solid #a48240!important;
 box-shadow:0 28px 90px #000,inset 0 0 0 1px rgba(255,226,160,.06)!important}
.mmHead{background:linear-gradient(90deg,#202d43,#101724)!important}
.mmB{border-color:#33445d!important;background:
 linear-gradient(145deg,rgba(34,47,70,.92),rgba(14,20,32,.96))!important}
.mmB:hover{border-color:#caa252!important;background:
 linear-gradient(145deg,rgba(51,68,95,.98),rgba(20,28,42,.98))!important;
 box-shadow:0 8px 22px rgba(0,0,0,.4),inset 3px 0 #d5ac58!important}
.mmB kbd{background:#315d91!important;border-color:#77b7ed!important;box-shadow:inset 0 1px rgba(255,255,255,.2)}

/* Consistent scrollbar, selection and form treatment across every screen. */
*{scrollbar-color:#806737 #111724;scrollbar-width:thin}
*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-track{background:#0d1320;border-radius:9px}
*::-webkit-scrollbar-thumb{background:linear-gradient(#94753a,#5e4b2a);border:2px solid #0d1320;border-radius:9px}
input,select,textarea{background:#0b111d!important;border:1px solid #3a4b65!important;color:#edf3ff!important;
 border-radius:8px!important;box-shadow:inset 0 2px 7px rgba(0,0,0,.38)}
input::placeholder,textarea::placeholder{color:#7f8ba0!important}
::selection{background:#356b9f;color:#fff}

/* ========================================================================== */
/* MMORPG FRAMEWORK V2 — รอบรื้อจริง                                           */
/* ตัดภาษาภาพเว็บสีน้ำเงินออก ใช้เหล็กดำ หิน และทองแดงเป็นโครงหลัก             */
/* ========================================================================== */
:root{--mu-bg:#090a0d;--mu-bg2:#151418;--mu-line:#70562e;--mu-line2:#302d30;
 --mu-gold:#d8b360;--mu-text:#f0ece3;--mu-dim:#9d9698;--mu-panel:rgba(10,10,13,.97)}
.modalPanel{
 background:radial-gradient(circle at 50% -18%,rgba(139,89,27,.18),transparent 42%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px),
  linear-gradient(145deg,#17171c,#090a0e 72%)!important;
 border-color:#896a36!important;box-shadow:0 0 0 2px #262329,0 0 0 3px #92713a,
  0 26px 75px rgba(0,0,0,.86),inset 0 0 35px rgba(0,0,0,.54)!important}
.modalPanel .invHead{background:linear-gradient(90deg,#352717,#17161a 58%,#291d11)!important;
 border-bottom-color:#8f6b35!important;box-shadow:inset 0 -2px #08080a,0 5px 16px #000!important}
.btn,.bfB,.hbSel,.muTab{border-color:#4b4338!important;background:linear-gradient(#2b292b,#18181c)!important;
 color:#ddd5c4!important}
.btn:hover,.bfB:hover,.hbSel:hover,.muTab:hover{border-color:#b88a3e!important;color:#ffe7ab!important}
.btn.up,.btn.go,.muTab.on,.bfB.on{background:linear-gradient(#deb966,#936725)!important;
 border-color:#f1d48f!important;color:#1a1205!important}
.invPane,.card,.ezCard,.setCard,.skRow,.pickStat,.bigStat{background:linear-gradient(145deg,rgba(38,36,38,.78),rgba(15,15,18,.84))!important;
 border-color:#373239!important}

/* หน้าตัวละคร: ค่าที่ใช้เล่นจริงต้องเห็นทันที ไม่มีเลขตัด ไม่มี form grid */
#charPanel{--pw:520px!important;--ph:720px!important;padding:10px 12px!important}
#charBody{max-height:calc(min(90dvh,720px) - 58px)!important;padding-right:5px!important}
#charBody .bigStats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important}
#charBody .bigStat{min-width:0!important;min-height:36px!important;border-radius:2px!important;padding:5px 8px!important}
#charBody .bigStat .bn{font-size:12px!important;white-space:nowrap}
#charBody .bigStat .bv{font-size:14px!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
#charBody .muStats{display:grid!important;grid-template-columns:1fr!important;gap:2px!important}
#charBody .muStat{min-height:48px!important;border-radius:1px!important}
#charBody .muStatAdd{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
#charBody .muCombat{display:grid!important;grid-template-columns:1fr 1fr!important}
#charBody .muCombatRow{background:linear-gradient(90deg,rgba(255,255,255,.025),rgba(0,0,0,.1))}
#charBody .muCombatRow b{color:#e8cf92!important}
#charBody .charUtility{position:sticky;bottom:0;z-index:5;padding:5px 0 2px;
 background:linear-gradient(transparent,#090a0e 30%)}
#charPanel #offsBtn{min-height:34px!important;margin-left:auto!important;margin-right:7px!important;padding:5px 9px!important;
 border:1px solid #80602f!important;border-radius:3px!important;background:linear-gradient(#302719,#171512)!important;
 color:#e2c277!important;font-size:11.5px!important;box-shadow:inset 0 1px rgba(255,255,255,.05)!important}
#charPanel #offsBtn:hover{border-color:#d2a64e!important;color:#ffe7a7!important}

/* HUD รอบแรก: ใช้ทองเป็นโครง สีแดง/น้ำเงินสงวนไว้สำหรับทรัพยากรเท่านั้น */
.panel:not(.modalPanel){background:linear-gradient(145deg,rgba(24,23,27,.95),rgba(8,9,12,.95))!important;
 border-color:rgba(151,113,54,.78)!important}
#stats{border-left-color:#b9883d!important}
#stats .bar{background:#070709!important;border-color:#393237!important}
#purse{border-left-color:#b9883d!important}
#purse .prI{background:rgba(130,97,42,.08)!important}
#skills .sk{background:radial-gradient(circle at 35% 25%,rgba(165,114,38,.17),transparent 36%),
 linear-gradient(145deg,#292529,#0c0d10)!important;border-color:#6a5738!important}
#skills .sk:hover{border-color:#e0b85f!important}
#mainMenuIn{background:radial-gradient(circle at 10% 0,rgba(137,89,28,.16),transparent 35%),
 linear-gradient(145deg,#19171a,#090a0d)!important}
.mmHead{background:linear-gradient(90deg,#352717,#17161a)!important}
.mmB{border-color:#3d3839!important;background:linear-gradient(145deg,rgba(39,37,39,.94),rgba(15,15,18,.97))!important}
.mmB:hover{border-color:#ba8b3e!important;background:linear-gradient(145deg,#37312a,#1b1919)!important;
 box-shadow:0 8px 22px rgba(0,0,0,.5),inset 3px 0 #d5ac58!important}

@media(max-width:700px){
 #charPanel{--pw:100vw!important;--ph:88dvh!important}
 #charBody{max-height:calc(88dvh - 58px)!important}
 #charBody .muCombat{grid-template-columns:1fr 1fr!important}
 #charBody .bigStat .bv{font-size:13px!important}
 #charBody .muStat{min-height:62px!important}
 #charBody .muStatEffect{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.25!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   🏛️ CLASSIC UI PASS v3 (15 ส.ค. 2569) — เจ้าของเลือก 3 อย่าง:
      ① กรอบโลหะสลัก + หมุด/อัญมณี 4 มุม   ② หัวข้อทองนูน (engraved)   ③ ช่องไอเท็มนูน 3D
   ต่อยอดบนเลเยอร์ V2 (เหล็กดำ+วงแหวนทอง) · CSS ล้วน ไม่แตะโครง/ฟังก์ชัน · คง HP/MP เป็นแถบ
   ⚠️ ปรับกลับง่าย: ลบบล็อกนี้ทั้งก้อนคืนสภาพเดิมทันที · ตัวเลขปรับจูนได้ตรงนี้
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① กรอบโลหะสลัก — เบเวลหนาขึ้น (มืด/ทอง/มืด + เส้นทองใน) */
.modalPanel{
 box-shadow:
  0 0 0 2px #241f18, 0 0 0 3px #9c7a3e, 0 0 0 4px #46381d,
  0 26px 78px rgba(0,0,0,.88),
  inset 0 0 40px rgba(0,0,0,.55),
  inset 0 0 0 5px rgba(255,228,160,.05)!important;
}
/* หมุดทอง 4 มุม (overlay โปร่ง ไม่แตะพื้นหลัง/คลิกทะลุได้)
   :not(#charPanel) = หน้าตัวละครมี ◆ 4 มุมของมันเองอยู่แล้ว ไม่ให้ซ้อน */
.modalPanel:not(#charPanel)::before{
 content:'';position:absolute;inset:2px;border-radius:inherit;pointer-events:none;z-index:1;
 background:
  radial-gradient(circle at 8px 8px,#ffe7ab 0 1.8px,#b98a34 2.2px 3.2px,transparent 4.3px),
  radial-gradient(circle at calc(100% - 8px) 8px,#ffe7ab 0 1.8px,#b98a34 2.2px 3.2px,transparent 4.3px),
  radial-gradient(circle at 8px calc(100% - 8px),#ffe7ab 0 1.8px,#b98a34 2.2px 3.2px,transparent 4.3px),
  radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#ffe7ab 0 1.8px,#b98a34 2.2px 3.2px,transparent 4.3px);
}

/* ② หัวข้อทองนูน — เซริฟโรมัน (ละติน/เลข) + ทองสลักเงา · emoji/ไทยยังชัด (ไม่ใช้ clip โปร่ง) */
.modalPanel .invHead b,.u-section-title,.secT,.muCombatTitle,.muConfirmBox h2,.mmGrp{
 font-family:'Cinzel','Trajan Pro',Georgia,'Times New Roman',serif!important;
 color:#f2d888!important;
 text-shadow:0 1px 0 #3d2c10,0 2px 2px rgba(0,0,0,.55),0 0 12px rgba(226,180,90,.22)!important;
 letter-spacing:.4px!important;
}
/* เลขค่าพลังใหญ่ให้เป็นเซริฟด้วย (ให้ได้อารมณ์คลาสสิก) */
#charBody .bigStat .bv{font-family:Georgia,'Times New Roman',serif!important;
 text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 9px rgba(255,205,110,.14)!important}

/* ③ ช่องไอเท็มนูน 3D — ขอบ ridge รับ "สีเกรด" จาก inline border-color อัตโนมัติ
   (ไม่ใช้ !important กับ box-shadow → แสงเกรด inset glow ของ .gi/.cell ยังอยู่ครบ) */
.gi,.ds,#inv .cell{border-style:ridge!important;border-width:3px!important}
#inv .dollRail .ds{border-style:ridge!important;border-width:2px!important}   /* ช่องสวม (specificity สูงกว่า) */
.gi:hover,.ds:hover,#inv .cell:hover{filter:brightness(1.13)}

/* ═══ WORLD MAP · one visual language for full map, minimap, warp and farm ═══ */
#mapPanel{--pw:980px!important;--ph:690px!important;padding:12px!important;
 background:
  radial-gradient(ellipse at 50% 0%,rgba(79,126,157,.18),transparent 41%),
  radial-gradient(circle at 8% 94%,rgba(179,130,49,.12),transparent 28%),
  linear-gradient(145deg,#171923,#0b0d13 74%)!important}
#mapPanel .invHead{min-height:45px!important;padding:8px 11px!important;
 border:1px solid rgba(226,185,91,.38)!important;border-radius:9px!important;
 background:linear-gradient(100deg,rgba(80,56,24,.72),rgba(24,27,37,.94) 48%,rgba(15,17,25,.9))!important}
#mapPanel .invHead .u-note{color:#a8b8c8!important;font-size:12px!important}
#mapPanel .muMapTabs{display:grid!important;grid-template-columns:1.32fr 1fr 1fr;gap:6px!important;
 margin:10px 0 8px!important;padding:5px!important;border:1px solid rgba(115,144,167,.30)!important;
 border-radius:11px!important;background:rgba(5,8,13,.74)!important;box-shadow:inset 0 1px rgba(255,255,255,.04)}
#mapPanel .muTab{min-height:39px!important;padding:6px 12px!important;border:1px solid rgba(154,174,190,.16)!important;
 border-radius:8px!important;background:linear-gradient(180deg,rgba(38,46,60,.86),rgba(17,21,31,.92))!important;
 color:#b9c5d3!important;font-size:13px!important;letter-spacing:.1px!important;transition:transform .14s,filter .14s!important}
#mapPanel .muTab:hover{transform:translateY(-1px);filter:brightness(1.16);color:#f7e5b3!important}
#mapPanel .muTab.on{background:linear-gradient(180deg,#e0bd68,#9b682a)!important;color:#17100a!important;
 border-color:#ffe1a0!important;box-shadow:0 0 0 1px rgba(255,222,145,.18),0 5px 16px rgba(190,130,35,.22)!important}
#mapPanel .mapColC{padding:10px 11px 9px!important;border:1px solid rgba(129,158,184,.27)!important;
 border-radius:14px!important;background:linear-gradient(145deg,rgba(24,32,45,.91),rgba(10,13,21,.92))!important;
 box-shadow:inset 0 1px rgba(255,255,255,.045),0 10px 28px rgba(0,0,0,.22)}
#mapPanel[data-mu-tab="map"] #bigMap{height:min(56dvh,500px)!important;border:3px double rgba(224,187,102,.82)!important;
 border-radius:12px!important;background:#202d2b!important;box-shadow:0 0 0 4px rgba(6,9,14,.78),0 12px 30px rgba(0,0,0,.46)!important}
#mapPanel #mapLegend{gap:5px!important;margin:0 0 9px!important}
#mapPanel #mapLegend .mapKey{display:inline-flex!important;align-items:center;gap:5px;padding:4px 8px!important;
 border:1px solid rgba(255,255,255,.10);border-radius:999px!important;background:rgba(5,8,13,.58)!important;
 color:#dce7ef!important;font-size:11.5px!important;font-weight:800!important;white-space:nowrap}
#mapPanel .mapKey i{display:block;width:8px;height:8px;border:1.5px solid rgba(255,255,255,.88);border-radius:50%;box-shadow:0 0 8px currentColor}
#mapPanel .mapKey.you{color:#7ee0ff!important}.mapKey.you i{background:#7ee0ff}
#mapPanel .mapKey.npc{color:#8fd0ff!important}.mapKey.npc i{background:#8fd0ff}
#mapPanel .mapKey.elite{color:#c08aff!important}.mapKey.elite i{background:#c08aff}
#mapPanel .mapKey.boss{color:#ff7188!important}.mapKey.boss i{background:#ff4d6d}
#mapPanel .mapKey.farm{color:#7ee06a!important}.mapKey.farm i{background:#7ee06a}
#mapPanel #mapInfo{display:flex!important;align-items:center;justify-content:center;gap:5px 12px;flex-wrap:wrap;
 max-width:640px!important;margin:10px auto 0!important;padding:8px 10px!important;border:1px solid rgba(143,208,255,.18);
 border-radius:9px;background:rgba(5,8,13,.56);color:#c4d0dc!important;font-size:12px!important;line-height:1.4!important}
#mapPanel #mapInfo .mapPos{color:#8fd0ff;font-weight:900}
#mapPanel #mapInfo small{flex:1 0 100%;color:#899aaa;font-size:11.5px}
#mapPanel .mapColL,#mapPanel .mapColR{padding:10px!important;border:1px solid rgba(129,158,184,.23)!important;
 border-radius:13px!important;background:linear-gradient(145deg,rgba(25,30,42,.88),rgba(11,14,22,.92))!important}
#mapPanel .mapColL .secT,#mapPanel .mapColR .secT{margin:0 0 8px!important;padding:0 0 7px!important;
 border-bottom:1px solid rgba(226,185,91,.24);font-size:13px!important}
#mapPanel #zoneList,#mapPanel #farmList{margin-top:0!important;padding:0 2px 2px!important}
#mapPanel .muWarpSub{position:static!important;margin:0 0 9px!important;padding:4px!important;border:1px solid rgba(119,148,173,.23)!important;
 border-radius:9px!important;background:rgba(4,7,12,.65)!important}
#mapPanel .muWarpSub .muTab{min-height:32px!important;font-size:12px!important}
#mapPanel .zAct,#mapPanel .zRow,#mapPanel .fRow{min-height:42px!important;margin-bottom:4px!important;padding:8px 9px!important;
 border:1px solid rgba(147,164,181,.18)!important;border-radius:8px!important;
 background:linear-gradient(90deg,rgba(50,63,77,.48),rgba(14,17,25,.65))!important}
#mapPanel .zAct:hover,#mapPanel .zRow:hover,#mapPanel .fRow:hover{border-color:rgba(143,208,255,.62)!important;background:linear-gradient(90deg,rgba(57,85,103,.58),rgba(19,25,36,.78))!important}
#mapPanel .zRow.fit{border-color:rgba(126,224,106,.72)!important;background:linear-gradient(90deg,rgba(55,102,67,.38),rgba(15,25,24,.78))!important}
#mapPanel .zRow.warpOK{border-color:rgba(255,213,74,.55)!important}
#mini{border:3px double #d8b766!important;border-radius:50%!important;
 background:#18242a!important;box-shadow:0 0 0 3px rgba(5,8,12,.86),0 12px 30px rgba(0,0,0,.72),0 0 22px rgba(140,195,222,.17)!important}
@media(max-width:700px){
 #mapPanel .muMapTabs{grid-template-columns:1fr 1fr 1fr!important;gap:4px!important}
 #mapPanel .muTab{min-width:0!important;padding:5px 6px!important;font-size:11.5px!important}
 #mapPanel #mapLegend .mapKey{padding:3px 6px!important;font-size:10.5px!important}
 #mapPanel .mapColC,#mapPanel .mapColL,#mapPanel .mapColR{padding:7px!important}
}

/* ═══ BOT CONTROL DESK · concise controls, clear state, usable farm selection ═══ */
#botPanel{--pw:500px!important;--ph:680px!important;padding:12px!important;
 background:radial-gradient(ellipse at 50% 0%,rgba(55,121,117,.17),transparent 40%),radial-gradient(circle at 94% 7%,rgba(225,180,81,.12),transparent 24%),linear-gradient(145deg,#151a25,#090c13 72%)!important}
#botPanel .botHead{min-height:48px!important;padding:7px 10px!important;align-items:center!important;border:1px solid rgba(224,188,103,.42)!important;border-radius:10px!important;background:linear-gradient(100deg,rgba(76,57,27,.82),rgba(26,31,42,.95) 56%,rgba(12,15,23,.96))!important}
#botPanel .botTitle{display:flex;flex-direction:column;gap:1px;min-width:0}
#botPanel .botTitle b{font-size:17px!important;color:#f5dc97!important;line-height:1.1}
#botPanel .botTitle small{color:#9aaebb;font-size:11.5px;font-weight:700;letter-spacing:.15px}
#botPanel #botOnBtn.botLaunch{width:100%!important;min-height:46px!important;margin:9px 0 7px!important;border:1px solid rgba(164,188,204,.35)!important;border-radius:10px!important;background:linear-gradient(180deg,#354457,#182431)!important;color:#e4eff5!important;font-size:14px!important;font-weight:900!important;letter-spacing:.2px!important;box-shadow:inset 0 1px rgba(255,255,255,.13),0 6px 16px rgba(0,0,0,.25)!important}
#botPanel #botOnBtn.botLaunch.up{border-color:#a7e37c!important;background:linear-gradient(180deg,#397844,#1d4c31)!important;color:#efffc7!important;box-shadow:inset 0 1px rgba(255,255,255,.2),0 0 18px rgba(103,225,118,.19)!important}
#botPanel #botTodo .ezTodo{min-height:42px!important;margin:0 0 8px!important;padding:7px 9px!important;border:1px solid rgba(226,184,86,.34)!important;border-radius:9px!important;background:linear-gradient(90deg,rgba(91,65,24,.32),rgba(15,21,29,.77))!important;color:#dce7e9!important}
#botPanel #botTodo .ezTodo.good{border-color:rgba(116,225,126,.5)!important;background:linear-gradient(90deg,rgba(39,106,60,.37),rgba(12,27,25,.8))!important}
#botPanel #botTabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px!important;margin:0 0 10px!important;padding:5px!important;border:1px solid rgba(122,151,174,.28)!important;border-radius:11px!important;background:rgba(4,7,12,.72)!important}
#botPanel #botTabs .botTabBtn{min-height:39px!important;margin:0!important;padding:5px 3px!important;border:1px solid rgba(142,161,176,.2)!important;border-radius:8px!important;background:linear-gradient(180deg,rgba(48,58,72,.92),rgba(20,26,37,.98))!important;color:#b9c8d1!important;font-size:12px!important;font-weight:800!important;white-space:nowrap}
#botPanel #botTabs .botTabBtn.up{border-color:#f1cd70!important;background:linear-gradient(180deg,#dcb65e,#8d5e27)!important;color:#171109!important;text-shadow:0 1px rgba(255,238,183,.45)!important;box-shadow:0 3px 10px rgba(202,145,48,.2)!important}
#botPanel .botTab{padding:0 2px 4px!important}
#botPanel .botTab .secT{margin:8px 0 7px!important;padding:0 0 7px!important;border-bottom:1px solid rgba(224,187,99,.25)!important;background:none!important;color:#f0d38a!important;font-size:13px!important}
#botPanel .botGo #farmCP{margin:0 0 8px!important;padding:8px 9px!important;border:1px solid rgba(117,193,221,.27)!important;border-radius:9px!important;background:linear-gradient(90deg,rgba(30,67,84,.52),rgba(11,17,25,.76))!important;color:#cbdce5!important;font-size:12.5px!important;line-height:1.55!important}
#botPanel #botFarmList{display:grid!important;gap:6px!important;margin:0 0 11px!important;max-height:min(39dvh,320px)!important;overflow:auto!important;padding:1px 3px 3px!important}
#botPanel #botFarmList .botFarmCard{min-height:55px!important;margin:0!important;padding:7px 8px!important;cursor:pointer!important;border:1px solid var(--c)!important;border-left:4px solid var(--c)!important;border-radius:9px!important;background:linear-gradient(90deg,rgba(35,48,60,.95),rgba(10,14,21,.9))!important;box-shadow:inset 0 1px rgba(255,255,255,.035)!important}
#botPanel #botFarmList .botFarmCard:hover{transform:translateX(2px);filter:brightness(1.15)}
#botPanel #botFarmList .botFarmCard.ok{border-color:#a9ea85!important;background:linear-gradient(90deg,rgba(61,133,75,.42),rgba(11,24,20,.92))!important;box-shadow:0 0 0 1px rgba(122,224,106,.16),0 0 15px rgba(85,220,117,.11)!important}
#botPanel #botFarmList .ezNm{color:#edf4f5!important;font-size:13px!important;font-weight:900!important}
#botPanel #botFarmList .ezSub{font-size:11.5px!important;line-height:1.35!important}
#botPanel #botFarmList .ezVal{font-size:14px!important;font-weight:900!important}
#botPanel #botStat{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px!important}
#botPanel #botStat .stat{min-height:43px!important;padding:7px 8px!important;border:1px solid rgba(116,140,161,.25)!important;border-radius:8px!important;background:rgba(17,24,35,.78)!important}
#botPanel #botStat .stat span{display:block;color:#93a8b5!important;font-size:11px!important}
#botPanel #botStat .stat b{display:block;margin-top:2px;color:#eef5f6;font-size:13px!important}
#botPanel .botSk,#botPanel .botSkR{border:1px solid rgba(129,152,173,.26)!important;border-radius:9px!important;background:linear-gradient(90deg,rgba(29,39,52,.86),rgba(12,17,26,.92))!important}
#botPanel .botFoot{margin:9px 2px 0!important;padding:7px 9px!important;border-top:1px solid rgba(132,153,168,.2)!important;color:#92a2ae!important;font-size:11.5px!important;line-height:1.45!important}
@media(max-width:580px){#botPanel{--pw:calc(100vw - 18px)!important;padding:9px!important}#botPanel #botTabs{gap:3px!important;padding:3px!important}#botPanel #botTabs .botTabBtn{min-height:36px!important;font-size:10.5px!important}#botPanel #botFarmList{max-height:34dvh!important}}

/* ═══ HUD · bot performance separate from server health ═══ */
.hudBotStat,.hudNetStat{position:fixed;left:12px;z-index:20;min-width:178px;padding:7px 10px!important;border-radius:10px!important;font:800 12px/1.45 system-ui,'Segoe UI',sans-serif!important;box-shadow:0 7px 18px rgba(0,0,0,.4)!important;backdrop-filter:blur(8px)}
.hudNetStat{top:12px;border:1px solid rgba(124,205,242,.42)!important;background:linear-gradient(135deg,rgba(10,28,42,.92),rgba(9,15,27,.9))!important;color:#d8edf7!important;cursor:pointer;pointer-events:auto}
.hudBotStat{top:76px;border:1px solid rgba(135,225,124,.44)!important;background:linear-gradient(135deg,rgba(21,57,38,.93),rgba(8,22,22,.91))!important;color:#e4f7e2!important}
.hudBotStat #hsBot,.hudNetStat #hsNet{display:grid;grid-template-columns:auto auto;column-gap:7px;align-items:center}
.hudLabel{grid-column:1/-1;margin-bottom:2px;color:#9fb8c9!important;font-size:10px!important;font-weight:900!important;letter-spacing:.5px;text-transform:uppercase}
.hudBotStat .hudLabel{color:#aeea9c!important}.hudBotStat b{color:#d9ff8a;font-size:13px}.hudNetStat b{font-size:13px}.hudBotStat em,.hudNetStat em{color:#9aabba;font-size:10.5px;font-style:normal;font-weight:700}
@media(max-width:580px){.hudBotStat,.hudNetStat{left:8px;min-width:158px;padding:6px 8px!important;font-size:11px!important}.hudBotStat{top:70px}}

/* ═══ CENTER COMBAT HUD · HP / MP / EXP live above the hotbar ═══ */
#stats{position:absolute!important;top:auto!important;left:50%!important;bottom:94px!important;transform:translateX(-50%)!important;
 display:grid!important;grid-template-columns:1fr 1fr;column-gap:7px;row-gap:4px;width:min(470px,46vw)!important;padding:8px 10px 9px!important;
 border:1px solid rgba(220,178,88,.72)!important;border-radius:13px!important;background:linear-gradient(145deg,rgba(22,28,39,.96),rgba(7,10,16,.96))!important;
 box-shadow:0 12px 32px rgba(0,0,0,.58),inset 0 1px rgba(255,241,195,.10)!important}
#stats #nameRow{grid-column:1/-1;height:auto!important;display:flex!important;align-items:center;justify-content:center;gap:12px;padding:0 0 5px!important;border-bottom:1px solid rgba(211,176,100,.28)!important;color:#f0e2bd!important;font-size:12.5px!important}
#stats .bar{height:16px!important;margin:0!important;border:1px solid rgba(102,123,146,.58)!important;border-radius:7px!important;background:#05070b!important;box-shadow:inset 0 2px 5px #000!important}
#stats .bar span{line-height:16px!important;font-size:10.5px!important;font-weight:900!important}
#stats .xp{grid-column:1/-1;height:15px!important;margin-top:2px!important;border-color:rgba(211,167,62,.82)!important}
#stats .xp span{display:block!important;font-size:10.5px!important;line-height:15px!important;color:#fff0be!important;letter-spacing:.15px!important;text-shadow:0 1px 3px #000,0 0 5px #513400!important}
@media(max-width:760px){#stats{bottom:70px!important;width:min(350px,88vw)!important;padding:7px 8px 8px!important}#stats .bar{height:14px!important}#stats .bar span{line-height:14px!important;font-size:10px!important}#stats .xp{height:13px!important}#stats .xp span{line-height:13px!important;font-size:9.5px!important}}

/* 📊 สถิติรอบนี้บน HUD (ใต้กล่องปิง) — 2 คอลัมน์ ชื่อ/ค่า อ่านเร็ว */
.hudBotStat{min-width:212px!important;max-width:252px}
.hudBotStat .hudLabel{grid-column:1/-1}
.hudBotStat .bsK{color:#a9d9a4;font-weight:700}
.hudBotStat .bsV{text-align:right;white-space:nowrap}
.hudBotStat .bsV b{color:#eaffe6}
.hudBotStat .bsV em{color:#8fbf8a;font-style:normal;font-size:11px}