/* ============================================================
   UI มือถือ (เฉพาะ body.is-touch) — คู่กับ src/mobile.js
   ทุกกฎในไฟล์นี้อยู่ใต้ body.is-touch → เดสก์ท็อปไม่ได้รับผลกระทบแม้แต่กฎเดียว
   ธีม: กระจกมืด + เส้นทองบาง + ปุ่มโดม (มีมิติ ไม่แบน) ให้เข้ากับพิกเซลอาร์ตในเกม
   ============================================================ */

/* โทเคนอยู่ที่ body.is-touch (ไม่ใช่ .m-ui) เพื่อให้ HUD เดิมที่อยู่นอก .m-ui
   เช่น .targetframe/.goal-chip อ่าน --m-joy ไปหลบปุ่มได้ด้วย */
body.is-touch{
  --m-atk:74px; --m-sk:48px; --m-pot:44px; --m-arc:200px; --m-joy:112px;
  --m-ink:#f6efdd;
  --m-dim:#c3b699;
  --m-au:#e8ad48;                      /* ทองสว่างพออ่านบนพื้นมืด */
  /* ทึบพอสมควร + วงเงาดำรอบนอก — ปุ่มต้องอ่านออกทั้งบนหญ้าสว่างและถ้ำมืด
     (รอบแรกโปร่งเกิน ปุ่มจมหายไปกับพื้นหญ้า) */
  --m-glass:linear-gradient(180deg, rgba(24,29,38,.93), rgba(10,13,18,.9));
  --m-edge:1px solid rgba(240,196,120,.5);
  --m-lift:0 0 0 1.5px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.6);
}
/* จอเตี้ย (มือถือแนวนอนส่วนใหญ่สูง 320-420px) — ย่อปุ่มทั้งชุดพร้อมกันจากที่เดียว */
@media (max-height:420px){ body.is-touch{ --m-atk:64px; --m-sk:42px; --m-pot:38px; --m-arc:176px; --m-joy:96px; } }
@media (max-height:350px){ body.is-touch{ --m-atk:56px; --m-sk:36px; --m-pot:34px; --m-arc:152px; --m-joy:84px; } }
@media (max-width:620px){ body.is-touch{ --m-arc:164px; --m-atk:60px; --m-sk:38px; --m-pot:36px; } }

/* ซ่อนทุกชิ้นของ UI มือถือเป็นค่าเริ่มต้น (ไม่ผูกกับ is-touch)
   .m-rail/.m-pick ต่อกับ .frame ซึ่งเป็น flex — ถ้าไม่ซ่อนไว้ก่อน
   บน PC จะโผล่เป็นกล่องลอยกลางจอ */
.m-ui, .m-rail, .m-pick{ display:none; }
body.is-touch .m-ui{
  display:block;
  position:absolute; inset:0; z-index:20;
  pointer-events:none;                 /* ตัวห่อไม่กินสัมผัส — เฉพาะปุ่มที่เปิดเอง */
  font-family:'Trebuchet MS',system-ui,sans-serif;
}
body.is-touch .m-ui *{ touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
body.is-touch .m-ui button{ pointer-events:auto; border:0; background:none; color:var(--m-ink); font-family:inherit; }

/* ปุ่มกลมทรงโดม — ฐานร่วมของทุกปุ่มบังคับ */
body.is-touch .m-round{
  position:relative; display:flex; align-items:center; justify-content:center;
  border-radius:50%; pointer-events:auto;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.20), rgba(255,255,255,0) 58%), var(--m-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 6px rgba(0,0,0,.45), var(--m-lift);
  border:var(--m-edge);
  transition:transform .07s ease, filter .07s ease;
}
body.is-touch .m-round.m-press{ transform:scale(.9); filter:brightness(1.35); }
/* ปุ่มบอทตอนทำงาน: ขอบเขียวเรืองให้เห็นแต่ไกลว่ายังเปิดอยู่ (มือถือไม่มีป้ายบอกเหมือน PC) */
body.is-touch .m-botbtn.m-on{
  border-color:#7fe08a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 2px rgba(127,224,138,.35), 0 0 12px rgba(127,224,138,.5);
}
/* ป้ายบอทแบบ PC ไปนั่งทับโซนจอย — มือถือใช้ปุ่ม 🤖 ในกลุ่มปุ่มระบบแทน */
body.is-touch .bot-badge{ display:none !important; }
body.is-touch .m-sm{ width:40px; height:40px; font-size:19px; }

/* ───────── HUD บนจอ ───────── */
/* แถบบน = การ์ดผู้เล่น + ชิปทรัพย์ ชิดซ้ายทั้งคู่ · มุมขวาบนเว้นไว้ให้มินิแมพ */
body.is-touch .m-top{
  position:absolute; left:8px; top:8px;
  display:flex; align-items:flex-start; gap:8px;
}
body.is-touch .m-card{
  display:flex; gap:7px; align-items:center;
  padding:5px 9px 5px 5px;
  background:var(--m-glass); border:var(--m-edge); border-radius:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--m-lift);
  min-width:158px;
}
body.is-touch .m-av{
  width:36px; height:39px; image-rendering:pixelated;
  background:rgba(0,0,0,.34); border-radius:7px; border:1px solid rgba(232,173,72,.24);
}
body.is-touch .m-card-col{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
body.is-touch .m-idrow{ display:flex; align-items:baseline; gap:5px; }
body.is-touch .m-name{
  color:var(--m-ink); font-size:11px; font-weight:bold; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:96px;
}
body.is-touch .m-lv{
  color:#20180c; font-size:9px; font-weight:bold; padding:1px 5px; border-radius:20px;
  background:linear-gradient(180deg,#f3c161,#c8862a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
/* หลอด: ราง = ร่องมืด, เนื้อ = ไล่เฉดให้นูน */
body.is-touch .m-bar{
  position:relative; height:9px; border-radius:5px; overflow:hidden;
  background:linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.42));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
body.is-touch .m-bar i{
  display:block; height:100%; width:0%; border-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:width .12s linear;
}
body.is-touch .m-bar span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:bold; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.95);
  font-variant-numeric:tabular-nums;
}
body.is-touch .m-hp i{ background:linear-gradient(180deg,#6be06b,#3f9a3f); }
body.is-touch .m-mp{ height:7px; }
body.is-touch .m-mp i{ background:linear-gradient(180deg,#7db4f0,#3a6dbe); }
body.is-touch .m-sp{ height:4px; }
body.is-touch .m-sp i{ background:linear-gradient(180deg,#8ce3a2,#3f8a5b); }
body.is-touch .m-xp{ height:3px; }
body.is-touch .m-xp i{ background:linear-gradient(180deg,#f3c161,#c8862a); }

body.is-touch .m-chips{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
/* ปุ่มระบบ (แชท/แผนที่/เมนู) — เหนือแถวยา ฝั่งเดียวกับปุ่มโจมตี */
body.is-touch .m-sysbtns{
  position:absolute; z-index:2; display:flex; gap:7px;
  right:calc(var(--m-arc) + 10px); bottom:calc(var(--m-pot) + 18px);
}
body.is-touch .m-chip{
  padding:3px 8px; border-radius:20px; font-size:10px; font-weight:bold;
  color:var(--m-ink); background:var(--m-glass); border:var(--m-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--m-lift);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
body.is-touch .m-gold{ color:#f6d488; }
body.is-touch .m-gem{ color:#9fd9f2; }
body.is-touch .m-mail{ color:#f0b3b3; }
body.is-touch .m-menubtn{ border-color:rgba(240,196,120,.85); }

/* ───────── จอยสติ๊ก (ซ้ายล่าง, ลอยตามนิ้ว) ───────── */
body.is-touch .m-joyzone{
  position:absolute; left:0; bottom:0; z-index:1;
  width:min(40%, 250px); height:min(62%, 190px);
  pointer-events:auto;
}
body.is-touch .m-joy{
  position:absolute; left:calc(var(--m-joy) / 2 + 14px); top:auto; bottom:14px;
  width:var(--m-joy); height:var(--m-joy); margin:0 0 0 calc(var(--m-joy) / -2);
  border-radius:50%; opacity:.55;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.09), rgba(0,0,0,.55) 72%);
  border:2px solid rgba(246,239,221,.42);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.6), 0 0 0 1.5px rgba(0,0,0,.45);
  transition:opacity .12s ease;
}
/* ตอนกด: ย้ายจุดกลางไปที่นิ้ว (mobile.js เซ็ต left/top เป็น px ของโซน) */
body.is-touch .m-joy.m-on{
  opacity:.95; margin:0; bottom:auto;
  transform:translate(-50%,-50%);
}
body.is-touch .m-knob{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:44%; height:44%; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #fbf3dd, #c8862a 78%);
  box-shadow:0 2px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7);
}

/* ───────── ปุ่มกระทำ (ขวาล่าง): โจมตี + สกิลวงโค้ง ───────── */
body.is-touch .m-arc{
  position:absolute; right:6px; bottom:4px; z-index:2;
  width:var(--m-arc); height:var(--m-arc);
  pointer-events:none;
}
body.is-touch .m-atk{
  position:absolute; left:80%; top:80%; transform:translate(-50%,-50%);
  width:var(--m-atk); height:var(--m-atk); font-size:calc(var(--m-atk) * .42);
  color:#2a1206;
  background:radial-gradient(circle at 34% 26%, #ffe9a8, rgba(255,233,168,0) 52%),
             linear-gradient(180deg,#f0a93f,#b1571c);
  border:2px solid rgba(255,226,160,.72);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.6);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
body.is-touch .m-atk.m-press{ transform:translate(-50%,-50%) scale(.9); }
body.is-touch .m-sk{
  position:absolute; transform:translate(-50%,-50%); overflow:hidden;
  width:var(--m-sk); height:var(--m-sk);
}
body.is-touch .m-sk.m-press{ transform:translate(-50%,-50%) scale(.88); }
body.is-touch .m-sk-ic{ width:76%; height:76%; image-rendering:pixelated; }
/* ช่องว่าง: ขอบประ + เครื่องหมาย + บอกว่า "ยังไม่ได้ใส่สกิล" (จางเฉยๆ ผู้เล่นใหม่มองไม่เห็นว่ามีช่อง) */
body.is-touch .m-sk.is-empty{
  opacity:.62; border-style:dashed; border-color:rgba(246,239,221,.34);
  box-shadow:inset 0 -2px 5px rgba(0,0,0,.4);
}
body.is-touch .m-sk.is-empty::before{
  content:"+"; position:absolute; font-size:calc(var(--m-sk) * .42);
  color:rgba(246,239,221,.5); line-height:1;
}
body.is-touch .m-sk.is-empty .m-sk-ic{ display:none; }
body.is-touch .m-sk.nosp .m-sk-ic{ filter:grayscale(1) brightness(.6); }
/* คูลดาวน์: ม่านมืดไล่จากล่างขึ้นบน (สายตาจับ "ใกล้พร้อม" ได้ไม่ต้องอ่านเลข) */
body.is-touch .m-cd{
  position:absolute; left:0; right:0; bottom:0; height:0%;
  background:rgba(6,10,16,.74); border-top:1px solid rgba(232,173,72,.5);
  pointer-events:none;
}
body.is-touch .m-sk-n{
  position:absolute; right:3px; bottom:1px; font-size:8px; color:var(--m-dim);
  text-shadow:0 1px 2px #000; font-weight:normal;
}

/* แถวเครื่องมือ: คุย + ยา Q/R (ซ้ายของวงโค้ง — ยังอยู่ในระยะนิ้วโป้งขวา) */
body.is-touch .m-util{
  position:absolute; bottom:10px; right:calc(var(--m-arc) + 10px); z-index:2;
  display:flex; align-items:flex-end; gap:9px;
}
body.is-touch .m-talk{ width:var(--m-pot); height:var(--m-pot); font-size:calc(var(--m-pot) * .46); }
/* ปุ่มใหญ่ปุ่มเดียว (โจมตี + โต้ตอบ) เปลี่ยนสีขอบตามสิ่งที่อยู่ตรงหน้า
   ไอคอนอย่างเดียวดูยากตอนแดดจ้า/จอเล็ก จึงเปลี่ยนขอบด้วย
   is-hit = ถึงจังหวะต้องกด "เดี๋ยวนี้" (หลอด/ปลากินเบ็ด) จึงเรืองแรงกว่าเพื่อน */
body.is-touch .m-atk{ transition:border-color .12s, box-shadow .12s; }
body.is-touch .m-atk.is-fish{ border-color:#8ad0ff; box-shadow:0 0 14px rgba(138,208,255,.55); }
body.is-touch .m-atk.is-ore{ border-color:#c8d0d8; box-shadow:0 0 14px rgba(200,208,216,.5); }
body.is-touch .m-atk.is-herb{ border-color:#7fd18a; box-shadow:0 0 14px rgba(127,209,138,.5); }
body.is-touch .m-atk.is-talk{ border-color:#e8c873; box-shadow:0 0 14px rgba(232,200,115,.5); }
body.is-touch .m-atk.is-hit{ border-color:#ffe066; box-shadow:0 0 22px rgba(255,224,102,.9);
  animation:m-act-pulse .45s ease-in-out infinite alternate; }
@keyframes m-act-pulse{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
@media (prefers-reduced-motion:reduce){ body.is-touch .m-atk.is-hit{ animation:none; } }
body.is-touch .m-pot{ width:var(--m-pot); height:var(--m-pot); overflow:hidden; }
body.is-touch .m-pot-ic{ width:74%; height:74%; image-rendering:pixelated; }
body.is-touch .m-pot.is-empty{ opacity:.62; border-style:dashed; border-color:rgba(246,239,221,.34); }
body.is-touch .m-pot.is-empty .m-pot-ic{ display:none; }
body.is-touch .m-pot.is-empty::after{ content:"＋"; font-size:16px; color:rgba(246,239,221,.55); position:absolute; }
body.is-touch .m-pot.is-out{ filter:grayscale(1) brightness(.65); }
body.is-touch .m-pot-n{
  position:absolute; right:2px; bottom:0; font-size:9px; font-weight:bold; color:#fff;
  text-shadow:0 1px 2px #000; font-variant-numeric:tabular-nums;
}

/* ตายอยู่ = ปุ่มกระทำจางลงและกดไม่ได้ (จอยยังเดินได้ไม่ได้ — logic กันเอง) */
body.is-touch.m-dead .m-arc, body.is-touch.m-dead .m-util{ opacity:.35; pointer-events:none; }

/* ───────── เมนู ☰ = hub เต็มจอ + rail ไอคอนซ้าย ───────── */
/* rail อยู่ระดับ .frame (ไม่อยู่ใน .m-ui ที่ถูกซ่อนตอน menu-open) — โผล่เฉพาะตอนเมนูเปิด */
.m-rail{ display:none; }
body.is-touch.menu-open .m-rail{
  display:flex; flex-direction:column; align-items:stretch; gap:3px;
  position:fixed; left:0; top:0; bottom:0; width:62px; z-index:47;
  /* เลื่อนได้จริง: เมนูมี 13 ปุ่ม จอเตี้ยใส่ไม่หมด
     touch-action:pan-y = ให้ลากขึ้นลงได้ แต่ยังกันซูม/ลากแนวนอน */
  padding:18px 5px 20px; overflow-y:auto; scrollbar-width:none;
  touch-action:pan-y; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:linear-gradient(90deg, rgba(12,15,20,.98), rgba(20,25,33,.96));
  border-right:1px solid rgba(232,173,72,.3);
  pointer-events:auto;
  font-family:'Trebuchet MS',system-ui,sans-serif;
}
body.is-touch.menu-open .m-rail::-webkit-scrollbar{ display:none; }
body.is-touch .m-rail-btn{
  pointer-events:auto; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:5px 2px 4px; border:1px solid transparent; border-radius:9px;
  background:none; color:#e6dcc4;
  transition:filter .07s ease;
}
body.is-touch .m-rail-btn.m-press{ filter:brightness(1.4); }
body.is-touch .m-rail-btn.is-active{
  background:linear-gradient(180deg, rgba(232,173,72,.22), rgba(232,173,72,.08));
  border-color:rgba(232,173,72,.55);
}
body.is-touch .m-rail-ic{ font-size:19px; line-height:1.15; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
/* ไอคอนรูปจริงใน rail — .mi มาจาก css/style.css (pixelated + background-size) ที่นี่คุมแค่ขนาด */
body.is-touch .m-rail-ic.mi{ width:30px; height:30px; }
body.is-touch .m-rail-nm{ font-size:8.5px; white-space:nowrap; color:var(--m-dim); }
body.is-touch .m-rail-btn.is-active .m-rail-nm{ color:#f6d488; }
body.is-touch .m-rail-x{ margin-top:auto; }
body.is-touch .m-rail-x .m-rail-ic{ color:#f0a0a0; }

/* ลูกศรบอกว่า rail เลื่อนได้ — กระพริบจนกว่าจะเลื่อนครั้งแรก แล้วค้างไว้เฉยๆ
   ไล่เฉดพื้นหลังด้วย เพื่อให้เห็นว่าปุ่มถูก "ตัด" ตรงขอบ ไม่ใช่จบรายการแล้ว */
.m-rail-hint{ display:none; }
body.is-touch.menu-open .m-rail-hint{
  display:block; position:fixed; left:0; width:62px; height:22px; z-index:48;
  pointer-events:none; text-align:center; line-height:22px;
  font-size:12px; color:#f6d488; text-shadow:0 1px 3px #000;
  opacity:0; transition:opacity .18s ease;
}
body.is-touch.menu-open .m-rail-hint.is-on{ opacity:1; animation:m-rail-blink 1.1s ease-in-out infinite; }
body.is-touch.menu-open .m-rail-hint.is-on.m-seen{ animation:none; opacity:.55; }
body.is-touch.menu-open .m-rail-up{
  top:0; background:linear-gradient(180deg, rgba(12,15,20,.98) 45%, rgba(12,15,20,0));
}
body.is-touch.menu-open .m-rail-down{
  bottom:0; background:linear-gradient(0deg, rgba(12,15,20,.98) 45%, rgba(12,15,20,0));
}
@keyframes m-rail-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){
  body.is-touch.menu-open .m-rail-hint.is-on{ animation:none; }
}

/* พาเนลของ ui.js ตอน menu-open: เลื่อนหลบ rail (เดิมเว้นล่าง 56px ให้แถบแท็บที่ถูกถอดไปแล้ว) */
body.is-touch.menu-open .status-panel,
body.is-touch.menu-open .inv-panel,
body.is-touch.menu-open .equip-panel,
body.is-touch.menu-open .skill-panel,
body.is-touch.menu-open .quest-panel,
body.is-touch.menu-open .ah-panel,
body.is-touch.menu-open .fashion-panel,
body.is-touch.menu-open .bot-panel,
body.is-touch.menu-open .settings-panel{
  left:62px; bottom:0; width:auto; right:0;
}
/* split-gear: แบ่งพื้นที่ที่เหลือหลัง rail — ซ้ายสวมใส่ 42% / ขวากระเป๋า 58% */
body.is-touch.menu-open.split-gear .equip-panel{ left:62px; right:auto; width:calc((100% - 62px) * .42); }
body.is-touch.menu-open.split-gear .inv-panel{ left:calc(62px + (100% - 62px) * .42); right:0; width:calc((100% - 62px) * .58); }
body.is-touch.menu-open.log-open .log-panel{ left:70px; right:10px; top:10px; bottom:10px; }
/* สมาคม/สะสม (ยังเป็นหน้าต่างลอย): จัดกลางพื้นที่ขวาของ rail
   ⚠ z-index:40 จำเป็น — ฉากหลังเมนู (.menu-shell) อยู่ที่ z:35 และ "แตะ = ปิดเมนู"
   พาเนลที่ z ต่ำกว่าจะโดนฉากหลังกินสัมผัสทั้งหน้า → แตะอะไรก็เด้งออกจากเมนู
   top:10px จำเป็น — base ใช้ top:8% ซึ่งบวกกับ max-height นี้แล้วล้นขอบล่างจอแนวนอน */
body.is-touch.menu-open .guild-panel,
body.is-touch.menu-open .col-panel{
  left:calc(62px + (100% - 62px) / 2); top:10px; max-height:calc(100% - 20px); z-index:40;
}

/* ───────── ตีบวกมือถือ = จอแบ่งครึ่ง: ซ้ายโต๊ะตี / ขวากระเป๋าจริง ─────────
   แตะของฝั่งขวา = วิ่งเข้าช่องฝั่งซ้ายเอง (rfAutoPlace ใน ui.js) · เขียว = ใช้ได้ · หรี่ = ไม่เกี่ยว */
body.is-touch.menu-open.split-refine .refine-panel{
  left:62px; right:auto; top:0; bottom:0; width:calc((100% - 62px) * .5);
  max-height:none; transform:none;
  border:none; border-right:2px solid var(--panel-border); border-radius:0;
  padding:10px 12px 14px; overflow-y:auto;
  z-index:40;   /* ต้องสูงกว่า .menu-shell (z:35) — ไม่งั้นแตะทั้งหน้า = โดนฉากหลัง "ปิดเมนู" */
  display:flex; flex-direction:column;
}
body.is-touch.menu-open.split-refine .inv-panel{
  left:calc(62px + (100% - 62px) * .5); right:0; width:calc((100% - 62px) * .5);
}
/* ป้ายบอกวิธี: บรรทัดเดียวพอ (กระเป๋าอยู่ข้างๆ แล้ว ไม่ต้องมี step ยาว) */
body.is-touch .rf-top, body.is-touch .rf-bottom{ flex-wrap:wrap; }
body.is-touch .rf-top::before{
  content:"แตะของจากกระเป๋าฝั่งขวา — เข้าช่องให้เอง · แตะช่อง = เอาออก";
  width:100%; text-align:center; margin-bottom:6px;
  font-size:10.5px; font-weight:700; color:var(--gold-ink); line-height:1.45;
}
/* ช่องกะทัดรัดให้ครบในจอเดียวไม่ต้องเลื่อน: ของ+หินแถวบนใหญ่ · หนังสือแถวล่างเล็ก */
body.is-touch.menu-open .rf-top{ margin:2px 0 6px; gap:6px; }
body.is-touch.menu-open .rf-bottom{ gap:6px; margin-bottom:4px; }
body.is-touch.menu-open .rf-slot{ width:31%; min-height:78px; padding:4px 2px; }
body.is-touch.menu-open .rf-slot.rf-gear{ width:70%; min-height:86px; }
body.is-touch.menu-open .rf-slot .rf-name{ font-size:10.5px; }
body.is-touch.menu-open .rf-slot .rf-sub{ font-size:9px; }
body.is-touch.menu-open .rf-summary{ font-size:12.5px; margin:4px 0 2px; line-height:1.45; }
body.is-touch.menu-open .rf-warn{ font-size:11px; min-height:15px; }
body.is-touch.menu-open .rf-go{
  width:100%; padding:13px 0; font-size:16px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.35); margin-top:auto;
}
/* คำใบ้คีย์บอร์ด ("กด U ปิด …") ไม่มีความหมายบนมือถือ + กินที่แนวตั้ง */
body.is-touch.menu-open .refine-panel .sp-hint{ display:none; }

/* ───────── ร้านค้ามือถือ = หน้าเต็มจอ + รายการเป็นการ์ดแถว ─────────
   ร้านเปิดในโลก (เดินหา NPC) ไม่ได้อยู่ในเมนู → ไม่มี rail ให้หลบ ใช้เต็มจอเลย */
body.is-touch .shop-panel{
  position:fixed; left:8px; right:8px; top:8px; bottom:8px;
  width:auto; max-height:none; transform:none; overflow-y:auto;
}
body.is-touch .shop-grid{ display:flex; flex-direction:column; gap:6px; }
body.is-touch .shop-grid.inv-grid .inv-cell{
  flex-direction:row;                /* ฐาน .shop-grid.inv-grid ตั้ง column ไว้ (ไอคอนบนราคาล่าง) */
  width:100%; height:auto; min-height:52px;
  justify-content:flex-start; gap:11px; padding:6px 12px;
}
body.is-touch .shop-grid .inv-cell-canvas{ width:38px; height:38px; flex:none; }
body.is-touch .shop-grid .cell-name{
  display:block; flex:1; min-width:0; text-align:left;
  font-size:13.5px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.is-touch .shop-grid .cell-price{ font-size:13.5px; flex:none; }
/* ร้านเปิด = ซ่อนปุ่มบังคับเกม (ร้านเต็มจอ กดข้างใต้ไม่ได้อยู่แล้ว อย่าให้ลอยทับ) */
body.is-touch.shop-open .m-joyzone,
body.is-touch.shop-open .m-arc,
body.is-touch.shop-open .m-util,
body.is-touch.shop-open .m-sysbtns{ display:none; }
body.is-touch .shop-junk{ padding:11px; font-size:13.5px; }

/* ───────── กระดานประมูลมือถือ: แถว/ปุ่มขยายให้แตะง่าย ───────── */
body.is-touch .ah-row{ padding:9px 10px; gap:10px; }
body.is-touch .ah-name{ font-size:14px; }
body.is-touch .ah-meta{ font-size:11px; }
body.is-touch .ah-btn{ min-height:40px; padding:8px 14px; font-size:13px; }

/* ตัวเลือกยาลัดมือ (กดค้างช่องยา) */
body.is-touch .m-pick{
  position:fixed; inset:0; z-index:49;
  align-items:center; justify-content:center; background:rgba(4,6,9,.82); pointer-events:auto;
  font-family:'Trebuchet MS',system-ui,sans-serif;
}
body.is-touch .m-pick-box{
  width:min(92vw, 340px); max-height:88vh; display:flex; flex-direction:column;
  padding:10px 12px 12px; border-radius:13px;
  background:linear-gradient(180deg, rgba(30,36,46,.96), rgba(14,18,24,.97));
  border:1px solid rgba(232,173,72,.4); box-shadow:0 14px 40px rgba(0,0,0,.7);
}
body.is-touch .m-pick-h{ font-size:12px; font-weight:bold; color:var(--m-au); margin-bottom:8px; }
body.is-touch .m-pick-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
body.is-touch .m-pick-row{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:9px;
  pointer-events:auto; border:1px solid rgba(232,173,72,.2);
  background:linear-gradient(180deg, rgba(46,54,68,.86), rgba(20,25,33,.86));
  color:#f6efdd; font-family:inherit;
}
body.is-touch .m-pick-row.m-press{ filter:brightness(1.35); }
body.is-touch .m-pick-ic{ width:28px; height:28px; image-rendering:pixelated; }
body.is-touch .m-pick-nm{ flex:1; text-align:left; font-size:12px; }
body.is-touch .m-pick-q{ font-size:11px; color:var(--m-dim); font-variant-numeric:tabular-nums; }
body.is-touch .m-pick-none{ font-size:12px; color:var(--m-dim); padding:14px 0; text-align:center; }
body.is-touch .m-pick-clear{
  margin-top:9px; padding:8px; border-radius:9px; font-size:12px; font-family:inherit;
  color:#f0c0c0; border:1px solid rgba(240,150,150,.4);
  background:linear-gradient(180deg, rgba(60,32,32,.9), rgba(28,16,16,.9));
}

/* ───────── ซ่อน UI เดิมของ PC บนมือถือ (ของใหม่แทนหมดแล้ว) ───────── */
/* .playerframe/.goldbadge → การ์ดผู้เล่น + ชิป · .menu-bar → ตารางไอคอน
   .skillbar → วงโค้งสกิล + ปุ่มยา · .touch-controls → จอย/ปุ่มชุดใหม่
   .menu-tabs ต้องใช้ !important เพราะ ui.js เซ็ต display ทาง inline style */
body.is-touch .hud-topleft,
body.is-touch .playerframe,
body.is-touch .goldbadge,
body.is-touch .menu-bar,
body.is-touch .skillbar,
body.is-touch .touch-controls{ display:none !important; }
body.is-touch .menu-tabs{ display:none !important; }

/* แชท: มือถือปิดไว้ก่อน (ช่องพิมพ์ถาวรที่มุมซ้ายล่างทับโซนจอย = เดินไม่ได้)
   กด 💬 แล้วแถบมาอยู่ด้านบนเต็มความกว้าง — คีย์บอร์ดมือถือขึ้นจากด้านล่างจึงไม่บัง */
body.is-touch .chat-box{ display:none; }
/* หน้าต่างรวม: ปิดไว้ก่อน (แถบพิมพ์ถาวรมุมซ้ายล่างจะทับโซนจอย = เดินไม่ได้)
   กด 💬 แล้วกางเต็มความกว้างด้านบน — คีย์บอร์ดมือถือขึ้นจากล่างจึงไม่บัง */
body.is-touch .chatwin{ display:none; }
body.is-touch.m-chat-open .chat-box{
  display:flex; left:8px; right:8px; top:8px; bottom:auto; width:auto; z-index:47;
  background:linear-gradient(180deg, rgba(14,18,24,.94), rgba(10,13,18,.9));
  border:var(--m-edge); border-radius:11px; padding:7px 9px;
  box-shadow:0 6px 20px rgba(0,0,0,.6);
}
body.is-touch.m-chat-open .chat-log{ max-height:34vh; }
body.is-touch.m-chat-open .chat-input{ font-size:14px; padding:9px 10px; }   /* ≥14px กัน iOS ซูมเข้าอัตโนมัติ */
body.is-touch.m-chat-open .chat-send{ padding:9px 16px; font-size:13px; }
body.is-touch.m-chat-open .m-top{ display:none; }
body.is-touch.m-chat-open .m-joyzone{ pointer-events:none; opacity:.3; }

/* HUD ที่เหลือ: กรอบเป้าหมายวางใต้การ์ดผู้เล่น (อ่านเป็นคู่ "เรา / ศัตรู")
   กล่องปาร์ตี้ (ที่เดิม left8/top64) ลงไปอยู่ใต้กรอบเป้าหมาย ไม่ซ้อนกัน
   เป้าหมายถัดไปย้ายขึ้นบนกลาง — ที่เดิม (ล่างกลาง) ทับแถวยา/ปุ่มคุย */
body.is-touch .targetframe{ left:8px !important; top:64px !important; bottom:auto !important; transform:none !important; }
/* มือถือ: มินิแมพเล็กกว่า + HUD บนแน่นกว่า → ขยับกล่องปาร์ตี้ขึ้นมาหน่อย ยังอยู่ใต้แมพเหมือนเดิม */
body.is-touch .party-box{ top:31% !important; right:8px !important; left:auto !important; width:140px; }
body.is-touch .goal-chip{
  bottom:auto !important; top:9px !important;
  max-width:min(40vw, 280px) !important; font-size:10px !important; padding:3px 9px !important;
}
/* ซ่อน HUD เกมตอนเปิดเมนู/ตาราง (ของ .touch-controls เดิมทำแล้ว — ของใหม่ต้องทำเอง)
   .m-rail อยู่ระดับ frame ไม่ใช่ใน .m-ui จึงไม่โดนซ่อนไปด้วย */
body.is-touch.menu-open .m-ui{ display:none; }

/* ───────── หน้าต่างแชทรวมบนมือถือ ───────── */
body.is-touch.m-chat-open .chatwin{
  display:flex; position:fixed; left:6px; right:6px; top:6px; bottom:auto;
  width:auto; max-height:52vh; z-index:60;
}
body.is-touch.m-chat-open .chatwin-body{ height:34vh; }
body.is-touch.m-chat-open .chatwin-tab{ padding:8px 11px; font-size:12.5px; }
/* ≥14px กัน iOS ซูมเข้าอัตโนมัติตอนโฟกัสช่องพิมพ์ */
body.is-touch.m-chat-open .chatwin-input{ font-size:14px; padding:9px 10px; }
body.is-touch.m-chat-open .chatwin-send{ padding:9px 16px; font-size:13px; }
body.is-touch.m-chat-open .chatwin-toggle{ display:none; }   /* ปิดด้วยปุ่ม 💬 อยู่แล้ว */