/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * UI_ARCHITECTURE — จอสัมผัส (มือถือ + แท็บเล็ต) แนวนอนอย่างเดียว · 1 ต.ค. (ผู้ใช้อนุมัติแผน)
 * ไฟล์นี้ + ui-root.js เป็นเจ้าของ layout จอสัมผัส "ที่เดียว" · โหลดท้ายสุด
 *
 *   ชั้น (ห้ามตั้ง z-index เองนอกตารางนี้):  HUD 100 · Screen 200 · Popup 300 · Tutorial 400 · System 500
 *   Safe Area:  --sa-t/r/b/l (ติ่งกล้อง/แถบโฮม) — ทุกโซน/ทุกชั้นเว้นตามนี้ ไม่มีตัวเลขรายเครื่อง
 *   ขนาด:      --ui (ui-root.js · ความสูงจอ/390 หนีบ 0.85–1.5) — ใช้ zoom กับทั้งโซน แท็บเล็ตขยาย จอเตี้ยหด
 *   HUD:       5 โซนมุม (.hud-zone) — ลูกเรียงด้วย flex จึงทับกันไม่ได้ · กฎ ".hud-zone > *" ปิดตำแหน่ง fixed เดิมทุกไฟล์
 *              ซ้ายบน: การ์ดตัวละคร → ชิปน้ำหนัก → ตัวติดตามเควสต์ · บนกลาง: ป้ายมอน + ปุ่มเปลี่ยน + หลอดบอส
 *              ขวาบน: มินิแมพ → ปาร์ตี้ · ซ้ายล่าง: เมนู/แชท → จอย · ขวาล่าง: ปุ่มต่อสู้
 *              เปิดเมนู/หน้าจอ HUD ไม่ขยับ
 *   เพิ่มชิ้น HUD ใหม่: ใส่ selector ใน ZONES (ui-root.js) — ห้ามตั้ง position/top/left เองในไฟล์อื่น
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --z-hud: 100; --z-screen: 200; --z-popup: 300; --z-tut: 400; --z-sys: 500; }
html.touch-ui {
  --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px);
  --zgap: 6px;
}
.sa-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }

/* ── HUD: โซนมุม ───────────────────────────────────────────────────────────────────────────── */
.hud-zone { display: none; }
html.touch-ui .hud-zone {
  position: fixed; z-index: var(--z-hud); display: flex; gap: var(--zgap); pointer-events: none; zoom: var(--ui, 1);
}
/* :is(#…) ให้น้ำหนัก id — ชนะกฎเก่าที่เขียนแบบ html.touch-ui.land body #goal { left:128px !important } */
html.touch-ui body #hud .hud-zone :is(#basic, #goal, #target, #tgt-switch, #boss-bar, #cer-bar, #mapbox, #party-hud, #circle-hud, #fabs, #touch-pad, #touch-acts, #follow-badge) {
  position: relative !important; inset: auto !important; transform: none !important; margin: 0 !important;
  flex: none; pointer-events: auto; z-index: auto !important;
}
/* แผงเป้าหมายตอนกาง = แผงชั่วคราว ต้องอยู่เหนือจอย/ปุ่มในโซนอื่น */
html.touch-ui .hz-tl:has(#goal:not(.min)) { z-index: calc(var(--z-hud) + 1); }
html.touch-ui .hz-row { display: flex; flex-direction: row; align-items: center; gap: var(--zgap); pointer-events: none; }
html.touch-ui .hz-row > * { pointer-events: auto; }
html.touch-ui .hz-tl { left: calc((var(--sa-l) + 6px) / var(--ui, 1)); top: calc((var(--sa-t) + 4px) / var(--ui, 1)); flex-direction: column; align-items: flex-start; }
html.touch-ui .hz-tr { right: calc((var(--sa-r) + 6px) / var(--ui, 1)); top: calc((var(--sa-t) + 6px) / var(--ui, 1)); flex-direction: column; align-items: flex-end; }
/* บนกลาง: ช่องระหว่างการ์ดตัวละครกับปุ่ม/มินิแมพขวาบน (ขอบจริงที่ ui-root ประกาศ --hz-*) · ออฟเซ็ตหาร --ui เพราะ zoom คูณให้อีกที */
html.touch-ui .hz-tc { top: calc((var(--sa-t) + 6px) / var(--ui, 1)); left: calc((var(--hz-tl-r, 240px) + 8px) / var(--ui, 1)); right: calc((var(--hz-tr-l, 240px) + 8px) / var(--ui, 1));
  flex-direction: column; align-items: center; }
html.touch-ui .hz-tc > .hz-row { flex-wrap: nowrap; justify-content: center; max-width: 100%; }
html.touch-ui body #hud .hz-tc #target { flex: 0 1 380px; max-width: 380px !important; width: auto !important; min-width: 0; }   /* จอแคบ: ป้ายหดได้ ปุ่ม "เปลี่ยน" อยู่บรรทัดเดียวกัน */
/* หลอดบอส: แถวของตัวเองใต้ป้ายมอน · กว้างไม่เกินช่องกลาง (เดิมแถวเดียวกัน ป้ายถูกบีบเหลือ 19px · หลอดทับปุ่มเมนู · ผู้ใช้ 2 ต.ค.) */
html.touch-ui body #hud .hz-tc > #boss-bar { width: min(420px, 100%) !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
html.touch-ui body #hud .hz-tc > #cer-bar { width: min(420px, 100%) !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
/* มินิแมพ: ป้ายชื่อแผนที่+พิกัดเป็นแถบบางบรรทัดเดียวชิดล่าง — เดิมกล่องดำสองบรรทัดบังแผนที่เกือบหมด (ผู้ใช้ 2 ต.ค.: "ปุ่มแผนที่โดนบัง") */
html.touch-ui body #hud #mapbox #zone-name {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; transform: none !important;
  margin: 0 !important; padding: 1px 4px !important; border-radius: 0 0 6px 6px !important; background: rgba(12, 18, 24, .62) !important;
  font: 600 10.5px/1.35 var(--font-head, inherit) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; max-width: none !important; width: auto !important;
}
html.touch-ui body #hud #mapbox #zone-name::before { content: none !important; }
html.touch-ui .hz-bl { left: calc((var(--sa-l) + 8px) / var(--ui, 1)); bottom: calc((var(--sa-b) + 10px) / var(--ui, 1)); flex-direction: column; align-items: flex-start; gap: 10px; }
html.touch-ui .hz-br { right: calc((var(--sa-r) + 10px) / var(--ui, 1)); bottom: calc((var(--sa-b) + 10px) / var(--ui, 1)); flex-direction: column; align-items: flex-end; }
/* ปุ่มต่อสู้วางเป็นวงโค้งด้วยตำแหน่ง absolute ภายในกล่องเอง — กล่องต้องมีขนาดจริงให้โซนจับมุมได้ */
html.touch-ui body #hud .hz-br > #touch-acts { width: 230px; height: 250px; }
html.touch-ui body #hud .hud-zone #fabs { display: flex !important; flex-direction: row !important; gap: 12px; align-self: flex-start; }
html.touch-ui .hz-tr > .hz-row { align-items: flex-start; }
html.touch-ui .hud-zone > [hidden] { display: none !important; }
/* การ์ดตัวละครวัดขนาดภายในด้วย container query (cqw) — ต้องมีความกว้างตายตัวของตัวเอง ไม่งั้นใน flex ยืด/หดผิด */
html.touch-ui body #hud .hz-tl > #basic { width: 216px !important; height: auto !important; min-height: 0 !important; max-height: none !important; }

/* ── แนวตั้ง: ไม่รองรับ — หน้าหมุนเครื่อง (ชั้น System) ───────────────────────────────────────── */
#rotate-gate { position: fixed; inset: 0; z-index: var(--z-sys); display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle at 50% 40%, #2f6f73, #173a3d); color: #fff8e6; text-align: center; }
#rotate-gate[hidden] { display: none; }
#rotate-gate .rg-box { max-width: 320px; display: grid; justify-items: center; gap: 12px; }
#rotate-gate b { font: 700 20px/1.3 var(--font-head, inherit); color: #ffe39a; }
#rotate-gate p { margin: 0; font-size: 14px; line-height: 1.55; opacity: .9; }
#rotate-gate .rg-phone { width: 54px; height: 92px; border: 4px solid #ffe39a; border-radius: 12px; animation: rgTurn 2.2s ease-in-out infinite; }
@keyframes rgTurn { 0%, 25% { transform: rotate(0deg); } 55%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { #rotate-gate .rg-phone { animation: none; transform: rotate(-90deg); } }
/* ฉากหลังหน้าหมุน: ซ่อน HUD ทั้งชั้น (ไม่ต้องคำนวณ layout แนวตั้ง) */
html.touch-ui.touch-portrait #hud, html.touch-ui.touch-portrait #tut { visibility: hidden; }

/* ── Screen: เมนูหลัก = แผงเต็มกว้างชิดล่าง ในชั้น Screen (HUD ไม่ขยับ · ปุ่มเมนู/แชทมุมขวาบนยังกดปิดได้) ── */
html.touch-ui.menu-open body #menu {
  position: fixed !important; z-index: var(--z-screen) !important; transform: none !important;
  left: calc(var(--sa-l) + 6px) !important; right: calc(var(--sa-r) + 6px) !important; width: auto !important; max-width: none !important;
  bottom: calc(var(--sa-b) + 6px) !important; top: auto !important;
  max-height: calc(100dvh - var(--hz-tr-b, 100px) - var(--sa-b) - 14px) !important; overflow-y: auto;
}
/* ── Screen Shell: ทุกหน้าต่างบนจอสัมผัสใช้โครงเดียวกัน (เฟส 5 · 1 ต.ค.) ───────────────────────────────
 * เดิม: แต่ละหน้ากว้างไม่เท่ากัน (420/520px) วางชิดขวาทับมินิแมพ · สมุดผจญภัยเต็มจอมุดใต้ติ่งกล้อง
 * ตอนนี้: หน้าหลัก (ระดับ a) = เต็มพื้นที่ Safe Area · หน้ารอง (ระดับ b: ปาร์ตี้ อันดับ บอส เควส คุย NPC) = แผงกลางจอ กว้างไม่เกิน 600
 *   หัว (ไอคอน + ชื่อ + ปิด) เหมือนกันทุกหน้า · เนื้อในเลื่อนเองในกรอบ · ฉากหลังมืด แตะ = ย้อนกลับ (Router.back)
 *   เปิดได้ทีละหน้า (ui-root.js makeRouter ห่อ ui.open) · HUD ไม่ขยับ แค่ถูกบังด้วยชั้น Screen */
html.touch-ui body #windows .win[data-win]:not([hidden]) {
  position: fixed !important; z-index: var(--z-screen) !important; transform: none !important; translate: none !important; margin: 0 !important;
  left: calc(var(--sa-l) + 8px) !important; right: calc(var(--sa-r) + 8px) !important;
  top: calc(var(--sa-t) + 6px) !important; bottom: calc(var(--sa-b) + 6px) !important;
  width: auto !important; height: auto !important; min-width: 0 !important; max-width: none !important; max-height: none !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important;
}
html.touch-ui body #windows .win[data-win][data-level="b"]:not([hidden]) {
  left: max(calc(var(--sa-l) + 8px), calc(50% - 300px)) !important; right: max(calc(var(--sa-r) + 8px), calc(50% - 300px)) !important;
}
html.touch-ui body #windows .win:not([hidden]) > header { flex: none; }
html.touch-ui body #windows .win:not([hidden]) > .body { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow: auto; }
html.touch-ui body #windows .win:not([hidden]) > .foot:not([hidden]) { flex: none; }
/* เงาเก่าของแผ่นสไลด์ (ui-skin.js #sheet-scrim) ปิดบนจอสัมผัส — #screen-dim ทำแทนแล้ว
 *   ⚠️ บั๊ก 2 ต.ค. (ผู้ใช้: "เปิดปิดคลัง/อัปสกิลไปมา มีเงาค้าง กดอะไรก็ปิด"): เงาเก่าตั้ง z = ตัวนับหน้าต่าง − 1 ซึ่งเพิ่มทุกครั้งที่เปิด
 *   เปิดไปเรื่อย ๆ จนเกิน 200 (ชั้น Screen) เงาลอยทับหน้าต่าง แตะตรงไหน = แตะเงา = ปิดหน้าต่าง (ทำซ้ำได้ใน tools/check-hud-layout.mjs) */
html.touch-ui #sheet-scrim { display: none !important; }
#screen-dim { display: none; }
html.touch-ui #screen-dim { position: fixed; inset: 0; z-index: calc(var(--z-screen) - 1); background: rgba(14, 22, 30, .45); }
html.touch-ui #screen-dim[hidden] { display: none; }
html.touch-ui:not(:has(#windows .win:not([hidden]))) #screen-dim { display: none; }
html.touch-ui:has(#windows .win:not([hidden])) #screen-dim { display: block; }

/* ── เนื้อในหน้าจอบนจอเตี้ย (แนวนอน ≤ 520px สูง): แท็บย่อยเป็นคอลัมน์ซ้าย แทนที่จะกินแถวบน ──
 *   กระเป๋า: เดิมแท็บสองแถว + คำแนะนำท้ายสองบรรทัด → เห็นของแถวเดียว (1 ต.ค.) */
html.touch-ui #windows .win[data-win="gear"] .gear-tabs button { min-height: 38px !important; padding-block: 4px !important; }
@media (max-height: 520px) {
  html.touch-ui #windows .win[data-win="gear"] .inv { display: grid !important; grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 8px; }
  html.touch-ui #windows .win[data-win="gear"] .inv > .vtabs { display: flex !important; flex-direction: column !important; gap: 6px; grid-row: 1 / span 4; }
  html.touch-ui #windows .win[data-win="gear"] .inv > .vtabs button { min-height: 40px !important; width: 100%; }
  html.touch-ui #windows .win[data-win="gear"] .inv > :not(.vtabs) { grid-column: 2; min-width: 0; }
  html.touch-ui #windows .win[data-win] .bag-hint { display: none !important; }
}

/* แชทตอนเปิด = ชั้น Screen (เดิม z 18 ต่ำกว่า HUD 100 → การ์ดโปรไฟล์/ชิป/แถบเป้าหมายทับช่องแชท · ผู้ใช้ 1 ต.ค.)
 *   แผงแชทอยู่ฝั่งซ้าย ปุ่มแชทมุมขวาบน (โซน HUD) ยังกดปิดได้ */
html.touch-ui.chat-open body #hud #chat { z-index: var(--z-screen) !important; }

/* อันดับ (จอเตี้ย): สองคอลัมน์ — แท่น 3 อันดับซ้าย · รายชื่อ + "อันดับของคุณ" ขวา (1 ต.ค. ผู้ใช้: "ไม่เห็นแสดง profile 3 อันดับ")
 *   เดิมซ่อนแท่นบนแนวนอนเพราะแผงเตี้ยจนแท่นบังรายชื่อหมด — ตอนนี้หน้าใช้เต็มความกว้าง จึงวางข้างกันได้ */
@media (max-height: 520px) {
  html.touch-ui body #windows .win[data-win="rank"][data-level]:not([hidden]) { left: calc(var(--sa-l) + 8px) !important; right: calc(var(--sa-r) + 8px) !important; }
  html.touch-ui body #windows .win[data-win="rank"] > .body:has(> .podium) {
    display: grid !important; grid-template-columns: minmax(250px, 40%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 12px; overflow: hidden !important;
  }
  html.touch-ui body #windows .win[data-win="rank"] > .body > .rk-tabs { grid-column: 1 / -1; }
  html.touch-ui body #windows .win[data-win="rank"] > .body > .podium { display: grid !important; grid-column: 1; grid-row: 2 / span 2; align-self: center; padding-top: 26px; }
  html.touch-ui body #windows .win[data-win="rank"] > .body > .rk-list { grid-column: 2; grid-row: 2; min-height: 0; overflow-y: auto; }
  html.touch-ui body #windows .win[data-win="rank"] > .body > .rk-me { grid-column: 2; grid-row: 3; }
}

/* หน้าที่สร้างชั้นของตัวเอง (ไม่ผ่าน ui.makeWin) — เข้าชั้น Screen/Popup ตามตาราง · เนื้อในเว้นติ่งกล้อง
 *   เดิม ร้านเพชร z 60 · แผนที่ใหญ่ z 70 ต่ำกว่า HUD → จอย/ปุ่มต่อสู้ลอยทับหน้า (1 ต.ค.) */
html.touch-ui .wm-wrap:not([hidden]) { z-index: var(--z-screen) !important; }   /* แผนที่โลก (worldmap.js) — เหนือ HUD (เดิม z 90) */
html.touch-ui #gem-shop:not([hidden]), html.touch-ui #bigmap:not([hidden]) {
  z-index: var(--z-screen) !important; box-sizing: border-box;
  padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l) !important;
}
html.touch-ui :is(.icard, .sheet, dialog[open]) { z-index: var(--z-popup) !important; }
/* ป้ายแจ้ง (ui.toast) ชั้น Popup — เดิม z 40 อยู่ใต้หน้าต่าง (Screen 200) คำแจ้งระหว่างเปิดหน้าต่างจึงมองไม่เห็น (ตลาด 4 ต.ค.) · ไม่รับแตะ */
html.touch-ui body #toast { z-index: var(--z-popup); }
/*   ระหว่างเปิดหน้าต่าง: ย้ายลงล่าง (เหนือแถบปุ่มท้ายหน้าต่าง) + พื้นทึบ — ตัวอักษรขอบเหลืองบนกระดาษครีมอ่านไม่ออก และด้านบนชนแถบบทสอน */
html.touch-ui:has(#windows .win:not([hidden])) body #toast { top: auto; bottom: calc(var(--sa-b, 0px) + 66px); max-width: min(86vw, 640px); padding: 8px 16px;
  border-radius: 12px; background: rgba(40, 28, 14, .9); color: #fff6dc; -webkit-text-stroke: 0; text-shadow: none; font-size: 15px; line-height: 1.4; }

/* ── ชั้นอื่น ──────────────────────────────────────────────────────────────────────────────── */
html.touch-ui #windows .win { z-index: var(--z-screen) !important; }
html.touch-ui #tut { position: fixed; inset: 0; z-index: var(--z-tut); pointer-events: none; }
html.touch-ui #tut :is(.tut-top, .tut-card) { pointer-events: auto; }
/* บทสอนอ่านพื้นที่ HUD ที่ ui-root ประกาศ (--hz-*) แล้ววางตัวเองในช่องกลาง — ไม่ไปขยับ HUD */
html.touch-ui #tut :is(.tut-top, .tut-card.dock) { --gap-mid: calc((var(--hz-tl-r, 240px) + 100vw - var(--hz-tr-l, 240px)) / 2); }   /* กึ่งกลางช่องว่าง ไม่ใช่กึ่งกลางจอ */
html.touch-ui #tut .tut-top { top: calc(var(--hz-tc-b, 0px) + 6px) !important; bottom: auto !important; left: var(--gap-mid) !important; transform: translateX(-50%) !important;
  max-width: calc(100vw - var(--hz-tl-r, 240px) - var(--hz-tr-l, 120px) - 16px); }
html.touch-ui #tut .tut-card.dock { top: calc(var(--hz-tc-b, 0px) + 56px) !important; bottom: auto !important; left: var(--gap-mid) !important; transform: translateX(-50%) !important;
  max-width: calc(100vw - var(--hz-tl-r, 240px) - var(--hz-tr-l, 120px) - 16px); }

/* เปิดแชท (แผงซ้าย min(62vw,480px) — ui-polish.css · ชั้น Screen) — บทสอน (ชั้น 400) หลบไปอยู่ช่องว่างฝั่งขวาของแผง ไม่ซ่อน (ต้องอ่านได้ต่อ)
 *   ชิดซ้ายของช่องว่าง · แถบความคืบหน้าย่อเหลือ "n / N" + ปุ่มข้าม · เดิมมาสคอตลอยทับ #chat-log (check-hud-layout "เปิดแชท") */
html.touch-ui.land.chat-open #tut :is(.tut-top, .tut-card.dock) { --tl-r: max(var(--hz-tl-r, 240px), calc(var(--sa-l, 0px) + min(62vw, 480px) + 8px));
  left: var(--tl-r) !important; transform: none !important; max-width: calc(100vw - var(--tl-r) - var(--sa-r, 0px) - 8px); box-sizing: border-box; }
html.touch-ui.land.chat-open #tut .tut-top { padding-left: 10px; gap: 6px; }
html.touch-ui.land.chat-open #tut .tut-top .tut-bar { display: none; }
html.touch-ui.land.chat-open #tut .tut-card.dock { width: auto; }

/* ป้ายเต็มจอ (ui-root.js) — ชั้น System · บนกลาง ใต้ป้ายมอน (ล่างกลางมีปุ่มไม้ตาย/สลับชุด) */
#fs-tip { position: fixed; z-index: var(--z-sys); left: calc((var(--hz-tl-r, 240px) + 100vw - var(--hz-tr-l, 240px)) / 2); translate: -50% 0; top: calc(var(--hz-tc-b, 0px) + 8px); display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - var(--hz-tl-r, 240px) - var(--hz-tr-l, 240px) - 16px); padding: 6px 6px 6px 12px; border-radius: 12px; background: rgba(16, 24, 32, .8); color: #fff;
  border: 1px solid rgba(255, 255, 255, .18); font: 600 12.5px/1.4 var(--font-head, inherit); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
#fs-tip[hidden] { display: none; }
/* มีหน้าจอ/แผนที่/เมนู/แชทเปิดอยู่ = ไม่โชว์ป้ายเต็มจอ (เคยทับหัวหน้าต่างแผนที่โลก) */
html:is(.menu-open, .chat-open) #fs-tip, html:has(#windows .win:not([hidden]), .wm-wrap:not([hidden]), #bigmap:not([hidden]), #gem-shop:not([hidden])) #fs-tip { display: none !important; }
#fs-tip b { color: #ffe39a; }
#fs-tip button { flex: none; min-height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); color: #fff; font: inherit; }
#fs-tip [data-fs] { background: linear-gradient(#3f8584, #2f6f73); border-color: #5fa3a1; }
#fs-tip [data-x] { min-width: 36px; padding: 0; }

/* หน้าสอนเพิ่มลงหน้าจอโฮม (ui-root.js showInstallGuide) — ชั้น System · ภาพซ้าย ข้อความขวา (แนวนอน) */
#install-guide { position: fixed; inset: 0; z-index: var(--z-sys); display: grid; place-items: center; background: rgba(10, 16, 22, .6);
  padding: calc(var(--sa-t, 0px) + 8px) calc(var(--sa-r, 0px) + 8px) calc(var(--sa-b, 0px) + 8px) calc(var(--sa-l, 0px) + 8px); }
#install-guide[hidden] { display: none; }
#install-guide .ig-box { width: min(760px, 100%); max-height: 100%; overflow: auto; border-radius: 16px; background: #fffaf0; border: 2px solid #e2cc98; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); color: #3e2c16; }
#install-guide header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 16px; border-bottom: 1px solid #ecdcb6; font: 700 16px var(--font-head, inherit); }
#install-guide header button { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 20px; color: #6b5530; }
#install-guide .ig-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; padding: 12px 16px 14px; align-items: center; }
#install-guide .ig-pic { border-radius: 12px; overflow: hidden; background: #2b2d33; aspect-ratio: 32 / 15; }
#install-guide .ig-pic :is(svg, img) { display: block; width: 100%; height: 100%; object-fit: contain; }
#install-guide .ig-dots { display: flex; gap: 6px; margin-bottom: 8px; }
#install-guide .ig-dots i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font-head, inherit); font-style: normal; background: #efe4c9; color: #8a7350; }
#install-guide .ig-dots i.on { background: #2f6f73; color: #fff; } #install-guide .ig-dots i.ok { background: #9fcf8f; color: #fff; }
#install-guide .ig-t { display: block; font: 700 18px/1.3 var(--font-head, inherit); color: #2f6f73; }
#install-guide .ig-d { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; }
#install-guide .ig-nav { display: flex; gap: 8px; justify-content: flex-end; }
#install-guide .ig-nav button { min-height: 44px; padding: 0 16px; border-radius: 11px; border: 1.5px solid #e2cc98; background: #fbf3e0; color: #5a4630; font: 700 14px var(--font-head, inherit); }
#install-guide .ig-nav button.main { border-color: #2f6f73; background: linear-gradient(#3f8584, #2f6f73); color: #fff; }
#install-guide .ig-nav button[hidden] { display: none; }
@media (orientation: portrait) { #install-guide .ig-main { grid-template-columns: 1fr; } }

/* ชิปน้ำหนักบนจอสัมผัส = แถวของตัวเองใต้การ์ดตัวละคร (ui-root.js placeWeight) · โชว์เฉพาะ 70%+ (weight-hud.js) */
html.touch-ui body .hz-tl > #wt-chip { position: relative !important; inset: auto !important; transform: none !important; margin: 0 !important; z-index: auto !important;
  pointer-events: auto; min-height: 28px; padding: 2px 8px 2px 5px; gap: 4px; font-size: 12px; }
html.touch-ui body .hz-tl > #wt-chip .wt-bar { width: 30px; }
html.touch-ui body .hz-tl > #wt-chip em { display: none; }

/* ═══ รีวิว HUD มือถือ (2 ต.ค.) — กลางจอโล่งขึ้น · ข้อมูลที่ไม่ต้องดูตลอดโชว์เมื่อจำเป็น · ปุ่มต่อสู้เป็นวงเดียว ═══════════════
 * สไตล์ภาพ (กรอบ/ไอคอน/สี) ไม่เปลี่ยน — เปลี่ยนแค่ตำแหน่ง ขนาด และเวลาที่โชว์
 *   ชิปเพชร: ไม่โชว์บนจอสัมผัส (ดูในเมนู "ร้านเพชร" · ได้เพชรเพิ่มเด้ง toast — gem-shop.js)
 *   ชิปน้ำหนัก: 70%+ เท่านั้น (weight-hud.js) · แต้มสถานะ/สกิลค้าง (Lv 15+): ไอคอน+ตัวเลข (ui.js updateGoal .chip)
 */
html.touch-ui body #gem-chip { display: none !important; }
/* การ์ดตัวละครเล็กลง 10% — ตัวเลข HP/SP ยังอ่านได้ (ตัวอักษรเล็กสุดในการ์ด ~11px) */
html.touch-ui body #hud .hz-tl > #basic { zoom: .9; }

/* เป้าหมายแบบไอคอน: แต้มที่ค้างแจก — ไอคอนหน้านั้น + ป้ายตัวเลข แตะ = เปิดหน้า */
html.touch-ui body #hud .hz-tl > #goal.chip { width: 44px !important; min-width: 0 !important; height: 44px !important; padding: 0 !important;
  border-radius: 12px !important; display: grid !important; place-items: center; overflow: visible !important; }
html.touch-ui body #hud .hz-tl > #goal.chip > :not(.body), html.touch-ui body #hud .hz-tl > #goal.chip .body > :not(#goal-icon) { display: none !important; }
html.touch-ui body #hud .hz-tl > #goal.chip .body { display: contents !important; }
html.touch-ui body #hud .hz-tl > #goal.chip .body::before, html.touch-ui body #hud .hz-tl > #goal.chip .body::after, html.touch-ui body #hud .hz-tl > #goal.chip::before { content: none !important; display: none !important; }
html.touch-ui body #hud .hz-tl > #goal.chip #goal-icon { margin: 0 !important; width: 32px !important; height: 32px !important; }
html.touch-ui body #hud .hz-tl > #goal.chip #goal-icon img { width: 100%; height: 100%; object-fit: contain; }
html.touch-ui body #hud .hz-tl > #goal.chip::after { content: attr(data-n) !important; display: block !important; position: absolute !important; left: auto !important; bottom: auto !important; right: -8px !important; top: -8px !important; translate: none !important; transform: none !important; min-width: 20px; height: 20px; padding: 0 5px;
  box-sizing: border-box; border-radius: 10px; background: #d9503a; border: 1.5px solid #fff3d6; color: #fff; font: 700 11px/17px var(--font-head, inherit); text-align: center; }

/* ── กลุ่มปุ่มต่อสู้: วงเดียวรอบปุ่มโจมตี ─────────────────────────────────────────────────────────
 * พิกัด right/bottom ภายในกล่อง #touch-acts (230×250 · มุมขวาล่างของโซน) · ศูนย์ปุ่มโจมตี (63,77)
 * ช่องสกิล 54px (≈70% ของปุ่มโจมตี 78) บนวงรัศมี 118 มุม 104°·72°·40°·8° (ห่างกัน 32° = ช่องว่าง 11px)
 *   right/bottom = ศูนย์ + 118×(cos,sin) − 27 · ไม้ตาย 52px ที่ (200,30) · แถบชุด [1 2 3] ซ้ายปุ่มโจมตีชิดล่าง
 *   เดิม: ช่องบนสุดสูง 240px จากขอบ · ไม้ตายลอยกลางจอล่าง · กล่อง "ชุด 1/3" 64×44 */
html.touch-ui body #hud .hz-br > #touch-acts > [data-attack] { right: 24px !important; bottom: 38px !important; }
html.touch-ui body #hud .hz-br > #touch-acts > [data-slot] { width: 54px !important; height: 54px !important; }
html.touch-ui body #hud .hz-br > #touch-acts > [data-slot="0"] { right: 7px !important;   bottom: 164px !important; }
html.touch-ui body #hud .hz-br > #touch-acts > [data-slot="1"] { right: 72px !important;  bottom: 162px !important; }
html.touch-ui body #hud .hz-br > #touch-acts > [data-slot="2"] { right: 126px !important; bottom: 126px !important; }
html.touch-ui body #hud .hz-br > #touch-acts > [data-slot="3"] { right: 153px !important; bottom: 66px !important; }
/* AUTO = ปุ่มรอง: เล็กกว่า อยู่ระหว่างปุ่มโจมตีกับช่องบนสุด (ห่างปุ่มโจมตี 6px · ช่องบนสุด 4px) */
html.touch-ui body #hud .hz-br > #touch-acts > [data-auto] { box-sizing: border-box !important; width: 42px !important; height: 42px !important; right: 18px !important; bottom: 118px !important; }
html.touch-ui body #hud .hz-br > #touch-acts > #ult-btn.touch { position: absolute !important; left: auto !important; top: auto !important; right: 174px !important; bottom: 4px !important;
  width: 52px !important; height: 52px !important; margin: 0 !important; z-index: 1 !important; }
/* แถบชุดสกิล [1 2 3] — เตี้ย 26px แต่พื้นที่กดสูง 40px (padding โปร่ง) · ชุดปัจจุบันเป็นสีประจำเกม */
html.touch-ui body #hud .hz-br > #touch-acts > [data-page] { box-sizing: border-box !important; right: 96px !important; bottom: 0 !important; width: 74px !important; height: 40px !important;
  padding: 7px 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; display: flex !important; gap: 0 !important; align-items: stretch; justify-content: center; }
html.touch-ui body #hud .hz-br > #touch-acts > [data-page] i { flex: 1; margin: 0 !important; display: grid; place-items: center; font: 700 12px/1 var(--font-head, inherit) !important; font-style: normal; padding: 0 !important; min-width: 0;
  opacity: 1 !important; color: #f3e8ce; background: rgba(28, 34, 42, .62); border: 1.5px solid #e2a648; border-left-width: 0; }
html.touch-ui body #hud .hz-br > #touch-acts > [data-page] i:first-child { border-left-width: 1.5px; border-radius: 9px 0 0 9px; }
html.touch-ui body #hud .hz-br > #touch-acts > [data-page] i:last-child { border-radius: 0 9px 9px 0; }
html.touch-ui body #hud .hz-br > #touch-acts > [data-page] i.on { background: linear-gradient(#3f8584, #2f6f73); color: #fff; }
/* ป้าย A (AUTO ใช้สกิลนี้) — โชว์เฉพาะตอนเปิด AUTO · เล็กลงชิดมุม */
html.touch-ui body #hud #touch-acts:not(:has([data-auto].on)) .auto-a { display: none !important; }
html.touch-ui body #hud #touch-acts .auto-a { width: 16px !important; height: 16px !important; font-size: 9.5px !important; right: -1px !important; top: -1px !important; }
/* กดแล้วยุบนิดเดียว */
html.touch-ui body #hud #touch-acts > button:active { scale: .94; }

/* แถบ EXP: บางลง ยกพ้นขอบ/แถบท่าทางของระบบ (เครื่องไม่มีแถบโฮม safe-area = 0 → เดิมติดขอบจอพอดี) */
html.touch-ui body #xp-strip { height: 4px; bottom: calc(env(safe-area-inset-bottom, 0px) + 3px); }

/* แถบเล็งสกิล (ui.js arm) ในโซนกลางบน (ui-root ZONES.tc) — กว้างไม่เกินช่องระหว่างการ์ดกับปุ่มขวาบน · ข้อความยาวตัด … · ✕ อยู่ในกรอบเสมอ */
html.touch-ui body #hud .hz-tc > #aim-bar.touch { position: relative !important; inset: auto !important; transform: none !important; margin: 0 !important;
  flex: none; pointer-events: auto; z-index: auto !important; animation: none;
  width: min(380px, 100%) !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
html.touch-ui body #hud .hz-tc > #aim-bar.touch .txt { min-width: 0; flex: 1 1 auto; overflow: hidden; }
html.touch-ui body #hud .hz-tc > #aim-bar.touch .txt > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.touch-ui body #hud .hz-tc > #aim-bar.touch .x { flex: none; }