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

.ro-map { padding: 5px; width: auto; display: flex; flex-direction: column; gap: 4px; }
.ro-map-top { align-items: center; }
.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: #2b3345; border: 1px solid #5a6273; color: #cfd8e6; 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: #1b2130; border: 1px solid #2e3342; border-bottom-color: #5a6273; color: #8a93a6; }
.mm-tabs button .ro-ic { width: 11px; height: 11px; }
.mm-tabs button:hover { color: #cfd8e6; }
.mm-tabs button.on { background: #2b3345; border-color: #5a6273; border-bottom-color: transparent;
  color: #ffe6a3; }

/* ── กรอบมินิแมป + เข็มทิศ ── */
.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: #cfd8e6; 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: #ffd75b; }
.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: #10131ac4; border: 1px solid #5a627388; font-size: 8.5px; line-height: 1.4;
  color: #b8c0d0; 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 #5a6273; 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: #ffe6a3; font-weight: 600; }
.mm-tip i { font-style: normal; color: #8a93a6; font-size: 9px; }

/* คำใบ้วิธีใช้ — โผล่เฉพาะตอนขยายแท็บ "แมปนี้" */
.mm-keys { display: none; align-items: center; gap: 4px; padding: 1px 2px;
  font-size: 9px; line-height: 1.5; color: #8a93a6; }
.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: #2b3345; border: 1px solid #5a6273; color: #cfd8e6; 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 1fr; gap: 0 6px; align-items: center;
  padding: 1px 2px 0; }
.mm-arrow { grid-row: 1 / 3; width: 17px; height: 17px; background: #6a7382;
  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: #e8e6df; line-height: 1.3; }
.mm-arrow.moving + .mm-head { color: #bfe8ff; }
.mm-sub { font-size: 9px; color: #8a93a6; line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.mm-sub b { color: #ffe6a3; font-weight: 600; }
.mm-sub i { font-style: normal; color: #6a7382; }

/* ── ตอนขยาย ── */
.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; }
.ro-map.worldtab .mm-world { display: block; max-height: min(70vh, 560px); overflow-y: auto;
  overscroll-behavior: contain; }

/* แผนที่โลกแบบภาพวาด */
.mm-poster { position: relative; line-height: 0; border-radius: 5px; overflow: hidden;
  border: 1px solid #5a627388; }
.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; }
.mm-lines line.dun { stroke: #c9a2ff; stroke-dasharray: 6 6; }
/* เส้นที่อยู่บนเส้นทางไปแมปที่เลือก — เน้นให้เห็นว่าจะเดินผ่านตรงไหนบ้าง */
.mm-lines line.on { stroke: #7fffc4; stroke-width: 5; opacity: 1; stroke-dasharray: none; }

/* หมุด — ปกติเห็นแค่จุด · ชี้/เลือก/อยู่ที่นี่ ค่อยโชว์ชื่อ (13 หมุดถ้าโชว์หมดจะทับกัน) */
.mm-pin { position: absolute; transform: translate(-50%, -50%); padding: 0; background: none;
  border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
  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; }
.mm-pin span { display: none; 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; }
.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 { display: flex; }
.mm-pin.sel { z-index: 2; }
.mm-pin.sel span { background: #fff; box-shadow: 0 0 0 2px #2f5f96; }
.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; }
@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; } }

/* สำรอง: ผังกริดจากโค้ด (ใช้เมื่อไม่มีไฟล์ภาพแผนที่) */
.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: #1f2431; border: 1px solid #2e3342; color: #e8e6df; 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: #8a93a6; }
.mm-tile em { position: absolute; top: 1px; left: 3px; font-size: 9px; color: #7fd1b9; 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: #1b2130; border: 1px solid #2e3342; }
.mm-dh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.mm-dh b { font-size: 12px; color: #ffe6a3; }
.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: #7fd1b9; }
.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; }
.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: #7fd1b9; }
.mm-gobtn.home i { color: #9fc8dd; }

/* ปุ่มเดินทางไปแมปที่เลือก + เส้นทางที่จะเดิน + คำเตือนเลเวล */
.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: #8a93a6; 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: #10131a; border: 1px solid #2e3342; color: #e8e6df; }
.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: #8a93a6; }
.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; }

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