/* hud.css — KHUNG HUD (B5b + V4 khoá ux): khung mình/mục tiêu, minimap, chat, thông báo, menu hệ thống, hồi sinh.
   Chỉ style phần tử .hud-* (và phần tử cũ khi nằm trong gốc .hud-v2). CHỈ token (tokens.css); nút/✕/tooltip dùng chung ở kit.css.
   V4: mặt khung có chữ = --sf-hud (.86 — mọi màu chữ ≥ 4,5:1 cả trên trời sáng, UX-06); chữ nằm thẳng trên cảnh = dải --sf-scene
   (.62) + CHỈ chữ --tx-1; cỡ chữ = token --fs-* (có sàn px, UX-01); không animation vô hạn (UX-10); cảm ứng không bóng.
   Cảm ứng: :root[data-ui=phone-land|tablet|phone-port] — đích chạm ≥ 44 px. Thanh máu/niệm = transform, không đổi width. */

/* ───────────── chung ───────────── */
.hud-badge { display: inline-block; padding: 0 .375rem; border-radius: var(--r-pill); background: var(--sf-raised); color: var(--tx-2);
  font: 600 var(--fs-xs)/1.5 var(--font); }
.hud-tip { position: absolute; bottom: calc(100% + .375rem); right: 0; padding: .3125rem .625rem; border-radius: var(--r-s);
  background: var(--sf-panel); border: 1px solid var(--ln-1); color: var(--tx-1); font: var(--fs-sm)/1.35 var(--font);
  white-space: nowrap; pointer-events: none; box-shadow: var(--elev-2); z-index: 2; }
.hud-tip .k-kbd { margin-left: .375rem; }

/* thanh máu / nội (dùng chung khung mình + mục tiêu) */
.hud-bar { position: relative; height: .75rem; border-radius: .1875rem; overflow: hidden; background: rgba(8, 10, 12, .9);
  border: 1px solid rgba(0, 0, 0, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.hud-bar-fill { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform var(--dur) linear; }
.hud-hp-fill { background: linear-gradient(180deg, var(--hp-hi), var(--hp) 55%, #8f2414); }
.hud-mp-fill { background: linear-gradient(180deg, #7ab4ff, var(--mp) 55%, #1d4f9c); }
.hud-bar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff;
  font: 700 var(--fs-xs)/1 var(--font); font-variant-numeric: tabular-nums; text-shadow: 0 0 2px #000, 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
  white-space: nowrap; }
.hud-mp { height: .5rem; margin-top: .1875rem; }
/* máu thấp: viền đỏ TĨNH + 1 nhịp mỗi lần tụt thêm 10 % (hud.js thêm .pulse-once) — không còn nhấp nháy vô hạn (UX-10) */
@keyframes hud-pulse { 50% { filter: brightness(1.5); } }
.is-low .hud-hp-fill.pulse-once { animation: hud-pulse .45s ease-in-out 2; }

/* ───────────── KHUNG MÌNH (zone self: desktop 300×72, cảm ứng 212×52) ───────────── */
.hud-v2 .hud-self {
  position: relative; left: auto; top: auto; display: flex; align-items: center; gap: .625rem;
  width: 18.75rem; height: 4.5rem; min-width: 0; padding: .3125rem .625rem .3125rem .3125rem; box-sizing: border-box;
  background: var(--sf-hud); border: 1px solid var(--ln-1); border-left: 2px solid var(--ac-lo); border-radius: var(--r-m);
  box-shadow: var(--elev-1); contain: layout paint style; cursor: pointer; pointer-events: auto; color: var(--tx-1);
}
.hud-sf-pwrap { position: relative; flex: none; }
.hud-v2 .hud-sf-pwrap { width: 3.75rem; height: 3.75rem; }
.hud-v2 .hud-sf-portrait {
  position: relative; width: 3.75rem; height: 3.75rem; border-radius: 50%; border: 2px solid var(--ac-lo); display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2c3a3c, #0e1416); box-sizing: border-box; overflow: hidden; color: var(--ac);
}
.hud-sf-glyph .k-ico, .hud-tf-glyph .k-ico { width: 60%; height: 60%; }
.hud-sf-glyph { display: grid; place-items: center; width: 100%; height: 100%; }
.hud-sf-emblem, .hud-tf-emblem { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.hud-sf-glyph:empty, .hud-tf-glyph:empty { display: none; }
.hud-sf-level { position: absolute; right: -.25rem; bottom: -.125rem; min-width: 1.375rem; height: 1.125rem; padding: 0 .25rem;
  border-radius: var(--r-pill); background: linear-gradient(180deg, #2b3a3c, #111a1c); border: 1px solid var(--ac-lo);
  color: var(--ac); font: 700 var(--fs-2xs)/1rem var(--font); text-align: center; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.hud-sf-level:empty { display: none; }
/* đang chiến đấu: kiếm chéo VÀNG trong vòng đỏ ở viền DƯỚI-TRÁI chân dung (không đặt ở góc trên giống nút đóng — UX-14) */
.hud-sf-fight { position: absolute; left: -.25rem; bottom: -.125rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center;
  background-color: rgba(120, 20, 10, .92); box-shadow: 0 0 0 1px var(--st-danger-fill); background-position: center; color: var(--ac-hi); }
.hud-sf-fight .k-ico { width: .875rem; height: .875rem; stroke-width: 2.2; }
.hud-sf-fight.has-sprite .k-ico { display: none; }
.hud-v2 .hud-sf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.hud-sf-row { display: flex; align-items: baseline; gap: .375rem; min-width: 0; }
.hud-v2 .hud-sf-name { flex: 1; min-width: 0; font: 600 var(--fs-lg)/1.25 var(--font); color: var(--tx-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-v2 .hud-sf-meta { flex: none; max-width: 45%; margin: 0; min-height: 0; font: var(--fs-xs)/1.25 var(--font); color: var(--tx-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-v2 .hud-self .hud-bar { margin-top: 0; }
.hud-v2 .hud-self .hud-hp { height: max(13px, .875rem); }
.hud-v2 .hud-self .hud-mp { height: max(13px, .875rem); }     /* chữ nội lực --fs-xs (≥ 11 px) không bị cắt */
.hud-v2 .hud-self.is-fight { border-left-color: var(--st-danger-fill); }
.hud-v2 .hud-self.is-fight .hud-sf-portrait { border-color: var(--st-danger-fill); }
.hud-v2 .hud-self.is-low { border-color: var(--st-danger-fill); box-shadow: inset 0 0 0 1px var(--st-danger-fill), var(--elev-1); }
.hud-v2 .hud-self.is-dead .hud-sf-portrait { filter: grayscale(1) brightness(.7); }
.hud-v2 .hud-self.is-dead .hud-sf-name { color: var(--rel-dead-tx); }

/* ───────────── KHUNG MỤC TIÊU (zone target: desktop 300×72, cảm ứng 178×52) ───────────── */
.hud-target {
  --rel: var(--rel-neutral); --rel-tx: var(--rel-neutral-tx);
  position: relative; display: flex; align-items: center; gap: var(--sp-2); width: 18.75rem; height: 4.5rem; box-sizing: border-box;
  padding: .375rem 2.25rem .375rem .375rem; background: var(--sf-hud); color: var(--tx-1);
  border: 1px solid var(--ln-1); border-left: 3px solid var(--rel); border-radius: var(--r-m);
  box-shadow: var(--elev-1); contain: layout paint style; pointer-events: auto; user-select: none;
}
.hud-target[data-rel="self"] { --rel: var(--rel-self); --rel-tx: var(--rel-self-tx); }
.hud-target[data-rel="party"] { --rel: var(--rel-party); --rel-tx: var(--rel-party-tx); }
.hud-target[data-rel="ally"] { --rel: var(--rel-ally); --rel-tx: var(--rel-ally-tx); }
.hud-target[data-rel="neutral"] { --rel: var(--rel-neutral); --rel-tx: var(--rel-neutral-tx); }
.hud-target[data-rel="enemy"] { --rel: var(--rel-enemy); --rel-tx: var(--rel-enemy-tx); }
.hud-target[data-rel="foe"] { --rel: var(--rel-foe); --rel-tx: var(--rel-foe-tx); }
.hud-target[data-rel="dead"] { --rel: var(--rel-dead); --rel-tx: var(--rel-dead-tx); }
.hud-tf-portrait { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--rel); display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2c3a3c, #0e1416); box-sizing: border-box; overflow: hidden; }
.hud-tf-glyph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--rel-tx); }
.hud-tf-body { flex: 1; min-width: 0; }
.hud-tf-row { display: flex; align-items: baseline; gap: .375rem; min-width: 0; margin-bottom: .1875rem; }
.hud-tf-level { flex: none; color: var(--ac); font: 700 var(--fs-2xs)/1.25 var(--font); font-variant-numeric: tabular-nums; }
.hud-tf-level:empty { display: none; }
.hud-tf-name { flex: 1; min-width: 0; color: var(--rel-tx); font: 600 var(--fs-lg)/1.25 var(--font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-tf-rel { flex: none; display: inline-flex; align-items: center; gap: .1875rem; color: var(--tx-2); font: var(--fs-xs)/1.25 var(--font); }
.hud-tf-rel .k-ico { width: .875rem; height: .875rem; color: var(--rel-tx); }
.hud-target[data-rel="dead"] .hud-tf-portrait { filter: grayscale(1); }
.hud-tf-close { position: absolute; top: .25rem; right: .25rem; width: 1.75rem; height: 1.75rem; min-width: 24px; min-height: 24px; padding: 0;
  display: grid; place-items: center; border-radius: var(--r-s); border: 1px solid transparent; background: transparent; color: var(--tx-2);
  font: 400 var(--fs-md)/1 var(--font); cursor: pointer; touch-action: manipulation; }
.hud-tf-close .k-ico { width: 1rem; height: 1rem; }
.hud-tf-close::after { content: ""; position: absolute; inset: calc(50% - 22px); }   /* vùng chạm 44×44 quanh tâm */
/* [W2fix] cảm ứng: ✕ giữa cạnh phải + bỏ 'contain: paint' (cắt mất vùng chạm ::after ở mép khung) ⇒ chạm được đủ 44×44 */
html:not([data-ui="desktop"]) .hud-target { contain: layout style; }
html:not([data-ui="desktop"]) .hud-tf-close { top: 50%; right: .375rem; transform: translateY(-50%); }
html[data-ui="desktop"] .hud-tf-close::after { inset: -2px; }
@media (hover: hover) { .hud-tf-close:hover { color: var(--tx-1); background: var(--sf-hover); } }
.hud-tf-cast { position: relative; height: max(12px, .75rem); margin-top: .1875rem; border-radius: .125rem; overflow: hidden;
  background: rgba(0, 0, 0, .7); border: 1px solid rgba(143, 224, 160, .45); }
.hud-cast-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(180deg, #c9f5d2, var(--cast) 60%, #4d9d63); }
.hud-tf-cast[data-kind="channel"] .hud-cast-fill { background: linear-gradient(180deg, #ffe7a6, var(--ac) 60%, var(--ac-lo)); }
.hud-cast-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff;
  font: 600 var(--fs-xs)/1 var(--font); text-shadow: 0 0 2px #000, 0 1px 0 #000; white-space: nowrap; overflow: hidden; }
@keyframes hud-cast-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hud-cast-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.hud-tf-tot { margin-top: .125rem; color: var(--tx-2); font: var(--fs-sm)/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-target .hud-mp { height: .5rem; }

/* ───────────── MINIMAP V2 (zone minimap) — bản V3 (mm3-*) ở map.css ───────────── */
.hud-minimap { position: relative; display: flex; flex-direction: column; align-items: center; width: 12.5rem; pointer-events: none; }
.hud-mm-title { max-width: 100%; padding: .125rem .625rem; margin-bottom: .25rem; border-radius: var(--r-pill); background: var(--sf-hud);
  color: var(--ac); font: 600 var(--fs-sm)/1.3 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-mm-frame { position: relative; width: 11.5rem; height: 11.5rem; pointer-events: auto; }
.hud-mm-view { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; cursor: zoom-in; touch-action: manipulation;
  background: #24342c; box-shadow: inset 0 0 1.25rem rgba(0, 0, 0, .55), var(--elev-1); contain: strict; }
.hud-minimap:not(.has-ring) .hud-mm-view { border: 2px solid var(--ac-2); }
.hud-mm-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.hud-mm-tile { position: absolute; left: 0; top: 0; width: 257px; height: 257px;  /* +1 px chồng mép: không lộ đường nối khi phóng */  /* px = hệ toạ độ lớp ô (2 m/px), không co theo rem */
  max-width: none; user-select: none; pointer-events: none; }
.hud-mm-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; color: var(--tx-2);
  font: var(--fs-sm)/1.3 var(--font); }
.hud-mm-ring { position: absolute; left: -.489rem; top: -.548rem; width: 12.597rem; height: 13.253rem; pointer-events: none; }
.hud-minimap:not(.has-ring) .hud-mm-ring { display: none; }
.hud-mm-north { position: absolute; left: 50%; top: -.125rem; transform: translateX(-50%); color: var(--ac); font: 700 var(--fs-2xs)/1 var(--font);
  text-shadow: var(--shadow-text); pointer-events: none; }
.hud-minimap.has-ring .hud-mm-north { display: none; }
.hud-mm-zoom { position: absolute; left: -.25rem; bottom: .25rem; display: flex; flex-direction: column; gap: .25rem; }
.hud-mm-zbtn { width: 1.75rem; height: 1.75rem; min-width: 24px; min-height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--ln-1); background: var(--sf-hud);
  color: var(--ac); font: 700 var(--fs-md)/1 var(--font); cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { .hud-mm-zbtn:hover { border-color: var(--ac); } }
.hud-mm-marks { position: absolute; inset: 0; pointer-events: none; }
.hud-mm-mark { position: absolute; left: 0; top: 0; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; border-radius: 50%;
  background: var(--q-yellow); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); will-change: transform; }
.hud-mm-mark.is-npc { background: var(--q-yellow); }
.hud-mm-mark.is-mob { width: .375rem; height: .375rem; margin: -.1875rem 0 0 -.1875rem; background: #c8644e; opacity: .85; }
.hud-mm-mark.is-enemy { background: var(--rel-enemy); }
.hud-mm-mark.is-player { background: var(--rel-ally); }
.hud-mm-mark.is-party { width: .625rem; height: .625rem; margin: -.3125rem 0 0 -.3125rem; background: var(--rel-party); box-shadow: 0 0 0 1px #fff; }
.hud-mm-mark.is-q { width: auto; height: auto; margin: -.625rem 0 0 -.3125rem; background: none; box-shadow: none;
  font: 900 .9375rem/1 var(--font); text-shadow: 0 0 2px #000, 0 1px 0 #000, 0 0 4px #000; color: var(--q-yellow); }
.hud-mm-mark.is-q.is-blue { color: var(--q-blue); } .hud-mm-mark.is-q.is-orange { color: var(--q-orange); }
.hud-mm-mark.is-q.is-green { color: var(--q-green); } .hud-mm-mark.is-q.is-gray { color: var(--q-gray); }
.hud-mm-mark.is-pin { width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem; border-radius: .125rem; background: var(--ac);
  box-shadow: 0 0 0 1px #000, 0 0 .5rem var(--ac); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.hud-mm-mark.is-pin.is-quest { clip-path: none; background: none; box-shadow: none; width: auto; height: auto; margin: -.625rem 0 0 -.25rem;
  color: var(--q-yellow); font: 900 .9375rem/1 var(--font); text-shadow: 0 0 2px #000, 0 0 4px #000; }
.hud-mm-mark.is-pin.is-party { clip-path: none; border-radius: 50%; background: var(--rel-party); box-shadow: 0 0 0 1px #fff; }
.hud-mm-mark.is-edge { opacity: .8; }
.hud-mm-self { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%);
  border-left: .4375rem solid transparent; border-right: .4375rem solid transparent; border-bottom: .875rem solid var(--ac);
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000); pointer-events: none; }
.hud-mm-cone { position: absolute; left: 50%; top: 50%; width: 4rem; height: 4rem; transform-origin: 50% 100%; pointer-events: none;
  background: radial-gradient(circle at 50% 100%, rgba(255, 238, 180, .30), rgba(255, 238, 180, 0) 70%);
  clip-path: polygon(50% 100%, 10% 0, 90% 0); }
/* dòng dưới minimap (desktop): chấm kết nối + ping trên dải --sf-scene, chữ trắng. Toạ độ = thông tin gỡ lỗi ⇒ chỉ khi bật F3 (UX-20) */
.hud-v2 .hud-info { position: relative; right: auto; top: auto; min-width: 0; width: auto; margin-top: .25rem; padding: 0 .5rem; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: .5rem; background: none; border: 0; box-shadow: none; pointer-events: none; }
.z-minimap > .hud-info { position: absolute; left: 50%; right: auto; bottom: 0; transform: translateX(-50%); margin: 0; }
.hud-v2 .hud-info .map-name { display: none; }
.hud-v2 .hud-info .coords { display: none; font: var(--fs-xs)/1.25 var(--font); font-variant-numeric: tabular-nums; color: var(--tx-1); white-space: nowrap; margin: 0; }
html.hud-debug-on .hud-v2 .hud-info .coords { display: block; }
.hud-v2 .hud-info .net-row { justify-content: center; gap: .375rem; margin-top: 0; padding: .0625rem .5rem; border-radius: var(--r-pill);
  background: var(--sf-scene); font: var(--fs-xs)/1.3 var(--font); color: var(--tx-1); }
.hud-v2 .hud-info .net-row .ping { color: var(--tx-1); font-family: var(--font); font-variant-numeric: tabular-nums; }
.hud-v2 .hud-info .net-row .ping:empty { display: none; }
.hud-v2 .hud-info .dot { width: .5rem; height: .5rem; }
.hud-v2 .hud-info .hud-net-text { display: none; }

/* ───────────── BẢN ĐỒ LỚN (V2 — middle_map.js) ───────────── */
.hud-middle { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: var(--sf-backdrop); pointer-events: auto; }
.hud-mid-win { display: flex; flex-direction: column; width: min(47.5rem, 92vw); height: min(35rem, 88vh); border-radius: var(--r-m);
  background: var(--sf-panel); border: 1px solid var(--ln-1); box-shadow: var(--elev-2); overflow: hidden; color: var(--tx-1); }
.hud-mid-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--ln-1); }
.hud-mid-title { flex: 1; color: var(--ac); font: 600 var(--fs-xl)/1.25 var(--font-title); }
.hud-mid-view { position: relative; flex: 1; overflow: hidden; background: #24342c; contain: strict; }
.hud-mid-view .hud-mm-self { left: 0; top: 0; transform: none; border-left-width: .5625rem; border-right-width: .5625rem; border-bottom-width: 1.125rem; }
.hud-mid-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--ln-1); color: var(--tx-2); font: var(--fs-sm)/1.25 var(--font); }
.hud-lg::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .3125rem; border-radius: 50%; vertical-align: 0; background: var(--q-yellow); }
.hud-lg.is-self::before { background: var(--ac); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.hud-lg.is-guide::before { background: var(--ac); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; }
.hud-lg.is-q::before { content: "!"; width: auto; height: auto; background: none; color: var(--q-yellow); font-weight: 900; }
.hud-lg.is-party::before { background: var(--rel-party); }
.hud-mid-coords { margin-left: auto; color: var(--tx-1); }

/* ───────────── THÔNG BÁO (§4.10: 1 feed, tối đa 3 mục — notice.js) ───────────── */
.hud-errors, .hud-notices, .hud-toasts { display: flex; flex-direction: column; align-items: center; gap: .25rem; pointer-events: none; }
@keyframes hud-in { from { opacity: 0; transform: translateY(-.375rem); } to { opacity: 1; transform: none; } }
/* lỗi: chữ trắng + ⚠ đỏ trên --sf-hud, viền trái đỏ (trước: chữ đỏ trần trên cảnh — 2,1:1 trên trời sáng) */
.hud-err { display: inline-flex; align-items: center; gap: .5rem; max-width: 40rem; padding: .3125rem .875rem .3125rem .625rem; box-sizing: border-box;
  border-radius: var(--r-m); background: var(--sf-hud); border-left: 3px solid var(--st-danger); color: var(--tx-1);
  font: 600 var(--fs-md)/1.35 var(--font); text-align: center; animation: hud-in var(--dur) var(--ease); }
.hud-err::before { content: ""; flex: none; width: 1em; height: 1em; background: var(--st-danger);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 23 21H1z M11 9v6h2V9zm0 8v2h2v-2z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 23 21H1z M11 9v6h2V9zm0 8v2h2v-2z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat; }
.hud-ntc-cnt { margin-left: .375rem; font-size: var(--fs-2xs); color: var(--tx-2); font-variant-numeric: tabular-nums; }
.hud-ntc-cnt:empty { display: none; }
/* cảnh báo của script (OnOutputWarningMessage): dải --sf-hud, viền trái theo màu — không nhấp nháy (WCAG 2.3.1, §2.4) */
.hud-warn { --wc: var(--st-warn); max-width: 40rem; padding: .3125rem 1rem; box-sizing: border-box; border-radius: var(--r-m); color: var(--tx-1);
  font: 700 var(--fs-md)/1.35 var(--font); text-align: center; background: var(--sf-hud); border-left: 3px solid var(--wc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wc) 35%, transparent); animation: hud-in var(--dur) var(--ease); }
.hud-warn.is-yellow { --wc: var(--st-warn); } .hud-warn.is-red { --wc: var(--st-danger); } .hud-warn.is-green { --wc: var(--st-ok); }
/* công bố: chữ lớn serif vàng trên dải --sf-scene (chữ lớn ≥ 18,66 px đậm: 3:1 đủ — §7.1) */
.hud-ann { max-width: 40rem; padding: .125rem 1.25rem; border-radius: var(--r-pill); background: var(--sf-hud); color: var(--ac);
  font: 700 var(--fs-2xl)/1.25 var(--font-title); text-align: center; text-shadow: var(--shadow-text); animation: hud-in var(--dur) var(--ease); }
.hud-ann.is-ok { color: var(--st-ok); }
.hud-toast { max-width: min(35rem, 60vw); padding: .4375rem .875rem; box-sizing: border-box; border-radius: var(--r-m); background: var(--sf-hud);
  border: 1px solid var(--ln-1); border-left: 3px solid var(--ac-2); color: var(--tx-1); font: var(--fs-md)/1.35 var(--font); text-align: center;
  box-shadow: var(--elev-1); animation: hud-in var(--dur) var(--ease); }
.hud-toast.is-err, .hud-toast.is-error { border-left-color: var(--st-danger); }
.hud-toast.is-warn { border-left-color: var(--st-warn); }
.hud-toast.is-ok { border-left-color: var(--st-ok); }
.hud-gm { width: min(51.25rem, 92vw); overflow: hidden; padding: .25rem 0; background: var(--sf-hud); border-radius: var(--r-s); pointer-events: none; }
.hud-gm-txt { display: inline-block; padding-left: 100%; white-space: nowrap; color: #ffd9a8; font: 600 var(--fs-md)/1.3 var(--font);
  animation: hud-marquee 18s linear 1 both; }
@keyframes hud-marquee { to { transform: translateX(-100%); } }
/* [V4 ux vòng 2 R2-3] giảm chuyển động: luật 1 ms của kit.css làm chữ chạy dừng NGOÀI dải (không đọc được) ⇒ đứng yên, xuống dòng */
html.reduce-motion .hud-gm-txt { display: block; padding: 0 .75rem; white-space: normal; text-align: center; transform: none; animation: none !important; }
.hud-v2 .app-status { position: static; transform: none; margin: 0 auto; }

/* ───────────── MENU HỆ THỐNG ───────────── */
.hud-menu { position: relative; display: flex; justify-content: flex-end; pointer-events: none; }
.hud-sysbar { position: relative; display: flex; gap: .25rem; padding: .25rem; border-radius: var(--r-m); background: var(--sf-hud);
  border: 1px solid var(--ln-1); pointer-events: auto; }
.hud-sys-btn { position: relative; width: 2.25rem; height: 2.25rem; min-width: 24px; min-height: 24px; padding: 0; display: grid; place-items: center;
  border-radius: var(--r-s); border: 1px solid transparent; background: rgba(0, 0, 0, .2); color: var(--ac); cursor: pointer; touch-action: manipulation; }
.hud-sys-btn:active { transform: scale(.94); }
@media (hover: hover) { .hud-sys-btn:hover { border-color: var(--ac-lo); background: var(--sf-hover); } }
.hud-sys-ico { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--ac); }
.hud-sys-ico .k-ico { width: 1.25rem; height: 1.25rem; }
.hud-sys-btn.is-locked .hud-sys-ico { filter: grayscale(.85) brightness(.75); }
.hud-sys-key { position: absolute; right: 1px; bottom: 0; min-width: .75rem; padding: 0 1px; border-radius: 2px; background: rgba(0, 0, 0, .6); color: #fff;
  font: 700 var(--fs-2xs)/1.1 var(--font); text-align: center; }
.hud-sys-key:empty { display: none; }
.hud-sys-lock { position: absolute; left: 1px; top: 1px; width: .75rem; height: .75rem; display: grid; place-items: center; color: var(--tx-2); font-size: var(--fs-2xs); line-height: 1; }
.hud-sys-lock .k-ico { width: .75rem; height: .75rem; stroke-width: 2.4; }
.hud-touchmenu { display: none; gap: max(.5rem, 8px); pointer-events: auto; }
.hud-tbtn { position: relative; width: max(var(--tap), 44px); height: max(var(--tap), 44px); padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-m); border: 1px solid var(--ln-1); background: var(--sf-hud); color: var(--tx-1);
  font: 600 var(--fs-sm)/1.2 var(--font); touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.hud-tbtn:active { transform: scale(.94); }
.hud-burger { color: var(--ac); }
.hud-burger .k-ico, .hud-skillbtn .k-ico { width: 1.5rem; height: 1.5rem; }
.hud-skillbtn .hud-sys-ico { width: 1.75rem; height: 1.75rem; }
/* nhãn dưới nút cảm ứng: chữ trắng trên dải --sf-scene (trước: --text-dim trần trên cảnh) */
.hud-tbtn-lb { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0 .3125rem;
  border-radius: var(--r-xs); background: var(--sf-scene); color: var(--tx-1); font: 600 var(--fs-xs)/1.3 var(--font); pointer-events: none; }
.hud-ping-touch { display: none; position: absolute; left: 0; top: calc(max(var(--tap), 44px) + 2px); min-width: max(var(--tap), 44px); box-sizing: border-box;
  padding: 0 .25rem; border-radius: var(--r-xs); background: var(--sf-scene); text-align: center; color: var(--tx-1);
  font: var(--fs-xs)/1.3 var(--font); font-variant-numeric: tabular-nums; pointer-events: none; }
.hud-ping-touch:empty { visibility: hidden; }
.hud-ping-touch::before { content: ""; display: inline-block; width: .4375rem; height: .4375rem; margin-right: .25rem; border-radius: 50%; vertical-align: .05em; background: var(--tx-3); }
.hud-ping-touch.good::before { background: var(--st-ok); } .hud-ping-touch.mid::before { background: var(--st-warn); } .hud-ping-touch.bad::before { background: var(--st-danger); }
.hud-drawer { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--sf-backdrop); pointer-events: auto; }
.hud-drawer-panel { position: absolute; right: calc(var(--sr) + 13rem); bottom: 4.5rem; width: 22rem; padding: var(--sp-3);
  border-radius: var(--r-m); background: var(--sf-panel); border: 1px solid var(--ln-1); box-shadow: var(--elev-2); color: var(--tx-1);
  animation: hud-in var(--dur) var(--ease); }
.hud-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.hud-drawer-title { color: var(--ac); font: 600 var(--fs-xl)/1.25 var(--font-title); }
.hud-drawer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.hud-drawer-cell { position: relative; min-height: 4.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  padding: .375rem .25rem; border-radius: var(--r-s); border: 1px solid var(--ln-1); background: var(--sf-raised); color: var(--tx-1);
  font: var(--fs-sm)/1.25 var(--font); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hud-drawer-cell:active { transform: scale(.94); }
@media (hover: hover) { .hud-drawer-cell:hover { border-color: var(--ac-lo); } }
.hud-drawer-cell.is-locked { color: var(--tx-2); }
.hud-drawer-cell.is-locked .hud-sys-ico { filter: grayscale(.85) brightness(.75); }
.hud-drawer-cell .hud-badge { position: absolute; top: .1875rem; right: .1875rem; font-size: var(--fs-xs); line-height: 1.4; }
.hud-drawer-key { position: absolute; top: .25rem; right: .375rem; }
.hud-drawer-foot { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }
.hud-confirm { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: var(--sf-backdrop); pointer-events: auto; }
.hud-confirm-box { width: min(26.25rem, 92vw); padding: var(--sp-4); border-radius: var(--r-l); background: var(--sf-panel); border: 1px solid var(--ln-1);
  box-shadow: var(--elev-3); color: var(--tx-1); }
.hud-confirm-title { color: var(--ac); font: 600 var(--fs-xl)/1.25 var(--font-title); margin-bottom: var(--sp-2); }
.hud-confirm-text { color: var(--tx-1); font: var(--fs-md)/1.45 var(--font); margin-bottom: var(--sp-4); }
.hud-confirm-btns { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.hud-confirm-btns .hud-btn { min-height: var(--k-h-lg); min-width: 6rem; }

/* ───────────── HỒI SINH (modal) ───────────── */
.hud-dead-veil { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(40, 40, 40, .25), rgba(10, 10, 10, .72)); }
.hud-revive { position: fixed; left: 50%; top: calc(50% + 1rem);   /* gốc CENTER −100 đè dòng lỗi đỏ @32%H ⇒ hạ xuống */
  transform: translate(-50%, -50%); z-index: var(--z-modal);
  display: flex; gap: var(--sp-3); align-items: center; width: min(31.75rem, 92vw); padding: var(--sp-4); box-sizing: border-box;
  border-radius: var(--r-l); background: var(--sf-panel); border: 1px solid var(--ln-1); border-top: 2px solid var(--ac-lo); color: var(--tx-1);
  box-shadow: var(--elev-3); pointer-events: auto; animation: hud-in var(--dur) var(--ease); }
.hud-rv-icon { flex: none; width: 4rem; height: 4rem; border-radius: 50%; background-color: rgba(0, 0, 0, .3); }
.hud-rv-body { flex: 1; min-width: 0; }
.hud-rv-title { color: var(--ac); font: 600 var(--fs-xl)/1.25 var(--font-title); }
.hud-rv-msg { margin-top: .375rem; color: var(--tx-1); font: var(--fs-md)/1.45 var(--font); min-height: 1.2rem; }
.hud-rv-btns { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.hud-rv-btns .hud-btn { flex: 1; min-height: var(--k-h-lg); font-size: var(--fs-md); }
.hud-rv-reason { margin-top: var(--sp-1); color: var(--tx-2); font: var(--fs-sm)/1.35 var(--font); }
.hud-rv-reason:empty { display: none; }
.hud-rv-err { margin-top: var(--sp-2); color: var(--st-danger); font: 600 var(--fs-sm)/1.35 var(--font); }
@keyframes hud-spin { to { transform: rotate(360deg); } }
.hud-revive:focus { outline: none; }                     /* [vòng 2 R2-8] focus KHUNG hộp (lập trình) — vòng focus chỉ trên nút */
.hud-revive.is-wait .hud-rv-btns::after { content: ""; flex: none; align-self: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 2px solid var(--ac); border-right-color: transparent; animation: hud-spin .8s linear infinite; }

/* ───────────── CHAT v2 ───────────── */
/* rảnh: dải --sf-scene + chữ TRẮNG (màu kênh nằm trong chip đặc); đang gõ/di chuột: mặt --sf-hud + chữ màu (UX-06) */
.hud-chat { display: flex; flex-direction: column; pointer-events: auto; }
.hud-chat-panel { display: flex; flex-direction: column; gap: .25rem; width: 26.25rem; }
.hud-chat-head { display: flex; align-items: flex-end; gap: .25rem; }
.hud-chat-tabs { display: flex; gap: .125rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hud-chat-tab { position: relative; flex: none; min-height: max(24px, 1.75rem); padding: 0 .625rem; box-sizing: border-box; border-radius: var(--r-s) var(--r-s) 0 0;
  border: 1px solid transparent; border-bottom: 0; background: var(--sf-hud); color: var(--tx-2); font: 600 var(--fs-xs)/1.25 var(--font); cursor: pointer;
  touch-action: manipulation; }
.hud-chat-tab.is-on { border-color: var(--ln-1); color: var(--ac); }
@media (hover: hover) { .hud-chat-tab:hover { color: var(--tx-1); } }
.hud-chat-badge { margin-left: .25rem; padding: 0 .3125rem; border-radius: var(--r-pill); background: var(--st-danger-fill); color: #fff; font: 700 var(--fs-2xs)/1.3 var(--font); }
.hud-chat-x { display: none; }
.hud-chat .hud-chat-log { height: 12.5rem; overflow-y: auto; padding: .375rem .5rem; border-radius: 0 var(--r-m) var(--r-m) var(--r-m);
  background: var(--sf-scene); border: 1px solid transparent; color: var(--tx-1); font: var(--fs-sm)/1.45 var(--font);
  scrollbar-width: thin; overscroll-behavior: contain; }
.hud-chat.active .hud-chat-log { background: var(--sf-hud); border-color: var(--ln-1); }
@media (hover: hover) { .hud-chat:hover .hud-chat-log { background: var(--sf-hud); border-color: var(--ln-1); } }
.hud-chat-line { content-visibility: auto; contain-intrinsic-size: auto 1.3rem; word-break: break-word; }
.hud-chat-log[data-tab="near"] .hud-chat-line:not(.g-near),
.hud-chat-log[data-tab="team"] .hud-chat-line:not(.g-team),
.hud-chat-log[data-tab="whisper"] .hud-chat-line:not(.g-whisper),
.hud-chat-log[data-tab="sys"] .hud-chat-line:not(.g-sys) { display: none; }
.hud-chat-line .who { color: var(--tx-1); font-weight: 700; }
.hud-chat-line .txt { color: var(--tx-1); }
:is(.hud-chat.active, .hud-chat:hover, .hud-chat-sheet) .hud-chat-line .who { color: var(--ac); font-weight: 400; }
:is(.hud-chat.active, .hud-chat:hover, .hud-chat-sheet) .hud-chat-line.whisper :is(.txt, .who) { color: #f2a8e6; }
:is(.hud-chat.active, .hud-chat:hover, .hud-chat-sheet) .hud-chat-line.team .txt { color: #9fd3ff; }
:is(.hud-chat.active, .hud-chat:hover, .hud-chat-sheet) .hud-chat-line.npc .txt { color: #c4e8bf; }
:is(.hud-chat.active, .hud-chat:hover, .hud-chat-sheet) .hud-chat-line.sys .txt { color: #ffd99a; }
:is(.hud-chat.active, .hud-chat:hover, .hud-chat-sheet) .hud-chat-line.error .txt { color: #ffb3a3; }
/* chip kênh: mặt đặc riêng ⇒ chữ màu đọc được cả khi khung chat đang rảnh */
.hud-chat .chan { display: inline-block; margin-right: .3125rem; padding: 0 .3125rem; border-radius: .25rem; background: rgba(10, 18, 20, .92);
  color: var(--tx-2); font: 600 var(--fs-xs)/1.4 var(--font); vertical-align: .0625rem; }
.hud-chat .chan.near { color: #e9e4d8; } .hud-chat .chan.world { color: #f3c96b; } .hud-chat .chan.team { color: #7fc3ff; }
.hud-chat .chan.whisper { color: #e58fd6; } .hud-chat .chan.sys { color: var(--st-warn); } .hud-chat .chan.npc { color: #9fdc9a; }
.hud-chat .chat-bar { display: flex; align-items: center; gap: .375rem; padding: .25rem .375rem; border-radius: var(--r-s);
  background: var(--sf-scene); border: 1px solid transparent; }
.hud-chat.active .chat-bar { border-color: var(--ac-lo); background: var(--sf-hud); }
.hud-chat .chat-input { flex: 1; min-width: 0; height: 1.75rem; border: 0; outline: none; background: transparent; color: var(--tx-1); font: var(--fs-sm)/1.25 var(--font); }
.hud-chat .chat-input::placeholder { color: var(--tx-2); }
.hud-chat-send { display: none; }
.hud-chat-peek { display: none; }
.hud-chat-sheet { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--sf-backdrop); pointer-events: auto; }

/* ───────────── gắn vào zone của Layout (B5a, shell.css): khung lấp đầy zone đã neo ───────────── */
.z-self > .hud-self, .z-target > .hud-target { width: 100%; height: 100%; }
.z-minimap > .hud-minimap { width: 100%; }
.z-chat > .hud-chat { width: 100%; height: 100%; }
.z-chat > .hud-chat > .hud-chat-panel { width: 100%; height: 100%; }
.z-chat > .hud-chat > .hud-chat-panel > .hud-chat-log { flex: 1; height: auto; min-height: 0; }
.z-menu > .hud-menu { width: 100%; height: 100%; align-items: flex-start; }
.z-menu .hud-sysbar { padding: 0; gap: .25rem; background: none; border: 0; }
.z-menu .hud-sys-btn { background: var(--sf-hud); border-color: var(--ln-1); }
.z-exp > .hud-exp { height: 100%; }
.z-menu > .hud-touchmenu { justify-content: flex-start; }

/* ───────────── EXP (P1) ───────────── */
.hud-exp { position: relative; width: 100%; height: .25rem; background: rgba(0, 0, 0, .55); overflow: hidden; pointer-events: auto; }
.hud-exp-fill { position: absolute; inset: 0; transform-origin: 0 50%; background: linear-gradient(90deg, var(--ac-lo), var(--exp)); }

.hud-v2 .hud-debug { position: absolute; right: .75rem; top: 17rem; z-index: var(--z-feed); pointer-events: none; }

/* ═════════════ CHẾ ĐỘ CẢM ỨNG (phone-land / tablet / phone-port) ═════════════ */
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-v2 .hud-self {
  width: 13.25rem; height: 3.25rem; padding: .25rem .5rem .25rem .25rem; gap: .375rem; box-shadow: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-sf-pwrap,
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-v2 .hud-sf-portrait { width: 2.625rem; height: 2.625rem; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-v2 .hud-sf-meta { display: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-sf-emblem { transform: translate(-50%, -50%) scale(.7); }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-tf-emblem { transform: translate(-50%, -50%) scale(.85); }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-v2 .hud-sf-body { gap: .1875rem; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-sf-fight { width: 1.125rem; height: 1.125rem; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-v2 .hud-sf-name { font-size: var(--fs-sm); }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-v2 .hud-self .hud-hp { height: max(14px, .875rem); }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-v2 .hud-self .hud-mp { height: .3125rem; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-self .hud-mp .hud-bar-text { display: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-target {
  width: 11.125rem; height: 3.25rem; padding: .25rem 1.75rem .25rem .25rem; gap: .375rem; box-shadow: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-tf-portrait { width: 2.125rem; height: 2.125rem; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-tf-rel,
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-target .hud-mp { display: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-tf-name { font-size: var(--fs-sm); }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-target .hud-hp { height: max(14px, .875rem); }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-tf-cast { height: .4375rem; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-tf-cast .hud-cast-text { display: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-tf-tot { display: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-tf-close { width: 1.75rem; height: 1.75rem; top: .75rem; }

:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-minimap { width: 7.5rem; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-mm-title { font-size: var(--fs-xs); margin-bottom: .125rem; padding: 0 .25rem; max-width: 100%; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-mm-frame { width: 6rem; height: 6rem; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-mm-view { border: 2px solid var(--ac-2); box-shadow: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-mm-ring,
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-mm-zoom { display: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-minimap .hud-mm-north { display: block; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-v2 .hud-info { display: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-ping-touch { display: block; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-mid-win { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-mid-head .hud-btn { min-height: max(var(--tap), 44px); }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-mid-close { width: max(var(--tap), 44px); }

:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-sysbar { display: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-touchmenu { display: flex; }
/* menu ☰ cảm ứng = side sheet phải (§5.3), mặt đặc, đệm vùng an toàn */
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-drawer-panel {
  top: 0; bottom: 0; right: 0; width: clamp(320px, 44vw, 480px); max-width: 100vw; box-sizing: border-box; border-radius: 0; border-width: 0 0 0 1px;
  padding: calc(var(--st) + .25rem) calc(var(--sr) + .25rem) var(--sb) var(--sp-3); overflow-y: auto; box-shadow: none; animation-name: k-slide; }
:is([data-ui="tablet"]) .hud-drawer-panel { width: 23.75rem; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-drawer-grid { grid-template-columns: repeat(3, 1fr); }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-drawer-cell { min-height: 4.5rem; font-size: var(--fs-sm); }

:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-err { max-width: 60vw; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-warn { max-width: 70vw; padding: .25rem .875rem; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-toast { max-width: 60vw; box-shadow: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-ann { font-size: var(--fs-xl); }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-revive { top: 50%; width: min(31.75rem, 88vw, calc(100vw - 2 * (var(--lp-x1, 0px) + 8px))); box-shadow: none; }

/* chat cảm ứng: 2 dòng trên dải --sf-scene (chữ trắng) + tờ đầy đủ (side sheet) */
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-chat > .hud-chat-panel { display: none; }
:is([data-ui="phone-land"], [data-ui="tablet"], [data-ui="phone-port"]) .hud-chat-peek {
  display: block; width: 14.75rem; max-width: 100%; height: 2.75rem; min-height: 44px; padding: .125rem .375rem; text-align: left; border: 0; border-radius: var(--r-s);
  background: var(--sf-scene); color: var(--tx-1); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.z-chat .hud-chat-peek { width: 100%; height: 100%; }
.hud-chat-peekline { font: var(--fs-xs)/1.3 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx-1); }
.hud-chat-sheet > .hud-chat-panel { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(320px, 44vw, 480px); max-width: 100vw; gap: .375rem;
  padding: calc(var(--st) + .25rem) calc(var(--sr) + .25rem) calc(var(--sb) + .25rem) var(--sp-3); box-sizing: border-box;
  background: var(--sf-panel); border-left: 1px solid var(--ln-1); animation: k-slide var(--dur-slow) var(--ease); }
:is([data-ui="tablet"]) .hud-chat-sheet > .hud-chat-panel { width: 23.75rem; }
.hud-chat-sheet .hud-chat-x { display: grid; flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-color: var(--ln-1); }
.hud-chat-sheet .hud-chat-tab { min-height: 44px; padding: 0 .75rem; font-size: var(--fs-sm); border-radius: var(--r-s); border-bottom: 1px solid transparent; background: var(--sf-raised); }
.hud-chat-sheet .hud-chat-tab.is-on { border-color: var(--ln-ac); }
.hud-chat-sheet .hud-chat-log { flex: 1; height: auto; min-height: 0; border-radius: var(--r-s); background: var(--sf-sunken); border-color: var(--ln-1); }
.hud-chat-sheet .chat-bar { background: var(--sf-sunken); border-color: var(--ln-field); padding: .25rem; opacity: 1; }   /* [vòng 2 R2-6] không mờ 70 % (app.css) */
.hud-chat-sheet .chat-input { height: 44px; font-size: 16px; }
.hud-chat-sheet .hud-chat-send { display: block; min-width: 4.5rem; height: 44px; border-radius: var(--r-s); border: 1px solid var(--ac-lo);
  background: linear-gradient(180deg, var(--ac-hi), var(--ac-lo)); color: var(--tx-on-ac); font: 700 var(--fs-md)/1 var(--font); touch-action: manipulation; }
html:not([data-ui="desktop"]) .hud-drawer-x { width: 44px; height: 44px; }

/* ═════════════ [V6 mobile] HUD GỌN — điện thoại ngang H ≤ 400 (html.ui-compact, --hk = đơn vị c do layout.js đặt) ═════════════
   User 08/10: "các nút tràn màn hình điện thoại, dù iPhone 17 Pro Max cũng hơi to" (ảnh 10 = 825×378). Khung/bảng lấp ĐÚNG zone px
   (layout.js tính theo chiều cao), chữ HUD 11–13 px — bảng/sheet (Túi, Nhật ký, Cài đặt…) giữ cỡ cũ. Nút chính vẫn ≥ 44 px. */
/* app.css (bản V1) còn `html:not([data-ui=desktop]) .hud-self { left: var(--sl); top: var(--st) }` thắng `.hud-v2 .hud-self {left:auto}` ⇒ khung mình
   lệch thêm 1 lần lề an toàn (zone đã ở --sl): iPhone ngang lề trái 63 px ⇒ khung ở x 126, đè khung mục tiêu (ảnh 10 "Thuần VuThu" bị cắt) */
html:not([data-ui="desktop"]) .hud-v2 .hud-self { left: 0; top: 0; }
html.ui-compact .hud-v2 .hud-self { width: 100%; height: 100%; padding: 3px 8px 3px 3px; gap: 6px; border-radius: 10px; }
html.ui-compact .hud-sf-pwrap,
html.ui-compact .hud-v2 .hud-sf-portrait { width: calc(36px * var(--hk, 1)); height: calc(36px * var(--hk, 1)); }
html.ui-compact .hud-sf-emblem { transform: translate(-50%, -50%) scale(.6); }
html.ui-compact .hud-v2 .hud-sf-body { gap: 2px; }
html.ui-compact .hud-v2 .hud-sf-name { font-size: 12.5px; line-height: 1.2; }
html.ui-compact .hud-sf-level { min-width: 18px; height: 15px; padding: 0 3px; font-size: 11px; line-height: 13px; }
html.ui-compact .hud-sf-fight { width: 16px; height: 16px; }
html.ui-compact .hud-v2 .hud-self .hud-hp,
html.ui-compact .hud-target .hud-hp { height: 13px; }
html.ui-compact .hud-v2 .hud-self .hud-mp { height: 4px; margin-top: 1px; }
html.ui-compact .hud-bar-text { font-size: 11px; }
html.ui-compact .hud-target { width: 100%; height: 100%; padding: 3px 30px 3px 3px; gap: 6px; border-radius: 10px; }
html.ui-compact .hud-tf-portrait { width: calc(30px * var(--hk, 1)); height: calc(30px * var(--hk, 1)); }
html.ui-compact .hud-tf-emblem { transform: translate(-50%, -50%) scale(.7); }
html.ui-compact .hud-tf-row { margin-bottom: 2px; }
html.ui-compact .hud-tf-name { font-size: 12.5px; }
html.ui-compact .hud-tf-level { font-size: 11px; }
html.ui-compact .hud-tf-close { width: 26px; height: 26px; right: 3px; }
/* bảng trái (Nhiệm vụ | Tổ đội): token chữ/khoảng cách thu NHỎ CHỈ trong bảng (quest.css dùng token ⇒ tự theo) + tên NV 1 dòng */
html.ui-compact .lpanel.on { --fs-2xs: 11px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 12.5px; --fs-lg: 13px; --sp-1: 3px; --sp-2: 6px; border-radius: 10px; }
html.ui-compact .lpanel.on > .lp-head { height: 26px; }
html.ui-compact .lpanel.on > .lp-body > .zone { padding-top: 9px; }   /* = phần vùng chạm 44 px của tab (đầu 26 px) lấn xuống */
/* [V6 main] tên NV trong tracker tối đa 2 dòng KHÔNG cắt 1 dòng — user V3 đã phàn nàn "…tìm Trương C…" (V3_quest.md mục 3) */
html.ui-compact .lpanel.on .q-trk-ntext { -webkit-line-clamp: 2; line-clamp: 2; }
html.ui-compact .lpanel.on .q-trk.touch .q-trk-item { padding: 3px 6px 2px; }
html.ui-compact .lpanel.on .q-trk.touch .q-trk-guide { min-height: 28px; }
html.ui-compact .lpanel.on .q-trk.touch .q-trk-guide .q-btn { min-height: 26px; min-width: 52px; }
html.ui-compact .lp-fold { width: 26px; }
/* dòng "Mua tại: <NPC> 219 m [Đi tới]" trong bảng 180 px: tên người bán bị ép còn 1 ký tự (ảnh trước) ⇒ gọn bỏ số mét (mũi tên/cột sáng
   + nút Đi tới đã chỉ đường) để đủ chỗ cho tên */
html.ui-compact .lpanel.on .q-trk-guide.buy .q-trk-dist { display: none; }
/* mọi giao diện cảm ứng: chữ tab KHÔNG xuống dòng (ảnh 10 "Nhiệm / vụ"); tab Nhiệm vụ rộng hơn (có huy hiệu số) */
html:not([data-ui="desktop"]) .lp-tab { white-space: nowrap; }
html:not([data-ui="desktop"]) .lp-tab > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not([data-ui="desktop"]) .lp-tab[data-tab="tracker"] { flex: 1.35 1 0; }
html:not([data-ui="desktop"]) .lp-tab[data-tab="party"] { flex: 1 1 0; }
html:not([data-ui="desktop"]) .lp-badge { flex: none; }
/* thanh niệm (zone castbar): tên + giây luôn 1 dòng — tên dài "…" (ảnh 10: xuống dòng, đè nút tương tác) */
html:not([data-ui="desktop"]) .z-castbar .sk-cb-label { gap: 6px; white-space: nowrap; }
html:not([data-ui="desktop"]) .z-castbar .sk-cb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not([data-ui="desktop"]) .z-castbar .sk-cb-time { flex: none; white-space: nowrap; }
/* chat 2 dòng: đúng 44 px của zone (trước: zone 40k mà nút ≥ 44 ⇒ tràn đáy màn 4 px ở 667×320) */
html.ui-compact .hud-chat-peek { min-height: 0; padding: 3px 6px; }
html.ui-compact .hud-chat-peekline { line-height: 1.35; }
/* cụm kỹ năng: nhãn chữ nhỏ hơn 1 nấc (ô 44–48 px) */
html.ui-compact .z-cluster { --fs-sm: 12px; --fs-md: 12.5px; --fs-lg: 14px; }
/* [☰][Võ học]: nhãn 11 px */
html.ui-compact .hud-tbtn-lb { font-size: 11px; }