/* =====================================================================
 * HOAN LẠC TRẤN — CSS cho HUD mới (Q28)
 * Tone u tối: nền đen than, viền đồng. Mỗi tài nguyên một màu riêng.
 * Không dùng asset ngoài. Class prefix wx-.
 * ===================================================================== */

/* Khung HUD tổng */
.wx-hud {
  background: #14110b;               /* nền đen than pha nâu */
  border: 1px solid #8a6a3b;         /* viền đồng */
  border-radius: 6px;
  color: #e8dcc0;                    /* chữ ngà */
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  max-width: 340px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* Dòng đầu: tên người chơi + võ cảnh */
.wx-hud-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid #3a2f1c;
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.wx-hud-name {
  font-weight: bold;
  color: #f0c86a;                    /* vàng đồng nhạt */
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-hud-realm {
  color: #9a8a66;
  font-size: 12px;
  white-space: nowrap;
}

/* Cụm 5 thanh tài nguyên */
.wx-hud-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
.wx-hud-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wx-hud-bar-label {
  width: 64px;
  flex: 0 0 64px;
  color: #c9b98f;
  font-size: 12px;
  text-align: right;
}
.wx-hud-bar-track {
  flex: 1 1 auto;
  height: 10px;
  background: #241f13;
  border: 1px solid #4a3d22;
  border-radius: 5px;
  overflow: hidden;
}
.wx-hud-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 0.25s ease-out;
}

/* 5 màu phân biệt cho 4 tài nguyên chiến đấu + khí huyết */
.wx-hud-bar--hp .wx-hud-bar-fill      { background: #b03a2e; }  /* khí huyết: đỏ sẫm */
.wx-hud-bar--noiLuc .wx-hud-bar-fill  { background: #2f6fd0; }  /* nội lực: lam thép */
.wx-hud-bar--theLuc .wx-hud-bar-fill  { background: #2e9e5b; }  /* thể lực: lục ngọc */
.wx-hud-bar--the .wx-hud-bar-fill     { background: #c9922f; }  /* thế: vàng đồng */
.wx-hud-bar--tamCanh .wx-hud-bar-fill { background: #7a5fd0; }  /* tâm cảnh: tím */

.wx-hud-bar-num {
  width: 76px;
  flex: 0 0 76px;
  color: #8f8264;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

/* Dòng dưới: bạc + danh vọng */
.wx-hud-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #3a2f1c;
  padding-top: 4px;
}
.wx-hud-bac,
.wx-hud-fame {
  color: #c9b98f;
  font-size: 12px;
}
.wx-hud-bac b,
.wx-hud-fame b {
  color: #f0c86a;
  font-weight: bold;
}

/* Responsive cơ bản: màn hẹp thì thu gọn nhãn/số */
@media (max-width: 480px) {
  .wx-hud {
    font-size: 12px;
    padding: 6px 8px;
    max-width: none;
  }
  .wx-hud-bar-label {
    width: 52px;
    flex-basis: 52px;
  }
  .wx-hud-bar-num {
    width: 60px;
    flex-basis: 60px;
  }
}