/* ═══════════════════════════════════════════════════════════════
   SLIM — LỚP DA TỐI GIẢN (20/09/2026)   · nạp SAU CÙNG, đè các lớp cũ
   Mục tiêu: bớt viền, bớt bóng, bớt màu — giữ đúng MỘT chất liệu (kính trắng)
   và MỘT màu nhấn (xanh dương). Kích thước theo màn hình vẫn do hudfit.css lo,
   ở đây chỉ đổi phần NHÌN nên không phá vỡ bố cục sẵn có.
   Bật/tắt: body.slim-on (do js/uislim.js gắn vào).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --sl-surf:rgba(255,255,255,.92);
  --sl-surf2:rgba(255,255,255,.72);
  --sl-line:rgba(35,58,99,.10);
  --sl-line2:rgba(35,58,99,.16);
  --sl-ink:#22355c; --sl-mut:#8395b4;
  --sl-acc:#2f7cf6; --sl-acc-s:rgba(47,124,246,.12);
  --sl-sh:0 6px 20px rgba(28,58,110,.13);
  --sl-sh2:0 2px 8px rgba(28,58,110,.10);
  --sl-r:14px; --sl-r2:18px; --sl-r3:26px;
}

/* ───────── thanh dưới: một thanh kính, không còn vân gỗ ─────────
   css/skin.css (dòng 206–210) khai báo nền/viền/bóng của dock kèm !important,
   nên ở ĐÚNG mấy dòng này phải dùng !important mới đè được — chỗ khác thì không cần. */
html body.slim-on #hud .hud-bottom{
  background:var(--sl-surf)!important;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--sl-line)!important;box-shadow:var(--sl-sh)!important;border-radius:var(--sl-r3)!important;gap:2px}
html body.slim-on #hud .hud-bottom .dock-btn{
  background:transparent!important;border:0;box-shadow:none!important;color:var(--sl-ink)!important;text-shadow:none!important;
  border-radius:var(--sl-r);transition:background .15s,color .15s,transform .12s}
html body.slim-on #hud .hud-bottom .dock-btn i{color:var(--sl-mut);filter:none;transition:color .15s}
html body.slim-on #hud .hud-bottom .dock-btn:hover{background:var(--sl-acc-s)!important}
html body.slim-on #hud .hud-bottom .dock-btn:hover i{color:var(--sl-acc)}
html body.slim-on #hud .hud-bottom .dock-btn:active{transform:translateY(1px)}
/* nút ĐẦU TIÊN thôi tự sáng như đang được chọn — lỗi cũ: .dock-btn:first-child luôn vàng
   nên "Nông trại" lúc nào cũng trông như đang mở, dù đang mở bảng khác. */
html body.slim-on #hud .hud-bottom .dock-btn:first-child{background:transparent!important;color:var(--sl-ink)!important;box-shadow:none!important;text-shadow:none!important}
html body.slim-on #hud .hud-bottom .dock-btn:first-child i{color:var(--sl-mut)}
/* chỉ bảng ĐANG MỞ mới sáng */
html body.slim-on #hud .hud-bottom .dock-btn.active{background:var(--sl-acc-s)!important;color:var(--sl-acc)!important;box-shadow:none!important}
html body.slim-on #hud .hud-bottom .dock-btn.active i{color:var(--sl-acc)}

/* CHỈ khi thanh dưới đã rút còn 6 nút (body.slim-nav) thì mới nới chỗ cho chữ.
   Giữ đủ 10 nút như cũ thì để hudfit tự lo bề rộng, kẻo tràn thanh. */
html body.slim-nav.hud-compact #hud .hud-bottom .dock-btn span{display:block}
html body.slim-nav.hud-compact #hud .hud-bottom .dock-btn{width:max(58px,calc(74px*var(--hs)))}
html body.slim-nav.hud-tiny #hud .hud-bottom .dock-btn span{display:none}
html body.slim-nav.hud-tiny #hud .hud-bottom .dock-btn{width:max(46px,calc(62px*var(--hs)))}

/* nút "Thêm" — tách khỏi nhóm bằng một vạch mảnh, không thêm màu */
html body.slim-on #hud .hud-bottom .slim-more{position:relative;margin-left:6px}
html body.slim-on #hud .hud-bottom .slim-more::before{content:"";position:absolute;left:-4px;top:18%;bottom:18%;width:1px;background:var(--sl-line2)}
html body.slim-on #hud .hud-bottom .slim-more i{font-style:normal;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}

/* ───────── thanh tài nguyên trên ───────── */
html body.slim-on #hud .res{
  background:var(--sl-surf);border:1px solid var(--sl-line);color:var(--sl-ink);
  text-shadow:none;box-shadow:var(--sl-sh2);border-radius:999px}
html body.slim-on #hud .res i{border:0;box-shadow:none}
html body.slim-on #hud .res .res-max{color:var(--sl-mut)}
/* kho và đồng hồ là thông tin phụ → để nhẹ đi, đỡ tranh chỗ với xu/kim cương */
html body.slim-on #hud .res.barn,html body.slim-on #hud .res.clock{background:var(--sl-surf2);box-shadow:none;color:var(--sl-mut)}
html body.slim-on #hud .res.clock i,html body.slim-on #hud .res.barn i{opacity:.75}
/* trả lại dấu + ở năng lượng (20/9: yêu cầu giữ ĐỦ nút như cũ) — chỉ làm nó nhẹ màu lại */
html body.slim-on #hud .res .res-add{background:var(--sl-acc);box-shadow:none;border:0;opacity:.9}
html body.slim-on #hud .res .res-add:hover{opacity:1}
html body.slim-on #hud .resources .icon-btn{background:var(--sl-surf);border:1px solid var(--sl-line);color:var(--sl-mut);box-shadow:var(--sl-sh2)}
html body.slim-on #hud .resources .icon-btn:hover{color:var(--sl-acc);background:#fff}

/* ───────── thẻ hồ sơ + thanh nhiệm vụ ───────── */
html body.slim-on #hud .profile,html body.slim-on #hud .quest-track{
  background:var(--sl-surf);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--sl-line);box-shadow:var(--sl-sh2);color:var(--sl-ink);text-shadow:none}
html body.slim-on #hud .quest-track{transition:background .15s}
html body.slim-on #hud .quest-track:hover{background:#fff}
html body.slim-on #hud .qt-desc,html body.slim-on #hud .pfarm{color:var(--sl-mut)}

/* ───────── chip tên khu: hiện rồi tự mờ đi ───────── */
html body.slim-on #hud .zone-name{
  background:var(--sl-surf);border:1px solid var(--sl-line);color:var(--sl-ink);
  box-shadow:var(--sl-sh2);text-shadow:none;opacity:.35;transition:opacity .45s}
html body.slim-on #hud .zone-name::before{background:var(--sl-acc);box-shadow:none}
html body.slim-on #hud .zone-name.sl-show{opacity:1}

/* ───────── cột trái/phải: chỉ còn vài nút, làm cho sạch ───────── */
html body.slim-on #hud .side-btn{color:var(--sl-ink);text-shadow:none}
html body.slim-on #hud .side-btn i{
  background:var(--sl-surf);border:1px solid var(--sl-line);color:var(--sl-mut);box-shadow:var(--sl-sh2)}
html body.slim-on #hud .side-btn:hover i{background:#fff;color:var(--sl-acc)}
html body.slim-on #minimap{border:1px solid var(--sl-line);box-shadow:var(--sl-sh2);opacity:.96}

/* ───────── huy hiệu: một kiểu duy nhất ───────── */
html body.slim-on #hud .badge,html body.slim-on .slim-dr .badge{
  background:#ef4d5a;border:2px solid #fff;box-shadow:none;color:#fff;font-weight:800}

/* ───────── hộp thoại nhân vật: thôi màu gỗ, dùng thẻ trắng ───────── */
html body.slim-on #dialog .dlg-box{
  background:var(--sl-surf);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--sl-line);box-shadow:var(--sl-sh);color:var(--sl-ink);text-shadow:none;border-radius:var(--sl-r2)}
/* khung gỗ của hộp thoại nằm ở lớp giả ::before (css/panel.css) — bỏ hẳn, không chỉ đổi nền */
html body.slim-on #dialog .dlg-box::before{content:none}
html body.slim-on #dialog .dlg-name{background:var(--sl-acc);color:#fff;border:0;box-shadow:none;text-shadow:none}
html body.slim-on #dialog .dlg-portrait{border:1px solid var(--sl-line);box-shadow:var(--sl-sh2)}
/* bỏ khung trong khung: chữ thoại vốn nằm trong một ô viền nữa → thừa một lớp */
html body.slim-on #dialog .dlg-text{background:none;border:0;box-shadow:none;padding:2px 2px 0;color:var(--sl-ink)}
html body.slim-on #dialog .dlg-choices .btn-ghost{background:#fff;border:1px solid var(--sl-line2);color:var(--sl-ink);box-shadow:none}
html body.slim-on #dialog .dlg-choices .btn-primary{background:var(--sl-acc);box-shadow:none;text-shadow:none}

/* ═══════════════ NGĂN "THÊM" ═══════════════
   Bản đầu bị rộng quá (760px) mà mỗi nhóm chỉ 3–4 mục nên ô nào cũng cách nhau
   cả gang tay, nhìn trống hoác. Nay: tấm hẹp lại, lưới CỐ ĐỊNH 4 cột nên mỗi nhóm
   vừa đúng MỘT hàng, và mỗi mục là một ô nền nhạt để ra dáng nút bấm. */
.slim-dr{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
/* nền mờ: KHÔNG cho hiện/ẩn phụ thuộc vào hiệu ứng chuyển màu —
   nếu trình duyệt bỏ qua transition thì ngăn vẫn phải nhìn thấy được. */
.slim-dr-bg{position:absolute;inset:0;background:rgba(18,36,68,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.slim-dr-sheet{position:relative;width:min(492px,calc(100vw - 24px));max-height:min(84vh,560px);
  margin:0 12px calc(14px + var(--safe-b,0px));display:flex;flex-direction:column;
  background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--sl-line);border-radius:22px;box-shadow:0 20px 56px rgba(18,44,92,.28);
  transform:translateY(12px);transition:transform .2s cubic-bezier(.2,.9,.3,1);overflow:hidden}
.slim-dr.on .slim-dr-sheet{transform:none}
.slim-dr-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 13px;margin-bottom:6px;border-bottom:1px solid var(--sl-line);
  font-family:var(--fh,inherit);color:var(--sl-ink);font-size:1.12rem;font-weight:800;letter-spacing:.01em}
.slim-dr-x{width:30px;height:30px;border-radius:50%;color:var(--sl-mut);font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.slim-dr-x:hover{background:var(--sl-acc-s);color:var(--sl-acc)}
.slim-dr-body{padding:0 12px 12px;overflow-y:auto;overscroll-behavior:contain}
.slim-grp+.slim-grp{margin-top:9px}
.slim-grp-t{font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sl-mut);padding:0 6px 7px;opacity:.85}
/* 4 cột cố định: mỗi nhóm đúng một hàng, không còn khoảng trống mênh mông */
.slim-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}

/* mỗi mục: ô icon TRÒN tô màu theo nhóm + nhãn. Icon là nét đơn sắc nên
   dù lấy từ nhiều bộ khác nhau vẫn ra cùng một phong cách. */
.slim-grp[data-hue="amber"]{--h:#e08a00;--hb:rgba(245,166,35,.17)}
.slim-grp[data-hue="green"]{--h:#1f9a4d;--hb:rgba(42,160,76,.16)}
.slim-grp[data-hue="blue"]{--h:#2f7cf6;--hb:rgba(47,124,246,.15)}
.slim-grp[data-hue="slate"]{--h:#6b7d9c;--hb:rgba(107,125,156,.15)}

.slim-dr .slim-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;
  padding:9px 4px 10px;border-radius:15px;background:transparent;border:1px solid transparent;
  color:var(--sl-ink);font-family:var(--fh,inherit);font-weight:700;font-size:.76rem;text-shadow:none;width:auto;min-width:0;
  transition:background .15s,border-color .15s,transform .12s}
.slim-dr .slim-item:hover{background:rgba(35,58,99,.04);border-color:var(--sl-line)}
.slim-dr .slim-item:active{transform:scale(.96)}
/* ô icon */
.slim-dr .slim-item i,.slim-dr .slim-item i.img{
  width:40px;height:40px;flex:0 0 auto;padding:10px;border-radius:50%;border:0;
  background:var(--hb,var(--sl-acc-s));color:var(--h,var(--sl-acc));box-shadow:none;filter:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .14s cubic-bezier(.2,.9,.3,1),background .15s}
.slim-dr .slim-item i svg{width:100%;height:100%;display:block}
.slim-dr .slim-item:hover i{transform:translateY(-2px) scale(1.06)}
.slim-dr .slim-item span{display:block;line-height:1.2;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* huy hiệu: theo đúng quy ước .badge / .badge.on của game, nếu không sẽ hiện vòng tròn đỏ ghi "0" */
.slim-dr .slim-item .badge{position:absolute;top:5px;right:calc(50% - 26px);display:none;min-width:18px;height:18px;
  border-radius:999px;font-size:10px;align-items:center;justify-content:center;padding:0 5px;line-height:1}
.slim-dr .slim-item .badge.on{display:flex}
.slim-dr .slim-item .badge:empty{display:none}
html body.slim-on #hud .badge:empty{display:none}

@media (max-width:560px){
  .slim-dr-sheet{max-height:82vh;border-radius:18px}
  .slim-grid{grid-template-columns:repeat(3,1fr)}
  .slim-dr .slim-item{padding:10px 3px 9px;font-size:.71rem;border-radius:14px;gap:7px}
  .slim-dr .slim-item i,.slim-dr .slim-item i.img{width:40px;height:40px;padding:10px}
  .slim-dr .slim-item .badge{right:calc(50% - 25px)}
}
/* màn hình cao thì thả ngăn ra giữa cho cân, khỏi dính đáy */
@media (min-height:760px){
  .slim-dr{align-items:center}
  .slim-dr-sheet{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .slim-dr-sheet,html body.slim-on #hud .zone-name{transition:none}
}