/* ── การวางตัวบนมือถือ — ใช้ได้ทุกสกิน ──────────────────────────────────
   ⚠️ ของพวกนี้เคยอยู่ใน ui-skin.css ใต้ html[data-skin="wood"] ทั้งหมด
     แปลว่าคนที่เปิดเกมตามปกติ (สกินเดิม) ไม่ได้อะไรเลย — ช่องลัดทับกล่องแชท
     ปุ่ม 9 จาก 16 ปุ่มเล็กกว่านิ้ว และไม่มีจอยเสมือน ทั้งที่ด่านตรวจขึ้นเขียว
     เพราะด่านทดสอบแต่สกินที่กำลังพัฒนา
   "ปุ่มเล็กจนกดไม่โดน" กับ "กล่องแชทถูกทับ" เป็นข้อบกพร่อง ไม่ใช่รสนิยม
   จึงต้องอยู่นอกสกิน ส่วนสี/ผิว (กระดาษ ทอง) ยังอยู่ใน ui-skin.css ตามเดิม */

/* ฉากหลังมืดหลังแผ่นสไลด์ — แตะข้างนอกเพื่อปิด (element สร้างโดย ui-skin.js) */
html.touch-ui #sheet-scrim{
  display:block;position:fixed;inset:0;z-index:55;background:#0f1319;
  opacity:0;pointer-events:none;transition:opacity .16s;
}
html.touch-ui #sheet-scrim.on{opacity:.42;pointer-events:auto}

/* ── จอยสติ๊ก + ปุ่มสกิล (สร้างโดย ui-skin.js เฉพาะบนจอสัมผัส) ─────────
   ซ่อนไว้ก่อนเสมอ แล้วเปิดเมื่อ ui-skin.js ติดคลาส touch-ui ให้ — ไม่ผูกกับ
   media query เพราะตัวตัดสินว่า "นี่มือถือไหม" อยู่ที่ไฟล์ JS ที่เดียว    */
#touch-pad,#touch-acts,#sheet-scrim{display:none}
html.touch-ui #sheet-scrim{display:block}
html.touch-ui #touch-pad,
html.touch-ui #touch-acts{display:block}
html.touch-ui #touch-pad {width:118px;height:118px;touch-action:none;
  opacity:.82;transition:opacity .15s;
}
html.touch-ui #touch-pad.on{opacity:1}
html.touch-ui #touch-pad img{position:absolute;pointer-events:none;user-select:none}
html.touch-ui #touch-pad .base{inset:0;width:118px;height:118px}
html.touch-ui #touch-pad .knob{
  width:54px;height:54px;left:32px;top:32px;
  filter:drop-shadow(0 2px 3px #0006);transition:transform .05s linear;
}
html.touch-ui #touch-acts {display:grid;gap:8px;
  grid-template-columns:repeat(2,64px);
}
html.touch-ui #touch-acts button{
  position:relative;width:64px;height:64px;padding:0;border:0;background:none;
  touch-action:none;-webkit-tap-highlight-color:transparent;
}
html.touch-ui #touch-acts button:first-child{width:74px;height:74px;grid-row:span 2;align-self:center}
html.touch-ui #touch-acts img{width:100%;height:100%;display:block;pointer-events:none}
html.touch-ui #touch-acts b{
  position:absolute;right:5px;bottom:3px;font:700 11px/1 system-ui;color:#fff;
  text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none;
}
html.touch-ui #touch-acts button:active img{transform:scale(.93)}
/* กรอบล็อก = กำลังอยู่ในโหมดโจมตีอัตโนมัติ (กดปุ่มแดงอีกทีเพื่อปลด) */
html.touch-ui #touch-acts button.auto::after{
  content:''; position:absolute; inset:-7px; border-radius:50%; pointer-events:none;
  border:3px solid #ffd76a; box-shadow:0 0 12px #ffb84d,inset 0 0 10px #ffb84d99;
  animation:autoLock 1.1s ease-in-out infinite;
}
@keyframes autoLock{50%{opacity:.4; transform:scale(1.04)}}

/* จอสัมผัสแนวนอนเตี้ย ๆ ขยับขึ้นมาให้พ้นกองล่าง */


@media (max-width:760px), (pointer:coarse){
  body{--fr:13px; --bh:13px; --h-menu:64px; --h-chat:40px; --h-hot:66px; --h-touch:216px; --safe-b:env(safe-area-inset-bottom)}
  /* ข้อมูลตัวละคร: เหลือแค่ที่ต้องเห็นตลอดเวลา ปุ่มไปอยู่แถบเมนูล่างแล้ว */
  body #basic{width:min(54vw,208px); top:max(6px,env(safe-area-inset-top))}
  body .bi{grid-template-columns:minmax(0,1fr); padding:5px 7px 6px}
  body .bi-btns{display:none}
  body .bi-name span{display:none}
  body .bi-zeny .snd{display:none}
  body .bi-lv{grid-template-columns:auto minmax(0,1fr) auto}
  body #mapbox{top:max(6px,env(safe-area-inset-top)); right:max(6px,env(safe-area-inset-right))}
  body #minimap,body #mapbox{width:96px}
  body #minimap{height:96px}
  body #party-hud{right:max(6px,env(safe-area-inset-right)); width:126px}
  /* ── ชั้นที่ 1: เมนู ──────────────────────────────────────────────── */
  /* 8 ปุ่ม (เพิ่ม "ผู้เล่น" เข้ามา) ใน 7 คอลัมน์ทำให้ปุ่มสุดท้ายตกลงไปอยู่แถวสองตัวเดียว
     — จัดเป็น 4x2 ให้เต็มแถวทั้งสองแถว และปุ่มยังกว้างพอสำหรับนิ้ว */
  body #menu{display:grid; position:fixed; left:0; right:0; bottom:0; z-index:14; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:5px 6px calc(5px + var(--safe-b))}
  body #menu button{height:52px; min-width:0; border:1px solid #a88433; border-radius:9px; display:grid; place-items:center; gap:1px; font-size:19px; line-height:1; padding:2px}
  body #menu small{font-size:9px}
  /* ── ชั้นที่ 2: แชท — ยุบเหลือแถบพิมพ์ กดปุ่ม ⇕ ถึงกางกล่องข้อความ ── */
  body #chat{bottom:calc(var(--h-menu) + var(--safe-b)); z-index:13}
  body #chat-log{display:none; position:absolute; left:6px; right:6px; bottom:100%; width:auto; height:38vh; margin:0 0 3px; border-radius:8px; border:1px solid #00000033}
  body #chat.big #chat-log{display:block}
  body .chat-tabs{display:none}
  body #chat.big .chat-tabs{display:flex; position:absolute; left:6px; bottom:calc(38vh + 6px); margin:0}
  body .chat-bar{height:var(--h-chat); gap:4px; padding:0 6px}
  body #chat-in{height:30px; font-size:16px}
  /* 16px = iOS ไม่ซูมจอตอนโฟกัส */
  body #chat-size{order:9}
  /* ── ชั้นที่ 3: ช่องลัด แถวเดียว เลื่อนแนวนอนได้ ─────────────────── */
  body #hotbar{top:auto; bottom:calc(var(--h-menu) + var(--h-chat) + var(--safe-b)); left:max(6px,env(safe-area-inset-left)); right:max(6px,env(safe-area-inset-right)); width:auto; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:0; z-index:12}
  body #hotbar::-webkit-scrollbar{display:none}
  body .slot{width:40px; height:40px; flex:none}
  body #hotbar .hb-page{height:40px; flex:none}
  /* กล่องเป้าหมายไปอยู่กลางบน ไม่ใช่ขอบล่าง — ขอบล่างคือเขตนิ้วโป้ง
     ที่จอยสติ๊กกับปุ่มสกิลจองไว้แล้ว */
  body #target{top:calc(156px + env(safe-area-inset-top)); bottom:auto}
  body #party-hud{top:222px; overflow:auto; max-height:calc(100vh - 222px - var(--h-menu) - var(--h-chat) - var(--h-hot) - 130px)}
  /* ฉากหลังมืดหลังแผ่นสไลด์ — แตะแล้วปิด (element สร้างโดย ui-skin.js)
     บนจอสัมผัสไม่มีปุ่ม Esc และปุ่ม x ก็เล็ก "แตะข้างนอกเพื่อปิด" คือท่าที่
     คนคาดหวังจากแผ่นที่สไลด์ขึ้นมา ถ้าไม่มีจะรู้สึกว่าปิดไม่ได้ */
  body #sheet-scrim{position:fixed; inset:0; z-index:55; opacity:0; pointer-events:none; transition:opacity .16s}
  body #sheet-scrim.on{opacity:.42; pointer-events:auto}
  /* ── หน้าต่าง = แผ่นสไลด์ขึ้นจากขอบล่าง ปัดหัวลง = ปิด ─────────────
     (ลากหน้าต่างลอยบนจอสัมผัสคือเอานิ้วไปบังของที่จะดู)                */
  body .win{left:0 !important; right:0; top:auto !important; bottom:0; width:auto !important; max-width:none; box-sizing:border-box; border-width:var(--fr) 0 0; max-height:min(74vh,520px); padding-bottom:var(--safe-b); z-index:60}
  body .win > header{position:static; height:34px; line-height:34px; display:flex; align-items:center; padding:0 8px; border-bottom:1px solid var(--line-w); font-size:13px}
  body .win > header::before{/* ขีดบอกว่าปัดลงได้ */
    content:''; position:absolute; left:50%; top:5px; transform:translateX(-50%); width:38px; height:4px; border-radius:2px}
  body .win > header button{width:30px; height:30px; font-size:15px; border-radius:8px}
  body .win > .body{max-height:none; overflow:auto; -webkit-overflow-scrolling:touch}
  from{transform:translateY(100%)}
  to{transform:none}
  to{transform:translateY(100%)}
  body .win:not([hidden]){animation:sheetIn .18s cubic-bezier(.2,.9,.3,1)}
  body .win.closing[hidden],body .win.closing{display:flex !important; animation:sheetOut .14s ease-in forwards}
  /* ปุ่มทุกปุ่มต้องกดโดนด้วยนิ้ว */
  body .rbtn,body .actions button,body .btn,body .chip{min-height:32px; padding:4px 12px}
  body .st-row .up{width:28px; height:26px}
  body .st-row{height:30px}
  body .sk-row{padding:7px 9px}
  body .eqslot{min-height:42px}
  body .shop-row,body .pt-row{padding:8px}
  body .vtabs button{padding:9px 0}
  body .chat-tabs button,body #chat-mode,body #chat-size,body #chat-new{min-height:32px; padding:6px 11px}
  /* ⚠️ เมนูเลือกช่องพูดเคยเกาะ "ขอบบนของกล่องแชททั้งก้อน" (bottom:100% ของ #chat)
     พอแนวนอนย้าย #chat ไปเป็นแผงชิดขอบบน เมนูจึงไปโผล่เหนือจอ y -180 — มองไม่เห็น
     แตะไม่โดน เลือก ปาร์ตี้/กระซิบ ไม่ได้เลย (ต้นเหตุของ "แชทใช้ไม่ได้จริง")
     ยึดกับขอบล่างจอแทน เหนือแถบพิมพ์พอดี ใช้ได้ทั้งแนวตั้งและแนวนอน */
  body #chat-ch{
    position:fixed; left:6px; right:6px; top:auto;
    bottom:calc(var(--h-chat) + var(--safe-b) + var(--kb,0px) + 6px);
    min-width:0; max-width:340px; max-height:calc(100vh - var(--h-chat) - 24px); overflow-y:auto; z-index:16;
  }
  body #chat-ch button,body .ctx button{min-height:40px}
  body .soc-act button{min-height:34px; padding:8px 11px}
}

@media (max-height:540px) and (pointer:coarse), (max-width:900px) and (max-height:460px){
  body{--h-menu:52px; --h-chat:38px; --h-hot:60px; --h-touch:70px}
  body #basic{width:min(46vw,196px)}
  body .bi-zeny{display:none}
  /* เงิน/ปุ่มเสียง ไม่ใช่ของที่ต้องเห็นตอนสู้ */
  body #mapbox,body #minimap{width:78px}
  body #minimap{height:78px}
  /* จอสูง ~390px กองล่าง 3 ชั้น + จอยสติ๊ก + ปุ่มสกิล กินหมดแล้ว
     กล่องปาร์ตี้ข้างจอไม่เหลือที่ยืนที่ไม่ทับอะไรเลย — ปิดไป ข้อมูลเดียวกัน
     ดูได้ในหน้าต่าง Party ซึ่งบนมือถือเป็นแผ่นสไลด์เต็มความกว้างอยู่แล้ว */
  body #party-hud{display:none}
  body #menu{padding:4px 6px calc(4px + var(--safe-b))}
  body #menu button{height:42px; font-size:17px}
  body .slot{width:36px; height:36px}
  body #hotbar .hb-page{height:36px}
  body #chat-log,body #chat.big .chat-tabs{height:auto}
  body #chat.big #chat-log{height:30vh}
  body #chat.big .chat-tabs{bottom:calc(30vh + 6px)}
  body .win{max-height:min(86vh,340px)}
}

@media (max-height:540px){
  html.touch-ui #touch-pad{width:96px; height:96px}
  html.touch-ui #touch-pad .base{width:96px; height:96px}
  html.touch-ui #touch-pad .knob{width:44px; height:44px; left:26px; top:26px}
  /* แนวนอนสูงแค่ ~390px — เรียงปุ่มเป็นแถวเดียว ไม่งั้นกองปุ่มสูง 180px
     ไปชนมินิแมพมุมขวาบน */
  html.touch-ui #touch-acts{grid-template-columns:repeat(4,54px); gap:6px; align-items:center}
  html.touch-ui #touch-acts button{width:54px; height:54px}
  html.touch-ui #touch-acts button:first-child{width:62px; height:62px; grid-row:auto}
}

/* แผ่นสไลด์ขึ้น/ลง — อนิเมชันเป็นการวางตัว ไม่ใช่สี จึงอยู่ไฟล์นี้ */
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetOut{to{transform:translateY(100%)}}
@media (max-width:760px), (pointer:coarse){
  body .win:not([hidden]){animation:sheetIn .18s cubic-bezier(.2,.9,.3,1)}
  body .win.closing[hidden],body .win.closing{display:flex !important;animation:sheetOut .14s ease-in forwards}
}

/* ── โหมดเล็งเป้า ─────────────────────────────────────────────────────
   กดสกิลที่ต้องเลือกเป้าแล้วยังไม่มีเป้า = เข้าโหมดนี้ ของเดิมบอกด้วย toast
   ที่หายไปใน 1.2 วินาที ผู้เล่นจึงไม่รู้ว่าค้างอยู่ในโหมดนี้หรือกดพลาด
   อยู่ไฟล์นี้ไม่ใช่ไฟล์สกิน เพราะ "ไม่รู้ว่าเกมรออะไรอยู่" เป็นข้อบกพร่อง
   ไม่ใช่รสนิยมของธีม                                                    */
html.aiming #game,
html.aiming #game canvas{cursor:crosshair}

#aim-bar{
  /* ใต้กล่องเป้าหมาย (top:50 สูงราว 60) ไม่ทับช่องลัดที่ top:6 */
  position:fixed;left:50%;transform:translateX(-50%);top:120px;z-index:30;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:7px 14px;border-radius:999px;
  background:#1b2230e6;color:#fff;font-size:12px;
  box-shadow:0 3px 14px #0006, inset 0 0 0 1px #ffffff26;
  animation:aimIn .14s ease-out;
}
#aim-bar[hidden]{display:none}
#aim-bar .nm{font-weight:700;color:#ffd97a}
#aim-bar .aoe{color:#8fd4ff;font-weight:700}
#aim-bar .esc{opacity:.7;font-size:11px;border-left:1px solid #ffffff33;padding-left:10px}
/* คอม (4 ต.ค.): ใหญ่ขึ้น ~20% + ไอคอนสกิล 34px ขอบทอง — เดิมตัว 12px ไม่มีไอคอน มองแวบเดียวไม่รู้ว่าเล็งอะไรอยู่ */
html:not(.touch-ui) #aim-bar:not(.touch){font-size:14px;padding:6px 16px 6px 7px;gap:11px}
html:not(.touch-ui) #aim-bar:not(.touch) .esc{font-size:12.5px}
html:not(.touch-ui) #aim-bar:not(.touch) .ic{display:block;width:34px;height:34px;flex:none}
html:not(.touch-ui) #aim-bar:not(.touch) .ic .sk{display:block;width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 2px #e8b64a, 0 2px 6px #0007;color:transparent;overflow:hidden}
@keyframes aimIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}

/* บนมือถือ: แถบเตี้ยชิดซ้ายใต้แผงตัวละคร — ไม่ใช่กล่องกลางจอ
   รอบก่อนย้ายมันลงมา "ใกล้นิ้ว" เหนือปุ่มสกิล ผลคือไปนั่งทับตัวละครกับมอน
   ที่ผู้เล่นต้องแตะเลือกพอดี (วัดที่ 390×844: y 463–560 กลางสนาม สูง 97px)
   ตอนนี้อยู่แถบว่างระหว่างแผงตัวละคร (ซ้ายบน) กับแถบปาร์ตี้ (คอลัมน์ขวา)
   right:140px เว้นคอลัมน์ขวาไว้ให้ปาร์ตี้ — ปาร์ตี้ยาวแค่ไหนก็ไม่ชน */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui #hud #aim-bar.touch{
    top:calc(var(--aim-top,82px) + env(safe-area-inset-top)); bottom:auto;
    left:max(8px,env(safe-area-inset-left)); right:146px; max-width:340px; transform:none;
    display:grid; grid-template-columns:34px minmax(0,1fr) 40px; align-items:center; gap:8px;
    min-height:48px; padding:5px 4px 5px 7px; border-radius:12px; cursor:default;
    background:#15202ee0; box-shadow:0 3px 12px #0005, inset 0 0 0 1.5px #e8b64a;
    text-align:left; font-size:12px; line-height:1.25;
    animation:aimInTouch .14s ease-out;
  }
  html.touch-ui #hud #aim-bar.touch[hidden]{display:none}
  html.touch-ui #hud #aim-bar .ic{width:34px; height:34px; position:relative; display:block; border:0; background:none; padding:0; min-width:0; min-height:0; box-shadow:none}
  html.touch-ui #hud #aim-bar .ic .sk{
    width:34px; height:34px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
    font:700 10px/1 inherit; color:#fff; box-shadow:0 0 0 2px #e8b64a;
    background-size:cover !important; background-position:center !important;
  }
  html.touch-ui #hud #aim-bar .txt{display:flex; flex-direction:column; min-width:0}
  html.touch-ui #hud #aim-bar .nm{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  html.touch-ui #hud #aim-bar .nm .aoe{
    font-size:10px; font-weight:700; color:#8fd4ff; margin-left:4px;
    padding:1px 5px; border-radius:6px; background:#8fd4ff22; vertical-align:1px;
  }
  html.touch-ui #hud #aim-bar .how{color:#e6eef8; font-size:11.5px}
  html.touch-ui #hud #aim-bar .x{
    width:40px; height:40px; border-radius:10px; border:0; padding:0;
    background:#ffffff1f; color:#fff; font-size:16px; line-height:1; cursor:pointer;
  }
  html.touch-ui #hud #aim-bar .x:active{background:#ffffff40}
}
@keyframes aimInTouch{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   จอมือถือรอบสอง: ให้ "โลก" เต็มจอ ส่วน HUD แค่ลอยอยู่ข้างบน
   วัดก่อนแก้ด้วย tools/hud-area: HUD กินพื้นที่ 78.6% ของหน้าจอ เหลือที่เห็น
   เกมจริง ๆ ไม่ถึงหนึ่งในสี่ และตัวละครยืนอยู่หลังปุ่ม — เกมมือถือทั่วไปคุม HUD
   ไว้ราว 20–30% ของจอ
   หลักที่ใช้: บนจอเหลือเฉพาะของที่ต้อง "เห็นตลอดเวลา" (หลอดเลือด มินิแมพ จอย
   ปุ่มโจมตี/สกิล) ที่เหลือซ่อนหลังปุ่มกลมแล้วค่อยสไลด์ขึ้นมาเมื่อกด
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px), (pointer:coarse){
  /* ชั้นล่างทั้งสามไม่กินที่ในผังอีกต่อไป — มันกลายเป็นแผ่นที่เปิดมาทับชั่วคราว
     ⚠️ ห้ามตั้ง --h-chat:0 ที่นี่: ตัวแปรนั้นเป็น "ความสูงของแถบพิมพ์" ด้วย
     (.chat-bar{height:var(--h-chat)}) ตั้งศูนย์แล้วแถบแชทจะแบนจนมองไม่เห็น
     จึงย้ายมาสั่งระยะจากขอบล่างให้จอย/ปุ่มโจมตีตรง ๆ แทน */
  html.touch-ui body{--h-menu:0px; --h-hot:0px}
  

  /* แผงข้อมูลตัวละคร: เหลือชื่อ + HP/SP + Base Lv — เงิน/Job Lv/หัวเรื่องดูในหน้า status ได้ */
  html.touch-ui body #basic{width:min(46vw,166px)}
  html.touch-ui body #basic > header{display:none}
  html.touch-ui body .bi-lv + .bi-lv,html.touch-ui body .bi-zeny{display:none}
  /* แผงแคบลงแล้ว คอลัมน์ป้ายชื่อ 58px ของสกินไม้กินที่จนหลอดเหลือไม่กี่ px
     และ % ไปทับเลขเลเวล — หดป้ายลงแล้วเอา % ออก เหลือหลอดบอกความคืบหน้าพอ
     (ต้องเจาะจงกว่า html[data-skin="wood"] body .bi-lv em ของ ui-skin.css
      ที่โหลดทีหลัง ไม่งั้นความจำเพาะเท่ากันแล้วแพ้ลำดับไฟล์) */
  html.touch-ui body .bi .bi-bar{grid-template-columns:22px minmax(0,1fr)}   /* HP/SP — ป้ายสั้น หลอดยาว */
  html.touch-ui body .bi .bi-lv{grid-template-columns:54px minmax(0,1fr)}    /* "Base Lv. 99" ต้องไม่โดนตัด */
  html.touch-ui body .bi .bi-lv em{display:none}
  html.touch-ui body .bi .bi-lv > span:first-child{font-size:10px}
  /* กล่องเป้าหมาย: บนมือถือเป็นชิปแตะได้ใต้แผงตัวละคร (ui.js updateGoal วัด top จากแผงจริง)
     — เดิมซ่อนทิ้ง "พูดผ่าน toast พอ" แต่ไม่มี toast จริง คนใหม่บนมือถือจึงไม่รู้เลยว่าต้องทำอะไร
     กว้างไม่เกินคอลัมน์ซ้าย (แผงตัวละคร ≈ 56vw) ให้พ้นมินิแมพและแถวตัวละครกลางจอ */
  html.touch-ui body #goal {display:block; width:min(58vw,224px); --fr:6px}
  html.touch-ui body #goal > header{display:none}
  html.touch-ui body #goal .body{padding:5px 8px 6px; gap:1px}
  html.touch-ui body #goal b{font-size:12.5px; line-height:1.25}
  html.touch-ui body #goal small{font-size:10.5px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  html.touch-ui body #goal.tap b::before{content:'👉 '; font-size:11px}
  html.touch-ui body #goal .gfoot{padding:0 6px 5px; gap:4px}
  html.touch-ui body #goal .gfoot button{min-height:28px; font-size:11px}

  /* ── ปุ่มกลมมุมซ้ายล่าง: เมนู / แชท / ช่องลัด ───────────────────────── */
  #fabs{display:none}
  /* z-index ต้องสูงกว่าทุกแผ่นที่มันเปิด (แถบเมนู 14 · ช่องลัด 17 · แชท 18)
     ไม่งั้นกล่องข้อความที่กางขึ้นมาจะทับปุ่มของตัวเอง จนกดปิดไม่ได้ */
  html.touch-ui #fabs { display:flex; flex-direction:column; gap:8px;
  }
  /* เปิดช่องลัดอยู่ ปุ่มกลมต้องถอยขึ้นให้แถบช่องลัดแทรกเข้ามาได้ */
  
  /* เปิดแชทอยู่ เหลือปุ่มเดียวไว้ปิด — อีกสองปุ่มจะไปนั่งบนตัวหนังสือในกล่องข้อความ */
  html.touch-ui.chat-open #fabs button:not([data-key="chat"]){display:none}
  html.touch-ui #fabs button{
    width:44px; height:44px; padding:0; border-radius:50%; border:1px solid #a88433;
    background:linear-gradient(#fdf3dd,#e7cf9a); color:#5a4218; font-size:19px; line-height:1;
    display:grid; place-items:center; box-shadow:0 2px 6px #0005; position:relative;
  }
  html.touch-ui #fabs button.on{background:linear-gradient(#E8C578,#C4903A); color:#3a2a0c}
  html.touch-ui #fabs button i{                     /* จุดแดง = มีข้อความใหม่ */
    position:absolute; top:3px; right:3px; width:9px; height:9px; border-radius:50%;
    background:#e8503a; border:1px solid #fff2d8; display:none;
  }
  html.touch-ui #fabs button.new i{display:block}

  /* ── แถบเมนู: ปิดไว้ เปิดเมื่อกด ☰ ───────────────────────────────── */
  html.touch-ui body #menu{display:none}
  html.touch-ui.menu-open body #menu{display:grid}

  /* ── แถบแชท: ปิดไว้ เปิดเมื่อกด 💬 ──────────────────────────────── */
  html.touch-ui body #chat{display:none}
  html.touch-ui.chat-open body #chat{display:block; bottom:calc(var(--safe-b) + var(--kb,0px)); z-index:18}
  /* ปุ่มส่ง: บนมือถือไม่มี Enter ให้กด พิมพ์แล้วส่งไม่ได้คือทางตัน */
  html.touch-ui body #chat-send{
    display:block; flex:none; min-height:36px; padding:0 14px; margin-right:6px;
    border:1px solid #a88433; border-radius:8px; font:700 13px/1 inherit;
    background:linear-gradient(#E8C578,#C4903A); color:#3a2a0c;
  }

  /* ── แผ่นที่เปิดมาต้องได้จอทั้งใบ ──────────────────────────────────
     จอยกับปุ่มโจมตีลอยอยู่ z-index สูงกว่า มันเลยไปวาดทับแถบเมนู/ช่องพิมพ์
     จนกดไม่โดน — ระหว่างเปิดแผ่นก็ไม่ได้เดินอยู่แล้ว ซ่อนไปเลยชัดกว่า
     (เปิดช่องลัดไม่ต้องซ่อน เพราะแถบมันไปวางเหนือจอยพอดี ไม่ทับกัน) */
  html.touch-ui.menu-open body #touch-pad,html.touch-ui.menu-open body #touch-acts,
  html.touch-ui.chat-open body #touch-pad,html.touch-ui.chat-open body #touch-acts{display:none}

  /* ── ช่องลัด F1–F9: ปิดไว้ เปิดเมื่อกด ⋯ (ปุ่มกลม 1-3 ยังยิงช่อง 1-3 ได้ตลอด) ── */
  html.touch-ui body #hotbar{display:none}
  /* วางเหนือจอยกับปุ่มโจมตี ไม่ทับของที่ต้องใช้ตอนสู้ */
  html.touch-ui.hot-open body #hotbar{display:flex; bottom:calc(136px + var(--safe-b)); z-index:17}
  /* 9 ช่อง × 46px = 457px ล้นจอ 390px ไป 67px — ช่อง 7-9 หายไปนอกจอ และไม่มีอะไรบอกว่า
     ต้องปัด ให้ช่องหารความกว้างกันเองแทน ทุกช่องจึงเห็นครบโดยไม่ต้องเลื่อน
     (ขั้นต่ำ 34px ยังเกิน 32px ที่ check-mobile-hud บังคับ) */
  html.touch-ui.hot-open body #hud #hotbar{overflow-x:hidden; gap:3px}
  html.touch-ui.hot-open body #hud #hotbar .slot{
    flex:1 1 0; width:auto; min-width:34px; max-width:46px; height:auto; aspect-ratio:1;
  }
}

/* แชทบนมือถือ: ตัวโตขึ้นและเว้นบรรทัดกว่าบนคอม — อ่านบนจอ 6 นิ้วในมือได้จริง */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body #chat-log{font-size:13px; line-height:1.45; padding:6px}
  html.touch-ui body #chat-log .ln{padding:4px 6px}
  html.touch-ui body #chat-log .tag{font-size:10px; padding:2px 6px}
  html.touch-ui body #chat-log time{font-size:11px}
}

/* ไอคอนจริงบนปุ่มกลม — ก๊อปมาจากช่องลัด (ดู mirrorSlots ใน ui-skin.js) */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui #touch-acts .mirror{
    position:absolute; top:19%; right:19%; bottom:19%; left:19%;
    display:grid; place-items:center; pointer-events:none; overflow:hidden;
    width:auto; height:auto; min-height:0; min-width:0; border:0; background:none; box-shadow:none; padding:0;
  }
  /* ไม่กำหนดสีตัวอักษรเอง — กฎไอคอนสกิลตั้ง color:transparent ไว้แล้วเมื่อมีรูปจริง
     (ถ้าไปตั้ง color:#fff ทับ ตัวย่อชื่อสกิลจะโผล่มาทับรูปอย่างที่เห็นในเทสต์) */
  html.touch-ui #touch-acts .mirror .sk{
    width:100%; height:100%; max-width:100%; max-height:100%; border-radius:50%; border:0;
    display:grid; place-items:center; font:700 10px/1 inherit; overflow:hidden;
    background-size:cover !important; background-position:center !important;
  }
  html.touch-ui #touch-acts .mirror .ic3d{width:100%; height:100%; object-fit:contain}
  html.touch-ui #touch-acts button.filled > img{opacity:.55}   /* ลูกแก้วกลายเป็นกรอบ ไอคอนเป็นพระเอก */
}

/* ═══ เก็บตกรอบใหญ่: แผงปาร์ตี้ · ป้ายเป้าหมาย · เมนูกดชื่อ · ปุ่มสลับชุดสกิล ═══
   ทั้งสี่อย่างนี้ถูกออกแบบมาสำหรับเมาส์บนจอกว้าง พอมาอยู่บนจอ 390px มันใหญ่เกิน
   ทับกันเอง และยังบอกวิธีใช้แบบคอม ("Shift+ปุ่มสกิล") ซึ่งมือถือไม่มีให้กด */
@media (max-width:760px), (pointer:coarse){
  /* ── ปุ่มสลับชุดสกิล ─────────────────────────────────────────────── */
  html.touch-ui #touch-acts [data-page]{
    width:44px; height:44px; justify-self:center; align-self:center;
    border:1px solid #a88433; border-radius:50%; display:grid; place-items:center; line-height:1;
    background:linear-gradient(#fdf3dd,#e7cf9a); color:#5a4218; box-shadow:0 2px 6px #0004;
  }
  html.touch-ui #touch-acts [data-page] small{font-size:8px; opacity:.75}
  html.touch-ui #touch-acts [data-page] b{font-size:14px}

  /* ── แผงปาร์ตี้: แถวเตี้ยลง อ่านชื่อกับหลอดเลือดพอ คำแนะนำแบบคอมตัดทิ้ง ── */
  html.touch-ui body #party-hud{width:132px; font-size:11px; padding:3px 4px}
  html.touch-ui body #party-hud .small{display:none}          /* "คลิก = เลือกเป้า · Shift+..." */
  html.touch-ui body #party-hud .pm{margin:2px 0; padding:3px 4px; min-height:34px}
  html.touch-ui body #party-hud .pm-top{font-size:11px}
  html.touch-ui body #party-hud .rbar{--bh:9px; height:9px}
  html.touch-ui body #party-hud .rbar.sp{--bh:7px; height:7px}

  /* ── ป้ายเป้าหมาย: แถบเดียวจบ ไม่ใช่กล่องสามบรรทัดกลางจอ ─────────── */
  html.touch-ui body #target { min-width:0; max-width:64vw;
    padding:3px 9px 5px; font-size:11px; text-align:center;
  }
  html.touch-ui body #target #t-info{
    font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }
  html.touch-ui body #target .rbar{--bh:9px; height:9px; margin-top:2px}

  /* ── เมนูกดชื่อ: เปลี่ยนเป็นแผ่นสไลด์จากขอบล่าง ไม่ลอยทับของอื่น ──── */
  html.touch-ui body .ctx{
    position:fixed !important; left:8px !important; right:8px; top:auto !important;
    bottom:calc(10px + var(--safe-b)); width:auto; min-width:0; padding:8px;
    border-radius:14px; box-shadow:0 -6px 24px #0006;
  }
  html.touch-ui body .ctx > b{font-size:14px; padding:6px 8px 8px}
  html.touch-ui body .ctx button{min-height:46px; font-size:14px}
}

/* แผนที่บนมือถือ: ปุ่มใหญ่พอสำหรับนิ้ว */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body .map-btns button{width:30px; height:30px; font-size:15px}
  html.touch-ui body #bm-close{width:44px; height:44px}
  html.touch-ui body .bm-hint{font-size:13px}
}

/* ── หน้าต่างสถานะบนมือถือ: ปุ่ม ▲ ต้องกดโดน และตารางเหลือ 2 คอลัมน์ ── */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body .st-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 10px}
  html.touch-ui body .st-row{min-height:34px}
  html.touch-ui body .st-up,html.touch-ui body .st-row .up{
    width:34px; height:34px; min-width:34px; min-height:34px; font-size:15px; border-radius:8px;
  }
  html.touch-ui body .st-row .cost{font-size:10px; opacity:.7}
  /* หน้าต่างทุกบานบนมือถือ: เนื้อหาเลื่อนได้เสมอ ไม่ใช่ตัดหาย */
  html.touch-ui body .win > .body{overflow-y:auto; -webkit-overflow-scrolling:touch}
}

/* ── หน้า login/สร้างตัวละคร บนมือถือ: ตัวอย่างตัวละครต้องเป็นพระเอกของจอ ── */
@media (max-width:760px), (pointer:coarse){
  body .login-card{max-height:calc(100vh - 24px); overflow-y:auto; -webkit-overflow-scrolling:touch}
  body .cprev{height:min(38vh,260px)}
  body .login-card .primary{min-height:50px; font-size:16px}
  body .login-card .chip{min-height:40px}
  body .login-card input{min-height:44px; font-size:16px}   /* 16px = iOS ไม่ซูมจอตอนโฟกัส */
  body .brand{font-size:26px}
}

/* ── กระเป๋าบนมือถือ: แท็บแนวตั้งอ่านยากและกดยาก → เปลี่ยนเป็นแถวบนแบบปกติ ── */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body .inv{display:flex; flex-direction:column; gap:6px}
  html.touch-ui body .vtabs{flex-direction:row; gap:4px; padding:0}
  html.touch-ui body .vtabs button{
    writing-mode:horizontal-tb; transform:none; flex:1; min-height:38px;
    font-size:12px; padding:0 6px; border-radius:8px;
  }
  html.touch-ui body .inv .grid{grid-template-columns:repeat(auto-fill,46px); gap:6px; min-height:140px}
  html.touch-ui body .inv .slot{width:46px; height:46px}
}

/* ── ปุ่มบนมินิแมพ: มินิแมพกว้างแค่ 96px วางปุ่มสามปุ่มแล้วปุ่มกินพื้นที่แผนที่เกือบหมด
      บนมือถือจึงเหลือปุ่มเดียว (กางเต็มจอ) ส่วนการซูมไปอยู่ในแผนที่เต็มจอซึ่งมีที่พอ
      แตะบนมินิแมพยังเดินไปจุดนั้นได้เหมือนเดิม ── */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body .map-btns{position:static; display:block}
  html.touch-ui body #map-in,html.touch-ui body #map-out{display:none}
  html.touch-ui body #map-big{
    position:absolute; right:2px; top:2px; width:30px; height:30px; font-size:14px; opacity:.9;
    background:#fffffff2; border-color:#a88433;
  }
  /* แตะที่แถบชื่อโซนก็กางแผนที่เต็มจอได้ — เป้าใหญ่กว่าปุ่มเล็กมุมบน */
  html.touch-ui body #mapbox > header{min-height:26px; cursor:pointer}
  /* ปุ่มซูมในแผนที่เต็มจอ */
  html.touch-ui body .bm-zoom button{width:44px; height:44px; font-size:20px}
}

/* ═══ HUD ผู้เล่นแบบกะทัดรัด (รอบวิจารณ์ UX) ═══════════════════════════
   เดิมแผงนี้สูง 113px แสดง 5 แถว และตัวเลข HP ล้นไปทับป้าย "HP"
   ของที่ต้องเห็นตลอดเวลาจริง ๆ มีแค่ ชื่อ · เลเวล · หลอด HP/SP
   ที่เหลือ (Job Lv, EXP, เงิน) ย้ายไปหน้า status — เปิดดูเมื่อต้องการ */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body #basic{width:min(56vw,208px)}
  html.touch-ui body .bi{padding:4px 6px 5px}
  html.touch-ui body .bi-name{flex-direction:row; align-items:baseline; gap:6px; margin-bottom:3px}
  html.touch-ui body .bi-name b{font-size:12.5px; flex:none}
  html.touch-ui body .bi-name span{display:inline; font-size:9.5px; opacity:.8; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; min-width:0}
  html.touch-ui body .bi .bi-lv{display:none}           /* แถวเลเวล+EXP ทั้งสองแถว */
  html.touch-ui body .bi .bi-bar{grid-template-columns:20px minmax(0,1fr); margin-bottom:3px}
  html.touch-ui body .bi .bi-bar label{font-size:10px}
  /* ตัวเลขนั่งบนหลอด ชิดขวา ตัวเล็ก และห้ามล้นออกนอกหลอดไปทับป้าย */
  html.touch-ui body .bi .bi-bar span{
    font-size:9px; max-width:calc(100% - 22px); overflow:hidden; white-space:nowrap;
  }
  html.touch-ui body .bi .rbar{--bh:14px; height:14px}
}

/* กรอบไม้บางลงเฉพาะแผงที่ต้องอยู่บนจอตลอด — ลายกรอบกินพื้นที่เกมไปเยอะ
   (ลดลายลงราว 30% ตามที่รีวิวแนะนำ โดยไม่ทิ้งเอกลักษณ์สกินไม้) */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body #basic,html.touch-ui body #mapbox,html.touch-ui body #party-hud{--fr:10px}
}

/* ═══ แถบปาร์ตี้แบบผอม (รอบวิจารณ์ UX) ════════════════════════════════
   เดิมเป็นหน้าต่างลอยแบบคอม กว้าง 166px สูง 94px ต่อสองคน และไปนั่งกลางจอ
   บนมือถือเหลือบรรทัดเดียวต่อคน: ชื่อ + หลอดเลือดสั้น ๆ · แตะ = เลือกเป้า
   กดค้าง = เมนู (กระซิบ/ชวน) · หลอด SP ซ่อน เพราะไม่ใช่ของที่ต้องเฝ้าตลอด */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body #party-hud{width:132px; padding:3px 4px 4px; font-size:10px}
  html.touch-ui body #party-hud > b{font-size:11px}
  html.touch-ui body #party-hud .pt-count{font-size:10px}
  html.touch-ui body #party-hud .pm{
    display:grid; grid-template-columns:minmax(0,1fr) 46px; align-items:center; gap:5px;
    min-height:30px; margin:1px 0; padding:2px 3px;
  }
  html.touch-ui body #party-hud .pm-top{display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  html.touch-ui body #party-hud .pm-top .small{display:none}      /* เลเวลดูตอนกดค้างได้ */
  html.touch-ui body #party-hud .rbar.hp{--bh:8px; height:8px; margin:0}
  html.touch-ui body #party-hud .rbar.sp{display:none}
}

/* ═══ จอย: เล็กลง จางลง และแตะได้ทั้งมุมซ้ายล่าง ═══════════════════════
   เดิมก้านกว้าง 118px = 30% ของความกว้างจอ และต้องแตะบนรูปก้านเท่านั้น */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui #touch-zone{
    position:fixed; left:0; bottom:0; width:48%; height:38%; z-index:13;
    touch-action:none; background:transparent;
  }
  html.touch-ui body #touch-pad{width:84px; height:84px; opacity:.62; transition:opacity .15s}
  html.touch-ui body #touch-pad.on{opacity:.95}
     /* ย้ายไปอยู่ตรงที่นิ้วแตะ */
}

/* ═══ ปุ่มสู้เรียงเป็นส่วนโค้งตามนิ้วโป้ง ══════════════════════════════
   นิ้วโป้งกวาดเป็นวงโค้ง ไม่ใช่ตาราง — วางปุ่มตามรัศมีจากมุมขวาล่าง
   ปุ่มโจมตีใหญ่สุดอยู่ใกล้มือที่สุด สกิลไล่ขึ้นไปตามโค้ง */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui #touch-acts {
    display:block; width:0; height:0;
  }
  html.touch-ui #touch-acts button{position:absolute}
  /* มุมอ้างอิง = มุมขวาล่าง · ตัวเลข = ระยะจากมุมถึงจุดกึ่งกลางปุ่ม ลบครึ่งปุ่ม */
  html.touch-ui #touch-acts [data-attack]{width:78px; height:78px; right:22px;  bottom:22px}
  html.touch-ui #touch-acts [data-slot="0"]{width:58px; height:58px; right:8px;   bottom:118px}
  html.touch-ui #touch-acts [data-slot="1"]{width:58px; height:58px; right:74px;  bottom:150px}
  html.touch-ui #touch-acts [data-slot="2"]{width:58px; height:58px; right:146px; bottom:124px}
  html.touch-ui #touch-acts [data-page]{width:40px; height:40px; right:126px; bottom:26px}
  html.touch-ui #touch-acts b{font-size:10px; right:3px; bottom:1px}
}

/* ═══ แชท: เห็นข้อความล่าสุดตลอด แต่ไม่บังเกม ═══════════════════════════
   เดิมปิดสนิทจนกว่าจะกด 💬 → พลาดข้อความที่คนอื่นคุย ซึ่งขัดกับความเป็นเกมสังคม
   ตอนนี้เมื่อไม่ได้พิมพ์จะเหลือ "ตัวอย่าง 3 บรรทัดล่าสุด" พื้นโปร่ง แตะทะลุได้
   (ไม่กินการแตะ เพราะมันนั่งอยู่เหนือโซนจอยพอดี) */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body #chat{display:block; pointer-events:none; background:none}
  html.touch-ui body #chat .chat-bar,html.touch-ui body #chat #chat-new{display:none}
  /* ⚠️ ต้อง justify-content:flex-end — ไม่งั้นกล่องที่ overflow:hidden จะตัดบรรทัด "ล่าง" ทิ้ง
     แล้วโชว์ข้อความ "เก่าสุด" ค้างไว้ ผู้เล่นพิมพ์ใหม่เท่าไรก็ไม่เห็นออก (อาการที่เจอจริง) */
  html.touch-ui body #chat #chat-log{
    display:flex; flex-direction:column; justify-content:flex-end;
    position:fixed; left:8px; right:38%; bottom:calc(300px + var(--safe-b));
    width:auto; height:auto; max-height:62px; overflow:hidden; padding:0;
    background:none; border:0; border-radius:0; pointer-events:none;
    text-shadow:0 1px 3px #000,0 0 6px #0008; font-size:12px;
  }
  html.touch-ui body #chat #chat-log .ln{flex:none}
  html.touch-ui body #chat #chat-log .ln{background:none; padding:1px 0}
  html.touch-ui body #chat #chat-log time{display:none}      /* ตัวอย่างสั้น ๆ ไม่ต้องมีเวลา */

  /* เปิดแชทเต็ม = กลับมาเป็นแผ่นปกติ */
  html.touch-ui.chat-open body #chat{pointer-events:auto}
  html.touch-ui.chat-open body #chat .chat-bar{display:flex}
  html.touch-ui.chat-open body #chat #chat-log{
    position:absolute; left:6px; right:6px; bottom:100%; margin:0 0 3px;
    height:38vh; max-height:none; padding:3px 6px; overflow-y:auto; pointer-events:auto;
    background:rgba(10,16,30,.62); border:1px solid #00000033; border-radius:8px; text-shadow:0 1px 1px #000;
  }
  html.touch-ui.chat-open body #chat #chat-log time{display:inline}
  /* ปุ่มกลมที่เหลือ (💬 ปิดแชท) เคยลอยอยู่กลางกล่องข้อความพอดี บังข้อความที่กำลังอ่าน
     ย้ายไปใต้กล่อง HP เหมือนที่แนวนอนทำ — --hud-b คือขอบล่างจริงของกล่อง (ui.js วัดให้) */
  
  /* แท็บต้องเกาะขอบบนของกล่องข้อความ ไม่ใช่ลอยกลางจอ (เดิมลืมบวกความสูงแถบพิมพ์) */
  html.touch-ui.chat-open body #chat.big .chat-tabs{
    position:absolute; left:6px; right:6px; bottom:calc(var(--h-chat) + 38vh + 8px); margin:0;
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:4px; pointer-events:auto;
  }
  html.touch-ui.chat-open body #chat.big .chat-tabs button{flex:none; min-height:34px; padding:0 10px; font-size:12px}
}

/* ═══ หน้าต่างสกิล: แถวเตี้ยลงครึ่งหนึ่ง ═══════════════════════════════
   เดิมแถวหนึ่งสูงราว 130px เพราะปุ่ม ▲ กับ use วางซ้อนกันเป็นคอลัมน์
   ทำให้เห็นสกิลได้ทีละ 4-5 อัน ทั้งที่วิซาร์ดมีสิบกว่าอัน */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body .sk-row{
    display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center;
    gap:8px; padding:6px 4px; min-height:56px;
  }
  html.touch-ui body .sk-row .ic{width:40px; height:40px; font-size:11px}
  html.touch-ui body .sk-row .nm{font-size:13px; line-height:1.25}
  html.touch-ui body .sk-row .lv{font-size:11px; opacity:.8; display:flex; gap:6px}
  html.touch-ui body .sk-row p{font-size:10px; margin:1px 0 0}
  html.touch-ui body .sk-btns{flex-direction:row; gap:5px}
  html.touch-ui body .sk-btns .rbtn{min-width:42px; min-height:42px; font-size:13px; border-radius:9px}
  html.touch-ui body .sk-head{font-size:13px; padding:6px 4px 2px}
}

/* ═══ หน้าสถานะบนมือถือ: สเตตัสหลักก่อน ที่เหลือพับเก็บ ══════════════ */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body .st-points{
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    padding:6px 8px; margin-bottom:6px; border-radius:8px; font-size:13px;
    background:#e8b64a2e; border:1px solid #a8843355;
  }
  html.touch-ui body .st-points b{font-size:17px; color:#b5401f}
  html.touch-ui body .st-main .st-row{min-height:40px}
  html.touch-ui body .st-more{margin-top:6px; border-top:1px solid var(--line-soft)}
  html.touch-ui body .st-more > summary{
    min-height:40px; display:flex; align-items:center; gap:6px; cursor:pointer;
    font-weight:700; font-size:13px; padding:4px 2px; list-style:none;
  }
  html.touch-ui body .st-more > summary::before{content:'▸'; transition:transform .15s}
  html.touch-ui body .st-more[open] > summary::before{transform:rotate(90deg)}
  html.touch-ui body .st-more .st-col{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 10px}
}

/* ═══ รอบวิจารณ์ 2: ปาร์ตี้ · ป้ายเป้าหมาย · แชทอ่านออก ════════════════ */
@media (max-width:760px), (pointer:coarse){
  /* ── ปาร์ตี้: ผอมลงอีก · กรอบไม้บางสุด · มีจุดบอกออนไลน์ ── */
  /* เกาะใต้มินิแมพ ไม่ลอยกลางจอ (เดิม top:222px = ประมาณ 26% ของความสูงจอ = กลางสนามพอดี) */
  html.touch-ui body #party-hud {
    width:124px; --fr:8px; padding:2px 3px 3px; max-height:34vh;
  }
  html.touch-ui body #party-hud > b{
    font-size:10px; display:inline-block; max-width:82px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
  }
  html.touch-ui body #party-hud .pm{grid-template-columns:minmax(0,1fr) 40px; min-height:26px; gap:4px}
  html.touch-ui body #party-hud .pm-top{font-size:11px}
  html.touch-ui body #party-hud .rbar.hp{--bh:7px; height:7px}
  /* จุดสถานะ: เขียว = ออนไลน์ · เทา = ออฟไลน์ (คลาส .off มีอยู่แล้วในโค้ดเดิม) */
  html.touch-ui body #party-hud .dot{
    display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px;
    background:#3fbf6a; box-shadow:0 0 0 1px #ffffffaa; vertical-align:middle;
  }
  html.touch-ui body #party-hud .pm.off .dot{background:#9aa3ad}

  /* ── ป้ายเป้าหมาย: แคบลง อยู่ชิดบนกว่าเดิม ── */
  html.touch-ui body #target {max-width:58vw; padding:2px 8px 4px}
  html.touch-ui body #target #t-name{font-size:12px}
  html.touch-ui body #target #t-lv{font-size:11px}
  html.touch-ui body #target #t-info{font-size:10px}

  /* ── ตัวอย่างแชท: พื้นจาง ๆ ใต้ตัวอักษร ไม่งั้นอ่านไม่ออกบนพื้นทราย ── */
  html.touch-ui body #chat #chat-log .ln{
    background:linear-gradient(90deg,#0b1524aa,#0b152466 70%,transparent);
    border-radius:4px; padding:1px 6px 1px 4px; width:fit-content; max-width:100%;
  }
}

/* พับแถบปาร์ตี้: เหลือหัวแถบบรรทัดเดียว — แตะที่ชื่อห้องเพื่อกางกลับ */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body #party-hud > b{cursor:pointer}
  html.touch-ui body #party-hud > b::after{content:' ▾'; opacity:.6; font-size:9px}
  html.touch-ui body #party-hud.folded > b::after{content:' ▸'}
  html.touch-ui body #party-hud.folded .pm,
  html.touch-ui body #party-hud.folded .small{display:none}
  html.touch-ui body #party-hud.folded{width:106px}
}

/* NPC + อาชีพบนมือถือ: รูปเล็กลงหน่อยให้เหลือที่ให้ตัวหนังสือ */
@media (max-width:760px), (pointer:coarse){
  html.touch-ui body .npc-text.has-face{grid-template-columns:64px minmax(0,1fr); gap:8px}
  html.touch-ui body .npc-face{width:64px}
  html.touch-ui body .detail.job-pick{grid-template-columns:44px minmax(0,1fr)}
  html.touch-ui body .job-ic{width:44px; height:44px}
}

/* หน้า login บนมือถือ: ใช้ภาพพื้นหลังแนวตั้งที่วาดมาสำหรับจอตั้งโดยเฉพาะ */
@media (max-width:760px), (pointer:coarse){
  body #login{background:#2c3f4d url('assets/ui/login-bg-portrait.jpg') center/cover no-repeat}
  body .brand img{width:min(260px,70%)}
}

/* ── หน้า login บนมือถือ รอบปรับใหญ่ (21 ก.ย.) ───────────────────────
   มือถือไม่ใช้สองคอลัมน์: ตัวละครอยู่บน ตัวเลือกอยู่ล่าง เห็นตัวละครตลอดเวลา */
@media (max-width:760px), (pointer:coarse){
  body .login-card{width:min(92vw,440px)}
  body .cc{gap:12px}
  body .login-card .primary.wide{width:100%}
  body .login-card .swatches button{width:32px;height:32px}
  body .login-card .chip{min-height:44px;font-size:15px;padding:4px 14px}
  body .login-card .row > span{width:58px;font-size:14px}
  body .eye{width:44px;font-size:17px}
  body .pw-row input{padding-right:48px}
  /* คีย์บอร์ดขึ้นมากินครึ่งจอ — การ์ดต้องเลื่อนได้และเผื่อขอบล่างของเครื่อง
     ไม่งั้นปุ่ม "เข้าสู่ระบบ" ไปอยู่ใต้คีย์บอร์ดจนกดไม่ถึง */
  body #login.overlay{
    align-content:center;
    padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  }
  body .login-card{max-height:calc(100dvh - 24px)}
  /* ปุ่มหลัก (สร้างตัวละคร/เข้าเล่น) เกาะขอบล่างการ์ด — จอเตี้ย (375×667) ปุ่มตกขอบล่าง ต้องเลื่อนหา (26 ก.ย.) */
  body #l-go{position:sticky; bottom:0; z-index:3; box-shadow:0 -8px 14px rgba(246,248,252,.95)}
}

/* ═══ รอบสาม (21 ก.ย.): เคลียร์กลางจอให้เป็นสนามสู้ ═══════════════════════
   จากภาพจริงบนมือถือ: แผงตัวละคร + มินิแมพ + ปาร์ตี้ กินขอบบนเกือบหมด
   ตัวอย่างแชทนั่งอยู่ที่เท้าตัวละคร และลิ้นชักช่องลัดแบบคอม (F1–F8) ขวางสนาม
   หลัก: ของที่อยู่บนจอตลอดต้องเกาะขอบและเบา — กลางจอเหลือไว้ให้ตัวละครกับมอน
   ⚠️ ใช้ #hud นำหน้าทุกกฎ: กฎสกินไม้ใน ui-skin.css จำเพาะเท่ากับ html.touch-ui body #x
      และโหลดทีหลัง ถ้าไม่เพิ่มความจำเพาะ รอบนี้จะแพ้ทั้งรอบแบบเงียบ ๆ */
@media (max-width:760px), (pointer:coarse){
  /* ── แผงตัวละคร: แคบลงและเตี้ยลง — กรอบไม้บางลงอีก 30% (10px → 7px) ── */
  html.touch-ui body #hud #basic{width:min(54vw,206px); --fr:7px}   /* การ์ดใหม่: กว้างขึ้นให้เลขเลือดอ่านออก */
  html.touch-ui body #hud .bi{padding:2px 5px 3px}
  html.touch-ui body #hud .bi-name{margin-bottom:1px}
  html.touch-ui body #hud .bi .bi-bar{margin-bottom:2px}
  html.touch-ui body #hud .bi .rbar{--bh:11px; height:11px}
  html.touch-ui body #hud .bi .bi-bar span{font-size:8.5px; line-height:11px}

  /* ── มินิแมพ: กรอบบางลง ชื่อโซนตัวเล็กลง พิกัดตัดทิ้ง (ดูได้ในแผนที่เต็มจอ) ── */
  html.touch-ui body #hud #mapbox{--fr:6px}
  html.touch-ui body #hud #mapbox > header{font-size:9px; min-height:18px; line-height:18px}
  html.touch-ui body #hud #coords{display:none}

  /* ── ปาร์ตี้: พื้นโปร่งบาง ไม่มีกรอบไม้ — ไว้ดูเลือดเพื่อนระหว่างสู้เท่านั้น
        จัดการห้อง (ชวน/ออก/เปิดรับคน) = กดค้างที่หัวแถบ → หน้าต่างปาร์ตี้ ── */
  html.touch-ui body #hud #party-hud{
    border:1px solid #c4903a88; border-image:none; border-radius:9px;
    background:#fdf6e6cc; box-shadow:0 2px 8px #0003; padding:3px 5px 4px; width:122px;
  }
  html.touch-ui body #hud #party-hud .pm{background:none}
  html.touch-ui body #hud #party-hud .pm.on{background:#e8b64a44}
  /* พับ = เหลือชิปเล็ก "👥 2/2" ไม่ต้องมีชื่อห้อง */
  html.touch-ui body #hud #party-hud.folded{width:auto; min-width:0; padding:4px 8px; border-radius:999px}
  html.touch-ui body #hud #party-hud.folded .pt-name{display:none}
  html.touch-ui body #hud #party-hud.folded > b{max-width:none}
  html.touch-ui body #hud #party-hud.folded .pt-count{float:none; margin-left:2px; opacity:.9}

  /* ── ลิ้นชักช่องลัด (⋯): ไม่มีป้าย F1–F9 — บนจอสัมผัสไม่มีปุ่ม F ให้กด ── */
  html.touch-ui body #hud #hotbar .slot .key{display:none}

  /* ── ตัวอย่างแชท: แคบลงให้พ้นตัวละครกลางจอ แล้วจางหายเมื่อเงียบ 7 วินาที ── */
  html.touch-ui body #hud #chat #chat-log{
    right:56%; transition:opacity .8s ease;
    /* บรรทัดบนสุดที่โดนตัดครึ่งให้จางหายแทนการขาดเป็นเส้นแข็ง */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px); mask-image:linear-gradient(to bottom,transparent 0,#000 16px);
  }
  /* ⚠️ ต้องคืน right ตรงนี้ด้วย ไม่ใช่ปล่อยให้กฎ .chat-open ที่อยู่ไฟล์บนทำงาน —
     กฎ "ตัวอย่างแชท" ข้างบนมี 3 id (#hud #chat #chat-log) ส่วนกฎเปิดแชทมี 2 id
     id ชนะ class เสมอ กล่องข้อความจึงค้างกว้าง 44% ทั้งที่เปิดเต็มจอแล้ว
     (อาการที่ผู้ใช้เจอ: เปิดแชทมาแล้วข้อความตัดคำกลางประโยคอยู่ครึ่งซ้ายของจอ) */
  html.touch-ui.chat-open body #hud #chat #chat-log{
    right:6px; -webkit-mask-image:none; mask-image:none;
  }
  html.touch-ui.chat-quiet:not(.chat-open) body #hud #chat #chat-log,
  /* เปิดลิ้นชักช่องลัดอยู่ ปุ่มกลมถอยขึ้นมาทับตัวอย่างแชทพอดี — ซ่อนตัวอย่างไประหว่างนั้น */
  html.touch-ui.hot-open body #hud #chat #chat-log{opacity:0}

  /* ── ปุ่มกลมซ้าย (เมนู/แชท/ช่องลัด): ขนาดเท่าเดิม (44px คือขั้นต่ำของนิ้ว)
        แต่พื้นโปร่งขึ้น ให้โลกเด่นกว่า UI ── */
  html.touch-ui #hud #fabs button{background:#fdf3ddb8; box-shadow:0 1px 4px #0004; border-color:#a8843399}
  html.touch-ui #hud #fabs button.on{background:linear-gradient(#E8C578,#C4903A)}

  /* ── จอย: รูปต้องตรงกับก้านจริง ──────────────────────────────────────
     รอบก่อนหด #touch-pad เหลือ 84px แต่ลืมรูปวง (.base ยังกว้าง 118px ตามกฎตั้งต้น
     ยึดมุมซ้ายบน) และลูกบิดยังวางไว้ที่ left/top 32px สำหรับวง 118px
     วัดที่ 390×844: โค้ดคิดทิศจากจุดกลาง (52,792) แต่วงกับลูกบิดถูกวาดกลางที่ (69,809)
     เอียงขวาล่าง 17px — วางนิ้วตรงกลางวงที่ตาเห็น = ดันก้านขวาล่างไปแล้ว ~63%
     ตัวละครเลยเดินเองทั้งที่นิ้วอยู่ "กลาง" และขอบล่างของวงล้นจอไป 24px (868 จาก 844)
     แก้ด้วยสัดส่วนแทนตัวเลข: วงเต็มกล่องเสมอ ลูกบิดอยู่กลางกล่องเสมอ
     ใครเปลี่ยนขนาดจอยทีหลัง รูปกับก้านก็ไม่หลุดจากกันอีก */
  html.touch-ui body #hud #touch-pad .base{inset:0; width:100%; height:100%}
  html.touch-ui body #hud #touch-pad .knob{width:48%; height:48%; left:26%; top:26%}
  html.touch-ui body #hud #touch-pad {opacity:.45}
  html.touch-ui body #hud #touch-pad.on{opacity:.95}
  /* พื้นที่รับนิ้วของจอย: เดิมกว้าง 48% สูง 38% ของจอ (187×321 ที่ 390×844)
     เริ่มตั้งแต่ y=523 เกือบถึงกลางจอ — แตะพื้นหรือแตะมอนในมุมนั้นไม่ได้เลย
     (ตอนเล็งสกิลก็แตะเลือกมอนตรงนั้นไม่ได้) และลากก้านได้ตั้งแต่เกือบครึ่งจอ
     เหลือมุมนิ้วโป้งจริง ๆ: ซ้ายล่างไม่เกิน 42% × 28% */
  html.touch-ui body #hud #touch-zone{width:min(42vw,180px); height:min(28vh,240px)}

  /* ── ปุ่มสลับชุดสกิล: เม็ดยาเล็กสีเข้ม ไม่ใช่ลูกกลมหน้าตาเหมือนสกิลอีกปุ่ม
        สูง 32px = ขั้นต่ำของนิ้วตามด่าน check-mobile-hud (เล็กกว่าสกิล 58px ชัดเจน) ── */
  html.touch-ui #hud #touch-acts [data-page]{
    width:52px; height:32px; right:118px; bottom:32px; border-radius:999px;
    background:#15202ebf; border:1px solid #e8b64a88; color:#ffe9b0; box-shadow:0 1px 4px #0004;
    display:flex; align-items:center; justify-content:center; gap:3px;
  }
  html.touch-ui #hud #touch-acts [data-page] small{font-size:9px; opacity:.85}
  html.touch-ui #hud #touch-acts [data-page] b{position:static; font-size:12px; text-shadow:none}

  /* ── ระหว่างเล็ง ป้ายเป้าหมายไม่เกี่ยว (เล็งเกิดเมื่อยังไม่มีมอนเป็นเป้า ถ้ามีป้ายอยู่
        ก็เป็นป้ายของเพื่อน/NPC) และมันอยู่แถบเดียวกับแถบเล็งพอดี — ซ่อนระหว่างนั้น ── */
  html.touch-ui.aiming body #hud #target{display:none}

  /* ── ปุ่มสกิลที่กำลังเล็ง: วงเรืองทอง-เขียวเป็นจังหวะ ── */
  html.touch-ui #hud #touch-acts button.armed::after{
    content:''; position:absolute; inset:-6px; border-radius:50%; pointer-events:none;
    border:3px solid #e8b64a; box-shadow:0 0 0 2px #2f6f73, 0 0 14px #e8b64a;
    animation:autoLock 1s ease-in-out infinite;
  }
}

/* สร้างตัวละครบนจอตั้งเตี้ย (≤ 720px เช่น 375×667): ภาพตัวอย่างสูงจนตัวเลือกตกจอ — เตี้ยลง (26 ก.ย.) */
@media (orientation: portrait) and (max-height: 720px){
  body #l-create .cprev{height:150px}
}