/* =====================================================================
   เวอร์ชันมือถือ (2 ต.ค. จ๊อบ · หน้าร่าง tools/mockup/mobile.html) · จอกว้าง ≤ 820 px เท่านั้น บนคอมไม่เปลี่ยน
   1) แถบล่าง 5 ปุ่ม Trail / Village / Tower / Villagers / Menu ไอคอนอย่างเดียว เลือกอยู่ = ขาว อื่น = เทา (nav_*.svg)
      กดแล้วทั้งจอเป็นแผงนั้น (body.m-mode + section.m-off · setupMobile ใน ui.js)
   2) แถบบนติดด้านบน: โลโก้เล็ก + ทรัพยากร 5 ช่อง แตะแถบทรัพยากรกาง Dark Coin กับชาร์ม · Auto → หัวแผง Trail · Warp → หัวแผง Village
   3) การ์ดใบใหญ่: การ์ดอยู่บน (80%) ข้อมูลต่อลงมา เลื่อนลงดู
   5) หน้า Menu (แทน Log): Save 2×2 (Export / Import / New Game / Full screen) · การ์ดผู้สร้าง (ย้ายออกจากแถบบน) · Log ท้ายหน้า
   ===================================================================== */
.m-nav, .m-menu { display: none; }

@media (max-width: 820px) {
  html, body { height: auto; }
  body.m-mode main { padding-bottom: 74px !important; }
  /* จ๊อบ: ห้ามมีแถบเลื่อนซ้าย/ขวา · หน้ายาวเกินจอ แถบเลื่อนแนวตั้งกินที่ ~15 px แผงเดิมกว้างตายตัวเลยล้น 10 px
     → แผงยืดตามความกว้างจริง (ไม่เกิน 420) ขอบซ้ายขวา 8 · ถ้ายังมีอะไรล้น ตัดทิ้งไม่ให้เลื่อนข้าง */
  html:has(body.m-mode), body.m-mode { overflow-x: hidden; }
  body.m-mode main { grid-template-columns: minmax(0, 1fr) !important; width: 100%; max-width: 436px !important; box-sizing: border-box;
    padding-left: 8px !important; padding-right: 8px !important; }
  body.m-mode main > section { min-width: 0; max-width: 100%; box-sizing: border-box; }
  /* ฉากกว้างตายตัว 320 (+ขอบ) · มือถือจอแคบ 360 ลดขอบข้างให้ฉากพอดี */
  body.m-mode main { padding-left: 4px !important; padding-right: 4px !important; }
  body.m-mode main > section:not(#col-people) { padding-left: 4px !important; padding-right: 4px !important; }
  body.m-mode main > section > h2 { margin-left: -4px !important; margin-right: -4px !important; }
  body.m-mode main > section.m-off { display: none !important; }

  /* 1) แถบล่าง */
  body.m-mode .m-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; height: 60px; padding-bottom: env(safe-area-inset-bottom, 0);
    background: #050b13; border-top: 1px solid #12233a; }
  body.m-mode[data-zone="desert"] .m-nav { background: #0d0703; border-top-color: #2e1e0e; }
  .m-nav button { flex: 1; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-nav button img { width: 32px; height: 32px; opacity: .32; transition: opacity .15s; pointer-events: none; }
  .m-nav button.on img { opacity: 1; }
  body.dragging .m-nav button.drop-hover img { opacity: .75; }

  /* 2) แถบบน */
  body.m-mode #topbar { position: sticky; top: 0; z-index: 60; display: flex !important; flex-wrap: wrap; align-items: center; gap: 5px 6px; padding: 4px 6px !important; min-height: 0 !important; }
  body.m-mode #topbar h1 { margin: 0 !important; flex: 1 1 auto; line-height: 0; }
  body.m-mode #topbar #logo { height: 34px !important; width: auto !important; }
  body.m-mode #topbar .creator-mini { display: none !important; }
  body.m-mode #resources { order: 5; width: 100%; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px !important; margin: 0 !important; cursor: pointer; position: relative; }
  body.m-mode #resources .grp-sep { display: none !important; }
  body.m-mode #resources .res { width: auto !important; min-width: 0 !important; height: 26px !important; padding: 0 4px !important; gap: 2px !important; }
  body.m-mode #resources .res .ico { width: 14px !important; height: 14px !important; }
  body.m-mode #resources .res .res-amt { font-size: 11px !important; line-height: 11px !important; height: 11px !important; }
  body.m-mode #topbar:not(.m-open) #resources .grp-sep + .res + .res, body.m-mode #topbar:not(.m-open) #resources .res.charm { display: none !important; }
  body.m-mode #topbar:not(.m-open) #resources::after { content: '▾'; position: absolute; right: -2px; bottom: -11px; font-size: 10px; color: #9fbad2; }
  /* ปุ่มที่ย้ายไปหัวแผง */
  body.m-mode main > section > h2 { display: flex !important; align-items: center; gap: 6px; }
  body.m-mode .m-hbtn { margin-left: auto !important; height: 28px !important; font-size: 12px !important; padding: 0 8px 3px !important; letter-spacing: 0 !important; text-transform: none !important; }

  /* 3) การ์ดใบใหญ่: การ์ดบน ข้อมูลล่าง เลื่อนลง */
  body.m-mode .cv-ov { align-items: flex-start !important; overflow-y: auto; padding: 10px 0 24px; box-sizing: border-box; }
  body.m-mode .cv-box { flex-direction: column !important; align-items: center !important; gap: 0 !important; width: 100%; }
  body.m-mode .cv-cardslot { zoom: .8; }
  body.m-mode .cv-panel { width: calc(100% - 12px) !important; max-height: none !important; }

  /* 5) หน้า Menu */
  body.m-mode .m-menu { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .m-menu .m-h { font: 700 14px var(--pix, monospace); color: #e2f5ff; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
  body[data-zone="desert"] .m-menu .m-h { color: #fdebc6; }
  .m-menu .m-grid { display: grid; grid-template-columns: 116px 116px; gap: 8px 10px; }
  body.m-mode .m-menu .m-grid > button { width: 116px !important; min-width: 116px !important; max-width: 116px !important; height: 30px !important; margin: 0 !important; display: inline-flex !important; }
  body.m-mode .m-menu #btn-fullscreen { --img: url(../assets/ui/v2/ice_n.png); --img-h: url(../assets/ui/v2/ice_h.png); --img-p: url(../assets/ui/v2/ice_p.png);
    border-width: 6px 4px !important; border-image-width: 6px 4px !important; padding: 0 10px 4px !important; font-size: 13px !important; color: #eef7fd !important; }
  body.m-mode[data-zone="desert"] .m-menu #btn-fullscreen { --img: url(../assets/ui/v2/desert_n.png); --img-h: url(../assets/ui/v2/desert_h.png); --img-p: url(../assets/ui/v2/desert_p.png); color: #fff6e6 !important; }
  .m-menu .m-creator { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--in-bg, #0a1826); border: 2px solid var(--in-edge, #06101c);
    box-shadow: inset 1px 1px 0 var(--in-hi, #1d3a56); border-radius: 6px; text-decoration: none; }
  .m-menu .m-creator img { width: 48px; height: 48px; image-rendering: pixelated; }
  .m-menu .m-creator b { display: block; font: 13px var(--pix, monospace); color: #eef7fd; }
  .m-menu .m-creator span { font: 11px/1.4 var(--pix, monospace); color: #9fbad2; }
  .m-menu .m-creator i { font-style: normal; color: #e0b24c; }
  body.m-mode #col-log #log { max-height: 300px; overflow-y: auto; }
  body.m-mode #col-log .log-foot { display: none !important; }

  /* 4) นิ้ว: กดค้างที่การ์ดจิ๋วไม่ให้เบราว์เซอร์เด้งเมนูบันทึกรูป/เลือกข้อความ */
  body.m-mode .mc, body.m-mode .tc { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* จอแคบมาก (< 352 ที่ใช้ได้): ย่อฉากให้พอดีกรอบ ไม่ถูกตัดขอบขวา */
@media (max-width: 351px) {
  body.m-mode main > section .scene, body.m-mode #buildings .village-scene, body.m-mode #tower-scene { zoom: .94; }
}