/* =====================================================================
   HUD 1.26.8 — bố cục chung cho máy tính và điện thoại (như ảnh mẫu)
   · Trên trái: khung nhân vật, khung thú cưng, hiệu ứng (buff)
   · Trên giữa: thông tin mục tiêu (quái, boss, người chơi, NPC)
   · Trên phải: tên bản đồ / khu, bản đồ nhỏ, hàng biểu tượng sự kiện
   · Dưới giữa: dải trò chuyện (bấm để mở khung chat đầy đủ)
   · Dưới phải: cụm kỹ năng hình quạt (giống nhau trên máy tính và điện thoại, máy tính có chữ phím tắt),
     hàng ô dùng nhanh, nút ☰ (đổi cụm kỹ năng ↔ bảng chức năng) và nút Tự động
   · Dưới trái: cần điều khiển (chỉ điện thoại)
   Mọi cỡ tính theo --u (tỉ lệ theo chiều cao màn hình, quản trị chỉnh thêm bằng --tbk).
   ===================================================================== */
:root{
  --u: calc(min(1, max(.62, calc(var(--vhn, 720) / 1000))) * var(--tbk, 1));
  --um: max(var(--u), .74);
  --pad-r: calc(12px + var(--sr, 0px));
  --pad-b: calc(10px + var(--sb, 0px));
}

/* ---------- Cụm kỹ năng hình quạt (dưới phải) ---------- */
#touch .touch-buttons{
  position: fixed !important; left: auto !important; top: auto !important;
  right: var(--pad-r) !important; bottom: calc(var(--pad-b) + 64px * var(--u)) !important;
  width: 300px !important; height: 270px !important; display: block !important; padding: 0 !important; gap: 0 !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  transform: scale(var(--u)) !important; transform-origin: 100% 100% !important; pointer-events: none !important; z-index: 6;
}
#touch .touch-buttons > .tbtn, #touch .touch-buttons > .sbtn{ position: absolute !important; left: auto !important; top: auto !important; pointer-events: auto; order: 0 !important; flex: none !important; }
#touch .touch-buttons > .t-atk{ right: 30px !important; bottom: 0 !important; width: 104px !important; height: 104px !important; }
#touch .touch-buttons > .s0{ right: 158px !important; bottom: 10px !important; width: 82px !important; height: 82px !important; }
#touch .touch-buttons > .s1{ right: 124px !important; bottom: 94px !important; width: 82px !important; height: 82px !important; }
#touch .touch-buttons > .s2{ right: 40px !important; bottom: 128px !important; width: 82px !important; height: 82px !important; }
#touch .touch-buttons > .s3{ right: 250px !important; bottom: 84px !important; width: 56px !important; height: 56px !important; }
#touch .touch-buttons > .s4{ right: 146px !important; bottom: 204px !important; width: 56px !important; height: 56px !important; }
#touch .touch-buttons > .t-aim, #touch .touch-buttons > .t-talk{ right: 208px !important; bottom: 158px !important; width: 50px !important; height: 50px !important; }
#touch .touch-buttons > .t-aim[hidden]{ display: none !important; }
#touch .touch-buttons > .t-aim svg{ width: 70%; height: 70%; margin: 15%; }
#touch .touch-buttons > .sbtn i, #touch .touch-buttons > .sbtn em{ border-radius: 50%; }
#touch .touch-buttons > .sbtn i{ overflow: hidden; }
/* Máy tính: chữ phím tắt nằm ở góc trên mỗi nút */
body:not(.touch-mode) #touch .touch-buttons kbd{
  display: flex !important; position: absolute !important; right: -2px !important; top: -2px !important; left: auto !important; bottom: auto !important; transform: none !important;
  min-width: 24px; height: 24px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 6px;
  background: #1a1009 !important; color: #ffe7b0 !important; font: 800 13px/1 system-ui, sans-serif !important; box-shadow: 0 0 0 1.5px #c99a56, 0 2px 4px rgba(0,0,0,.6) !important; z-index: 3;
}
body:not(.touch-mode) #touch .touch-buttons > .t-atk kbd{ right: 8px !important; top: 6px !important; }
body.touch-mode #touch kbd{ display: none !important; }

/* ---------- Hàng dưới cùng: ô dùng nhanh · ☰ · Tự động ---------- */
#touch .quickslots.potion-row{
  position: fixed !important; left: auto !important; top: auto !important; right: calc(var(--pad-r) + 124px * var(--u)) !important; bottom: var(--pad-b) !important;
  display: flex !important; gap: calc(6px * var(--u)) !important; z-index: 6; transform: none !important;
}
#touch .potion-row .quickslot{ width: calc(54px * var(--u)) !important; height: calc(54px * var(--u)) !important; min-width: 0 !important; }
body:not(.touch-mode) #touch .potion-row .quickslot kbd{ display: flex !important; left: auto !important; right: -3px !important; top: -3px !important; bottom: auto !important; transform: none !important; }
#touch #btn-auto.auto-btn{
  position: fixed !important; left: auto !important; top: auto !important; right: var(--pad-r) !important; bottom: var(--pad-b) !important;
  width: calc(54px * var(--u)) !important; height: calc(54px * var(--u)) !important; padding: calc(9px * var(--u)) !important; z-index: 7;
}
/* Nút ☰: dưới bản đồ nhỏ, góc phải (xa cụm kỹ năng, tránh bấm nhầm lúc đánh) */
#hud #btn-menu.pad-toggle{
  position: absolute !important; left: auto !important; bottom: auto !important; right: calc(10px + var(--sr, 0px)) !important; top: var(--ev-top, 140px) !important;
  width: calc(46px * var(--um)) !important; height: calc(46px * var(--um)) !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: calc(5px * var(--um)) !important;
  z-index: 7; pointer-events: auto; cursor: pointer;
}
/* Nền mặc định (độ ưu tiên thấp hơn "#btn-menu": quản trị tải ảnh "Nút Menu ☰" thì ảnh đó thay vào) */
:where(#hud) .pad-toggle.menu-burger{
  border-radius: 10px !important; border: 2px solid #e2a94e !important; background: linear-gradient(180deg, #6a4220, #2a1709) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,230,170,.18) !important;
}
#hud #btn-menu.pad-toggle span{ display: block; width: 50%; height: max(2px, calc(3.5px * var(--um))); border-radius: 2px; background: #fff3d6; transition: transform .18s, opacity .18s; }
#hud #btn-menu.pad-toggle.open span:nth-child(1){ transform: translateY(calc(8.5px * var(--um))) rotate(45deg); }
#hud #btn-menu.pad-toggle.open span:nth-child(2){ opacity: 0; }
#hud #btn-menu.pad-toggle.open span:nth-child(3){ transform: translateY(calc(-8.5px * var(--um))) rotate(-45deg); }
#hud #btn-menu.pad-toggle .menu-dot{ position: absolute; right: -3px; top: -3px; }
body:not(.touch-mode) #hud #btn-menu.pad-toggle::after{
  content: "M"; position: absolute; left: -6px; bottom: -6px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 5px;
  background: #1a1009; color: #ffe7b0; font: 800 11px/1 system-ui, sans-serif; box-shadow: 0 0 0 1.5px #c99a56;
}
body.kb-open #hud #btn-menu.pad-toggle{ visibility: hidden; }
/* Hàng dưới cùng còn ô dùng nhanh + nút Tự động */
#touch .quickslots.potion-row{ right: calc(var(--pad-r) + 62px * var(--u)) !important; }
/* Nút Bắt thú / Câu cá: bên trái cụm quạt */
#screen-game .catch-btn{ right: calc(var(--pad-r) + 400px * var(--u)) !important;   /* 1.28.9: dời sang trái, không đè ô kỹ năng */ bottom: calc(var(--pad-b) + 150px * var(--u)) !important; width: calc(62px * var(--u)) !important; height: calc(62px * var(--u)) !important; }
#screen-game .catch-btn.fish-btn{ bottom: calc(var(--pad-b) + 222px * var(--u)) !important; }

/* ---------- Bấm ☰: các ô kỹ năng đổi thành biểu tượng chức năng, ngay tại chỗ cụm kỹ năng (không có bảng đè lên) ---------- */
:root{ --gu: max(var(--u), .72); }
body.pad-menu #touch .touch-buttons{ visibility: hidden !important; }
#hud #menu-grid.menu-grid{
  position: fixed !important; left: auto !important; top: auto !important;
  right: var(--pad-r) !important; bottom: calc(var(--pad-b) + 64px * var(--u)) !important;
  display: grid !important; grid-template-columns: repeat(4, calc(74px * var(--gu))) !important; grid-auto-rows: auto; gap: calc(8px * var(--gu)) 0 !important;
  padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; z-index: 12;
  --mi: calc(56px * var(--gu));
}
#hud #menu-grid.menu-grid[hidden]{ display: none !important; }
#hud #menu-grid.menu-grid button{
  font-size: calc(11.5px * var(--gu)) !important; gap: calc(3px * var(--gu)) !important; padding: 0 !important; position: relative; min-width: 0; overflow: visible;
  animation: padIn .16s ease-out both;
}
#hud #menu-grid.menu-grid .mi{
  width: var(--mi) !important; height: var(--mi) !important; margin: 0 !important; border-radius: 50% !important; background-size: 58% !important;
  background-color: rgba(40, 24, 10, .82); box-shadow: inset 0 0 0 2px #e2a94e, 0 3px 8px rgba(0, 0, 0, .6) !important;
}
#hud #menu-grid.menu-grid .dot-badge{ position: absolute; right: calc(10px * var(--gu)); top: 0; }
@keyframes padIn{ from{ opacity: 0; transform: scale(.7); } to{ opacity: 1; transform: none; } }

/* Biểu tượng mặc định cho mục mới (quản trị thay được bằng ảnh "Menu · Kỹ năng", "Menu · Bạn bè") */
.mi-skills{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff3d6'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.mi-friends{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff3d6'%3E%3Ccircle cx='8.5' cy='7.5' r='3.5'/%3E%3Ccircle cx='16.5' cy='8.5' r='3'/%3E%3Cpath d='M1.5 20c0-3.9 3.1-7 7-7s7 3.1 7 7z'/%3E%3Cpath d='M16.5 12.5c3.3 0 6 2.7 6 6V20h-5.4c0-2.8-1.1-5.3-3-7.1.7-.3 1.5-.4 2.4-.4z'/%3E%3C/svg%3E"); }

/* ---------- Trên phải: biểu tượng sự kiện cùng hàng với tên bản đồ / Khu, mũi tên để ẩn / hiện ---------- */
#hud .top-right > .ev-icons{
  display: flex; gap: calc(8px * var(--um)); align-items: flex-start; height: var(--tb) !important; overflow: visible; pointer-events: auto; margin-right: 4px !important;
}
#hud .top-right > .ev-icons.off{ display: none !important; }
#hud .ev-icons button{
  position: relative; display: block; width: calc(var(--tb) + 6px); height: var(--tb) !important; padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  color: #fff3d6; font-weight: 800; font-size: calc(10.5px * var(--um)); line-height: 1.1; text-shadow: 0 1px 0 #2a1406, 0 0 3px #000, 0 0 2px #000;
}
#hud .ev-icons button span{ position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
#hud .ev-icons .mi{
  width: calc(var(--tb) + 6px); height: calc(var(--tb) + 6px); margin: -3px 0 0; border-radius: 50%;
  background-color: rgba(60, 36, 16, .85); background-size: 58%; box-shadow: inset 0 0 0 2px #e2a94e, 0 3px 6px rgba(0, 0, 0, .55);
}
#hud .ev-icons button:hover .mi{ filter: brightness(1.15); }
#hud .ev-icons button:active .mi{ transform: scale(.93); }
#hud .top-right > .ev-toggle{
  width: calc(var(--tb) * .7) !important; padding: 0 !important; border-radius: 8px !important; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(60, 36, 16, .92), rgba(30, 18, 8, .92)); border: 1.5px solid #c99a56; box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
#hud .top-right > .ev-toggle i{ width: 9px; height: 9px; border: solid #ffe7b0; border-width: 0 3px 3px 0; transform: translateX(-2px) rotate(-45deg); transition: transform .18s; }
#hud .top-right > .ev-toggle[aria-expanded="false"] i{ transform: translateX(2px) rotate(135deg); }
body.kb-open #hud .ev-icons{ visibility: hidden; }

/* ---------- Dưới giữa: dải trò chuyện ---------- */
#hud > #chat-mini.chat-mini{
  position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: calc(14px + var(--sb, 0px)) !important; transform: translateX(-50%) !important;
  width: min(460px, 34vw) !important; height: calc(48px * var(--um)) !important; margin: 0 !important; padding: 5px 12px !important; z-index: 6;
  display: flex !important; flex-direction: column; justify-content: flex-end; gap: 1px; overflow: hidden !important; text-align: left; cursor: pointer; font: inherit;
  border: 0 !important; border-radius: 10px !important; background: rgba(10, 7, 4, .55) !important; box-shadow: inset 0 0 0 1px rgba(232, 183, 101, .35) !important;
}
#hud > #chat-mini.chat-mini[hidden]{ display: none !important; }
#hud > #chat-mini .cm-line{ font-size: calc(12px * var(--um)) !important; flex: 0 0 auto; }
body.kb-open #hud > #chat-mini.chat-mini{ visibility: hidden; }

/* ---------- Trên giữa: khung người chơi đang chọn ---------- */
#hud.hud2 .hud-plate.tplate{ left: 50% !important; top: 8px !important; transform: translateX(-50%) !important; }
/* Chữ "Tự động đánh" nằm ngay trên dải trò chuyện */
#hud > .auto-label{ bottom: calc(14px + var(--sb, 0px) + 48px * var(--um) + 8px) !important; top: auto !important; }

/* ---------- Tên bản đồ · Khu gắn liền dưới bản đồ nhỏ (bấm mở Bản đồ thế giới, đổi khu ở trong đó) ---------- */
#hud .top-right > .map-pill, #hud .top-right > .zone-pill:not(.dg-tag):not(.pk-pill){ display: none !important; }
#hud > .mm-label{
  position: absolute; z-index: 6; right: calc(10px + var(--sr, 0px)); top: var(--mm-bot, 130px); width: var(--mm-w, 210px); box-sizing: border-box;
  height: calc(30px * var(--um)); margin-top: 2px; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 0; cursor: pointer;
  overflow: hidden; white-space: nowrap; font: inherit; font-weight: 800; font-size: calc(13px * var(--um)); color: #fff3d6; text-shadow: 0 1px 2px #000;
  border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #a0602a, #6a3a14); border: 1.5px solid #e2a94e; border-top: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 230, 170, .3);
}
#hud > .mm-label b{ overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#hud > .mm-label span{ flex: 0 0 auto; color: #ffe08a; }
#hud > .mm-label:active{ filter: brightness(1.1); }
body.kb-open #hud > .mm-label{ visibility: hidden; }

/* Cửa sổ Bản đồ thế giới: thẻ Khu vực */
#screen-game #win-worldmap .wm-wrap[hidden], #screen-game #win-worldmap .wm-zone[hidden]{ display: none !important; }
#screen-game #win-worldmap .wm-zone{ height: 100%; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
#screen-game #win-worldmap .wm-zone .zone-head{ display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(184, 137, 74, .4); color: #f1e2c4; }
#screen-game #win-worldmap .wm-zone .zone-head b{ color: #ffe08a; }
#screen-game #win-worldmap .wm-zone .zone-grid{ flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; align-content: start; }
#screen-game #win-worldmap .wm-zone .parch-hint{ margin: 0; color: #b9a17a !important; }
@media (max-height: 560px), (max-width: 900px) { #screen-game #win-worldmap .wm-zone .zone-grid{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; } }