/* World Map window: White & Sky-Blue Theme (โทนสี ขาวอมฟ้า หรูหรา สะอาดตา)
   - Eagle ornament crowned high above title (ไม่บังคำว่า Word Map)
   - Menu tabs placed in the top bar (ตรงจุดที่แคปมา ไม่บังแผนที่)
   - Crisp white-sky blue palette with gold borders matching character status styling */

#hud #world-window {
  --wm-gold: #c9a24e;
  --wm-gold-dark: #9c7a36;
  --wm-blue-sky: #dceefa;
  --wm-blue-mid: #9dc3e6;
  --wm-ink: #18335c;
  --wm-ink-soft: #38557d;
  
  inset: 0;
  margin: auto;
  height: fit-content;
  transform: none;
  animation: none;
  z-index: 60;
  width: min(1180px, 95vw, calc((100dvh - 36px) * 1.32));
  cursor: grab;
  max-height: none;
  overflow: visible !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--wm-ink);
  font-family: 'Segoe UI', Tahoma, 'Noto Sans Thai', sans-serif;
}

#hud #world-window .body {
  position: relative;
  container-type: inline-size;
  padding: 3.4cqw 1.4cqw 1cqw !important;
  border: 3px solid #c9a24e !important;
  border-radius: 14px !important;
  overflow: visible !important;
  background: radial-gradient(ellipse at 50% 0%, #ffffff 0%, #edf6ff 50%, #d8ebfa 100%) !important;
  box-shadow: 0 0 0 2px #9c7a36, 0 0 0 4px #bcd6ee, inset 0 0 0 2px #ffffff, 0 20px 48px rgba(25, 55, 95, 0.35) !important;
}

/* Hide legacy pseudo-corners and compass rose */
#hud #world-window .body:before,
#hud #world-window .body:after,
#hud #world-window .wm-rose {
  display: none !important;
}

/* Eagle Crest Ornament: Crowned high above the title banner (ไม่บังคำว่า Word Map) */
#hud #world-window .wm-ornament-top {
  position: absolute;
  left: 50%;
  top: -4.2cqw !important;
  width: 5.4cqw;
  height: 2.7cqw;
  margin-left: -2.7cqw;
  object-fit: contain;
  pointer-events: none;
  z-index: 25;
  filter: drop-shadow(0 3px 4px rgba(20, 45, 80, 0.4));
}

#hud #world-window .pc-corner {
  position: absolute;
  width: 4cqw;
  height: 4cqw;
  object-fit: contain;
  pointer-events: none;
  z-index: 15;
}

#hud #world-window .pc-corner.tl {
  left: -0.2cqw;
  top: -0.2cqw;
}

#hud #world-window .pc-corner.tr {
  right: -0.2cqw;
  top: -0.2cqw;
  transform: scaleX(-1);
}

#hud #world-window .pc-corner.bl {
  left: -0.2cqw;
  bottom: -0.2cqw;
  transform: scaleY(-1);
}

#hud #world-window .pc-corner.br {
  right: -0.2cqw;
  bottom: -0.2cqw;
  transform: scale(-1);
}

/* Header Title: "Word Map Novicia Online" in White-Sky Blue with Gold Border */
#hud #world-window .wm-title {
  position: absolute;
  left: 50%;
  top: -1.6cqw !important;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(31, 58, 102, 0.25));
}

#hud #world-window .wm-title h2 {
  margin: 0;
  padding: 0.3cqw 2.4cqw !important;
  font-family: Cormorant Garamond, 'Noto Serif Thai', Georgia, serif !important;
  font-size: 1.85cqw !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  color: #16325c !important;
  background: linear-gradient(180deg, #ffffff 0%, #edf6fe 55%, #d5e8f8 100%) !important;
  border: 2px solid #c9a24e !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 1px #9c7a36, 0 3px 10px rgba(31, 58, 102, 0.2), inset 0 1px 1px #ffffff !important;
  text-shadow: 0 1px 0 #ffffff, 0 2px 4px rgba(25, 55, 95, 0.15) !important;
  white-space: nowrap;
  clip-path: none !important;
}

#hud #world-window .wm-title p,
#hud #world-window #world-location {
  display: none !important;
}

/* Close Button (White-Sky Blue & Gold) */
#hud #world-window .atlas-close {
  position: absolute;
  right: 1cqw;
  top: 0.8cqw;
  width: 2.8cqw;
  height: 2.8cqw;
  z-index: 16;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  border: 2px solid #c9a24e !important;
  background: radial-gradient(circle at 40% 35%, #ffffff, #d8ebfa) !important;
  color: #8c6a2a !important;
  font-family: Arial, sans-serif !important;
  font-size: 1.9cqw !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 0 0 1px #9c7a36, 0 3px 8px rgba(31, 58, 102, 0.2), inset 0 1px 1px #ffffff !important;
  transition: all 0.15s ease-in-out;
}

#hud #world-window .atlas-close:hover {
  filter: brightness(1.1);
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(201, 162, 78, 0.5) !important;
}

/* World Chart: Clean Map View */
#hud #world-window .world-chart {
  position: relative;
  aspect-ratio: 3/2;
  margin: 0;
  border: 2px solid #a9c6e2 !important;
  border-radius: 8px !important;
  overflow: hidden;
  isolation: isolate;
  background: #cfe6f5 url('/maps/world-map/continent.webp?v=4') center/cover no-repeat !important;
  box-shadow: 0 0 0 1px #c9a24e, inset 0 0 24px rgba(31, 58, 102, 0.2), 0 4px 14px rgba(31, 58, 102, 0.15) !important;
  cursor: default;
}

/* Completely remove unwanted text overlays from map */
#hud #world-window .atlas-heading,
#hud #world-window .wm-motto,
#hud #world-window .wm-motto-l,
#hud #world-window .wm-motto-r {
  display: none !important;
}

/* Chart SVGs and Nodes */
#hud #world-window .world-chart path {
  fill: none;
  stroke: #c99834 !important;
  stroke-width: 4 !important;
  stroke-dasharray: 12 8 !important;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  opacity: 0.95;
}

#hud #world-window .world-chart circle {
  fill: #fff !important;
  stroke: #c99834 !important;
  stroke-width: 3.5 !important;
}

#hud #world-window .world-node strong {
  display: block;
  padding: 0.35cqw 1.3cqw 0.4cqw !important;
  font-family: 'Noto Sans Thai', Tahoma, sans-serif !important;
  font-size: 1.15cqw !important;
  font-weight: 700 !important;
  color: #16325c !important;
  background: linear-gradient(180deg, #ffffff, #e1eef9) !important;
  border: 1.5px solid #a9c6e2 !important;
  border-radius: 5px !important;
  clip-path: none !important;
  text-shadow: 0 1px 0 #fff !important;
  box-shadow: 0 3px 8px rgba(31, 58, 102, 0.25), inset 0 1px 0 #fff !important;
}

#hud #world-window .world-node.town strong {
  background: linear-gradient(180deg, #d9435b, #b3253c) !important;
  border-color: #ffd98a !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

#hud #world-window .world-node .atlas-level {
  clip-path: none !important;
  border-radius: 4px !important;
  border: 1px solid #fff !important;
  background: linear-gradient(180deg, #ffd98a, #c99c3a) !important;
  color: #221200 !important;
  font-weight: 800 !important;
  font-size: 0.95cqw !important;
  padding: 0.08cqw 0.6cqw !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

#hud #world-window .wm-here {
  background: linear-gradient(180deg, #ffffff, #e1eef9) !important;
  border: 1.5px solid #c9a24e !important;
  border-radius: 5px !important;
  color: #16325c !important;
  font-weight: 800 !important;
  font-size: 1.15cqw !important;
  box-shadow: 0 4px 10px rgba(31, 58, 102, 0.3) !important;
}

#hud #world-window .wm-here:after {
  border-top-color: #e1eef9 !important;
}

/* =========================================================
   SIDE MENU TABS -> Placed in TOP HEADER BAR (ตรงจุดที่แคปมา ไม่บังแผนที่)
   ========================================================= */
#hud #world-window .wm-tabs {
  position: absolute !important;
  left: 1.5cqw !important;
  top: 0.8cqw !important;
  z-index: 14 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.2cqw !important;
  width: auto !important;
  max-width: 34cqw !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid #c9a24e !important;
  border-radius: 7px !important;
  padding: 0.15cqw 0.25cqw !important;
  box-shadow: 0 0 0 1px #9c7a36, 0 3px 10px rgba(31, 58, 102, 0.18) !important;
}

#hud #world-window .wm-tab {
  display: flex !important;
  align-items: center !important;
  gap: 0.25cqw !important;
  width: auto !important;
  height: 1.9cqw !important;
  padding: 0 0.45cqw !important;
  white-space: nowrap !important;
  border: 1px solid #bdd5ed !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #ffffff, #edf5fd) !important;
  color: #233e66 !important;
  font-family: 'Noto Sans Thai', Tahoma, sans-serif !important;
  font-size: 0.88cqw !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(31, 58, 102, 0.1) !important;
  transition: all 0.15s ease-in-out !important;
}

#hud #world-window .wm-tab i {
  flex: none;
  font-size: 0.95cqw !important;
  line-height: 1;
}

#hud #world-window .wm-tab:hover {
  background: linear-gradient(180deg, #ffffff, #d9ecfc) !important;
  border-color: #79aee0 !important;
  color: #11284a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(31, 58, 102, 0.18) !important;
}

#hud #world-window .wm-tab.active {
  background: linear-gradient(180deg, #ffd98a, #dfa528) !important;
  border-color: #9c7a36 !important;
  color: #2b1803 !important;
  font-weight: 800 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 10px rgba(223, 165, 40, 0.5) !important;
}

#hud #world-window .wm-tab.active span {
  color: #2b1803 !important;
  font-weight: 800 !important;
}

/* =========================================================
   BOTTOM DETAIL & ACTIONS (White & Sky-Blue)
   ========================================================= */
#hud #world-window .wm-detail {
  display: grid !important;
  grid-template-columns: 20cqw 1fr 24cqw !important;
  gap: 1.4cqw !important;
  align-items: stretch !important;
  margin-top: 1cqw !important;
  padding: 1.2cqw 1.4cqw !important;
  border: 2px solid #c9a24e !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fc 100%) !important;
  box-shadow: 0 0 0 1px #9c7a36, inset 0 0 0 1px #ffffff, 0 6px 18px rgba(31, 58, 102, 0.18) !important;
}

/* Column 1: Map Thumbnail Preview */
#hud #world-window .wm-thumb {
  position: relative !important;
  min-height: 12cqw !important;
  border: 2px solid #a9c6e2 !important;
  border-radius: 8px !important;
  background-color: #dceffa !important;
  background-image: url('/maps/world-map/continent.webp?v=4') !important;
  box-shadow: 0 0 0 1px #c9a24e, inset 0 0 12px rgba(31, 58, 102, 0.25), 0 3px 8px rgba(31, 58, 102, 0.15) !important;
  overflow: hidden;
}

#hud #world-window .wm-thumb::before {
  content: "LOCATION PREVIEW";
  position: absolute;
  left: 0.5cqw;
  top: 0.5cqw;
  font-size: 0.85cqw !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.12cqw 0.55cqw;
  background: rgba(255, 255, 255, 0.95);
  color: #1c3560;
  border: 1px solid #a9c6e2;
  border-radius: 3px;
  z-index: 2;
  pointer-events: none;
}

/* Column 2: Area Information */
#hud #world-window .wm-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0.55cqw !important;
  min-width: 0 !important;
}

#hud #world-window .wm-info h3 {
  margin: 0 !important;
  font-family: Cormorant Garamond, 'Noto Serif Thai', Georgia, serif !important;
  font-size: 2.1cqw !important;
  font-weight: 700 !important;
  color: #16325c !important;
  text-shadow: 0 1px 0 #ffffff !important;
  letter-spacing: 0.02em;
}

#hud #world-window .wm-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6cqw !important;
  margin: 0.15cqw 0 !important;
}

#hud #world-window .wm-pills span {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1.5px solid #a9c6e2 !important;
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(31, 58, 102, 0.12);
}

#hud #world-window .wm-pills small {
  padding: 0.3cqw 0.7cqw !important;
  background: #eaf3fb !important;
  color: #204374 !important;
  font-size: 1.15cqw !important;
  font-weight: 700 !important;
  border-right: 1.5px solid #a9c6e2 !important;
}

#hud #world-window .wm-pills b {
  padding: 0.3cqw 0.9cqw !important;
  color: #16325c !important;
  font-size: 1.35cqw !important;
  font-weight: 700 !important;
}

#hud #world-window .wm-pills span + span b {
  color: #8c6a2a !important;
}

#hud #world-window .wm-info p {
  margin: 0 !important;
  font-family: 'Noto Sans Thai', Tahoma, sans-serif !important;
  font-size: 1.2cqw !important;
  line-height: 1.6 !important;
  color: #38557d !important;
}

/* Places Tab Grid */
#hud #world-window .wm-places {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.5cqw !important;
}

#hud #world-window .wm-places button {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15cqw !important;
  padding: 0.5cqw 0.7cqw !important;
  border: 1.5px solid #bdd5ed !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #16325c !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
}

#hud #world-window .wm-places button b {
  font-family: 'Noto Sans Thai', Tahoma, sans-serif !important;
  font-size: 1.15cqw !important;
  color: #16325c !important;
}

#hud #world-window .wm-places button small {
  font-family: 'Noto Sans Thai', Tahoma, sans-serif !important;
  font-size: 1.05cqw !important;
  color: #8c6a2a !important;
  font-weight: 700 !important;
}

#hud #world-window .wm-places button:hover,
#hud #world-window .wm-places button.active {
  background: linear-gradient(180deg, #edf5fd, #d5e9fb) !important;
  border-color: #c9a24e !important;
  box-shadow: 0 0 10px rgba(157, 195, 230, 0.5) !important;
  transform: translateY(-1px);
}

/* Column 3: Lore Quote & Travel Action Panel */
#hud #world-window .wm-quote {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 0.8cqw !important;
  padding: 0.9cqw 1.1cqw !important;
  background: #f4f9fe !important;
  border: 1.5px solid #bdd5ed !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 10px rgba(31, 58, 102, 0.05) !important;
}

#hud #world-window .wm-quote p {
  margin: 0 !important;
  font-family: 'Noto Serif Thai', Georgia, serif !important;
  font-size: 1.15cqw !important;
  line-height: 1.55 !important;
  font-style: italic !important;
  color: #3b567d !important;
  text-align: center !important;
}

#hud #world-window #world-travel {
  width: 100% !important;
  padding: 0.7cqw 1cqw !important;
  border: 2px solid #fff0a8 !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #ffe082 0%, #e6a820 48%, #b87808 52%, #db9a1b 100%) !important;
  color: #2b1803 !important;
  font-family: 'Noto Sans Thai', sans-serif !important;
  font-size: 1.45cqw !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 14px rgba(184, 120, 8, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px #9c7a36 !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#hud #world-window #world-travel:hover:not(:disabled) {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(223, 165, 40, 0.5), inset 0 1px 0 #fff !important;
}

#hud #world-window #world-travel:active:not(:disabled) {
  transform: translateY(1px) !important;
  filter: brightness(0.95) !important;
}

#hud #world-window #world-travel:disabled {
  background: linear-gradient(180deg, #e4edf5, #cbdbeb) !important;
  border: 1.5px solid #a4bccc !important;
  color: #627b99 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: default !important;
  opacity: 0.9 !important;
}

/* Footer Hint & Motto */
#hud #world-window .wm-hint {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 0.6cqw !important;
  padding: 0.5cqw 1cqw !important;
  background: #eaf3fb !important;
  border: 1px solid #bdd5ed !important;
  border-radius: 6px !important;
  font-family: 'Noto Sans Thai', sans-serif !important;
  font-size: 1.1cqw !important;
  color: #415f8a !important;
}

#hud #world-window .wm-hint span {
  display: flex !important;
  align-items: center !important;
  gap: 0.5cqw !important;
}

#hud #world-window .wm-hint em {
  color: #8a6a26 !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 1.05cqw !important;
}

/* =========================================================
   RESPONSIVE / MOBILE ADAPTATION
   ========================================================= */
@media (max-width: 700px) {
  #hud #world-window {
    width: min(98vw, calc((100dvh - 20px) * 0.95)) !important;
  }
  
  #hud #world-window .wm-title h2 {
    font-size: 3cqw !important;
    padding: 0.4cqw 2cqw !important;
  }

  #hud #world-window .wm-tabs {
    position: static !important;
    flex-direction: row !important;
    width: 100% !important;
    margin-top: 0.8cqw !important;
    gap: 0.4cqw !important;
    box-sizing: border-box !important;
  }

  #hud #world-window .wm-tab,
  #hud #world-window .wm-tab.active {
    width: auto !important;
    flex: 1 !important;
    height: 7cqw !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 2cqw !important;
    gap: 0.4cqw !important;
  }

  #hud #world-window .wm-detail {
    grid-template-columns: 1fr !important;
    gap: 1.5cqw !important;
  }

  #hud #world-window .wm-thumb {
    min-height: 18cqw !important;
  }

  #hud #world-window .wm-quote {
    padding: 1.5cqw !important;
  }

  #hud #world-window #world-travel {
    padding: 1.6cqw !important;
    font-size: 2.8cqw !important;
  }
}

/* =====================================================================
   v7 COMPACT LAYOUT (2026-09-26): 30% smaller, in-flow header + tab bar
   - Window ~70% of the previous size (800 CSS px before the HUD --ui-zoom scale)
   - New header bar: title + current-location chip + close button
   - Tabs are a full-width segmented bar under the header (no clipping)
   - Text uses px clamps so it stays readable at the smaller size
   ===================================================================== */
#hud #world-window {
  width: min(800px, calc((100vw - 16px) / var(--ui-zoom, 1)), calc((100dvh - 40px) / var(--ui-zoom, 1) * 0.86)) !important;
}
#hud #world-window .body {
  display: flex !important;
  flex-direction: column !important;
  gap: 11.2px !important;
  padding: 0 16.8px 14px !important;
  border-radius: 16.8px !important;
}
#hud #world-window .wm-ornament-top {
  top: -30.8px !important;
  width: 78.4px !important;
  height: 39.2px !important;
  margin-left: -39.2px !important;
}
#hud #world-window .pc-corner { width: 36.4px !important; height: 36.4px !important; }

/* Header bar */
#hud #world-window .wm-title {
  order: 1;
  position: relative !important;
  left: auto !important; top: auto !important;
  transform: none !important;
  margin: 0 -16.8px !important;
  padding: 16.8px 72.8px 12.6px 22.4px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  pointer-events: auto !important;
  filter: none !important;
  border-bottom: 2.8px solid #c9a24e !important;
  border-radius: 14px 14px 0 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #eaf4fd 60%, #d6e9f9 100%) !important;
  box-shadow: inset 0 -1.4px 0 #fff4cb, 0 2.8px 8.4px rgba(31, 58, 102, 0.12) !important;
}
#hud #world-window .wm-title h2 {
  display: flex !important;
  align-items: baseline !important;
  gap: 11.2px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: clamp(23.8px, 3.6cqw, 30.8px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.03em !important;
}
#hud #world-window .wm-title h2 .wm-t-sub {
  font-family: 'Noto Sans Thai', Tahoma, sans-serif !important;
  font-size: clamp(12.6px, 1.7cqw, 15.4px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: #8c6a2a !important;
  text-shadow: none !important;
}
#hud #world-window .wm-title p,
#hud #world-window #world-location {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 4.2px 14px !important;
  max-width: 45% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  border: 2.1px solid #a9c6e2 !important;
  border-radius: 1398.6px !important;
  background: #ffffff !important;
  color: #16325c !important;
  font: 700 clamp(14px, 1.9cqw, 16.8px) 'Noto Sans Thai', Tahoma, sans-serif !important;
  box-shadow: inset 0 1.4px 0 #fff, 0 1.4px 4.2px rgba(31, 58, 102, 0.12) !important;
}
#hud #world-window #world-location::before { content: "📍"; font-size: 0.95em; }
#hud #world-window .atlas-close {
  top: 12.6px !important;
  right: 14px !important;
  width: 39.2px !important;
  height: 39.2px !important;
  font-size: 25.2px !important;
}

/* Segmented tab bar */
#hud #world-window .wm-tabs {
  order: 2;
  position: static !important;
  left: auto !important; top: auto !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 5.6px !important;
  padding: 5.6px !important;
  border: 2.1px solid #bdd5ed !important;
  border-radius: 12.6px !important;
  background: #eef6fd !important;
  box-shadow: inset 0 1.4px 2.8px rgba(31, 58, 102, 0.08) !important;
  backdrop-filter: none !important;
}
#hud #world-window .wm-tab {
  justify-content: center !important;
  gap: 7px !important;
  height: 39.2px !important;
  padding: 0 5.6px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: clamp(14px, 2cqw, 16.8px) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
#hud #world-window .wm-tab span { overflow: hidden; text-overflow: ellipsis; }
#hud #world-window .wm-tab i {
  display: inline-grid !important;
  width: auto !important; height: auto !important;
  font-size: clamp(14px, 2cqw, 16.8px) !important;
  filter: none !important;
}
#hud #world-window .wm-tab:hover {
  background: #ffffff !important;
  border-color: #bdd5ed !important;
  transform: none !important;
}
#hud #world-window .wm-tab.active {
  background: linear-gradient(180deg, #ffe39a, #e2ab33) !important;
  border-color: #9c7a36 !important;
  transform: none !important;
  box-shadow: 0 1.4px 5.6px rgba(156, 122, 54, 0.45), inset 0 1.4px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Map */
#hud #world-window .world-chart { order: 3; }
#hud #world-window .world-node strong { font-size: clamp(12.6px, 1.9cqw, 16.8px) !important; padding: 2.8px 9.8px !important; }
#hud #world-window .world-node .atlas-level { font-size: clamp(11.2px, 1.5cqw, 14px) !important; padding: 0 5.6px !important; }
#hud #world-window .wm-here { font-size: clamp(12.6px, 1.8cqw, 15.4px) !important; }
#hud #world-window .world-chart path { stroke-width: 3 !important; }

/* Detail */
#hud #world-window .wm-detail {
  order: 4;
  margin-top: 0 !important;
  grid-template-columns: 26% 1fr 27% !important;
  gap: 14px !important;
  padding: 11.2px 14px !important;
  border-radius: 12.6px !important;
}
#hud #world-window .wm-thumb { min-height: 112px !important; }
#hud #world-window .wm-thumb::before { font-size: 11.2px !important; padding: 1.4px 5.6px !important; left: 5.6px !important; top: 5.6px !important; }
#hud #world-window .wm-info { gap: 5.6px !important; }
#hud #world-window .wm-info h3 { font-size: clamp(21px, 3cqw, 26.6px) !important; }
#hud #world-window .wm-pills { gap: 7px !important; }
#hud #world-window .wm-pills small { font-size: clamp(12.6px, 1.7cqw, 15.4px) !important; padding: 2.8px 8.4px !important; }
#hud #world-window .wm-pills b { font-size: clamp(14px, 1.9cqw, 16.8px) !important; padding: 2.8px 9.8px !important; }
#hud #world-window .wm-info p {
  font-size: clamp(14px, 1.85cqw, 16.8px) !important;
  line-height: 1.5 !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#hud #world-window .wm-places { grid-template-columns: repeat(3, 1fr) !important; gap: 5.6px !important; }
#hud #world-window .wm-places button { padding: 4.2px 8.4px !important; }
#hud #world-window .wm-places button b { font-size: clamp(12.6px, 1.7cqw, 15.4px) !important; }
#hud #world-window .wm-places button small { font-size: clamp(11.2px, 1.5cqw, 14px) !important; }
#hud #world-window .wm-quote { gap: 8.4px !important; padding: 9.8px 11.2px !important; }
#hud #world-window .wm-quote p { font-size: clamp(14px, 1.8cqw, 16.8px) !important; line-height: 1.45 !important; }
#hud #world-window #world-travel { font-size: clamp(16.8px, 2.3cqw, 19.6px) !important; padding: 8.4px 11.2px !important; }

/* Footer */
#hud #world-window .wm-hint {
  order: 5;
  margin-top: 0 !important;
  padding: 5.6px 11.2px !important;
  font-size: clamp(12.6px, 1.7cqw, 15.4px) !important;
}
#hud #world-window .wm-hint em { font-size: clamp(12.6px, 1.6cqw, 14px) !important; }


/* header title spans (reset legacy span styling) */
#hud #world-window .wm-title h2 > span {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  line-height: 1.1 !important;
}
#hud #world-window .wm-title h2 .wm-t-main {
  font-family: Cormorant Garamond, 'Noto Serif Thai', Georgia, serif !important;
  font-size: clamp(24px, 4.2cqw, 31px) !important;
  font-weight: 800 !important;
  color: #16325c !important;
  text-shadow: 0 1px 0 #ffffff, 0 2px 4px rgba(25, 55, 95, 0.18) !important;
}
#hud #world-window .wm-title h2 .wm-t-main::before {
  content: "✦";
  margin-right: 8px;
  color: #c9a24e;
  font-size: 0.8em;
  vertical-align: 0.08em;
}
#hud #world-window .wm-title h2 .wm-t-sub {
  padding: 2px 8px !important;
  border: 1px solid #d9c48a !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #fffaf0, #f6ecd2) !important;
}

@media (max-width: 700px) {
  #hud #world-window { width: min(calc((100vw - 10px) / var(--ui-zoom, 1)), calc((100dvh - 24px) / var(--ui-zoom, 1) * 0.72)) !important; }
  #hud #world-window .wm-title h2 { font-size: 22.4px !important; }
  #hud #world-window .wm-tabs { margin-top: 0 !important; }
  #hud #world-window .wm-tab, #hud #world-window .wm-tab.active { height: 39.2px !important; flex: none !important; font-size: 14px !important; }
  #hud #world-window .wm-tab span { display: none; }
  #hud #world-window .wm-tab i { font-size: 19.6px !important; }
  #hud #world-window .wm-detail { grid-template-columns: 34% 1fr !important; }
  #hud #world-window .wm-quote { grid-column: 1 / -1; flex-direction: row !important; align-items: center !important; }
  #hud #world-window .wm-quote p { flex: 1; text-align: left !important; }
  #hud #world-window #world-travel { width: auto !important; min-width: 154px; font-size: 18.2px !important; padding: 9.8px 14px !important; }
  #hud #world-window .wm-hint em { display: none; }
}

/* Landscape phones / short screens: map on the left, details on the right */
@media (max-height: 560px) and (orientation: landscape) {
  #hud #world-window {
    width: min(calc((100vw - 16px) / var(--ui-zoom, 1)), calc((100dvh - 16px) / var(--ui-zoom, 1) * 1.62)) !important;
  }
  #hud #world-window .body {
    display: grid !important;
    grid-template-columns: 61% 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    gap: 8px 10px !important;
    padding: 0 10px 10px !important;
  }
  #hud #world-window .wm-title { grid-column: 1 / -1; grid-row: 1; margin: 0 -10px !important; padding: 10px 48px 8px 14px !important; }
  #hud #world-window .wm-tabs { grid-column: 1 / -1; grid-row: 2; }
  #hud #world-window .world-chart { grid-column: 1; grid-row: 3; align-self: start; }
  #hud #world-window .wm-detail {
    grid-column: 2; grid-row: 3;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 7px !important;
  }
  #hud #world-window .wm-thumb { min-height: 64px !important; }
  #hud #world-window .wm-quote { flex-direction: column !important; }
  #hud #world-window .wm-hint { display: none !important; }
  #hud #world-window .wm-tab span { display: inline; }
}
@media (max-width: 700px) and (orientation: portrait) {
  #hud #world-window .wm-title { padding-right: 46px !important; }
  #hud #world-window #world-location { max-width: 38% !important; font-size: 13px !important; padding: 2px 8px !important; }
  #hud #world-window .wm-title h2 .wm-t-sub { display: none !important; }
}
/* close button must sit above the in-flow header bar */
#hud #world-window .atlas-close { z-index: 40 !important; }
#hud #world-window .wm-title { padding-right: 86px !important; }

/* World Map v2: regions that are not playable yet ("เร็วๆ นี้") */
#hud #world-window .world-node.soon strong { background: linear-gradient(180deg, #eef1f4, #cfd6dd) !important; color: #4a5866 !important; border-color: #b4bec8 !important; }
#hud #world-window .world-node.soon .atlas-level { background: linear-gradient(180deg, #e9e4d6, #c9c0a8) !important; }
#hud #world-window .world-node .wm-soon { display: none; }
#hud #world-window .world-node.soon .wm-soon { display: none; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); padding: 0 6px; border-radius: 4px; background: #ffd84d; color: #3a2a00; font: 700 clamp(10px, 1.3cqw, 13px) 'Noto Sans Thai', Tahoma, sans-serif; white-space: nowrap; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
#hud #world-window .wm-places { max-height: 22cqw; overflow-y: auto; scrollbar-width: thin; }
#hud #world-window .wm-places button { min-width: 0 !important; }
#hud #world-window .wm-places button b,
#hud #world-window .wm-places button small { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#hud #world-window .wm-places button.soon { opacity: 0.7; }