/* ═══ มือถือแนวนอน ═══════════════════════════════════════════════════════
   ใช้เมื่อ html.touch-ui.land (ui-skin.js: จอสัมผัส และกว้างกว่าสูง)
   ผังจอตั้งวางของด้วย "ระยะจากขอบล่าง" ทั้งหมด — แชทตัวอย่างสูงจากล่าง 300px
   หน้าต่างเป็นแผ่นสไลด์จากล่างสูงสุด 340px ปุ่มกลมสูงจากล่าง 136px
   พอหมุนเป็นแนวนอน (สูงเหลือ 320–390px) ของพวกนั้นลอยขึ้นไปชนกล่อง HP
   และหน้าต่างเหลือที่ให้เนื้อหาแค่บรรทัดเดียว (กระเป๋าเห็นไอเท็มแถวเดียว · สถานะเห็นแค่ Str)
   ไฟล์นี้โหลดท้ายสุดและทุกกฎขึ้นต้นด้วย html.touch-ui.land จึงชนะกฎจอตั้งโดยไม่ต้องแก้ของเดิม */

/* ── ปุ่มกลม ☰ 💬 ⋯: เริ่มใต้กล่อง HP เสมอ ไม่ใช่นับจากขอบล่าง ──────────── */
/* ⚠️ เดิมตรึงไว้ที่ 80px ซึ่งพอดีกับกล่องที่มีแค่ชื่อ+HP+SP — พอมีแถบบัฟ กล่องสูงขึ้น
   แล้วปุ่มกลมขึ้นไปทับแถวบัฟแถวที่สอง · ui.js จึงวัดขอบล่างจริงของกล่องมาใส่ --hud-b ให้
   (ค่าสำรอง 80px ใช้ตอนหน้าเพิ่งโหลดและยังไม่มีใครวัด) */
html.touch-ui.land #fabs, html.touch-ui.land.hot-open #fabs { gap:6px;
}
html.touch-ui.land #fabs button{width:42px; height:42px; font-size:18px}

/* ── ตัวอย่างแชท 3 บรรทัด: ล่างกลาง ระหว่างจอยกับปุ่มสกิล ─────────────── */
html.touch-ui.land body #hud #chat #chat-log{
  left:calc(112px + env(safe-area-inset-left)); right:auto; width:min(40vw,360px);
  bottom:calc(8px + env(safe-area-inset-bottom)); max-height:52px; font-size:12px;
}

/* ── เปิดแชทเต็ม: แผงด้านซ้ายสูงเต็มจอ ───────────────────────────────── */
/* จอตั้งกางกล่องข้อความสูง 38vh เหนือแถบพิมพ์ — แนวนอนนั่นเหลือ 130px อ่านได้ 4 บรรทัด
   แผงข้างซ้ายสูงเต็มจอ อ่านได้ราว 12 บรรทัด และยังเห็นตัวละครทางขวา */
html.touch-ui.land.chat-open body #hud #chat{
  display:flex; flex-direction:column; position:fixed;
  left:env(safe-area-inset-left); right:auto; top:env(safe-area-inset-top);
  bottom:calc(env(safe-area-inset-bottom) + var(--kb,0px));
  width:min(52vw,440px); background:rgba(10,16,30,.72); border-right:1px solid #00000055;
}
html.touch-ui.land.chat-open body #hud #chat .chat-tabs{
  display:flex; position:static; order:1; flex:none; margin:6px 6px 0 58px;   /* 58px = เว้นให้ปุ่ม 💬 ที่ใช้ปิด */
  flex-wrap:nowrap; overflow-x:auto; gap:4px;
}
html.touch-ui.land.chat-open body #hud #chat .chat-tabs button{flex:none; min-height:36px; padding:0 10px; font-size:12px}
html.touch-ui.land.chat-open body #hud #chat #chat-log{
  order:2; position:static; flex:1 1 auto; min-height:0; width:auto; height:auto; max-height:none;
  margin:6px; overflow-y:auto; font-size:13px;
}
html.touch-ui.land.chat-open body #hud #chat .chat-bar{order:3; flex:none}
html.touch-ui.land.chat-open body #hud #chat #chat-new{order:2}
/* ปุ่ม 💬 ปิดแชทอยู่ในแผง: ย้ายขึ้นมุมบนซ้ายของแผง ไม่ไปนั่งกลางข้อความ */

/* ⚠️ กล่อง HP มี z สูงกว่าแผงแชท จึงถูกวาดทับแผง — ปุ่มปิดกับแถวแท็บไปนั่งบนชื่อผู้เล่น
   ระหว่างเปิดแชทย้ายไปฝั่งขวาใต้มินิแมพ ยังเห็นเลือดตัวเองตลอดโดยไม่ต้องปิดแชทก่อน */


/* ── หน้าต่างทุกบาน: แผงด้านขวาสูงเต็มจอ แทนแผ่นสไลด์จากล่าง ─────────── */
html.touch-ui.land body .win{
  left:auto !important; right:env(safe-area-inset-right);
  top:env(safe-area-inset-top) !important; bottom:env(safe-area-inset-bottom);
  width:min(60vw,480px) !important; max-height:none; height:auto;
  border-width:var(--fr) 0 var(--fr) var(--fr); padding-bottom:0;
}
html.touch-ui.land body .win:not([hidden]){animation:landIn .18s cubic-bezier(.2,.9,.3,1)}
html.touch-ui.land body .win.closing[hidden],
html.touch-ui.land body .win.closing{animation:landOut .14s ease-in forwards}
@keyframes landIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes landOut{to{transform:translateX(100%)}}
/* ขีด "ปัดลงเพื่อปิด" ของแผ่นจอตั้งไม่มีความหมายกับแผงข้าง */
html.touch-ui.land body .win > header::before{display:none}

/* กระเป๋า/สวมใส่: แถบแท็บสองชั้นกินที่ไปเกือบครึ่งแผง — บีบให้เตี้ยลง */
html.touch-ui.land body .gear-tabs button{min-height:34px; font-size:13px}
html.touch-ui.land body .vtabs button{min-height:34px}

/* ── ของเล็ก ๆ ที่บังเกมตอนจอเตี้ย ─────────────────────────────────── */
/* ปุ่ม ⤢ ของมินิแมพกินหนึ่งในสี่ของแผนที่ 90px */
html.touch-ui.land body #map-big{width:32px; height:32px; min-height:0}  /* 32 = ขั้นต่ำของ tools/check-mobile-hud */
/* ป้ายกลางจอ (เลเวลอัป ฯลฯ) เคยสูง 132px จากจอ 320 */
html.touch-ui.land #toast{font-size:20px; top:18%}

/* หน้าต่างเปิดอยู่ = แผงข้างขวาทับครึ่งจอ ตัวอย่างแชทล่างกลางจะไปมุดครึ่งตัวใต้แผง ซ่อนไปเลย */
html.touch-ui.land body:has(#windows .win:not([hidden])) #hud #chat #chat-log{visibility:hidden}

/* ── แผนที่เต็มจอ: แผนที่ซ้าย ปุ่มขวา ────────────────────────────────── */
/* จอตั้งเรียงหัว-แผนที่-ปุ่มซูมลงมา แนวนอนสูงไม่พอ แผนที่ล้นขอบล่างจนปุ่มซูมหายไปใต้จอ */
html.touch-ui.land body #bigmap{
  grid-template-columns:auto minmax(0,auto); grid-template-rows:auto auto 1fr;
  place-content:safe center; align-items:start; column-gap:18px; row-gap:10px;
  overflow-y:auto;   /* จอเตี้ยมาก คำอธิบายสีจุดล้นล่าง — ให้เลื่อนดูได้ ไม่ใช่หายไป */
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html.touch-ui.land body #bigmap-cv{
  grid-column:1; grid-row:1 / span 3;
  /* ความสูงต้องหักขอบปลอดภัยออกด้วย — เคยใช้ 100vh เต็ม แผนที่สูงเกินกล่อง ถูกจัดกลางจนหัว (ปุ่ม ✕) หลุดขอบบน y=-36 */
  --bm:min(calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 60vw);
  width:var(--bm); height:var(--bm);
}
html.touch-ui.land body .bm-head,
html.touch-ui.land body .bm-zoom,
html.touch-ui.land body .bm-hint{grid-column:2; margin:0}
html.touch-ui.land body .bm-zoom{flex-wrap:wrap}
html.touch-ui.land body .bm-hint{max-width:22ch}

/* ── แผ่นเมนู ☰ บนจอสัมผัส (ไม่ได้เป็นของแนวนอนอย่างเดียว แต่ต้องโหลดหลัง ui-mobile.css) ──
   เพิ่มปุ่มอันดับ + บอส เป็น 10 ปุ่ม: แนวตั้ง 4 คอลัมน์จะกลายเป็น 3 แถว (+52px ทับสนาม)
   5 คอลัมน์ยังคง 2 แถวเท่าเดิม · แนวนอนกว้างพอ เรียงแถวเดียวไปเลย */
html.touch-ui body #menu{grid-template-columns:repeat(5,minmax(0,1fr))}
html.touch-ui.land body #menu{grid-template-columns:repeat(10,minmax(0,1fr))}

/* แถวตั้งค่าในแผ่นเมนู ☰ (เฉพาะจอสัมผัส — จอคอมมีปุ่มชุดนี้ในแผงข้อมูลอยู่แล้ว) */
#menu .menu-set{display:none}
html.touch-ui body #menu .menu-set{display:flex; grid-column:1 / -1; gap:6px}
html.touch-ui body #menu .menu-set button{flex:1; height:38px; font:500 13px var(--font-head); display:block; border-radius:9px}
html.touch-ui body #menu .menu-set button.off{opacity:.55}

/* ── การ์ดเป้าหมาย: ขวาของคอลัมน์ปุ่มกลม ──────────────────────────────── */
/* ทั้งสองอย่างวางใต้กล่อง HP เหมือนกัน (ปุ่มกลม: --hud-b · การ์ด: ui.js updateGoal วัดจากแผง)
   แนวนอนเลยได้ ☰ 💬 นั่งทับหัวข้อการ์ดของคนใหม่ "ไปตีมอนตัวแรก" (ภาพ 844×390 · 26 ก.ย.)
   58px = ปุ่ม 42 + ขอบซ้าย 8 + ช่องว่าง 8 */


/* ── หน้า login/สร้างตัวละคร แนวนอน (26 ก.ย.) ─────────────────────────────
   จอสูง ~390: โลโก้ + คำโปรย + แถบคนออนไลน์ + หัวข้อ กินไปครึ่งจอ ปุ่ม "เข้าเล่นเลย" ตกขอบ ต้องเลื่อนหา (ผู้ใช้ทัก)
   → ย่อหัวการ์ด · ซ่อนคำโปรย · ภาพตัวละครสูงพอดีจอ · ปุ่มหลักเกาะขอบล่างการ์ดเสมอ (sticky) */
@media (orientation: landscape) and (max-height: 520px) {
  body #login.overlay { padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  body #login .login-card { width: min(94vw, 760px); max-height: calc(100dvh - 12px); padding-top: 8px; padding-bottom: 8px; }
  body #login .brand img { width: auto; height: 34px; }
  body #login .sub { display: none; }
  body #login .l-online { margin-top: 2px; margin-bottom: 2px; }
  body #login .cc-title { margin-top: 0; margin-bottom: 4px; }
  body #l-create .cc { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 12px; }
  body #l-create .cprev { height: max(150px, calc(100dvh - 160px)); }
  body #l-create .cc-opt { gap: 8px; }
  body .login-card .chip { min-height: 38px; }
  body #l-go { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -8px 14px rgba(246, 248, 252, .95); }
}

/* ── จอโหลด แนวนอนบนมือถือ (26 ก.ย.) ─────────────────────────────────────
   กฎจอกว้าง (style.css min-aspect-ratio 4/3) วางภาพ 9:16 กลางจอ + คอลัมน์ข้อความกว้าง 100vh×0.5625 ≈ 220px
   แต่แถบโหลด/โลโก้กว้าง 420px ล้นออกนอกภาพ (ภาพ 26 ก.ย.) → มือถือแนวนอน: ภาพชิดซ้าย · โลโก้+แถบอยู่ครึ่งขวา */
@media (orientation: landscape) and (max-height: 520px) {
  #loadscreen .ls-art { object-position: 18% 50%; }
  #loadscreen .ls-fg {
    left: auto; right: 0; top: 0; bottom: 0; transform: none; width: 54vw; align-content: center;
    padding: 16px max(24px, env(safe-area-inset-right)) 16px 24px;
    background: linear-gradient(to left, rgba(24, 32, 46, .9) 55%, rgba(24, 32, 46, 0));
  }
  #loadscreen .ls-logo { width: min(260px, 78%); }
  #loadscreen #l-load, #loadscreen .ls-tip { width: 100%; max-width: 100%; font-size: 13px; }
}