/* mobile.css — มือถือ / ติดตั้งเป็นแอป (PWA)  ·  โหลดหลัง style.css และ scene.css
   1) safe-area: รอยบาก/เกาะ (แนวตั้ง = บน · แนวนอน = ซ้าย/ขวา) และแถบโฮมด้านล่าง เมื่อเปิดเต็มจอ (viewport-fit=cover)
   2) กันดึงรีเฟรช/เด้งหน้า, กันแตะสองครั้งแล้วซูม, กันเมนูกดค้าง (ยกเว้นช่องพิมพ์และบันทึกแชท)
   3) ความสูงหน้าต่างใช้ dvh (แถบเครื่องมือ Safari ไม่บังขอบล่าง)
   4) แนวนอนจอเตี้ย (มือถือตะแคง ≤ 500px) — ย่อ HUD / แชท / หน้าเข้าสู่ระบบ
   5) คำแนะนำ "เพิ่มไปยังหน้าจอโฮม" (pwa.js) */

:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* ---------------------------------------------------------------- 2) สัมผัส */
html, body { overscroll-behavior: none; }
/* manipulation = เลื่อน/ถ่างได้ แต่ไม่มีแตะสองครั้งแล้วซูม (และไม่มีหน่วง 300ms) — specificity 0 เพื่อให้กฎเดิม เช่น canvas touch-action: none ชนะ */
:where(html, body, body *) { touch-action: manipulation; }
body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable], .chat-log { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }
#ui-root img, #battle-ui img, #minimap img { -webkit-user-drag: none; }

/* ---------------------------------------------------------------- 1) safe-area */
/* หน้าเข้าสู่ระบบ / สร้างตัวละคร: ฉากหลังยังเต็มจอ เนื้อหาหลบรอยบาก */
.screen { padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
/* HUD: เลื่อนทั้งกล่อง (ลูกๆ ใช้ top/left/right เดิม · ด้านล่างใช้ --safe-b อยู่แล้ว) */
.hud { top: var(--safe-t); right: var(--safe-r); left: var(--safe-l); bottom: 0; }
.chat { left: calc(8px + var(--safe-l)); }
#minimap { top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); }
.toasts { top: calc(66px + var(--safe-t)); }
.invites { top: calc(112px + var(--safe-t)); }
.auto-pill { bottom: calc(18px + var(--safe-b)); }
.modal-back, .bm-wrap, .ac-wrap { padding: max(16px, var(--safe-t)) max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l)); }
/* ฉากต่อสู้: ย่อกรอบ UI เข้ามาในพื้นที่ปลอดภัย แต่หน้าผลการต่อสู้ยังมืดเต็มจอ */
#battle-ui { top: var(--safe-t); right: var(--safe-r); bottom: var(--safe-b); left: var(--safe-l); }
#battle-ui .bt-result { inset: calc(-1 * var(--safe-t)) calc(-1 * var(--safe-r)) calc(-1 * var(--safe-b)) calc(-1 * var(--safe-l)); }

@media (min-width: 641px) { .auto-pill { bottom: auto; top: calc(128px + var(--safe-t)); } }
@media (max-width: 700px), (max-height: 520px) { #minimap { top: calc(8px + var(--safe-t)); right: calc(8px + var(--safe-r)); } }
/* มือถือ: ป้ายเดินอัตโนมัติ/toast อยู่เหนือแถบช่องลัด (--hb-clear = ระยะจากขอบล่างจอถึงขอบบนแถบ ตั้งโดย ui/hotbar.js) */
@media (max-width: 640px) { .auto-pill { bottom: max(calc(214px + var(--safe-b)), calc(var(--hb-clear, 0px) + 8px)); } }
@media (max-width: 720px) {
  .chat { left: calc(6px + var(--safe-l)); }
  .toasts { top: auto; bottom: max(calc(206px + var(--safe-b)), calc(var(--hb-clear, 0px) + 6px)); }
  .invites { top: 34vh; }
}
@media (max-width: 640px) { .bm-wrap { padding: max(6px, var(--safe-t)) max(6px, var(--safe-r)) max(6px, var(--safe-b)) max(6px, var(--safe-l)); } }
@media (max-width: 520px) { .ac-wrap { padding: max(6px, var(--safe-t)) max(6px, var(--safe-r)) max(6px, var(--safe-b)) max(6px, var(--safe-l)); } }

/* ---------------------------------------------------------------- 3) dvh: หน้าต่างแบบเดสก์ท็อป (มือถือแนวนอนก็ใช้แบบนี้) */
@media (min-width: 721px) {
  .char-win { width: min(940px, calc(100vw - 24px - var(--safe-l) - var(--safe-r))); height: min(620px, calc(100dvh - 80px)); }
  .npc-win { width: min(760px, calc(100vw - 24px - var(--safe-l) - var(--safe-r))); max-height: calc(100dvh - 70px); }
  .npc-win.expanded { height: min(660px, calc(100dvh - 70px)); }
}

/* ---------------------------------------------------------------- 4) มือถือแนวนอน (จอเตี้ย) */
@media (max-height: 500px) and (orientation: landscape) {
  /* หน้าเข้าสู่ระบบ: โลโก้ซ้าย ฟอร์มขวา */
  .login-center { flex-direction: row; justify-content: center; align-items: center; gap: clamp(16px, 4vw, 48px); padding: 10px 16px; }
  .login-center .logo-main span { font-size: clamp(40px, 7vw, 64px); }
  .login-center .logo-tag { margin-top: 8px; font-size: 13px; }
  .login-center .logo-seal { right: -18px; width: 34px; height: 34px; font-size: 25px; line-height: 34px; }
  .login-panel { flex: none; width: min(380px, 52vw); padding-bottom: 6px; }
  .login-foot { display: none; }

  /* HUD ย่อ: ปุ่มเมนูแถวเดียวมุมขวาล่าง แชทซ้ายล่าง */
  .hud-left { left: 6px; top: 6px; width: 252px; gap: 4px; }
  .hud-char { gap: 8px; padding: 6px 8px 6px 6px; }
  .hud-portrait { width: 50px; height: 50px; }
  .hud-name { font-size: 14px; }
  .hud-map-m { display: none; }
  .hud-quests { max-height: 24dvh; padding: 3px 8px 4px; font-size: 12px; }
  .hud-map { padding: 3px 34px 4px; }
  .map-name { font-size: 15px; }
  .hud-menu { right: 6px; bottom: calc(6px + var(--safe-b)); gap: 3px; }
  .hud-online { flex-direction: row; align-items: center; gap: 6px; }
  .menu-btns { display: flex; gap: 3px; padding: 4px; }
  .menu-btn { width: 46px; height: 44px; }
  .menu-btn .ico { width: 20px; height: 20px; }
  .mb-label { font-size: 10.5px; }
  .menu-btn kbd { display: none; }
  .chat { left: calc(6px + var(--safe-l)); bottom: calc(6px + var(--safe-b)); width: min(330px, calc(100vw - 360px - var(--safe-l) - var(--safe-r))); min-width: 0; }
  .chat-log { height: 64px; font-size: 12px; }
  .chat-tab { min-height: 34px; }
  .chat.in-battle { top: auto; bottom: calc(6px + var(--safe-b)); }
  .chat.in-battle:not(.collapsed) { width: min(340px, calc(100vw - 12px)); }
  .chat.in-battle .chat-log { height: 72px; }
  .chat.collapsed { width: auto; }
  .chat.collapsed .chat-tabs { display: none; }

  /* ต่อสู้ (ปุ่มมุมบน: scene.css): ตั้งค่าใต้ตัวละคร · บันทึกการต่อสู้ข้างปุ่มมุมซ้าย 2 บรรทัดล่าสุด · ปาร์ตี้แถวเดียวใต้ปุ่มออโต้
     แผงคำสั่งแบบย่อ: ปุ่มหลัก 7 ปุ่มแถวเดียว · รอบ/เวลาแถวเดียวกับช่องลัด → ลานต่อสู้สูงขึ้น (fieldBand ใน public/js/battle.js)
     จอแคบ (เช่น 667) ตรงกฎแนวตั้ง ≤ 700 ใน scene.css ด้วย จึงกำหนดค่าที่ทับกันให้ครบ */
  #battle-ui .bt-autocfg { left: var(--bt-cg); top: calc(var(--bt-cg) * 2 + var(--bt-cb)); }
  #battle-ui .bt-log, #battle-ui.has-hb .bt-log { top: var(--bt-cg); bottom: auto; left: calc(var(--bt-cg) * 2 + var(--bt-cb)); right: auto; width: min(320px, 38vw); }
  #battle-ui .bt-log div:not(:nth-last-child(-n+2)) { display: none; }
  #battle-ui .bt-party { top: calc(var(--bt-cg) * 2 + var(--bt-cb)); right: var(--bt-cg); left: auto; width: min(200px, 30vw); display: flex; gap: 3px; }
  #battle-ui .bt-pm { padding: 2px 6px 3px; }
  #battle-ui .bt-pm-name { margin-bottom: 1px; }
  #battle-ui .bt-cmd, #battle-ui .bt-cmd.wide { width: min(640px, calc(100vw - 212px - var(--safe-l) - var(--safe-r))); bottom: 8px; padding: 5px 8px 6px; }   /* เว้นปุ่มแชท (กว้างสุด ~93) ทั้งสองข้าง */
  #battle-ui .bt-cmd.on { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'sub sub' 'main main' 'head hb'; column-gap: 12px; align-items: center; }
  #battle-ui .bt-sub { grid-area: sub; }
  #battle-ui .bt-main { grid-area: main; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  #battle-ui .bt-main button { min-height: 40px; padding: 2px 1px 3px; gap: 0; }
  #battle-ui .bt-main button b { font-size: 15px; line-height: 1.05; }
  #battle-ui .bt-main button span { font-size: 12px; line-height: 1.15; }
  #battle-ui .bt-head { grid-area: head; margin: 5px 0 0; }
  #battle-ui .bt-timer { min-width: 0; }
  #battle-ui .bt-cmd .hb { grid-area: hb; margin-top: 5px; }
  #battle-ui .bt-cmd .hb-slot { width: 36px; height: 36px; }
  #battle-ui .bt-cmd .hb-slot .sk-img, #battle-ui .bt-cmd .hb-slot .item-img { width: 28px; height: 28px; }
}

/* ---------------------------------------------------------------- 5) คำแนะนำติดตั้งแอป (เฉพาะหน้าเข้าสู่ระบบบนมือถือ) */
.pwa-tip {
  position: fixed; z-index: 150; left: 50%; bottom: calc(34px + var(--safe-b));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'img txt x'; align-items: center; column-gap: 10px; row-gap: 6px;
  width: max-content; max-width: min(440px, calc(100vw - 20px - var(--safe-l) - var(--safe-r)));
  padding: 8px 6px 8px 8px; transform: translateX(-50%);
  font: 13px/1.4 'Sarabun', 'Leelawadee UI', 'Tahoma', sans-serif; color: #f3e6c8;
  background: linear-gradient(180deg, rgba(42, 32, 23, .96), rgba(21, 16, 12, .96));
  border: 1px solid #c9a45c; border-radius: 10px; box-shadow: 0 0 0 1px #000, 0 8px 24px rgba(0, 0, 0, .6);
  animation: pwa-tip-in .35s ease-out;
}
.pwa-tip.has-go { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'img txt go x'; }
.pwa-tip img { grid-area: img; width: 40px; height: 40px; border-radius: 9px; }
.pwa-tip-txt { grid-area: txt; display: flex; flex-direction: column; min-width: 0; }
.pwa-tip-txt b { font: 600 13.5px 'Kanit', 'Leelawadee UI', sans-serif; color: #f0d28a; }
.pwa-tip-txt span { color: #d8c8a8; }
.pwa-tip button { font-family: 'Kanit', 'Leelawadee UI', sans-serif; cursor: pointer; }
.pwa-tip-go { grid-area: go; min-height: 38px; padding: 0 12px; font-size: 13px; font-weight: 600; color: #fff4dc; white-space: nowrap; background: linear-gradient(180deg, #b63c2f, #761f1f); border: 1px solid #c9a45c; border-radius: 7px; }
.pwa-tip-x { grid-area: x; align-self: start; width: 30px; height: 30px; padding: 0; font-size: 14px; color: #b3a283; background: none; border: 0; border-radius: 6px; }
.pwa-tip-x:hover, .pwa-tip-x:active { color: #f3e6c8; background: rgba(255, 255, 255, .08); }
@keyframes pwa-tip-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* จอแคบ หรือแนวนอนจอเตี้ย: ปุ่มติดตั้งลงไปแถวล่าง */
@media (max-width: 480px), (max-height: 500px) {
  .pwa-tip.has-go { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'img txt x' 'img go go'; }
  .pwa-tip-go { justify-self: start; }
}
/* แนวนอนจอเตี้ย: มุมซ้ายล่าง ใต้โลโก้ (ฟอร์มอยู่ขวา) */
@media (max-height: 500px) and (min-width: 600px) {
  .pwa-tip { left: calc(12px + var(--safe-l)); bottom: calc(10px + var(--safe-b)); max-width: min(360px, 44vw); transform: none; animation: none; }
}

/* ---------------------------------------------------------------- 6) แอป iOS/Android (Capacitor): ช่องตั้งที่อยู่เซิร์ฟเวอร์ในหน้าเข้าสู่ระบบ */
.srv-box { margin: 0 22px 10px; padding-top: 8px; border-top: 1px dashed rgba(201, 164, 92, .25); }
.srv-line { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 34px; padding: 0 4px; font: 400 12.5px var(--font-h); color: var(--muted); background: none; border: 0; cursor: pointer; text-align: left; }
.srv-line .ico { width: 15px; height: 15px; color: var(--gold); }
.srv-line b { flex: 1; min-width: 0; overflow: hidden; font-weight: 500; color: var(--cream); white-space: nowrap; text-overflow: ellipsis; }
.srv-line em { font-style: normal; color: var(--gold); text-decoration: underline; }
.srv-form { display: flex; flex-direction: column; gap: 6px; }
.srv-row { display: flex; gap: 6px; }
.srv-row .field { flex: 1; min-width: 0; }
.srv-row .btn { flex: none; padding: 0 14px; }