/* ═══ มินิแมป + แผนที่โลก (แผงขวาบน) ═══
   โครงสร้าง: หัวแผง · แท็บ (โผล่ตอนขยาย) · มินิแมป canvas / แผนที่โลก · แถบบอกทิศ
   ทับสไตล์ .ro-map เดิมใน rpg.css — โหลดไฟล์นี้เป็นตัวสุดท้าย */

/* ความกว้างแผงล็อกกับ "ผืนแผนที่" อย่างเดียว — ห้ามให้ข้อความกำหนด (คำสั่ง Stamp 31 ก.ค.)
   บั๊ก: แผงเป็น shrink-to-fit ส่วนแถบท้ายแผง ("หันหน้า ตะวันตก" / "ซุ้มใกล้สุด … → ทุ่งมรกตตะวันตก")
   เปลี่ยนข้อความทุกก้าวที่เดิน → max-content ของแผงเปลี่ยนตาม แต่แผงยึด right:7px
   = ผืนแผนที่ถูกดันซ้าย-ขวาตลอดเวลาที่เดิน (ที่ Stamp เห็นว่า "มินิแมปเลื่อน")
   --mm-size ตั้งจาก setSize() ใน minimap.js ที่เดียวกับที่ตั้งขนาด canvas จริง
   +10px = padding 5px สองข้าง (border-box แล้ว เส้นขอบอยู่ในนี้) */
.ro-map { padding: 5px; width: calc(var(--mm-size, 156px) + 10px);
  display: flex; flex-direction: column; gap: 4px; }
/* แถวที่มีข้อความยาวกว่าแผงต้องยอมหด/ตัดจุด ห้ามดันแผงกว้าง */
.ro-map > * { min-width: 0; }
/* margin-bottom:3px ที่ rpg.css ตั้งไว้เป็นของตกค้างจากยุคก่อนแผงจะเป็น flex column —
   ตอนนี้ระยะห่างระหว่างแถวมาจาก gap:4px ข้างบนแล้ว มาร์จินจึงเป็นช่องไฟซ้อนช่องไฟ (วัดได้ 7px)
   ถอนทิ้งคืนความสูงมา 3px ซึ่งเป็นงบที่เอาไปจ่ายค่าปุ่มย่อในหัวแผงพอดี */
.ro-map-top { align-items: center; margin-bottom: 0; }
.ro-map-top #ro-place { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-map-top .ro-ic { color: #f0c25a; }

/* ปุ่มย่อ — โผล่เฉพาะตอนขยาย */
.mm-close { display: none; padding: 0; width: 16px; height: 16px; border-radius: 4px;
  background: var(--h-chip); border: 1px solid var(--h-line); color: var(--h-ink2); cursor: pointer;
  align-items: center; justify-content: center; }
.mm-close:hover { background: #3a4459; color: #fff; }
.ro-map.open .mm-close { display: inline-flex; }

/* แท็บ — โผล่เฉพาะตอนขยาย */
.mm-tabs { display: none; gap: 3px; }
.ro-map.open .mm-tabs { display: flex; }
.mm-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 4px 6px; font-size: 10.5px; border-radius: 5px 5px 0 0; cursor: pointer;
  background: var(--h-chip); border: 1px solid var(--h-line); border-bottom-color: var(--h-line); color: var(--h-ink2); }
.mm-tabs button .ro-ic { width: 11px; height: 11px; }
.mm-tabs button:hover { color: var(--h-ink2); }
.mm-tabs button.on { background: var(--h-chip); border-color: var(--h-line); border-bottom-color: transparent;
  color: var(--h-gold); }

/* ── กรอบมินิแมป + เข็มทิศ ── */
.mm-frame { position: relative; line-height: 0; }
.ro-map.worldtab .mm-frame { display: none; }
#minimap { display: block; border-radius: 8px; cursor: zoom-in; }
.ro-map.open #minimap { cursor: zoom-out; }
.mm-c { position: absolute; font-size: 8.5px; font-style: normal; font-weight: 700; line-height: 1;
  color: var(--h-ink2); text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; letter-spacing: .04em; }
.mm-c.n { top: 3px; left: 50%; transform: translateX(-50%); color: var(--h-gold); }
.mm-c.s { bottom: 3px; left: 50%; transform: translateX(-50%); }
.mm-c.w { left: 4px; top: 50%; transform: translateY(-50%); }
.mm-c.e { right: 4px; top: 50%; transform: translateY(-50%); }
.mm-zoom { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 9px;
  background: var(--h-chip); border: 1px solid var(--h-line); font-size: 8.5px; line-height: 1.4;
  color: var(--h-ink2); white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.mm-frame:hover .mm-zoom { opacity: 1; }
.ro-map.open .mm-zoom { display: none; }

/* ตอนขยาย เคอร์เซอร์เป็นเป้าเล็ง — สื่อว่า "กดตรงไหนก็เดินไปตรงนั้น" */
.ro-map.open #minimap { cursor: crosshair; }

/* ป้ายชื่อสิ่งที่เมาส์ชี้บนแผนที่ */
.mm-tip { position: absolute; z-index: 4; transform: translateX(-50%);
  display: none; align-items: baseline; gap: 5px; padding: 2px 7px; border-radius: 5px;
  background: #10131af0; border: 1px solid var(--h-line); box-shadow: 0 2px 8px #000a;
  font-size: 10px; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.mm-tip.on { display: flex; }
.mm-tip b { color: var(--h-gold); font-weight: 600; }
.mm-tip i { font-style: normal; color: var(--h-ink2); font-size: 9px; }

/* คำใบ้วิธีใช้ — โผล่เฉพาะตอนขยายแท็บ "แมปนี้" */
.mm-keys { display: none; align-items: center; gap: 4px; padding: 1px 2px;
  font-size: 9px; line-height: 1.5; color: var(--h-ink2); }
.mm-keys .ro-ic { width: 10px; height: 10px; color: #7fffc4; }
.ro-map.open .mm-keys { display: flex; }
.ro-map.worldtab .mm-keys { display: none; }

/* ── แถบสถานะเดินทางข้ามแมป (เห็นได้ตลอด แม้ย่อแผนที่อยู่) ── */
.mm-travel { display: none; align-items: center; gap: 5px; padding: 3px 5px; border-radius: 5px;
  background: #14261f; border: 1px solid #2f6f52; font-size: 9.5px; line-height: 1.5; color: #cfe8db; }
.mm-travel.on { display: flex; }
.mm-travel .ro-ic { width: 11px; height: 11px; color: #7fffc4; }
.mm-travel b { color: #b8ffdf; font-weight: 600; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-travel span { color: #8ab9a4; white-space: nowrap; }
.mm-stop { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 4px;
  background: var(--h-chip); border: 1px solid var(--h-line); color: var(--h-ink2); font-size: 9px; cursor: pointer; }
.mm-stop:hover { background: #4a2b2b; border-color: #a05a5a; color: #ffd8d8; }
.mm-stop .ro-ic { width: 9px; height: 9px; color: inherit; }

/* ── แถบบอกทิศที่กำลังเดิน ── */
.mm-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 6px; align-items: center;
  padding: 1px 2px 0; }
.mm-arrow { grid-row: 1 / 3; width: 17px; height: 17px; background: var(--h-ink2);
  clip-path: polygon(50% 2%, 96% 96%, 50% 72%, 4% 96%);
  transition: transform .2s ease-out, background .2s; }
.mm-arrow.moving { background: #7fd1ff; filter: drop-shadow(0 0 4px #7fd1ff88); }
.mm-head { font-size: 10.5px; color: var(--h-ink); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-arrow.moving + .mm-head { color: var(--ac-info); }
.mm-sub { font-size: 9px; color: var(--h-ink2); line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.mm-sub b { color: var(--h-gold); font-weight: 600; }
.mm-sub i { font-style: normal; color: var(--h-ink3); }

/* ── ตอนขยาย ── */
.ro-map.open { z-index: 30; box-shadow: 0 10px 34px #000b; }
.ro-map.worldtab { width: min(560px, calc(100vw - 20px)); }
.mm-world { display: none; }
/* ── ผืนแผนที่อยู่นิ่ง · เลื่อนเฉพาะรายละเอียดข้างล่าง (แก้บั๊ก Stamp 1 ส.ค.) ──────
   ของเดิมทั้งแท็บเป็นกล่องเลื่อนกล่องเดียว: โปสเตอร์ รายละเอียด และคำอธิบายสัญลักษณ์
   อยู่ในสายเลื่อนเส้นเดียวกัน · รายละเอียดของแต่ละแมปยาวไม่เท่ากัน (มีทางออก 0-4 ช่อง
   บางแมปมีคำเตือนโซนแรง บางแมปมีปุ่มยกเลิกทริป) พอเลือกแมปใหม่ scrollHeight ก็เปลี่ยน
   → เพดานสกรอลล์ลดลง → เบราว์เซอร์หนีบ scrollTop → ผืนแผนที่ไถลทั้งใบ
   วัดจริง 1280x760: crystalmine → anvilheim ทำให้หมุดเลื่อน 56.5px ใต้เคอร์เซอร์
   ผังใหม่: คอลัมน์ flex — ของเหนือ .mm-below ตรึงขนาดตัวเอง (flex:none) ส่วน .mm-below กินที่เหลือแล้วเลื่อนในตัว
   ใช้ flex ไม่ใช่ grid เพราะจำนวนลูกไม่คงที่ (.mm-home โผล่บ้างไม่โผล่บ้าง · .mm-grid โผล่เฉพาะโหมดไม่มีอาร์ต)
   min-height:0 ที่ .mm-below ขาดไม่ได้ — flex item ตั้งต้น min-height:auto ถ้าไม่สั่งมันจะดันกล่องยืดแทนที่จะเลื่อน */
.ro-map.worldtab .mm-world {
  display: flex; flex-direction: column;
  max-height: min(78vh, 620px); overflow: hidden; }
.ro-map.worldtab .mm-world > .mm-home,
.ro-map.worldtab .mm-world > .mm-poster,
.ro-map.worldtab .mm-world > .mm-grid { flex: none; }
.mm-below { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* แผนที่โลกแบบภาพวาด */
.mm-poster { position: relative; line-height: 0; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--h-line)88; }
.ro-map.noart .mm-poster { display: none; }
.mm-poster img { width: 100%; height: auto; display: block; }
.mm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mm-lines line { stroke: #ffeec2; stroke-width: 3; stroke-dasharray: 9 7; opacity: .8;
  vector-effect: non-scaling-stroke;
  transition: stroke .2s ease, stroke-width .2s ease, opacity .2s ease; }
.mm-lines line.dun { stroke: #c9a2ff; stroke-dasharray: 6 6; }
/* เส้นที่อยู่บนเส้นทางไปแมปที่เลือก — เน้นให้เห็นว่าจะเดินผ่านตรงไหนบ้าง
   ของเดิมเป็นเส้นทึบเขียว บอกได้แค่ "ผ่านตรงนี้" แต่ไม่บอก "ไปทางไหน"
   ทำเป็นเส้นประที่ไหลจากตัวเราไปหาปลายทาง (stroke-dashoffset ลบ = ไหลตามทิศที่วาดเส้น)
   ทั้งเส้นทางจึงอ่านออกด้วยหางตาว่าเริ่มที่ไหนจบที่ไหน โดยไม่ต้องไล่อ่านชื่อแมปทีละอัน */
.mm-lines line.on { stroke: #7fffc4; stroke-width: 5; opacity: 1;
  stroke-dasharray: 14 8; animation: mmFlow 1.1s linear infinite;
  filter: drop-shadow(0 0 3px #7fffc490); }
@keyframes mmFlow { to { stroke-dashoffset: -22; } }

/* หมุด — ปกติเห็นแค่จุด · ชี้/เลือก/อยู่ที่นี่ ค่อยโชว์ชื่อ (13 หมุดถ้าโชว์หมดจะทับกัน) */
/* หมุดบนแผนที่โลก (คำสั่ง Stamp 31 ก.ค.: "เอาเมาส์ไปคลิกไม่ค่อยติด · ชื่อเลื่อน")
   บั๊กเดิมเป็นวงจรป้อนกลับของ hover ตัวเดียว แต่ออกอาการสองอย่าง:
     ปุ่มเป็น flex คอลัมน์ (จุด + ป้ายชื่อ) แล้วยึดจุดกึ่งกลางด้วย translate(-50%,-50%)
     ป้ายชื่อซ่อนอยู่ (display:none) จนกว่าจะ hover — พอโผล่ กล่องปุ่มก็สูงขึ้นทันที
     กึ่งกลางกล่องเลื่อน = "จุด" ขยับขึ้นหนีเคอร์เซอร์ → หลุด hover → ป้ายหาย → กล่องหด → จุดเด้งกลับ
     = ป้ายชื่อกะพริบ/เลื่อนไปมา และคลิกไม่ติดเพราะเป้าขยับหนีตอนกำลังจะกด
   แก้ที่ต้นเหตุ: กล่องปุ่มขนาดคงที่ (จุดไม่ขยับอีกเลย) · ป้ายชื่อลอย absolute จึงไม่กินที่ในผัง
   และได้พื้นที่กดกว้าง 24px แทนจุด 11px ไปพร้อมกัน — ทั้งเมาส์และนิ้วกดติดขึ้นมาก */
.mm-pin { position: absolute; transform: translate(-50%, -50%); padding: 0; background: none;
  border: 0; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center;
  z-index: 1; }
.mm-pin i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fffaf0;
  background: #8fb35e; box-shadow: 0 1px 4px #000a; transition: transform .12s; }
.mm-pin.city i { background: #f0c25a; width: 13px; height: 13px; }
.mm-pin.dun i { background: #b98ae8; border-style: dashed; }
/* ป้ายชื่อ "ไหลขึ้นมาเข้าที่" แทนการกระตุกโผล่ — ขยับด้วย transform ล้วน จุดจึงไม่ขยับตาม
   ซ่อนด้วย visibility ไม่ใช่ display:none — display เปลี่ยนแล้วทรานซิชันไม่วิ่งเลย (โผล่ปุ๊บทันที)
   visibility หน่วงไว้ .16s ตอนซ่อน = รอให้จางจบก่อนค่อยหายจริง · แพทเทิร์นเดียวกับแผงเมนูใน rpg.css
   ป้ายเป็น absolute + pointer-events:none จึงไม่กินคลิกและไม่กินที่ในผัง แม้จะอยู่ใน DOM ตลอด */
.mm-pin span { position: absolute; top: calc(50% + 9px); left: 50%;
  transform: translateX(-50%) translateY(-3px); opacity: 0; visibility: hidden;
  display: flex; padding: 1px 5px; border-radius: 4px; font-size: 9.5px; line-height: 1.45;
  white-space: nowrap; background: #fdf4dce8; color: #33240f; border: 1px solid #8a6a2a;
  font-weight: 600; align-items: center; gap: 3px; pointer-events: none;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, 1.1, .4, 1), visibility 0s .16s; }
.mm-pin span .ro-ic { color: #2c7a4b; }
.mm-pin:hover { z-index: 3; }
.mm-pin:hover i { transform: scale(1.25); }
.mm-pin:hover span, .mm-pin.sel span, .mm-pin.here span, .mm-pin.city span {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, 1.1, .4, 1), visibility 0s; }
.mm-pin.sel { z-index: 2; }
.mm-pin.sel span { background: #fff; box-shadow: 0 0 0 2px #2f5f96; }

/* ── เอฟเฟกต์ตอนเลือกหมุด (คำสั่ง Stamp 1 ส.ค.: "ใส่เอฟเฟคให้มันดูดีๆ") ─────────
   เล่นได้จริงเพราะ selectCell สลับคลาสบน element เดิม ไม่ได้สร้าง DOM ใหม่ (ดู minimap.js)
   ทุกอย่างเป็น transform/opacity/box-shadow อย่างเดียว = คอมโพสิเตอร์ทำเอง ไม่ reflow
   จึงไม่มีทางไปดันผังให้ "จุดเลื่อน" กลับมาอีก ซึ่งเป็นบั๊กที่เพิ่งแก้ไปในรอบเดียวกัน
     1. จุดเด้งโตขึ้นแบบสปริง แล้วค้างที่ 1.35 เท่า
     2. วงกระเพื่อมวงเดียวออกจากจุด (::after) — บอกว่า "อันนี้แหละที่เพิ่งกด"
     3. วงแหวนฟ้าค้างรอบจุด บอกสถานะ "กำลังเลือกอยู่" หลังวงกระเพื่อมจบ */
.mm-pin.sel i { transform: scale(1.35); animation: mmPop .34s cubic-bezier(.2, 1.5, .4, 1); }
.mm-pin.sel::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px; border-radius: 50%; pointer-events: none;
  border: 2px solid #7fd1ff; animation: mmRipple .52s ease-out forwards;
}
@keyframes mmPop { 0% { transform: scale(1); } 55% { transform: scale(1.55); } 100% { transform: scale(1.35); } }
@keyframes mmRipple { from { transform: scale(1); opacity: .85; } to { transform: scale(3.4); opacity: 0; } }
.mm-pin.here i { background: #ff6a5a; box-shadow: 0 0 0 3px #ff6a5a55, 0 1px 4px #000a;
  animation: mmHere 1.5s ease-in-out infinite; }
.mm-pin.here span { background: #fff2ec; border-color: #d24a3a; color: #7a1f14; }
/* หมุด "อยู่ที่นี่" ที่ถูกเลือกด้วย ต้องได้ทั้งจังหวะเต้นเดิมและขนาดของตัวที่เลือก — ประกาศรวมกฎเดียว
   ไม่งั้นสองแอนิเมชันชิงกันแล้วจุดกระพริบสลับขนาด */
.mm-pin.here.sel i { transform: scale(1.35); animation: mmHere 1.5s ease-in-out infinite; }
@keyframes mmHere { 0%, 100% { box-shadow: 0 0 0 2px #ff6a5a44, 0 1px 4px #000a; }
  50% { box-shadow: 0 0 0 7px #ff6a5a00, 0 1px 4px #000a; } }
/* เครื่องที่ตั้ง "ลดการเคลื่อนไหว" ไว้ — คงสีและขนาดที่บอกสถานะไว้ครบ ตัดเฉพาะของที่วิ่งวนไม่หยุด
   (เส้นทางไหล · จุดเต้น · วงกระเพื่อม) ข้อมูลไม่หายสักอย่าง หายแต่การเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
  .mm-lines line.on { animation: none; }
  .mm-pin.here i, .mm-pin.here.sel i { animation: none; }
  .mm-pin.sel i { animation: none; }
  .mm-pin.sel::after { display: none; }
  .mm-pin span,
  .mm-pin:hover span, .mm-pin.sel span, .mm-pin.here span, .mm-pin.city span { transition: none; }
}

/* สำรอง: ผังกริดจากโค้ด (ใช้เมื่อไม่มีไฟล์ภาพแผนที่) */
.mm-grid { display: none; gap: 4px; }
.ro-map.noart .mm-grid { display: grid; }
.mm-cell { display: flex; flex-direction: column; gap: 3px; }
.mm-tile { position: relative; padding: 6px 4px; border-radius: 4px; cursor: pointer;
  background: var(--h-chip); border: 1px solid var(--h-line); color: var(--h-ink); text-align: center;
  display: flex; flex-direction: column; gap: 1px; min-height: 42px; justify-content: center; }
.mm-tile b { font-size: 10px; line-height: 1.3; }
.mm-tile span { font-size: 8.5px; color: var(--h-ink2); }
.mm-tile em { position: absolute; top: 1px; left: 3px; font-size: 9px; color: var(--ac-mint); font-style: normal; }
.mm-tile.city { background: #2e2a1c; border-color: #7a6432; }
.mm-tile.dun { background: #262031; border-color: #6a5a8a; border-style: dashed; }
.mm-tile.here { border-color: #ff6a5a; box-shadow: inset 0 0 0 1px #ff6a5a66; }
.mm-tile.sel { outline: 2px solid #7fd1ff; outline-offset: -2px; }

/* การ์ดรายละเอียดแมปที่เลือก */
.mm-detail { margin-top: 6px; padding: 6px 8px; border-radius: 5px;
  background: var(--h-chip); border: 1px solid var(--h-line); }
.mm-dh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.mm-dh b { font-size: 12px; color: var(--h-gold); }
.mm-dh em { font-style: normal; font-size: 9px; padding: 1px 5px; border-radius: 8px; }
.mm-dh em.now { background: #5a2a24; color: #ffb9ae; }
.mm-dh em.home { background: #1f4038; color: var(--ac-mint); }
.mm-dband { font-size: 9.5px; color: #8fb3d9; margin-top: 1px; }
.mm-dmood { font-size: 10px; color: #b8c0d0; margin: 3px 0 5px; line-height: 1.45; }
/* แถบ "กลับเมืองที่จดชื่อไว้" — อยู่บนสุดของแท็บแผนที่โลก ใช้บ่อยสุด กดได้โดยไม่ต้องหาหมุด */
.mm-home { margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
.mm-gobtn.home { background: #1c3a4e; border-color: #3f7fa8; color: #d8f0ff; }
.mm-gobtn.home:hover { background: #26506b; border-color: #63b8e0; color: #fff; }
.mm-gobtn.home .ro-ic { color: var(--ac-mint); }
.mm-gobtn.home i { color: #9fc8dd; }
/* ปุ่มลงชั้นล่าง — หมุดบนโปสเตอร์กรองเฉพาะชั้นที่ยืนอยู่ ทางกลับลงจึงต้องเป็นปุ่มประจำที่ ไม่ใช่หมุดที่ต้องหา
   (สีส้มดินเผาให้ต่างจากปุ่มเดินทางทั่วไป — นี่คือคำสั่ง "ออกจากชั้นนี้" ไม่ใช่ "ไปแมปข้าง ๆ") */
.mm-gobtn.flr { background: #4a3320; border-color: #a8763f; color: #ffe6c8; }
.mm-gobtn.flr:hover { background: #63431f; border-color: #e0a663; color: #fff; }
.mm-gobtn.flr .ro-ic { color: #ffc46b; }
.mm-gobtn.flr i { color: #ddbb96; }

/* ปุ่มเดินทางไปแมปที่เลือก + เส้นทางที่จะเดิน + คำเตือนเลเวล */
.mm-go { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.mm-gobtn { display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 11px; font-weight: 600;
  background: #1f5140; border: 1px solid #3f9a74; color: #d8fff0; }
.mm-gobtn:hover { background: #2a6b53; border-color: #63d8a6; color: #fff; }
.mm-gobtn .ro-ic { width: 12px; height: 12px; color: #7fffc4; }
.mm-gobtn i { font-style: normal; font-size: 9px; font-weight: 400; color: #9fd8c2; }
.mm-hop { font-size: 9.5px; color: var(--h-ink2); display: inline-flex; align-items: center; gap: 4px; }
.mm-hop .ro-ic { width: 10px; height: 10px; }
.mm-route { display: flex; align-items: center; gap: 4px; font-size: 9px; line-height: 1.5;
  color: #8fb3d9; overflow: hidden; text-overflow: ellipsis; }
.mm-route .ro-ic { width: 10px; height: 10px; flex: none; }
.mm-warn { display: flex; align-items: center; gap: 4px; padding: 2px 5px; border-radius: 4px;
  background: #3a2418; border: 1px solid #8a5a2a; color: #ffcf9a; font-size: 9px; line-height: 1.5; }
.mm-warn .ro-ic { width: 10px; height: 10px; flex: none; color: #ff9a5a; }

.mm-exits { display: flex; flex-wrap: wrap; gap: 4px; }
.mm-exit { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px;
  padding: 2px 6px; border-radius: 4px; background: var(--h-deep); border: 1px solid var(--h-line); color: var(--h-ink); }
.mm-exit i { font-style: normal; color: #5a8fc4; }
.mm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px;
  font-size: 9px; color: var(--h-ink2); }
.mm-legend .lg { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fffaf0;
  background: #8fb35e; }
.mm-legend .lg.city { background: #f0c25a; }
.mm-legend .lg.dun { background: #b98ae8; }
.mm-legend .lg.warp { border-radius: 0; height: 0; width: 14px; border: 0;
  border-top: 2px dashed #ffeec2; background: none; }

/* ป้าย "กี่คนออนไลน์" ย้ายมาเป็นแถวท้ายแผงแผนที่ (คำสั่ง Stamp 1 ส.ค. 2026)
   แผงนี้เป็น flex column ที่มี gap อยู่แล้ว — ป้ายจึงไม่ต้องมี margin ของตัวเองอีก
   (สไตล์ตั้งต้นใน rpg.css เขียนไว้ตอนมันอยู่ในแผงตัวละคร ซึ่งไม่มี gap จึงต้องเว้นเอง)
   บีบให้เตี้ยที่สุดเท่าที่ยังอ่านออก เพราะทุกพิกเซลที่แผงสูงขึ้น = ต้องดันแผงเควสลงตามเท่านั้น */
.ro-map .ro-online { margin-top: 0; padding-top: 4px; font-size: 10px; }

/* แผงมินิแมปสูงขึ้นเพราะมีแถบบอกทิศ + ป้ายออนไลน์ — เลื่อนแผงเควสลงตาม
   (คุมไว้ที่นี่เพื่อไม่ต้องแก้ rpg.css ให้ชนกับงานอื่น)
   ตัวเลขนี้วัดจากของจริงในเกม (1280×720) ไม่ได้กะเอา: ก้นแผงแผนที่อยู่ที่ 252px แล้วเว้นช่องไฟไว้ */
@media (min-width: 561px) { .ro-quest { top: 256px; } }

/* ═══ ย่อแผนที่แล้ว แถบภารกิจต้องเลื่อนขึ้นมาจอดใต้แผง ═══
   (Stamp แจ้ง 1 ส.ค. 2026: "ตรงแมปกับภารกิจพอย่อแล้วมันดูลอย ๆ แปลก ๆ")
   วัดของจริงก่อนแก้: ย่อแผนที่แล้วก้นแผงอยู่ที่ 62px แต่แถบภารกิจยังตรึงที่ 256px
   = แถบเล็ก ๆ สองอันห่างกัน 194px โดยไม่มีอะไรคั่น อันล่างจึงดูเหมือนลอยอยู่กลางจอ
   --ro-map-h = ความสูงจริงของแผงแผนที่ ที่ minimap.js วัดแล้วเขียนไว้บนกล่อง .rpg
   ทำไมต้องวัด ไม่เขียนตัวเลข: แผงที่ย่อแล้วยังสูงขึ้นได้อีก — แถบทริปข้ามแมป (.mm-travel)
   ตั้งใจไม่ซ่อนตอนย่อ พอเริ่มเดินทางแล้วแผงโต ตัวเลขคงที่จะกลายเป็นทับกันทันที
   7px = top ของ .ro-map เอง (rpg.css) · 4px = ช่องไฟเดียวกับตอนกาง (ก้นแผง 252 → แถบภารกิจ 256)
   ค่าสำรอง 55px = ความสูงแผงย่อที่วัดได้จริงบนเกม 1280×720 — ใช้เฉพาะเฟรมแรกก่อน JS วัดเสร็จ
   เขียนที่นี่ไม่ใช่ rpg.css เพราะ .ro-quest { top } ถูกทับครั้งสุดท้ายในไฟล์นี้อยู่แล้ว
   ตอนกางอยู่ยังตรึง 256px เหมือนเดิม: ความสูงแผงตอนกางแกว่งทุกก้าวที่เดิน
   (ข้อความบอกทิศ/เส้นทางขึ้นบรรทัดสอง) ผูกตำแหน่งไว้กับมันเมื่อไหร่ = แถบเต้นตามการเดิน
   :not(.hud-move) = ที่ผู้เล่นลากไปวางเองชนะเสมอ (hudmove.js ติดคลาสนี้ให้เฉพาะแถบที่ถูกย้าย)
   ไม่งั้นคนที่ลากแถบภารกิจไปไว้อีกมุมจอ พอกดย่อแผนที่แถบจะกระโดดขึ้นไป 190px โดยไม่ได้สั่ง */
.rpg:has(#ro-map.fold) .ro-quest:not(.hud-move) { top: calc(7px + var(--ro-map-h, 55px) + 4px); }

/* ═══ ย่อแผงเหลือแถวหัวแผง (ปุ่มลูกศรในหัวแผง · ดู setFold ใน minimap.js) ═══
   .mm-travel ไม่อยู่ในลิสต์โดยตั้งใจ — แถบทริปข้ามแมปคือของที่ "เห็นได้ตลอด แม้ย่อแผนที่อยู่"
   มาตั้งแต่แรก (ดูหัวข้อของมันข้างบน) ย่อแผงแล้วยังต้องรู้ว่ากำลังเดินทางไปไหน+กดยกเลิกได้
   ประกาศไว้ท้ายไฟล์เพื่อให้ชนะ .ro-map.open/.worldtab ที่สั่ง display ไว้ก่อนหน้า แม้ความจำเพาะเท่ากัน */
.ro-map.fold .mm-tabs,
.ro-map.fold .mm-frame,
.ro-map.fold .mm-keys,
.ro-map.fold .mm-world,
.ro-map.fold .mm-foot { display: none; }