/* ================= BẢN ĐỒ THẾ GIỚI ================= */
/* cửa sổ rộng hơn mặc định để chứa tranh và khung thông tin */
.win:has(> .win-body > .wmap) { width: min(1160px, 96vw); max-height: min(660px, 94vh); }
.win-body:has(> .wmap) { overflow: hidden; }

.wmap { display: flex; gap: 8px; align-items: stretch; }

/* cuộn tranh: hai trục gỗ sơn mài đầu bịt vàng ở hai bên */
.wmap-roll { position: relative; display: flex; flex: none; max-width: 100%; min-width: 0; padding: 0 13px; }
.wmap-roll::before, .wmap-roll::after {
  content: ''; position: absolute; top: -5px; bottom: -5px; width: 13px; border: 1px solid var(--ink); border-radius: 3px;
  background:
    linear-gradient(#fff1bf, #e8b452 40%, #7a4a12) top / 100% 8px no-repeat,
    linear-gradient(#7a4a12, #e8b452 60%, #fff1bf) bottom / 100% 8px no-repeat,
    linear-gradient(90deg, #4a1309, var(--lac) 30%, #d0583a 45%, var(--lac) 62%, var(--lac2));
  box-shadow: inset 0 9px 0 -8px var(--ink), inset 0 -9px 0 -8px var(--ink), 0 2px 4px rgba(0, 0, 0, 0.5);
}
.wmap-roll::before { left: 0; }
.wmap-roll::after { right: 0; }
.wmap-view {
  position: relative; min-width: 0; overflow: auto; scrollbar-width: none; touch-action: pan-x pan-y;
  border: 1px solid var(--ink); box-shadow: 0 0 0 1px rgba(240, 200, 105, 0.55);
  background: #ecd8a8;
}
.wmap-view::-webkit-scrollbar { display: none; }
.wmap-stage { position: relative; }
.wmap-cv { display: block; image-rendering: pixelated; cursor: default; touch-action: pan-x pan-y; }

/* chú thích đồng đội khi rê chuột / chạm */
.wmap-tip {
  position: absolute; z-index: 2; transform: translate(-50%, -100%); pointer-events: none; display: none;
  padding: 2px 8px 3px; font-size: 16px; line-height: 16px; white-space: nowrap; color: #b9e0ff; text-shadow: var(--outline);
  background: var(--plate); border: 1px solid var(--ink); border-radius: 4px; box-shadow: var(--plate-line);
}
.wmap-tip.on { display: block; }
.wmap-tip b { display: block; font-weight: normal; color: var(--gold); }

/* khung thông tin */
.wmap-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; padding: 6px 8px 8px;
  border: 1px solid var(--ink); border-radius: 5px;
  background: linear-gradient(rgba(84, 56, 36, 0.42), rgba(44, 28, 18, 0.42));
  box-shadow: inset 0 0 0 1px rgba(201, 154, 69, 0.3), inset 0 1px 0 1px rgba(255, 220, 160, 0.06);
  touch-action: pan-y;
}
.wmi-head { padding-bottom: 4px; border-bottom: 1px solid rgba(201, 154, 69, 0.35); }
.wmi-name { font-size: 26px; line-height: 26px; color: var(--gold); text-shadow: var(--outline); letter-spacing: 0.5px; }
.wmi-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.wmi-tag {
  font-size: 16px; line-height: 17px; padding: 0 6px; border-radius: 3px; text-shadow: var(--outline);
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(201, 154, 69, 0.5); color: var(--text);
}
.wmi-tag.k-town { color: #b3e5fc; }
.wmi-tag.k-pvp, .wmi-tag.danger { color: var(--bad); border-color: rgba(255, 123, 123, 0.6); }
.wmi-tag.here { color: #fff176; border-color: rgba(255, 241, 118, 0.6); }
.wmi-tag.quest { color: var(--exp); border-color: rgba(255, 193, 7, 0.6); }
.wmi-tag.event { color: #ff8a80; border-color: rgba(255, 23, 68, 0.7); background: rgba(90, 8, 24, 0.6); }
/* Tà Thú đang ở bản đồ này */
.wmi-event {
  font-size: 16px; line-height: 17px; color: #ffe0e6; padding: 3px 6px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(110, 10, 34, 0.75), rgba(60, 6, 20, 0.55)); border: 1px solid var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 23, 68, 0.55);
}
.wmi-event b { font-weight: normal; color: #ff8a80; }
.wmi-warn {
  font-size: 16px; line-height: 17px; color: #ffd0c8; padding: 3px 6px; border-radius: 3px;
  background: rgba(142, 36, 20, 0.55); border: 1px solid var(--lac2); box-shadow: inset 0 0 0 1px rgba(255, 123, 123, 0.35);
}
.wmi-sub { display: flex; align-items: center; gap: 6px; color: var(--gold); font-size: 18px; line-height: 19px; text-shadow: var(--outline); }
.wmi-sub::before { content: ''; width: 6px; height: 6px; background: #e2553a; border: 1px solid var(--gold); transform: rotate(45deg); flex: none; }
.wmi-list { list-style: none; margin: 1px 0 0; padding: 0; }
.wmi-list li {
  display: flex; justify-content: space-between; gap: 6px; font-size: 17px; line-height: 19px;
  border-bottom: 1px dotted rgba(201, 154, 69, 0.25);
}
.wmi-list li b { font-weight: normal; color: var(--gold); flex: none; }
.wmi-list li b.bad { color: var(--bad); }
.wmi-list li i { font-style: normal; color: var(--muted); font-size: 15px; margin-left: auto; white-space: nowrap; }
.wmi-list.npc li { flex-wrap: wrap; gap: 0 6px; }
.wmi-list.npc li span { white-space: nowrap; }
.wmi-list.boss li span { color: var(--r4); }
.wmi-list.npc li span { color: #c8ecff; }
.wmi-party { display: flex; flex-wrap: wrap; gap: 4px; }
.wmi-mate { font-size: 16px; padding: 0 6px; border-radius: 3px; color: #b9e0ff; background: rgba(30, 136, 229, 0.25); border: 1px solid rgba(90, 180, 255, 0.5); }
.wmi-route { font-size: 17px; line-height: 19px; }
.wmi-route b { font-weight: normal; color: var(--gold); }
.wmi-path { color: var(--muted); font-size: 16px; line-height: 17px; margin-top: 2px; }
.wmi-go { position: sticky; bottom: 0; margin-top: auto; width: 100%; font-size: 22px; padding: 4px 12px 5px; flex: none; }

/* màn hình hẹp và đủ cao (dọc): khung thông tin xuống dưới, thân cửa sổ cuộn được để luôn tới nút Đi tới */
@media (max-width: 760px) and (min-height: 521px) {
  .win-body:has(> .wmap) { overflow-y: auto; }
  .wmap { flex-direction: column; }
  .wmap-info { max-height: 40vh; }
}
/* điện thoại ngang: thấp, tranh cuộn được trong khung, thông tin bên cạnh cho vừa chiều cao */
@media (max-height: 520px) {
  .win:has(> .win-body > .wmap) .win-foot { display: none; }
  .wmap-view { max-height: calc(96vh - 52px); }
  /* chừa chỗ cho khung thông tin bên cạnh trên điện thoại ngang hẹp */
  .wmap-roll { max-width: calc(100% - 210px); }
  .wmap-info { max-height: calc(96vh - 48px); padding: 4px 6px 6px; gap: 3px; }
  .wmi-name { font-size: 22px; line-height: 22px; }
  .wmi-sub { font-size: 17px; line-height: 18px; }
  .wmi-list li, .wmi-route { font-size: 16px; line-height: 17px; }
  .wmi-tag, .wmi-warn, .wmi-event, .wmi-path, .wmi-mate { font-size: 15px; line-height: 16px; }
  .wmi-go { min-height: 44px; }
}