/* =============================================================================
   TIEN HIEP — PHẦN TỬ HUD  (JOB_TH1_05)
   Nguồn: Meta-Ecosystem/06.00 v2.5
   Thực thi: PQ-57 (icon nổi thẳng trên nền, CẤM khối nền đặc)
             PQ-58 (nhóm thu gọn / mở rộng)
             IC-3 · IC-4 (cỡ tối thiểu 56px · quầng tối BẮT BUỘC)

   ⚠️ PHẠM VI: chỉ tạo dáng cho TỪNG Ô icon và NHÓM.
   Bố cục 4 cạnh màn hình (position:fixed) thuộc JOB_TH1_06 — không viết ở đây.
   ============================================================================= */

/* Owner 2026-10-03: cỡ icon HUD CO GIÃN LIÊN TỤC theo kích thước màn hình (min của 7,2vh và 11vw — màn dọc điện thoại bị chiều NGANG giới hạn nên nhỏ hơn nhiều so với 56/48px cũ), thay cho các bậc cố định
   64/56/48px rải ở hud/hero/mobile. Một công thức duy nhất cho 4 HUD (rail trái/phải, nhóm trên-phải, dock) và rail trong Scene chiến đấu.
   Nhỏ nhất 36px, lớn nhất 64px (cỡ bản máy tính). Ô, nhãn chữ, chữ emoji đều suy ra từ --hud-icon. */
:root{
  --hud-scale:1;   /* Admin → Tiên Hiệp → Cài đặt → "Kích Thước icon 4 HUD": Lớn 1 · Trung bình 0.8 · Nhỏ 0.7 (tien-hiep-hud-size.js) */
  --hud-icon:calc(clamp(36px,min(7.2vh,11vw),64px) * var(--hud-scale));
  --hud-item-w:calc(var(--hud-icon) * 1.19);
  --hud-label-fs:max(9px,calc(var(--hud-icon) * .18));
}

/* ---------- Nhóm icon thu gọn được (PQ-58) ---------- */
.hud-group{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.hud-group-items{
  display:flex;
  flex-direction:column;
  gap:6px;
  /* overflow:visible khi mở — nếu để hidden thường trực, nó cắt luôn quầng
     sáng hover của icon (drop-shadow lan ra ngoài khung ô), lộ viền vuông
     xấu. Chỉ cần hidden trong lúc THỰC SỰ thu gọn (bên dưới). */
  overflow:visible;
  transition:opacity var(--dur) var(--ease), max-height .26s var(--ease);
  max-height:1200px;
  opacity:1;
}
.hud-group.is-collapsed .hud-group-items{
  overflow:hidden;
  max-height:0;
  opacity:0;
  pointer-events:none;
}

.hud-group-toggle{
  align-self:center;
  width:26px; height:18px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
}
/* Owner 2026-09-07: đổi từ hình vẽ bằng viền CSS xoay góc (dễ đọc nhầm
   thành "2 icon chồng nhau" ở cỡ nhỏ 9px) sang ĐÚNG 1 KÝ TỰ duy nhất —
   "▲" khi nhóm đang MỞ (bấm để thu gọn), "▼" khi đang THU GỌN (bấm để mở
   lại). JS (core.js) đổi thẳng textContent, CSS chỉ còn lo kiểu chữ. */
.hud-group-chevron{
  font-size:10px;
  line-height:1;
  color:var(--accent-2);
  /* Quầng tối để đọc được trên nền tranh sáng — cùng lý do IC-4 */
  text-shadow:0 1px 2px rgba(4,7,10,.9);
}
.hud-group-toggle:hover .hud-group-chevron{ border-color:var(--accent); }

/* ---------- Một ô icon ---------- */
/* PQ-57: KHÔNG nền đặc. Ô trong suốt hoàn toàn, icon tự nổi nhờ quầng tối. */
.hud-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:var(--hud-item-w);
  padding:4px 2px;
  border:0;
  background:transparent;            /* ⛔ CẤM đổi thành màu đặc — PQ-57 */
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  border-radius:var(--radius);
  transition:transform var(--dur) var(--ease);
}
.hud-item:hover,
.hud-item:focus-visible{ transform:translateY(-2px) scale(1.08); }
.hud-item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.hud-item:active{ transform:scale(var(--fx-tap-scale)); }

/* GĐ2 §4.2 (2026-09-08, PQ-35) — icon "Môn Phái": Owner "chưa đủ cấp cứ hiện
   màu bình thường, chỉ khoá không cho bấm, không cần làm xám/mờ" — icon vẫn
   sáng đẹp như mọi icon khác, CHỈ chặn click. Quầng sáng nhấp nháy CHỈ bật
   khi đủ cấp nhưng chưa vào phái (`.is-th-invite-ready`, xem bên dưới). Dùng
   chung cho MỌI icon HUD cần trạng thái "khoá không hiện" này về sau. */
.hud-item.is-th-locked{ pointer-events:none; }
.hud-item.is-th-invite-ready .hud-item-icon,
.hud-item.is-th-invite-ready .hud-item-emoji{
  animation:thHudInviteReadyPulse 1.6s ease-in-out infinite;
}
@keyframes thHudInviteReadyPulse{
  0%,100%{ filter:drop-shadow(0 1px 3px rgba(4,7,10,.95)) drop-shadow(0 2px 10px rgba(4,7,10,.75)); }
  50%{ filter:drop-shadow(0 1px 3px rgba(4,7,10,.95)) drop-shadow(0 0 10px var(--accent-2)) drop-shadow(0 0 20px var(--accent-2)); }
}

/* IC-3: cỡ tối thiểu 56px, khuyến nghị 64px. Con số 48px đã bị thực nghiệm bác. */
.hud-item-icon,
.hud-item-emoji{
  width:var(--hud-icon); height:var(--hud-icon);
  display:block;
  /* IC-4: quầng tối BẮT BUỘC, không phải tuỳ chọn.
     Hai lớp drop-shadow bám alpha của icon — nhân quả trực tiếp của PQ-57:
     bỏ khối nền đặc thì phải bù bằng quầng, nếu không icon chìm vào vách đá. */
  filter:drop-shadow(0 1px 3px rgba(4,7,10,.95))
         drop-shadow(0 2px 10px rgba(4,7,10,.75));
  transition:filter var(--dur) var(--ease);
}
/* Rê chuột: quầng SÁNG màu ngọc bích thế cho quầng tối — thay cho việc làm mờ icon */
.hud-item:hover .hud-item-icon,
.hud-item:hover .hud-item-emoji,
.hud-item:focus-visible .hud-item-icon,
.hud-item:focus-visible .hud-item-emoji{
  filter:drop-shadow(0 1px 3px rgba(4,7,10,.95))
         drop-shadow(0 0 10px var(--accent))
         drop-shadow(0 0 20px var(--accent));
}
.hud-item-emoji{
  font-size:calc(var(--hud-icon) * .625); line-height:var(--hud-icon);
  text-align:center;
}

/* Nhãn chữ dưới icon — rút từ bộ tham khảo (06.00 §5.5-B mục 1).
   Icon tiên hiệp nhiều thứ trừu tượng, không nhãn thì người chơi đoán không ra. */
.hud-item-label{
  font-family:var(--font-body);
  font-size:var(--hud-label-fs);
  font-weight:600;
  line-height:1.2;
  text-align:center;
  color:#fff;
  /* Viền tối quanh chữ — cách DUY NHẤT giữ chữ đọc được trên nền sáng
     sau khi PQ-60/61 bỏ nền tối. Xem Art Bible §A.3 (BC-1 đã đổi cách hiểu). */
  text-shadow:
     0 1px 2px rgba(4,7,10,.95),
     1px 0 2px rgba(4,7,10,.8),
    -1px 0 2px rgba(4,7,10,.8),
     0 -1px 2px rgba(4,7,10,.8);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Chấm đỏ báo — góc trên-phải (06.00 §5.5-B mục 2) */
.hud-item-badge{
  position:absolute;
  top:2px; right:8px;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--brand);
  border:1.5px solid #FFEDE9;
  box-shadow:0 1px 4px rgba(4,7,10,.9);
}

/* Tính năng giai đoạn sau: icon sáng đều như mọi icon khác (không làm mờ —
   Owner: "tại sao không đồng nhất bật sáng hết"). Rê chuột thêm quầng sáng +
   chuyển động nhẹ (dùng chung rule .hud-item:hover ở trên) là đủ để phân biệt
   trạng thái tương tác, không cần độ mờ tĩnh làm dấu hiệu "chưa mở". */

/* ---------- Dock dưới: nằm ngang thay vì dọc ---------- */
.hud-rail[data-hud-region="hud_dock"] .hud-group-items,
.hud-rail[data-hud-region="hud_top_right"] .hud-group-items{
  flex-direction:row;
  gap:10px;
}
/* Owner 2026-09-07: nút thu/phóng của cụm "Thư/Cài Đặt" đang lấy
   flex-direction:column MẶC ĐỊNH của .hud-group (canh giữa PHÍA TRÊN hàng
   icon) — sai vị trí so với ảnh tham khảo. Cụm này nằm ngang nên nút toggle
   cũng phải nằm NGANG, đứng NGOÀI CÙNG BÊN TRÁI (trước icon "Thư") — đổi
   .hud-group (không chỉ .hud-group-items) sang row, thứ tự DOM sẵn có
   (toggle rồi mới tới items) tự nhiên xếp toggle bên trái. */
.hud-rail[data-hud-region="hud_top_right"] .hud-group{
  flex-direction:row;
  align-items:center;
  gap:6px;
}
/* Owner 2026-09-07: sau khi thu gọn, "Thư" (`.hud-group-items`) đã ẩn
   nhưng khung của nó vẫn CHIẾM CHỖ theo chiều ngang (rule .is-collapsed gốc
   chỉ triệt tiêu max-height/opacity — đúng cho rail dọc, KHÔNG đúng cho
   hàng ngang) — toggle với "Cài Đặt" bị hở khoảng trống ở giữa, trông như
   toggle "trơ trọi". Thu hẳn CHIỀU RỘNG về 0 khi collapsed để "Cài Đặt"
   trượt sát vào cạnh toggle. */
.hud-rail[data-hud-region="hud_top_right"] .hud-group-items{
  /* QA 2026-09-08: 120px chỉ đủ 1 icon ("Thư") — sau khi Owner dời thêm
     "Loa Báo"/"Bảng Xếp Hạng" vào cùng cụm này (migration 241), 3 icon bị
     ép chung khung cũ, biến dạng/chồng lấn lên cả "Cài Đặt" đứng ngoài.
     3 icon × 76px (mobile 62px) + 2 khe 10px ≈ 248px (desktop) — nới hẳn
     lên 320px cho dư dả, "is-collapsed" bên dưới vẫn ép về 0 bình thường. */
  max-width:320px;
  transition:opacity var(--dur) var(--ease), max-width .26s var(--ease);
}
.hud-rail[data-hud-region="hud_top_right"] .hud-group.is-collapsed .hud-group-items{
  max-width:0;
}

/* ---------- Owner 2026-09-10 (migration 243): nhóm "Hoạt Động" ----------
   Gom icon Tu Luyện/Bí Cảnh/Sự Kiện — bình thường ẨN, bấm icon "Hoạt Động"
   (item flat đứng ngay trước nhóm này trong DOM) mới BUNG NGANG sang TRÁI,
   khác hẳn kiểu trượt dọc xuống dưới của mọi nhóm khác. Chevron riêng của
   nhóm này ẩn hẳn — icon "Hoạt Động" tự làm nút bấm, forward click qua JS
   (Engine._thToggleHudGroup, core.js) sang chevron ẩn, tái dùng nguyên cơ
   chế thu/mở + ghi nhớ trạng thái PQ-58, không viết lại logic riêng. */
.hud-rail[data-hud-region="hud_rail_right"] .hud-group[data-hud-group-wrap="hoatdong_flyout"] > .hud-group-toggle{
  display:none;
}
.hud-rail[data-hud-region="hud_rail_right"] .hud-group[data-hud-group-wrap="hoatdong_flyout"] > .hud-group-items{
  position:absolute;
  top:50%;
  right:100%;
  transform:translateY(-50%);
  flex-direction:row;
  padding-right:10px;
}

/* ---------- Màn dọc (04.00 §7.2 — mốc chuẩn 600px) ---------- */
/* (đã bỏ bậc cố định 56px ở ≤600px — nay do --hud-icon co giãn theo vh; IC-3 "tối thiểu 56px" được Owner nới xuống 36px, 2026-10-03) */

/* ---------- Tôn trọng prefers-reduced-motion (rủi ro R5) ---------- */
@media (prefers-reduced-motion:reduce){
  .hud-item,
  .hud-group-items,
  .hud-group-chevron{ transition:none; }
}

/* Owner 2026-10-05: HUD phải tách 2 cột, canh lề trên. Cột TRONG (gần nhân vật, bên trái) mở đầu bằng Bách Khoa rồi Thú Cưỡi ngay dưới;
   cột NGOÀI (sát mép phải) giữ các icon còn lại theo thứ tự cũ. Đặt vị trí bằng grid theo item_key nên không phụ thuộc sort_order DB. */
.hud-rail[data-hud-region="hud_rail_right"] .hud-group-items{
  display:grid; grid-template-columns:auto auto; grid-auto-flow:row;
  align-items:start; justify-items:center; column-gap:6px;
}
.hud-rail[data-hud-region="hud_rail_right"] .hud-item{grid-column:2;}
.hud-rail[data-hud-region="hud_rail_right"] .hud-item[data-item-key="bachkhoa"]{grid-column:1;grid-row:1;}
.hud-rail[data-hud-region="hud_rail_right"] .hud-item[data-item-key="thucuoi"]{grid-column:1;grid-row:2;}
.hud-rail[data-hud-region="hud_rail_right"] .hud-item[data-item-key="bandonghanh"]{grid-column:1;grid-row:3;}   /* Owner 2026-10-05: Đồng Hành dời sang đây, dưới Thú Cưỡi */
/* Owner 2026-10-05: Tu Luyện + Bí Cảnh dời sang đây, dưới Đồng Hành (Nhiệm Vụ lên HUD trên) */
.hud-rail[data-hud-region="hud_rail_right"] .hud-item[data-item-key="map_tuluyen"]{grid-column:1;grid-row:4;}
.hud-rail[data-hud-region="hud_rail_right"] .hud-item[data-item-key="map_bicanh"]{grid-column:1;grid-row:5;}

/* Owner 2026-10-13: bố cục HUD phải do Admin tùy chỉnh (tab 4 HUD) — 2 cột dựng sẵn từ server, bỏ bảng vị trí cứng theo item_key ở trên.
   Cột đầu = cột TRONG (gần nhân vật), cột sau = cột NGOÀI (sát mép phải), đúng như cách xếp mặc định. */
.hud-rail[data-hud-region="hud_rail_right"][data-hud-custom="1"] .hud-group-items{
  display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-end; column-gap:6px;
}
.hud-rail[data-hud-region="hud_rail_right"][data-hud-custom="1"] .hud-col{
  display:flex; flex-direction:column; align-items:center; gap:4px;
}