/* =====================================================================
   MAP (map.html) — bản đồ trong khung, ở giữa, content 2 bên khi hover
   ===================================================================== */
/* BẢN NỀN SÁNG — cùng "mặt bàn lá sen" với trang chủ (.solo-section,
   .map-cta), region-v2 và khối nhân vật ở trang dự án.
   Trước đây trang này nền xanh ĐẬM, chữ kem. Lật sang nền sáng thì mọi
   sắc "dành cho nền tối" bên dưới đều phải đổi theo: cam nhạt --orange-2,
   các rgba(251,239,239,...) (kem mờ) và bóng đen đậm.
   LƯU Ý: map.html cũng phải trả lại class .on-light cho <nav>, nếu không
   chữ nav vẫn là kem và chìm hẳn vào nền sáng. */
.map-page {
  /* Dải sáng ĐỀU, nhạt dần từ trên xuống. Bản trước đặt sắc lá sen ĐẬM
     nhất ở ngay đỉnh trang (radial ... at 50% 0%, #bfd6aa 0%), thành ra
     dưới thanh nav có một vệt xám tối vắt ngang — nhìn y như một lớp phủ
     đen, dù không hề có màu đen nào trong file này.
     Muốn đậm/nhạt hơn: chỉnh ba mốc màu bên dưới, nhưng GIỮ mốc sáng
     nhất ở trên cùng. */
  background:
    linear-gradient(180deg, #e9f1dc 0%, #dcead0 46%, #cfe2bf 100%);
  background-attachment: fixed;
  color: var(--green);
}

.explorer {
  padding: 120px 0 90px;
}
.explorer-head {
  width: min(92vw, 820px);
  margin: 0 auto 40px;
  text-align: center;
}
.explorer-head .eyebrow {
  /* --orange-2 là cam NHẠT cho nền tối; nền sáng cần cam gốc */
  color: var(--orange);
}
.explorer-head h1 {
  font-size: clamp(36px, 6vw, 84px);
  text-transform: uppercase;
  margin: 12px 0 14px;
}
.explorer-head p {
  color: rgba(18, 53, 40, 0.72);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}
.explorer-head b {
  color: var(--orange);
}

/* Bố cục: [panel trái] [khung bản đồ] [panel phải]
   ---------------------------------------------------------------------
   BẢN ĐỒ LÀ NHÂN VẬT CHÍNH -> cột giữa phải RỘNG HƠN HẲN hai panel.
   Trước đây ba cột gần bằng nhau (1fr 1.05fr 1fr) cộng khe hở tới 100px,
   nên trên màn 1440px bản đồ chỉ còn ~340px — bé hơn cả trên điện thoại.
   minmax(0, …) để cột không bị nội dung panel đẩy rộng ra.
   MUỐN BẢN ĐỒ TO/NHỎ HƠN: đổi số 2fr ở cột giữa. */
.map-explorer {
  width: min(95vw, 1460px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 2fr) minmax(0, 0.82fr);
  gap: clamp(20px, 2.6vw, 52px);
  align-items: center;
}

/* ---------- Khung bản đồ (nổi bật, ở giữa) --------------------------- */
.map-frame {
  position: relative;
  /* Chặn trên theo CHIỀU CAO màn hình: cột giữa rất rộng nên nếu thả tự do,
     bản đồ (khổ dọc) sẽ cao hơn cả màn hình. Nhân với --map-aspect để khung
     ôm sát bản đồ, không chừa hai dải trống hai bên.
     --map-aspect = tỉ lệ ngang/dọc của viewBox trong assets/js/map.js. */
  --map-aspect: 0.804;
  /* width:100% là BẮT BUỘC: ô lưới rộng hơn khung, mà justify-self:center
     (hay margin auto) sẽ khiến khung co lại vừa nội dung — lúc đó bề ngang
     do hàng chú giải quyết định chứ không phải bản đồ (đo được 470px thay
     vì 564px). Có width:100% thì khung nở hết ô rồi mới bị max-width chặn.
     max(): giữ sàn 420px cho màn hình thấp, lúc đó cuộn một chút vẫn hơn
     là nhìn bản đồ tí xíu. */
  width: 100%;
  justify-self: center;
  max-width: max(420px, min(90svh * var(--map-aspect) + 40px, 100%));
  background: radial-gradient(120% 90% at 50% 0%, #fbf4e4, #efe3c8);
  border: 1px solid rgba(18, 53, 40, 0.34);
  border-radius: 24px;
  padding: 18px;
  /* Giấy kem đặt trên nền lá sen sáng: hai sắc gần nhau hơn hồi nền tối,
     nên viền phải đậm hơn một chút thì khung mới tách khỏi mặt bàn. */
  box-shadow:
    0 26px 60px rgba(18, 53, 40, 0.26),
    inset 0 0 0 6px rgba(255, 255, 255, 0.5);
}
/* viền trang trí kiểu bản đồ cổ */
.map-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(18, 53, 40, 0.28);
  border-radius: 16px;
  pointer-events: none;
}
.map-caption {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 0.9;
  color: rgba(18, 53, 40, 0.08);
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}
#map-host {
  position: relative;
  z-index: 1;
}
#map-host svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Trạng thái vùng — SÁNG RÕ trên nền giấy */
.province {
  stroke: #7c6a45;
  stroke-width: 0.6px;
  stroke-linejoin: round;
  transition:
    fill 0.18s ease,
    filter 0.18s ease;
}
.province.locked {
  fill: #cdbf9c !important;
  cursor: not-allowed;
}
.province.locked:hover {
  fill: #c2b48d !important;
}
.province.unlocked {
  fill: var(--moss);
  cursor: pointer;
}
.province.unlocked:hover {
  fill: var(--orange) !important;
  filter: drop-shadow(0 0 10px rgba(225, 113, 74, 0.55));
}
.province.selected {
  fill: var(--orange) !important;
  stroke: #fff;
  stroke-width: 1.3px;
}
.vn-boundary {
  fill: none;
  stroke: rgba(18, 53, 40, 0.55);
  stroke-width: 1.1px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ---------- Biển Đông + quần đảo Hoàng Sa / Trường Sa ---------------- */
.sea-label {
  font-family: var(--display, serif);
  font-size: 15px;
  letter-spacing: 0.34em;
  fill: rgba(18, 53, 40, 0.28);
  pointer-events: none;
  user-select: none;
}

.archipelago {
  cursor: default;
}
.arch-box {
  fill: rgba(18, 53, 40, 0.03);
  stroke: rgba(18, 53, 40, 0.45);
  stroke-width: 0.9px;
  stroke-dasharray: 4 3;
  transition:
    fill 0.18s ease,
    stroke 0.18s ease;
}
.arch-dot {
  fill: #7c6a45;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 0.5px;
  pointer-events: none;
}
.arch-label {
  font-family: var(--display, serif);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  fill: rgba(18, 53, 40, 0.78);
  pointer-events: none;
  user-select: none;
}
.archipelago:hover .arch-box {
  fill: rgba(225, 113, 74, 0.14);
  stroke: var(--orange);
}
.archipelago:hover .arch-dot {
  fill: var(--orange);
}
.archipelago:hover .arch-label {
  fill: var(--orange);
}
/* Quần đảo đã có bài viết (khai báo trong map-config) → bấm được */
.archipelago.unlocked {
  cursor: pointer;
}
.archipelago.unlocked .arch-dot {
  fill: var(--moss);
}
.archipelago.selected .arch-box {
  fill: rgba(225, 113, 74, 0.2);
  stroke: var(--orange);
  stroke-dasharray: none;
}

.map-legend {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  margin-top: 10px;
  font-size: 11.5px;
  color: rgba(18, 53, 40, 0.7);
}
.map-legend > span {
  white-space: nowrap;
}
.map-legend .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 7px;
  vertical-align: middle;
}
.map-legend .dot.unlocked {
  background: var(--moss);
}
.map-legend .dot.locked {
  background: #cdbf9c;
}
.map-legend .dot.sea {
  background: transparent;
  border: 1px dashed rgba(18, 53, 40, 0.6);
}

/* ---------- Panel 2 bên --------------------------------------------- */
.map-side {
  min-height: 200px;
}
.map-side.left {
  text-align: right;
}
.ms-index {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}
.ms-name {
  /* Cột hai bên hẹp lại (bản đồ đã lấy phần lớn bề ngang) nên cỡ chữ phải
     nhỏ theo, nếu không tên vùng dài sẽ tràn ra ngoài cột.
     line-height 0.95 làm DẤU TIẾNG VIỆT của dòng dưới (Ộ, Ồ…) chạm vào
     dòng trên — Anton vốn đã cao sẵn; 1.06 là mức vừa đủ tránh chồng. */
  font-size: clamp(26px, 2.1vw, 42px);
  text-transform: uppercase;
  margin: 12px 0;
  line-height: 1.06;
  overflow-wrap: break-word;
}
.ms-status {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(18, 53, 40, 0.28);
  color: rgba(18, 53, 40, 0.8);
}
.ms-status.unlocked {
  background: var(--moss);
  border-color: var(--moss);
  color: #fff;
}
.ms-status.locked {
  background: rgba(18, 53, 40, 0.06);
}
.ms-status.sea {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.map-side.right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.ms-photo {
  width: 100%;
  height: 230px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(18, 53, 40, 0.06);
  box-shadow: 0 20px 44px rgba(18, 53, 40, 0.22);
}
.ms-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.ms-blurb {
  color: rgba(18, 53, 40, 0.78);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
.ms-cta[hidden] {
  display: none;
}

/* Cập nhật mượt khi đổi vùng */
.map-side .ms-name,
.map-side .ms-blurb,
.ms-photo img {
  transition: opacity 0.25s ease;
}
.map-side.is-updating .ms-name,
.map-side.is-updating .ms-blurb,
.map-side.is-updating .ms-photo img {
  opacity: 0.35;
}

@media (max-width: 960px) {
  .map-explorer {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  /* Một cột -> bản đồ ăn trọn bề ngang. Trần chiều cao nới rộng vì đây là
     thứ người dùng cuộn tới để xem, cao một chút không sao. */
  .map-frame {
    /* Một cột -> không còn trần theo chiều cao, bản đồ ăn trọn bề ngang */
    max-width: min(560px, 100%);
    padding: 12px;
    border-radius: 18px;
  }
  .map-side.left {
    text-align: center;
    order: 2;
  }
  .map-frame {
    order: 1;
  }
  .map-side.right {
    order: 3;
    align-items: center;
    text-align: center;
  }
  .ms-blurb {
    text-align: center;
  }
}