/* =====================================================================
 * 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;
  }
}

/* Pixel wuxia surface system — Phase 1: field HUD */
:root {
  --wx-ink: #17120d;
  --wx-wood: #2b2015;
  --wx-wood-hi: #47331f;
  --wx-brass: #a8874e;
  --wx-brass-light: #d0b36d;
  --wx-paper: #e3d2a9;
  --wx-paper-dim: #b9a77f;
  --wx-vermilion: #8f3529;
  --wx-pixel-frame: 0 0 0 2px #17120d, 0 0 0 3px #a8874e, inset 0 0 0 1px rgba(227,210,169,.12);
}

.wx-hud {
  position: relative;
  box-sizing: border-box;
  border: 2px solid var(--wx-brass);
  border-radius: 0;
  background: linear-gradient(135deg, rgba(50,37,23,.97), rgba(24,19,14,.97));
  color: var(--wx-paper);
  padding: 6px 8px;
  box-shadow: var(--wx-pixel-frame), 3px 3px 0 rgba(0,0,0,.5);
  image-rendering: pixelated;
}
.wx-hud::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(208,179,109,.25);
  pointer-events: none;
}
.wx-hud-head { position: relative; border-bottom: 1px solid #59432a; padding: 0 2px 5px; margin-bottom: 5px; }
.wx-hud-name { color: #f0d58c; letter-spacing: .25px; }
.wx-hud-realm { color: #c0ad81; }
.wx-hud-bars { gap: 3px; margin-bottom: 5px; }
.wx-hud-bar { gap: 5px; }
.wx-hud-bar-label { color: #cfbd95; font-size: 11px; }
.wx-hud-bar-track { height: 8px; border: 1px solid #67502f; border-radius: 0; background: #130f0b; box-shadow: inset 0 1px 2px #000; }
.wx-hud-bar-fill { border-radius: 0; box-shadow: inset 0 1px rgba(255,255,255,.22); transition: width .2s steps(8,end); }
.wx-hud-bar--hp .wx-hud-bar-fill { background: repeating-linear-gradient(90deg,#a73b32 0 8px,#b94a3b 8px 10px); }
.wx-hud-bar--noiLuc .wx-hud-bar-fill { background: repeating-linear-gradient(90deg,#386c9b 0 8px,#4b83ad 8px 10px); }
.wx-hud-bar--theLuc .wx-hud-bar-fill { background: repeating-linear-gradient(90deg,#527a3d 0 8px,#6b914b 8px 10px); }
.wx-hud-bar--the .wx-hud-bar-fill { background: repeating-linear-gradient(90deg,#a77a31 0 8px,#c39543 8px 10px); }
.wx-hud-bar--tamCanh .wx-hud-bar-fill { background: repeating-linear-gradient(90deg,#65538d 0 8px,#806ba7 8px 10px); }
.wx-hud-bar-num { color: #a99770; font-variant-numeric: tabular-nums; }
.wx-hud-meta { border-top: 1px solid #59432a; padding: 5px 2px 0; }
.wx-hud-bac,.wx-hud-fame { color: #cbb98f; }
.wx-hud-bac b,.wx-hud-fame b { color: #edce7c; }

/* Compact field HUD: reserve the center for the pixel world. */
.wx-shell-top .wx-hud { flex: 0 1 286px; max-width: 286px; }
.wx-shell-top .wx-hud-bars { gap: 2px; margin-bottom: 4px; }
.wx-shell-top .wx-hud-bar-label { width: 48px; flex-basis: 48px; font-size: 10px; }
.wx-shell-top .wx-hud-bar-track { height: 6px; }
.wx-shell-top .wx-hud-meta { padding-top: 3px; }
.wx-shell-top .wx-hud-bac,
.wx-shell-top .wx-hud-fame { font-size: 10px; }