/* =====================================================================
 * v7_map.css — ธีม "แผนที่นักผจญภัย" (ไม้เก่า + กระดาษผ้าใบ + หมึกน้ำตาล)
 *  ใช้กับหน้าต่าง World Map ให้เข้ากับภาพแผนที่แฟนตาซี
 * ===================================================================== */
.win[data-win="worldmap"] {
  --wd-1: #4a2c14; --wd-2: #2b180a; --wd-edge: #9a6a33; --gold: #f1cf7a;
  --pm-1: #f3e4c0; --pm-2: #e2cc9c; --pm-ink: #3b2412; --pm-dim: #6e4d2c; --pm-line: #b98f55;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--wd-1), var(--wd-2));
  border: 2px solid var(--wd-edge);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #1a0e05, inset 0 0 0 1px rgba(255,210,140,.18), inset 0 0 30px rgba(0,0,0,.55), 0 26px 60px rgba(0,0,0,.7);
  color: var(--pm-ink);
}
.win[data-win="worldmap"] .win-head {
  background: linear-gradient(180deg, #6b4220, #3d230e);
  border-bottom: 2px solid var(--wd-edge);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,220,160,.25);
}
.win[data-win="worldmap"] .win-title { font-family: "Cinzel", Georgia, "Noto Sans Thai", serif; font-weight: 800; letter-spacing: 2.5px; color: var(--gold); text-shadow: 0 1px 0 #1a0e05, 0 0 10px rgba(241,207,122,.25); }
.win[data-win="worldmap"] .win-key { color: #c9a66b; }
.win[data-win="worldmap"] .win-x { background: #2b180a; border: 1px solid var(--wd-edge); color: var(--gold); border-radius: 4px; }
.win[data-win="worldmap"] .win-x:hover { background: #5a3516; }
.win[data-win="worldmap"] .win-body { padding: 10px; }

.wm7 { grid-template-columns: 1fr 250px; gap: 10px; }
.wm7 .wm-canvas { border: 3px solid #1f1106; outline: 1px solid var(--wd-edge); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.6); background: #d9c29a; image-rendering: auto; }
.wm7 .wm-legend { background: rgba(43,26,12,.82); border: 1px solid rgba(214,176,112,.55); color: #f5e6c4; border-radius: 4px; font-family: Georgia, "Noto Sans Thai", serif; left: 12px; bottom: 12px; }
.wm7 .wm-legend i { border: 1px solid #3e2410; } .wm7 .wm-legend i.c { background: #7cb342; } .wm7 .wm-legend i.d { background: #e65100; } .wm7 .wm-legend i.s { background: #f5e6c4; }

/* ---- แผงข้อมูล = กระดาษผ้าใบ ---- */
.wm7 .wm-info {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(120,80,30,.18), transparent 60%),
    linear-gradient(180deg, var(--pm-1), var(--pm-2));
  border: 1px solid #1f1106; outline: 1px solid var(--pm-line); outline-offset: -5px;
  border-radius: 6px; padding: 12px; color: var(--pm-ink);
  box-shadow: inset 0 0 24px rgba(110,70,25,.35), 0 6px 18px rgba(0,0,0,.5);
  max-height: 560px; font-family: Georgia, "Noto Sans Thai", serif;
}
.wm7 .wm-title b { font-family: "Cinzel", Georgia, serif; font-weight: 800; font-size: 16px; letter-spacing: 1px; color: #3b1d08; }
.wm7 .wm-title small { color: var(--pm-dim); font-style: italic; }
.wm7 .wm-tags span { border: 1px solid #8a5a2b; color: #4a2c14; background: rgba(255,248,230,.5); border-radius: 3px; font-family: Georgia, serif; }
.wm7 .wm-tags .safe { border-color: #2e7d32; color: #1b5e20; } .wm7 .wm-tags .boss { border-color: #b71c1c; color: #b71c1c; }
.wm7 .wm-h { color: #7a5230; border-bottom: 1px solid var(--pm-line); font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: 2.5px; font-size: 10px; }
.wm7 .wm-mob { background: rgba(255,250,236,.55); border: 1px solid #c4a574; border-radius: 4px; }
.wm7 .wm-mob.boss { border-color: #b71c1c; background: rgba(255,225,215,.6); }
.wm7 .wm-mob img { background: radial-gradient(#5a3a1d, #2b180a); border-radius: 3px; }
.wm7 .wm-mob b { color: #2b1506; } .wm7 .wm-mob small { color: var(--pm-dim); }
.wm7 .wm-drop { background: rgba(255,250,236,.55); border: 1px solid #c4a574; border-radius: 4px; } .wm7 .wm-drop small { color: #5a3a1d; }
.wm7 .wm-set { background: rgba(255,250,236,.6); color: #3b2412; border-radius: 4px; }
.wm7 .wm-note, .wm7 .wm-empty { color: var(--pm-dim); font-style: italic; }
.wm7 .btn { background: linear-gradient(#fbf1d8, #e2cb98); border: 1px solid #8a5a2b; color: #3b2412; font-family: Georgia, "Noto Sans Thai", serif; border-radius: 4px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 4px rgba(60,30,5,.3); }
.wm7 .btn:hover { background: linear-gradient(#fff8e6, #ecd6a6); border-color: #5a3516; }
.wm7 .btn.gold { background: linear-gradient(#8a5a1f, #5a3510); border-color: #3b1d08; color: #ffe7a8; text-shadow: 0 1px 0 #1a0e05; }
.wm7 .btn.gold:hover { background: linear-gradient(#a06a26, #6b4014); box-shadow: 0 0 12px rgba(241,207,122,.35); }
.wm7 .btn.pink { background: linear-gradient(#b71c1c, #7f1010); border-color: #3e0d0d; color: #ffe0c0; }
.wm7 .btn[disabled] { opacity: .5; }
.wm7 .wm-info::-webkit-scrollbar-thumb { background: #b98f55; }
body.m-mobile .wm7 { grid-template-columns: 1fr; }
@media (max-width: 900px) { .wm7 { grid-template-columns: 1fr; } .wm7 .wm-info { max-height: 200px; } }
.win[data-win="worldmap"] { max-width: calc((100vw - 16px) / var(--ui, 1)); }
/* ---- v8: World Map เต็มจอ + ซูม ---- */
.win.wm-full[data-win="worldmap"] { left: 0 !important; top: 0 !important; width: calc(100vw / var(--ui, 1)) !important; height: calc(100vh / var(--ui, 1)); max-width: none; max-height: none !important; border-radius: 0; display: flex; flex-direction: column; animation: none; }
.win.wm-full[data-win="worldmap"] .win-head { border-radius: 0; cursor: default; }
.win.wm-full[data-win="worldmap"] .win-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.wm-full .wm7 { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: 100%; }
.wm-full .wm7 .wm-mapbox { position: relative; min-height: 0; height: 100%; }
.wm-full .wm7 .wm-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; border-radius: 4px; }
.wm-full .wm7 .wm-info { max-height: none; height: 100%; overflow-y: auto; }
.wm-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(43,26,12,.88); border: 1px solid #9a6a33; border-radius: 6px; padding: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.wm-zoom button { width: 32px; height: 32px; border-radius: 4px; border: 1px solid #8a5a2b; background: linear-gradient(#fbf1d8, #e2cb98); color: #3b2412; font: 700 16px Georgia, serif; cursor: pointer; }
.wm-zoom button:hover { background: #fff8e6; }
.wm-zoom b { color: #f1cf7a; font: 700 10px Georgia, serif; }
.wm-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(43,26,12,.8); color: #f5e6c4; border: 1px solid rgba(214,176,112,.55); border-radius: 12px; padding: 3px 12px; font: 11px Georgia, "Noto Sans Thai", serif; pointer-events: none; white-space: nowrap; }
@media (max-width: 900px) { .wm-full .wm7 { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 190px; } .wm-full .wm7 .wm-info { height: auto; } .wm-hint { display: none; } }

/* ---- v29: แผนที่เต็มจอ 100% + ป๊อปอัปข้อมูลดำใส 60% ---- */
.wm-full .wm7 { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; position: relative; }
.wm-full .wm7 .wm-canvas { border: 0; outline: 0; border-radius: 0; box-shadow: none; background: #140a04; }
.win.wm-full[data-win="worldmap"] .win-body { padding: 0; }
.wm7 .wm-info.wm-pop { position: absolute; right: 70px; top: 56px; width: 340px; max-height: calc(100% - 110px); height: auto !important; overflow-y: auto; z-index: 5;
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(241, 207, 122, .55); outline: none; border-radius: 14px; padding: 16px 16px 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .05); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  color: #f5e6c4; font-family: system-ui, "Noto Sans Thai", sans-serif; animation: wmPop .18s ease-out; }
.wm7 .wm-info.wm-pop.hide { display: none; }
@keyframes wmPop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.wm7 .wm-pop .wm-x { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(241, 207, 122, .5); background: rgba(255, 255, 255, .08); color: #f1cf7a; cursor: pointer; font-size: 14px; }
.wm7 .wm-pop .wm-title b { color: #ffe7a8; font-size: 18px; } .wm7 .wm-pop .wm-title small { color: rgba(245, 230, 196, .75); }
.wm7 .wm-pop .wm-tags span { background: rgba(255, 255, 255, .08); border-color: rgba(241, 207, 122, .45); color: #f5e6c4; }
.wm7 .wm-pop .wm-tags .safe { color: #69f0ae; border-color: #2e7d32; } .wm7 .wm-pop .wm-tags .boss { color: #ff8a80; border-color: #ff5252; }
.wm7 .wm-pop .wm-h { color: #f1cf7a; border-color: rgba(241, 207, 122, .35); }
.wm7 .wm-pop .wm-mob, .wm7 .wm-pop .wm-drop, .wm7 .wm-pop .wm-set { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #f5e6c4; }
.wm7 .wm-pop .wm-mob b { color: #fff; } .wm7 .wm-pop .wm-mob small, .wm7 .wm-pop .wm-drop small { color: rgba(245, 230, 196, .7); }
.wm7 .wm-pop .wm-note, .wm7 .wm-pop .wm-empty { color: rgba(245, 230, 196, .7); }
.wm7 .wm-legend { z-index: 4; }
@media (max-width: 900px) { .wm7 .wm-info.wm-pop { left: 10px; right: 10px; width: auto; top: auto; bottom: 10px; max-height: 55%; } }