/* หน้าจอแผนที่โลก (worldmap.js) — แยกไฟล์ไว้เพราะ ui*.css ไฟล์อื่นมีเจ้าของอยู่แล้ว */
.wm-wrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  /* ⚠️ ฉากหลังมืด 67% ทำให้ทั้งเกมดูเหมือนพัง ไม่ใช่ "หน้าต่างเด่นขึ้น" —
     ผู้ใช้ส่งภาพมาถามว่าสีเพี้ยนอะไร ทั้งที่เป็นแค่ม่านของหน้าต่างนี้
     40% + เบลอ พอให้สายตาไปที่แผนที่ โดยที่ฉากหลังยังอ่านออกว่าเป็นเกมเดิม */
  background: #0b0f1466; backdrop-filter: blur(2px); padding: 12px;
  /* viewport-fit=cover: มือถือแนวนอนปุ่มปิดเคยไปอยู่ใต้ติ่งกล้องขวา */
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.wm-wrap[hidden] { display: none; }
/* ตัวหน้าต่างใช้กรอบกลางของเกม (.win จาก style.css + ป้ายชื่อจาก ui-kit.css)
   ที่นี่ทับเฉพาะเรื่องขนาดและตำแหน่ง เพราะแผนที่เป็นหน้าต่างกลางจอ ไม่ใช่แผงลอยที่ลากได้ */
/* ⚠️ กว้าง 820px แต่กล่องรูปคิดความกว้างจากความสูง (3:2) ที่จอ 900px สูง
   รูปกว้างแค่ ~621px เหลือกระดาษว่างข้างละ ~78px ดูเหมือนรูปวางไม่ตรงกลางกรอบ
   ลดกรอบลงให้พอดีรูป แทนที่จะขยายรูปจนล้นจอเตี้ย */
.wm-win.win { position: static; width: min(96vw, 700px); max-width: 96vw; max-height: min(92dvh, 900px);
  display: flex; flex-direction: column; cursor: default; }
.wm-win > header { cursor: default; }
.wm-win > header .wm-back { margin-right: 6px; }
.wm-win > header .wm-close { margin-left: 6px; }

/* ⚠️ ต้องยอมหดได้ (flex: 1 1 auto + min-height: 0) ไม่ใช่ flex: 0 0 auto
   หน้าต่างมี max-height แต่ถ้าลูกทุกตัวหดไม่ได้ คอลัมน์ flex จะล้นทะลุ max-height
   ออกไป แล้วแผงข้อมูลก็ไหลออกนอกกรอบไม้ (วัดได้ล้นก้นกรอบถึง 106px ตอนเลือก
   สนามที่มีมอนหลายตัว — ผู้ใช้เรียกว่า "แผนที่ล้นจอ")
   ไม่ใส่ overflow:hidden ที่ .win เพราะป้ายชื่อลอยพ้นขอบบนอยู่ มันจะโดนตัดหัว */
.wm-body { overflow: auto; padding: 10px; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* กล่องรูปต้องเป็น 3:2 เป๊ะเสมอ เพราะพิกัดหมุดเป็นเปอร์เซ็นต์ของกล่อง
   คุมด้วยความสูงแล้วให้ความกว้างคิดจากอัตราส่วน — ไม่งั้นจอเตี้ย ๆ จะเห็นแผนที่ไม่ครบ */
/* กล่องรูปเป็น 3:2 เป๊ะเสมอ เพราะพิกัดหมุดเป็นเปอร์เซ็นต์ของกล่อง
   ⚠️ เคยลองให้รูปย่อเองด้วย aspect-ratio + max-height แล้ว รูปโดน object-fit
      ครอบตัดหัวท้ายแทนที่จะย่อ เลยกลับมาคุมด้วยความสูงเหมือนเดิม
      สิ่งที่กันไม่ให้ล้นจริง ๆ คือ .wm-body ที่ยอมหดได้ (ดูข้างบน) */
.wm-art { --h: min(46dvh, calc((min(96vw, 700px) - 44px) / 1.5)); position: relative; flex: none;
  height: var(--h); width: calc(var(--h) * 1.5); max-width: 100%;
  margin: 0 auto; border-radius: 10px; overflow: hidden; }
.wm-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ภูมิภาคที่ยังไม่มีรูป (เอลเดอร์วูด): พื้นป่าอ่อน + เส้นทางประ */
.wm-art:has(.wm-plan) { background: radial-gradient(ellipse at 45% 50%, #cfe3b0 0%, #a9cf86 60%, #86b56a 100%); }
.wm-plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-plan line { stroke: #7a5a34; stroke-dasharray: 2.2 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 4; }

/* หมุด: ไอคอนจาก pins.webp (ตาราง 4x2 ช่องละ 256px ย่อเหลือ 44px) + ป้ายชื่อใต้ไอคอน */
.wm-pin { position: absolute; transform: translate(-50%, -60%); display: grid; justify-items: center; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer; }
.wm-pin i { width: 44px; height: 44px; background-image: url('assets/ui/map/pins.webp');
  background-size: 176px 88px; background-position: var(--px) var(--py);
  filter: drop-shadow(0 2px 3px #0007); transition: transform .12s ease; }
.wm-pin span { font: 600 11px/1.2 var(--font-head, sans-serif); color: #fff; white-space: nowrap;
  background: #2a2336cc; padding: 2px 7px; border-radius: 999px; }
.wm-pin:hover i, .wm-pin.on i { transform: scale(1.14); }
.wm-pin.on span { background: #2f6f73; }
.wm-pin.me i { animation: wmPulse 1.6s ease-in-out infinite; }
.wm-pin.unknown i { filter: grayscale(1) brightness(.75) drop-shadow(0 2px 3px #0007); }
.wm-pin.unknown span { opacity: .75; }
.wm-pin.soon i { opacity: .85; }
@keyframes wmPulse { 50% { transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) { .wm-pin.me i { animation: none; } }

/* ⚠️ เดิมพื้นขาว #fffdf6 ชนขอบกรอบไม้ทั้งสองข้าง ในขณะที่กล่องรูปด้านบนเว้น 10px
   แผงนี้จึงดูเป็นแผ่นขาวคนละชิ้นที่แปะทับกรอบ ไม่ใช่เนื้อเดียวกับหน้าต่าง
   ใช้พื้นกระดาษโทนเดียวกับ .win แล้วเว้นขอบเท่ากล่องรูป */
.wm-card { flex: 0 0 auto; margin: 0 10px 10px; padding: 10px 12px 12px; background: #f7efd9;
  border: 1px solid #e0d2ab; border-radius: 10px; }
.wm-card h3 { margin: 0 0 4px; font: 600 17px/1.3 var(--font-head, sans-serif); color: #3b3020; }
.wm-tag { font: 500 11px/1 var(--font-head, sans-serif); background: #dcebea; color: #2f6f73;
  padding: 3px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.wm-tag.boss { background: #f5dcd8; color: #b0443a; }
.wm-soon { font: 500 11px/1 var(--font-head, sans-serif); background: #ece7db; color: #7a7266;
  padding: 3px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.wm-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: #6d6558; font-size: 13px; margin-bottom: 6px; }
.wm-mobs { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.wm-mobs span { font-size: 12px; background: #f1ead9; border-radius: 8px; padding: 3px 8px; color: #4a4133; }
.wm-mobs i { color: #8a7f6c; font-style: normal; }
.wm-card p { margin: 4px 0 0; font-size: 13.5px; color: #4a4133; }
.wm-route { line-height: 1.5; }
.wm-go { margin-top: 8px; }
.wm-here { color: #2f6f73; }
.wm-hint { color: #7a7266; font-size: 12.5px; }

@media (max-width: 560px) {
  .wm-win { width: 100%; max-height: 94dvh; }
  .wm-art { --h: min(40dvh, calc((100vw - 38px) / 1.5)); }
  .wm-pin i { width: 34px; height: 34px; background-size: 136px 68px;
    background-position: calc(var(--px) * 0.7727) calc(var(--py) * 0.7727); }
  /* จอแคบ แนวสนามเรียงชิดกันจนป้ายทับกัน — โชว์ป้ายเฉพาะจุดที่ยืนอยู่กับจุดที่แตะ */
  .wm-pin span { font-size: 10px; padding: 1px 5px; display: none; }
  .wm-pin.me span, .wm-pin.on span, .wm-pin.soon span { display: block; }
  .wm-card h3 { font-size: 15px; }
}