/* ====================================================================
 * VÕ LÂM TRUYỀN KỲ - SƠN HÀ XÃ TẮC (CLASSIC RETRO PC HUD STYLESHEET)
 * Thiết kế giao diện nổi khối kim loại, viền đồng đúc dập nổi chuẩn VLTK 2005
 * ==================================================================== */

/* 1. THANH PHÍM TẮT & KỸ NĂNG DƯỚI (PAD / QUICK SLOTS) */
#pad {
  background: radial-gradient(circle at 50% 50%, #201a14 0%, #0d0a07 100%) !important;
  border: 2px solid #5a4828 !important;
  border-radius: 4px !important;
  box-shadow: 
    inset 0 0 0 1px #9c8242,
    inset 0 0 8px rgba(0,0,0,0.9),
    0 4px 12px rgba(0,0,0,0.85) !important;
  padding: 4px 6px !important;
}

#pad .hb + .hb {
  border-left: 2px groove #5a4828 !important;
  box-shadow: -1px 0 0 #110e0a !important;
  padding-left: 6px !important;
  margin-left: 6px !important;
}

#pad .pbtn {
  border: 1px solid #786237 !important;
  background: radial-gradient(circle at 35% 35%, #242424 0%, #080808 100%) !important;
  box-shadow: 
    inset 1px 1px 0 rgba(255,225,140,0.25),
    inset -1px -1px 0 rgba(0,0,0,0.8),
    0 1px 3px rgba(0,0,0,0.6) !important;
  transition: transform 0.08s ease, filter 0.08s ease !important;
}

#pad .pbtn:hover {
  border-color: #d8b868 !important;
  box-shadow: 
    inset 1px 1px 0 rgba(255,255,200,0.4),
    0 0 6px #d8b868aa !important;
}

#pad .pbtn:active {
  transform: translateY(1px) scale(0.97) !important;
  box-shadow: inset 1px 1px 3px #000 !important;
}

/* Ô chiêu thức chính (Main Skill Button) nổi bật hình bát giác/kim loại cổ */
#pad .pbtn.mn {
  border: 2px solid #b89848 !important;
  box-shadow: 
    inset 0 0 0 1px #332610,
    inset 0 0 6px rgba(255,215,100,0.35),
    0 0 8px rgba(216,184,104,0.45) !important;
  background: radial-gradient(circle at 40% 40%, #302615 0%, #0c0804 100%) !important;
}

/* 2. CỤM NÚT MENU TÍNH NĂNG ĐÁY MÀN HÌNH (#tabs) */
#tabs {
  background: linear-gradient(180deg, #2b251e 0%, #15120e 50%, #0b0907 100%) !important;
  border-top: 2px solid #70582d !important;
  box-shadow: 
    inset 0 1px 0 #9e844a,
    0 -3px 10px rgba(0,0,0,0.85) !important;
}

#tabs button {
  color: #c4b998 !important;
  text-shadow: 1px 1px 2px #000, -1px -1px 2px #000 !important;
  font-weight: 600 !important;
  position: relative !important;
  transition: all 0.15s ease !important;
}

#tabs button:hover {
  color: #fff2c4 !important;
}

#tabs button.on {
  color: #ffd768 !important;
  background: radial-gradient(ellipse at 50% 60%, rgba(130, 95, 30, 0.45) 0%, rgba(0,0,0,0) 75%) !important;
  text-shadow: 0 0 6px rgba(255,215,104,0.6), 1px 1px 2px #000 !important;
}

/* Hiệu ứng viền sáng nhẹ chân icon nút menu */
#tabs button.on::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e2be68, transparent);
}

/* 3. NÚT TRÊN HEADER & THANH ĐIỀU KHIỂN CHIẾN ĐẤU (TOP CONTROLS & CHIPS) */
#topCtl .chip, 
#ctrlBtn, 
#rotBtn, 
#pkBtn,
.u20 .chip {
  background: linear-gradient(180deg, #2c251d 0%, #17130e 100%) !important;
  border: 1px solid #6b5329 !important;
  box-shadow: 
    inset 1px 1px 0 rgba(220,185,115,0.25),
    inset -1px -1px 0 rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.6) !important;
  color: #d9ccaa !important;
  border-radius: 3px !important;
  text-shadow: 1px 1px 1px #000 !important;
}

#topCtl .chip:hover,
#pkBtn:hover {
  border-color: #c9a656 !important;
  color: #fff !important;
  box-shadow: 0 0 5px rgba(201,166,86,0.5) !important;
}

/* Chế độ PK Đồ Sát / Hòa Bình */
#pkBtn.chip.red, #pkBtn[data-pk="1"] {
  border-color: #b83828 !important;
  background: linear-gradient(180deg, #481812 0%, #1c0604 100%) !important;
  color: #ff9d8f !important;
  box-shadow: 0 0 6px rgba(220,60,40,0.6) !important;
}

/* 4. THANH TRẠNG THÁI MÁU & MANA (HUD HP / MP BARS) */
#hud {
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.85));
}

#hud .bar {
  border: 1px solid #584422 !important;
  box-shadow: 
    inset 0 0 4px #000,
    0 1px 2px rgba(0,0,0,0.8) !important;
  border-radius: 2px !important;
}

#hud .jxs {
  background: linear-gradient(180deg, #282017 0%, #110d09 100%) !important;
  border: 1px solid #5e4822 !important;
  border-radius: 3px !important;
  box-shadow: inset 1px 1px 0 rgba(200,165,95,0.2) !important;
}

#hud .jxs b {
  color: #f7df9e !important;
  text-shadow: 0 0 3px #000 !important;
}

/* ====================================================================
 * 5. BỐ TRÍ LẠI GIAO DIỆN BẢN WEB (DESKTOP / LANDSCAPE):
 * - Đưa cụm Hòa Bình, Xoay Chiêu, Auto nằm sát mép trái ngay dưới ô Cấp độ (nhỏ gọn)
 * - Đưa khung Chế Độ: Luyện Công sang bên phải thanh kỹ năng #pad (nhỏ gọn)
 * ==================================================================== */

@media (min-width: 641px) {
  /* 5.1. Khung Chế Độ: Luyện Công (#modeSw) nằm sang BÊN PHẢI thanh kỹ năng #pad */
  body.u20 #modeSw,
  #modeSw {
    top: auto !important;
    bottom: 5px !important;
    left: calc(50% + 185px) !important; /* Đặt sát mép PHẢI của cụm kỹ năng #pad */
    right: auto !important;
    transform: none !important;
    z-index: 10 !important;
    height: 34px !important; /* Thu nhỏ chiều cao bằng ô kỹ năng */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  #modeSw #mswBtn {
    height: 30px !important;
    line-height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important; /* Chỉnh chữ nhỏ lại nhìn thanh thoát */
    font-weight: 600 !important;
    background: radial-gradient(circle at 40% 40%, #201a14 0%, #0d0a07 100%) !important;
    border: 1.5px solid #5a4828 !important;
    border-radius: 3px !important;
    box-shadow: 
      inset 0 0 0 1px #9c8242,
      inset 0 0 4px rgba(0,0,0,0.9),
      0 2px 6px rgba(0,0,0,0.8) !important;
    color: #e8dcb0 !important;
    text-shadow: 1px 1px 2px #000 !important;
    white-space: nowrap !important;
  }

  #modeSw #mswBtn b {
    color: #ffd768 !important;
  }

  #modeSw #mswMenu {
    bottom: 36px !important;
    background: #15110c !important;
    border: 1.5px solid #786237 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.9) !important;
  }

  #modeSw #mswMenu button {
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    color: #d9ccaa !important;
  }

  #modeSw #mswMenu button:hover,
  #modeSw #mswMenu button.on {
    background: linear-gradient(90deg, #423014, #1f1609) !important;
    color: #ffe494 !important;
  }

  /* 5.2. Cụm nút Hòa Bình, Xoay Chiêu, Auto (#topCtl) nằm sát ra ngoài bên dưới CẤP ĐỘ (Góc trái) */
  body.u20 #topCtl,
  #topCtl {
    top: 32px !important; /* Ngay bên dưới ô Cấp độ của thanh HUD */
    bottom: auto !important;
    left: 190px !important; /* Khớp thẳng hàng với lề trái của thanh HUD máu/cấp độ */
    right: auto !important;
    transform: none !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important; /* Khoảng cách gọn gàng */
    background: rgba(14, 11, 8, 0.75) !important;
    padding: 2px 6px !important;
    border: 1px solid #5a4828 !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(2px) !important;
  }

  #topCtl .chip,
  #ctrlBtn,
  #rotBtn,
  #pkBtn {
    height: 20px !important; /* Thu nhỏ lại thanh mảnh */
    line-height: 18px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    border-radius: 2px !important;
  }

  #topCtl .ck,
  #ctrlBtn .ck,
  #rotBtn .ck {
    width: 10px !important;
    height: 10px !important;
  }
}


/* ====================================================================
 * 6. VIRTUAL JOYSTICK (TRỢ NĂNG JOYSTICK TRÊN MOBILE)
 * Nằm chính giữa bên trên thanh kỹ năng #pad, thiết kế mờ bán trong suốt
 * ==================================================================== */
#vliJoyPad {
  position: absolute;
  left: 50% !important;
  bottom: 52px !important; /* Nằm ngay chính giữa phía trên khung #pad */
  transform: translateX(-50%) !important;
  width: 180px; /* Tăng gấp đôi từ 90px lên 180px */
  height: 180px;
  z-index: 12;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

#vliJoyPad:hover,
#vliJoyPad.active {
  opacity: 0.85;
}

#vliJoyRing {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(20, 16, 12, 0.5) 0%, rgba(5, 5, 5, 0.7) 100%);
  border: 3px solid rgba(216, 184, 104, 0.45);
  box-shadow: 
    inset 0 0 16px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

#vliJoyRing::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 225, 140, 0.25);
}

#vliJoyThumb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; /* Tăng gấp đôi từ 38px lên 76px */
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7a633a 0%, #302414 100%);
  border: 2.5px solid rgba(243, 216, 138, 0.8);
  box-shadow: 
    inset 2px 2px 4px rgba(255, 255, 255, 0.35),
    inset -2px -2px 6px rgba(0, 0, 0, 0.85),
    0 3px 10px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  will-change: transform;
}

/* Trên màn hình PC/Desktop Landscape: luôn ẩn Joystick */
@media (min-width: 900px) and (orientation: landscape) {
  #vliJoyPad {
    display: none !important;
  }
}

/* === MINIMAP OVERLAY TỌA ĐỘ & MỞ RỘNG BẢN ĐỒ === */
#u20miniBar {
  position: fixed;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.85);
  border-top: 1px solid rgba(200, 164, 90, 0.6);
  padding: 0 4px;
  box-sizing: border-box;
  font-family: 'IBM Plex Mono', monospace, sans-serif;
  pointer-events: auto;
  user-select: none;
}
.u20-coord-txt {
  font-size: 11px;
  font-weight: 700;
  color: #79f779;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u20-coord-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #25241e;
  border: 1px solid #786d4e;
  border-radius: 3px;
  color: #eeddb0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 1px 5px;
  height: 18px;
  line-height: 1;
  transition: all 0.15s;
}
.u20-coord-btn:hover {
  background: #3d3b31;
  border-color: #f3d88a;
  color: #fff;
  transform: scale(1.02);
}
.u20-compass-icon {
  font-size: 12px;
  line-height: 1;
}
.u20-map-exp {
  display: inline-block;
  margin-right: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.15s;
}
.u20-map-exp:hover {
  transform: scale(1.18);
}

/* Modal Đi tới tọa độ */
.coord-modal-box {
  padding: 4px 6px;
  color: #e6dfd0;
  font-family: system-ui, -apple-system, sans-serif;
}
.coord-cur-pos {
  font-size: 12px;
  color: #bbb;
  margin-bottom: 12px;
}
.coord-cur-pos b {
  color: #79f779;
}
.coord-input-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.coord-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #f3d88a;
}
.coord-field input {
  width: 90px;
  padding: 4px 8px;
  background: #121517;
  border: 1px solid #6b6345;
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  text-align: center;
}
.coord-field input:focus {
  outline: none;
  border-color: #e5be59;
  box-shadow: 0 0 6px rgba(229, 190, 89, 0.5);
}
.coord-tip {
  font-size: 11px;
  color: #999;
  margin-bottom: 14px;
  line-height: 1.4;
}
.coord-btnrow {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.coord-btnrow .btn {
  min-width: 80px;
  padding: 5px 16px;
  font-size: 12px;
}