/* ──────────────────────────────────────────────────────────────
   Class4-RO — HUD มือถือ v5
   ผังลอกจากรูปตัวอย่างที่ owner เลือก: การ์ดสถานะ+แถบลัดบนซ้าย ·
   แถวไอคอนกลมชิดขอบซ้าย · จอยสติ๊กล่างซ้าย · มินิแมพบนขวา ·
   กลุ่มปุ่มสกิลรังผึ้งล้อมปุ่มโจมตีล่างขวา · แถบ EXP เส้นบางล่างสุด
   สีเป็นชุดเดียวกับ AI Menu บน PC (auto_attack_ui.h)
   ────────────────────────────────────────────────────────────── */
:root{
  --ac:#ffcb5c; --acL:#ffe9a9; --acD:#f0a52e;
  --bl:#3e86be; --blD:#1f5f93; --ln:#acd1e8; --lnS:#d7e8f5;
  --tx:#384a5e; --dm:#94aabc;
  --hp:#4ec05d; --hpL:#86de90; --sp:#4f9ad6; --spL:#8ec6ee;
  --pn:#e8a63a; --ex:#f0a52e; --exJ:#4f9ad6;
  --gl:rgba(241,248,253,.86);
}
#c4m{position:fixed;inset:0;z-index:700;display:none;
  pointer-events:none;-webkit-user-select:none;user-select:none;
  font-family:"Segoe UI",Tahoma,system-ui,sans-serif;
  touch-action:none;-webkit-tap-highlight-color:transparent}
#c4m.on{display:block}
#c4m *{box-sizing:border-box}

/* ── ปุ่มกลมมาตรฐาน: น้ำเงินเข้ม ขอบขาว เหมือนในตัวอย่าง ───── */
#c4m .r{border-radius:50%;display:grid;place-items:center;padding:0;
  background:radial-gradient(circle at 34% 26%,#63a2d4,var(--bl) 46%,var(--blD));
  border:2px solid rgba(255,255,255,.9);color:#fff;
  box-shadow:0 3px 10px -2px rgba(6,26,44,.7), inset 0 2px 5px rgba(255,255,255,.35);
  pointer-events:auto;cursor:pointer;transition:transform .08s linear}
#c4m .r:active{transform:scale(.9)}
#c4m .r svg{fill:none;stroke:#fff;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
#c4m .r.on{background:radial-gradient(circle at 34% 26%,#fff0c9,var(--ac) 48%,var(--acD))}
#c4m .r.on svg{stroke:#5a3f0c}
#c4m .r img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;
  border-radius:50%}

/* ── บนซ้าย: รูปวงกลม + การ์ดสถานะ ───────────────────────── */
#c4m .who{position:absolute;left:7px;top:5px;width:42px;height:42px;
  border-radius:50%;display:grid;place-items:center;z-index:2;
  background:radial-gradient(circle at 36% 28%,#fff,var(--lnS) 60%,var(--ln));
  border:2px solid #fff;box-shadow:0 3px 9px -2px rgba(6,26,44,.6);
  font-size:13px;font-weight:800;color:var(--blD);pointer-events:auto}
#c4m .lvtag{position:absolute;left:8px;top:45px;z-index:3;
  font-size:9px;font-weight:800;color:#5a3f0c;padding:1px 6px;border-radius:999px;
  background:linear-gradient(180deg,var(--acL),var(--ac));border:1px solid var(--acD)}
#c4m .card{position:absolute;left:34px;top:6px;width:252px;padding:3px 4px 4px 16px;
  border-radius:9px;background:var(--gl);border:1px solid var(--ln);
  box-shadow:0 4px 14px -4px rgba(6,26,44,.55);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);pointer-events:auto}
#c4m .nm{height:15px;border-radius:5px;background:#fff;border:1px solid var(--lnS);
  display:flex;align-items:center;padding:0 6px;
  font-size:11px;font-weight:700;color:var(--tx);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#c4m .bar{position:relative;height:14px;margin-top:2px;border-radius:4px;
  background:linear-gradient(180deg,#1d3a52,#2a5273);
  border:1px solid rgba(255,255,255,.45);overflow:hidden}
#c4m .bar i{position:absolute;left:0;top:0;bottom:0;width:0;transition:width .25s ease}
#c4m .bar u{position:absolute;left:5px;top:0;bottom:0;display:flex;align-items:center;
  font-size:8.5px;font-weight:800;font-style:normal;color:#fff;opacity:.9;
  text-shadow:0 1px 2px rgba(0,0,0,.8)}
#c4m .bar b{position:absolute;right:6px;top:0;bottom:0;display:flex;align-items:center;
  font-size:9px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}
#c4m .bar.hp i{background:linear-gradient(180deg,var(--hpL),var(--hp))}
#c4m .bar.sp i{background:linear-gradient(180deg,var(--spL),var(--sp))}
#c4m .bar.pn i{background:linear-gradient(180deg,#f3c874,var(--pn))}
#c4m .row3{display:flex;gap:3px;margin-top:2px}
#c4m .row3 .bar{flex:1;margin-top:0}
#c4m .zeny{width:96px;height:14px;border-radius:4px;background:#fff;
  border:1px solid var(--lnS);display:flex;align-items:center;justify-content:flex-end;
  padding:0 5px;font-size:9px;font-weight:700;color:var(--tx)}

/* ── แถบลัด 2 แถว ใต้การ์ด ──────────────────────────────── */
#c4m .hot{position:absolute;left:34px;top:78px;width:252px;
  display:grid;grid-template-columns:repeat(8,1fr);gap:3px;pointer-events:auto}
#c4m .hot button{aspect-ratio:1;border-radius:5px;padding:0;overflow:hidden;
  background:rgba(255,255,255,.7);border:1px solid var(--ln);
  font-size:8.5px;font-weight:700;color:var(--dm);
  display:grid;place-items:center;cursor:pointer;transition:transform .08s linear}
#c4m .hot button:active{transform:scale(.88)}
#c4m .hot img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}

/* ── ชิดขอบซ้าย: แถวไอคอนกลม ─────────────────────────────── */
/* top/gap คำนวณให้ปุ่มสุดท้ายจบเหนือจอยสติ๊ก (จอ 375 สูง = จอยเริ่มที่ 243)
   ค่าเดิม 64/4 ทำให้ล้นไป 3px ทับขอบจอยพอดี */
/* แถวไอคอนเรียงแถวเดียวบนสุด (เดิมเป็นคอลัมน์ชิดขอบซ้าย)
   ที่ว่างด้านบนคือช่องระหว่างการ์ดสถานะ (จบที่ x286) กับมินิแมพ (เริ่มที่ vw-136)
   ยึดสองฝั่งด้วย left/right แล้วให้ flex จัดกึ่งกลางเอง จะได้ไม่ทับอะไรทุกความกว้างจอ
   wrap ไว้ด้วย เพราะจอแคบ ๆ ช่องนี้แคบกว่าความยาวแถว ต้องยอมให้ตกลงมาแถวสอง */
#c4m .menu{position:absolute;left:292px;right:140px;top:7px;
  display:flex;flex-direction:row;flex-wrap:wrap;
  /* ชิดซ้ายของช่องว่าง ไม่ใช่กึ่งกลาง — owner ขอให้ขยับมาทางซ้าย
     และเว้นระยะจากมินิแมพให้ชัด ๆ ไว้ด้วย */
  justify-content:flex-start;align-items:flex-start;align-content:flex-start;
  /* [27/10] เพิ่มปุ่มสเตตัสเป็น 11 ปุ่ม ย่อจาก 32/gap6 เป็น 30/gap4
     ไม่งั้นล้นเป็นสองแถวแล้วไปบังฉาก (พื้นที่แถว 380px ที่จอกว้าง 812) */
  gap:4px;transition:opacity .18s linear}
#c4m .menu .r{width:30px;height:30px;flex:0 0 auto}
#c4m .menu .r svg{width:17px;height:17px}
/* ไอคอนภาพวาด: ต้องแยกกฎจาก .r img ซึ่งเป็นของรูปสกิลในแถบลัด
   (อันนั้นตั้ง border-radius:50% กับ pixelated ไว้ ใช้กับภาพวาดแล้วขอบแหว่งและหยาบ) */
#c4m .menu .r img.ic{width:74%;height:74%;object-fit:contain;
  image-rendering:auto;border-radius:0;
  filter:drop-shadow(0 1px 1px rgba(6,26,44,.45))}
#c4m .menu .r:active img.ic{transform:none}
/* เดิมกล่องแชทอยู่มุมซ้ายทับแถวไอคอนนี้ จึงต้องสั่งให้เลื่อนหลบ
   พอย้ายกล่องมากลางจอแล้วไม่ทับกันอีก ซ่อนต่อไปก็มีแต่เสียปุ่มเปล่า ๆ */
/* #c4m.chat-open .menu{transform:translateX(-52px);opacity:0;pointer-events:none} */

/* ปุ่มเช็คชื่อรายวัน อยู่ข้างปุ่มแชท — แถวไอคอนซ้ายเต็ม 6 ปุ่มแล้ว */
#c4m .giftbtn{position:absolute;left:calc(50% + 25px);bottom:40px;width:34px;height:34px}
#c4m .giftbtn svg{width:19px;height:19px}

/* ── ล่างซ้าย: จอยสติ๊ก + ปุ่มแชท ─────────────────────────── */
#c4m .stick{position:absolute;left:12px;bottom:52px;width:80px;height:80px;
  border-radius:50%;background:rgba(16,38,60,.3);
  border:2px solid rgba(255,255,255,.85);pointer-events:auto;touch-action:none;
  box-shadow:0 3px 12px -2px rgba(6,26,44,.6), inset 0 0 16px rgba(255,255,255,.2);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#c4m .stick i{position:absolute;left:50%;top:50%;width:34px;height:34px;
  margin:-17px 0 0 -17px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff,#dce9f4);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 2px 8px -1px rgba(6,26,44,.55);transition:transform .08s linear}
#c4m .stick.live i{transition:none}
#c4m .chatbtn{position:absolute;left:calc(50% - 17px);bottom:40px;width:34px;height:34px}
#c4m .chatbtn svg{width:19px;height:19px}
#c4m .chatbtn .dot{position:absolute;right:-2px;top:-2px;min-width:15px;height:15px;
  border-radius:999px;background:linear-gradient(180deg,var(--acL),var(--acD));
  border:1px solid #fff;color:#5a3f0c;font-size:8.5px;font-weight:800;
  display:none;place-items:center;padding:0 3px}
#c4m .chatbtn .dot.show{display:grid}

/* ── บนขวา: ชิป + ปุ่ม + มินิแมพ ─────────────────────────── */
/* ชิป FPS ย้ายลงมาใต้มินิแมพ — เดิมอยู่แถบบนแล้วไปทับปุ่มสุดท้ายของแถวไอคอน
   (ตอนเทสรอบก่อนผมวัดแค่ว่าแถวไม่ชนมินิแมพ ไม่ได้วัดกับของอื่นในแถบบน) */
#c4m .tr{position:absolute;right:88px;top:157px;display:flex;flex-direction:column;
  align-items:flex-end;gap:4px}
#c4m .trrow{display:flex;gap:4px;align-items:center}
#c4m .chip{height:22px;border-radius:7px;display:flex;align-items:center;gap:4px;
  padding:0 7px;background:var(--gl);border:1px solid var(--ln);
  font-size:9.5px;font-weight:700;color:var(--tx);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#c4m .chip .led{width:6px;height:6px;border-radius:50%;background:var(--hp)}
#c4m .sq{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  padding:0;background:linear-gradient(180deg,#f6fbff,var(--lnS));
  border:1px solid var(--ln);box-shadow:0 2px 7px -2px rgba(6,26,44,.5);
  pointer-events:auto;cursor:pointer;transition:transform .08s linear}
#c4m .sq:active{transform:scale(.9)}
#c4m .sq svg{width:17px;height:17px;fill:none;stroke:var(--blD);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
#c4m .sq.on{background:linear-gradient(180deg,var(--acL),var(--ac))}
#c4m .sq.on svg{stroke:#5a3f0c}

/* ── ล่างขวา: กลุ่มปุ่มรังผึ้ง + ปุ่มโจมตี ──────────────────── */
#c4m .cluster{position:absolute;right:0;bottom:0;width:286px;height:224px}
#c4m .sk{position:absolute;width:44px;height:44px}
/* ปุ่มเก็บของ: อยู่นอก .cluster จึงอ้างจากขอบซ้ายของจอ ไม่ใช่ขอบขวา
   x 100-144 อยู่พ้นจอยสติ๊ก (จบที่ 92) และสูงจากแถบ EXP พอ */
#c4m .pickbtn{left:100px;bottom:56px;right:auto}
#c4m .sk.empty{background:rgba(222,236,247,.22);border-style:dashed;
  border-color:rgba(255,255,255,.7)}
#c4m .sk .n{position:absolute;right:0;bottom:-1px;font-size:8px;font-weight:800;
  color:#5a3f0c;background:linear-gradient(180deg,var(--acL),var(--ac));
  border:1px solid var(--acD);border-radius:999px;padding:0 4px;line-height:1.4}
#c4m .sk svg{width:20px;height:20px}
#c4m .atk{position:absolute;right:12px;bottom:40px;width:74px;height:74px;
  border-radius:50%;display:grid;place-items:center;padding:0;
  background:radial-gradient(circle at 36% 28%,#fff,#eef6fd 52%,#cfe2f1);
  border:3px solid rgba(255,255,255,.95);
  box-shadow:0 6px 20px -4px rgba(6,26,44,.7), inset 0 2px 8px rgba(255,255,255,.9);
  pointer-events:auto;cursor:pointer;transition:transform .08s linear}
#c4m .atk:active{transform:scale(.93)}
/* ปุ่มโจมตีพื้นขาว ไอคอนจึงเป็นโทนเข้ม และกินพื้นที่น้อยกว่าปุ่มเมนู
   เพราะปุ่มใหญ่กว่า ถ้าใช้สัดส่วนเดียวกันจะดูอึดอัดเต็มวง */
#c4m .atk img.ic{width:66%;height:66%;object-fit:contain;
  image-rendering:auto;border-radius:0;
  filter:drop-shadow(0 1px 2px rgba(6,26,44,.35))}
#c4m .atk svg{width:34px;height:34px;fill:none;stroke:var(--blD);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ── ล่างสุด: แถบ EXP เส้นบาง ────────────────────────────── */
#c4m .exp{position:absolute;left:0;right:0;bottom:0;height:13px;
  background:rgba(8,20,32,.82);display:flex;align-items:center;pointer-events:auto}
#c4m .exp .t{position:relative;flex:1;height:7px;margin:0 1px;border-radius:2px;
  background:rgba(255,255,255,.14);overflow:hidden}
#c4m .exp .t i{position:absolute;top:0;bottom:0;width:0;transition:width .3s ease}
#c4m .exp .t.base i{left:0;background:linear-gradient(180deg,#ffd27d,var(--ex))}
#c4m .exp .t.job  i{left:0;background:linear-gradient(180deg,#8ec6ee,var(--exJ))}
#c4m .exp .t::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 9.9%,
    rgba(255,255,255,.3) 9.9% 10%)}
#c4m .exp .lab{flex:none;font-size:8.5px;font-weight:800;color:var(--tx);
  background:linear-gradient(180deg,#fff,var(--lnS));border:1px solid var(--ln);
  border-radius:3px;padding:0 7px;line-height:11px;margin:0 2px}
#c4m .exp .pc{flex:none;font-size:8.5px;font-weight:800;color:#fff;
  width:34px;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* ── มินิแมพของเกม ปักไว้มุมขวาบน ────────────────────────── */
#MiniMapV2.c4m-map{position:fixed !important;right:8px !important;top:7px !important;
  left:auto !important;bottom:auto !important;z-index:720 !important}

/* ── กล่องแชท ───────────────────────────────────────────── */
/* กล่องแชทอยู่กลางจอเหนือปุ่มแชท ไม่ใช่มุมซ้ายแล้ว
   bottom 84 = พ้นปุ่มแชท (bottom 40 + สูง 34) พอดี ไม่บัง
   ใช้ translateX ตรงนี้ได้ เพราะ host ไม่มี transform อื่น และยังกว้างตามจอได้ */
#ChatBox.c4m-chat{position:fixed !important;
  left:50% !important;transform:translateX(-50%) !important;
  top:auto !important;right:auto !important;bottom:84px !important;
  width:min(340px,calc(100vw - 400px)) !important;height:146px !important;z-index:740 !important}
/* กดปุ่มขยายในกล่องแชทเพื่อย้อนอ่าน: สูงได้เกือบเต็มจอแต่เว้นขอบบนไว้ 10px
   ไม่ย้ายขอบล่าง กล่องจึงโตขึ้นข้างบนอย่างเดียว ปุ่มล่างซ้ายยังกดได้เหมือนเดิม */
#ChatBox.c4m-chat.c4m-tall{height:calc(100vh - 166px) !important}

#ChatBox.c4m-chat > div{width:100% !important;height:100% !important}

/* กันแตะทะลุ: แตะบนการ์ด/แถบลัด/แถบ EXP ไม่ควรสั่งตัวละครเดิน */
#c4m .card,#c4m .hot,#c4m .exp{pointer-events:auto}

/* ── แจ้งให้หมุนจอ ──────────────────────────────────────────
   เป็นแผงสว่างชุดเดียวกับ AI Menu / หน้าเข้าเกม ไม่ใช่จอดำเต็มหน้า
   (จอดำเป็นสีที่ไม่มีอยู่ที่อื่นในงานนี้เลย ดูเหมือนหลุดมาจากคนละเกม)
   ฉากเกมยังเห็นรำไรข้างหลัง ผู้เล่นจึงรู้ว่ายังอยู่ในเกม แค่ถือผิดแนว */
#c4mRot{position:fixed;inset:0;z-index:900;display:none;place-items:center;
  padding:20px;background:rgba(8,26,43,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  font-family:'IBM Plex Sans Thai',"Segoe UI",Tahoma,system-ui,sans-serif}
#c4mRot.on{display:grid}
#c4mRot,#c4mRot *{box-sizing:border-box}

/* ตัวแผง — ทรงเดียวกับหน้าต่าง AI Menu: มุม 16 ขอบฟ้า ไฮไลต์ขาวด้านใน */
#c4mRot > div{width:min(324px,100%);padding:22px 20px 18px;text-align:center;
  background:#e1f0fa;border:1px solid var(--ln);border-radius:16px;
  box-shadow:0 22px 60px -18px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.34) inset}

#c4mRot .ic{position:relative;width:60px;height:60px;margin:0 auto 13px;
  border:3px solid var(--bl);border-radius:11px;background:#fff;
  box-shadow:0 2px 7px -2px rgba(31,95,147,.45);
  animation:c4turn 1.9s ease-in-out infinite}
#c4mRot .ic::before{content:"";position:absolute;left:50%;top:6px;
  transform:translateX(-50%);width:18px;height:3px;border-radius:999px;
  background:var(--bl);opacity:.55}
@keyframes c4turn{0%,42%{transform:rotate(0)}58%,100%{transform:rotate(-90deg)}}

#c4mRot h2{margin:0 0 6px;font-size:19px;font-weight:700;color:var(--blD)}
#c4mRot p{margin:0;font-size:14px;color:#4a5e74;line-height:1.62}

/* เส้นคั่นบอกว่าบรรทัดล่างเป็นวิธีแก้ ไม่ใช่คำอธิบายต่อเนื่อง */
#c4mRot p.hint{margin-top:14px;padding-top:12px;font-size:12px;color:#6d8296;
  border-top:1px solid var(--lnS)}

#c4RotBtn{margin-top:15px;padding:11px 24px;font:700 14.5px/1 inherit;
  letter-spacing:.04em;color:#5a3f0c;cursor:pointer;
  background:linear-gradient(180deg,var(--acL),var(--ac) 52%,var(--acD));
  border:1px solid var(--acD);border-radius:8px;
  box-shadow:0 1px 0 #fff inset,0 2px 6px -1px rgba(240,165,46,.5)}
#c4RotBtn:active{transform:translateY(1px);
  background:linear-gradient(180deg,var(--acD),var(--ac));
  box-shadow:0 1px 3px rgba(0,0,0,.2) inset}
#c4RotBtn:disabled{cursor:default;color:var(--dm);border-color:var(--ln);
  background:#e8f1f8;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  #c4mRot .ic{animation:none}
  #c4m .menu,#c4m .bar i,#c4m .exp .t i{transition:none}
}

/* จอแคบ: ช่องว่างด้านบนแคบลงตามด้วย ย่อปุ่มในแถวก่อนปล่อยให้ตกแถวสอง */
@media (max-width:800px){
  #c4m .menu{gap:3px}
  #c4m .menu .r{width:27px;height:27px}
  #c4m .menu .r svg{width:15px;height:15px}
}

/* จอเตี้ยมาก: บีบลงไม่ให้บังฉาก */
@media (max-height:360px){
  #c4m .card{width:224px}
  #c4m .hot{width:224px;top:74px}
  #c4m .menu{gap:3px}
  #c4m .menu .r{width:25px;height:25px}
  #c4m .menu .r svg{width:15px;height:15px}
  #c4m .stick{width:70px;height:70px;bottom:46px}
  #c4m .chatbtn{left:calc(50% - 16px);bottom:36px;width:32px;height:32px}
  #c4m .giftbtn{left:calc(50% + 23px);bottom:36px;width:31px;height:31px}
  #c4m .pickbtn{left:92px;bottom:50px;width:40px;height:40px}
  /* ย่อทั้งวงพร้อมกัน ถ้าย่อทีละปุ่มตำแหน่งที่คำนวณไว้จะเพี้ยน
     เพราะพิกัดวงถูกเขียนเป็น inline style จาก JS ไม่ใช่จาก CSS */
  #c4m .cluster{transform:scale(.84);transform-origin:100% 100%}
}


/* แถบของลัด F1..F9 ของเวอร์ชันคอม: บนมือถือมีวงปุ่มรอบปุ่มตีทำหน้าที่เดียวกันแล้ว
   ใช้ visibility ไม่ใช่ display เพราะยังต้องอ่านรูปไอคอนจากมันมาใส่ปุ่มเรา
   คีย์ F1..F9 ยังทำงานปกติ (เอนจินเช็กแค่ว่าหน้าต่างถูกสร้างแล้ว ไม่ได้เช็กว่ามองเห็น) */
html.c4-mobile #ShortCut{visibility:hidden !important}
/* ป้ายบอกวิธีตั้งสกิล โผล่พร้อมแถบลัดตอนเปิดหน้าต่างสกิล (27/10) */
#c4scHint{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:781;
  padding:5px 12px;border-radius:999px;pointer-events:none;
  font:600 12px/1.3 system-ui,sans-serif;color:#2b1c05;white-space:nowrap;
  background:rgba(255,205,110,.95);box-shadow:0 2px 8px rgba(0,0,0,.35)}

/* ปุ่ม AI Menu กับร้านค้าย้ายเข้าแถวบนแล้ว ซ่อนตัวลอยไม่ให้มีสองที่
   ต้องใช้ !important เพราะทั้งคู่เขียน style ใส่ตัวเองใหม่เป็นระยะ
   (ปุ่มร้านค้ายังต้องอยู่ใน DOM เพราะปุ่มในแถวส่งคลิกไปหามัน) */
html.c4-mobile #c4aiBtn,
html.c4-mobile #RodexIcon,
html.c4-mobile #CashShopIcon{display:none !important}

/* ── ปุ่มลอยของเกม: ย้ายมาเรียงขวาใต้มินิแมพ ─────────────────
   ของเดิมมันไปกองอยู่ขอบซ้าย ทับแถวไอคอนกลมของเราจนกดไม่ได้
   ต้องใช้ !important เพราะปุ่มพวกนี้เขียน style ใส่ตัวเองใหม่ทุก 1.5 วินาที
   (ปุ่ม AI Menu ไปเกาะตำแหน่ง Cash Shop ซึ่งอยู่ซ้าย เลยตามไปทับด้วย) */
html.c4-mobile #CashShopIcon,
html.c4-mobile #c4aiBtn,
html.c4-mobile #EroHub,
html.c4-mobile .ab-fab{
  left:auto !important;right:9px !important;bottom:auto !important;
  z-index:730 !important}
/* วางใต้มินิแมพ เหนือกลุ่มปุ่มสกิล — ช่องว่างจริงคือ y 156-204 สูงแค่ 48px
   จึงต้องย่อปุ่มลงเป็น 38px ไม่งั้นไปชนอย่างใดอย่างหนึ่งแน่
   (มินิแมพสูงคงที่ 146 เริ่มที่ 7 จบที่ 153 ทุกขนาดจอ) */
html.c4-mobile #CashShopIcon,
html.c4-mobile #c4aiBtn{width:38px !important;height:38px !important;top:157px !important}
html.c4-mobile #CashShopIcon{right:9px !important}
html.c4-mobile #c4aiBtn {right:53px !important}
html.c4-mobile #EroHub   {top:172px !important}
html.c4-mobile .ab-fab   {top:172px !important;right:63px !important}

/* จอเตี้ยมากก็ยังต้องไม่ชนกลุ่มปุ่มสกิลล่างขวา */
@media (max-height:360px){
  html.c4-mobile #CashShopIcon,
  html.c4-mobile #c4aiBtn{width:34px !important;height:34px !important;top:157px !important}
  html.c4-mobile #EroHub,
  html.c4-mobile .ab-fab{top:148px !important}
}

/* AI Menu บนจอเตี้ย: .bd ตั้ง min-height 150 ไว้ กรอบ max 86vh ตัดส่วนล่างทิ้ง (GUCHAMP 29/10)
   ให้เนื้อหายืด/หดในกรอบแล้วเลื่อนข้างใน */
html.c4-mobile #c4ai{max-height:calc(100vh - 12px) !important}
html.c4-mobile #c4ai .bd{min-height:0 !important;flex:1 1 auto;
  touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* [03/11] ตั๋ว #0039: ร้าน NPC ต้องอยู่เหนือปุ่มสกิล (HUD 700) เสมอ ไม่งั้นปุ่มซื้อ/ยกเลิกกดไม่ได้
   เกมเขียน z-index ใส่ตัวเองใหม่ตอนแตะ จึงต้อง !important */
html.c4-mobile body > #NpcStore{z-index:760 !important}

/* [03/11] ปุ่มล็อกเป้าเหนือปุ่มเก็บของ + ป้ายใต้ปุ่ม (ผู้เล่นหาปุ่มไม่เจอ) */
#c4m .lockbtn{left:100px;bottom:116px;right:auto}
#c4m .pickbtn .cap,#c4m .lockbtn .cap{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);
  font-size:9px;font-weight:800;color:#fff;white-space:nowrap;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
@media (max-height:360px){#c4m .lockbtn{left:92px;bottom:104px;width:40px;height:40px}}

/* [03/11] ข้อความผลปุ่มเก็บของ/ล็อคเป้า */
#c4toast{position:fixed;left:50%;top:38%;transform:translateX(-50%);z-index:790;pointer-events:none;
  padding:6px 14px;border-radius:14px;background:rgba(10,30,60,.82);color:#fff;font-size:13px;font-weight:700;
  opacity:0;transition:opacity .25s;white-space:nowrap}

/* #0050: keep every native BasicInfo version as a hidden data source.
   Applies to hosts immediately, including newly appended versions. WinStats stays usable. */
html.c4-mobile body > [id^="BasicInfo"] {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Explicit chat toggle label; keep the panel above the mobile HUD. */
html.c4-mobile #c4m .chatbtn .chat-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);font:11px/15px Tahoma,sans-serif;white-space:nowrap;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
html.c4-mobile body>#ChatBox.c4m-chat{z-index:780!important}

/* ช่องสกิลหลายหน้า: ปัดซ้าย/ขวาหรือแตะลูกศร */
#c4m .cluster .sk[data-i]{touch-action:none}
#c4m .cluster .sk[data-i][hidden]{display:none!important}
#c4m .skill-pages{position:absolute;right:12px;bottom:226px;display:flex;align-items:center;gap:4px;pointer-events:auto;background:rgba(15,42,67,.86);border:1px solid #b8dbef;border-radius:18px;color:white;padding:2px 4px;font:11px Kanit,Tahoma,sans-serif}
#c4m .skill-pages button{width:32px;height:28px;border:0;border-radius:14px;background:#e6f4ff;color:#195879;font-size:24px;line-height:24px;touch-action:manipulation}
#c4m .skill-page-label{min-width:62px;text-align:center}