/* ======================================================================
   Giao diện "Giấy da & Khung gỗ" — ấm áp kiểu làng quê, mềm mại (không pixel).
   Khung gỗ nâu, ruột giấy da kem, nhãn tiêu đề xanh lá nhô lên mép trên,
   ô đồ lõm, nút chính xanh lá. Nạp SAU style.css nên đè được lớp kính tối cũ.
   ====================================================================== */
:root {
  --cz-wood-0: #3a2313;   /* viền ngoài tối nhất */
  --cz-wood-1: #5e3a1e;
  --cz-wood-2: #7f512b;
  --cz-wood-3: #a8723f;
  --cz-wood-4: #c99a5e;   /* ánh sáng trên gỗ */
  --cz-parch-0: #fdf5e1;
  --cz-parch-1: #f5e6c4;
  --cz-parch-2: #ead4a5;
  --cz-parch-3: #d8b984;  /* viền ô */
  --cz-slot: #e6cd9a;
  --cz-ink: #4a2e18;
  --cz-ink-2: #80603f;
  --cz-leaf-0: #2c561b;
  --cz-leaf-1: #4a8a2b;
  --cz-leaf-2: #6aaa3b;
  --cz-leaf-3: #9bd067;
  --cz-amber: #9a5a10;
  --cz-sky: #2b6a96;
  --cz-red: #b0321f;
  /* khung gỗ dùng chung: nền giấy trong padding-box, gỗ trong border-box */
  --cz-paper: radial-gradient(120% 90% at 50% 0%, var(--cz-parch-0), var(--cz-parch-1) 60%, var(--cz-parch-2));
  --cz-woodgrad: linear-gradient(180deg, var(--cz-wood-3), var(--cz-wood-2) 35%, var(--cz-wood-1));
  --cz-frame-shadow: 0 0 0 2px var(--cz-wood-0), 0 14px 34px rgba(30, 16, 6, 0.5), inset 0 0 0 1.5px var(--cz-wood-4), inset 0 0 26px rgba(150, 100, 40, 0.22);
}

/* ---------------- Bảng (panel) ---------------- */
body .panel, body #trade {
  --text: var(--cz-ink); --muted: var(--cz-ink-2); --gold: var(--cz-amber); --gold-soft: rgba(154, 90, 16, 0.3);
  --lacquer: var(--cz-parch-1); --lacquer2: var(--cz-parch-2); --exc: #2f7a1c; --jewel: #7a3fb8; --cyan: var(--cz-sky); --ink-red: var(--cz-red);
  color: var(--cz-ink) !important;
  background: var(--cz-paper) padding-box, var(--cz-woodgrad) border-box !important;
  border: 6px solid transparent !important;
  border-radius: 16px !important;
  box-shadow: var(--cz-frame-shadow) !important;
  backdrop-filter: none !important;
  margin-top: 22px;
}
/* bỏ hoạ tiết rồng vàng trên bảng (hợp kiểu sơn mài cũ, không hợp giấy da) */
body.dragon-ui .panel::before, body.dragon-ui .panel::after { display: none !important; }

/* đầu bảng: trong suốt, tiêu đề là nhãn xanh lá nhô lên mép gỗ */
body .panel .p-head, body.dragon-ui .panel .p-head {
  background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 12px 4px !important; min-height: 40px; color: var(--cz-ink) !important; text-shadow: none !important;
  font-family: 'Noto Serif', serif; font-size: 16px; align-items: flex-start;
}
.panel .p-head .p-title {
  display: inline-flex; align-items: center; gap: 6px; margin-top: -20px; padding: 6px 18px 7px;
  font: 700 15.5px/1.15 'Noto Serif', serif; letter-spacing: 0.6px; color: #fdf8e6; white-space: nowrap;
  max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, var(--cz-leaf-3), var(--cz-leaf-2) 30%, var(--cz-leaf-1) 75%, #3f7a24);
  border: 2px solid var(--cz-leaf-0); border-radius: 10px;
  box-shadow: 0 0 0 2px var(--cz-wood-0), inset 0 1.5px 0 rgba(255, 255, 230, 0.55), inset 0 -2px 0 rgba(20, 50, 10, 0.35), 0 4px 8px rgba(30, 16, 6, 0.35);
  text-shadow: 0 1px 0 rgba(20, 50, 10, 0.75), 0 0 6px rgba(20, 50, 10, 0.35);
}
.panel .p-head .p-title .btn { color: var(--cz-ink); text-shadow: none; }
/* các nút trong đầu bảng nằm bên phải, ngang hàng nhãn */
.panel .p-head > span:not(.p-title), .panel .p-head > .au-gold { margin-top: 6px; }
/* nút ✕: ô gỗ vuông nhỏ trên góc */
body .panel .p-close {
  width: 30px; height: 30px; padding: 0; margin: -16px -6px 0 auto; display: grid; place-items: center; flex: none;
  font-size: 15px !important; font-weight: 800; line-height: 1; color: var(--cz-parch-0) !important;
  background: linear-gradient(180deg, var(--cz-wood-3), var(--cz-wood-1)); border: 2px solid var(--cz-wood-0); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.45), 0 3px 6px rgba(30, 16, 6, 0.4);
  transition: transform 0.08s, filter 0.12s;
}
body .panel .p-close:hover { color: #fff !important; filter: brightness(1.15); background: linear-gradient(180deg, #c8553a, #8a2a17); }
body .panel .p-close:active { transform: scale(0.92); }
.panel .p-head > span:not(.p-title) .p-close { margin: 0 0 0 6px; }

/* chữ trong bảng: mực nâu */
body .panel :is(b, strong, h3, h4, h5, p, li, summary, label, td, th, small, dt, dd) { color: inherit; }
body .panel h4, body .panel h3, body .panel .ch-name, body .panel .q-title, body .panel .dl h4 { color: var(--cz-amber) !important; text-shadow: none !important; }
body .panel .note, body .panel .statline, body .panel .empty-note, body .panel small { color: var(--cz-ink-2); }
body .panel .ok, body .panel .q-text.done, body .panel .qlog.done summary small, body .panel .lore small.ok { color: #2f7a1c !important; }
body .panel .fail, body .panel .warn, body .panel .bad-t { color: var(--cz-red) !important; }
body .panel .mining, body .panel .gold-t, body .panel .tx i, body .panel .rk-v, body .panel .au-gold { color: var(--cz-amber) !important; text-shadow: none !important; }
body .panel .q-prog, body .panel .q-text { color: var(--cz-sky); }
body .panel .q-text { color: var(--cz-ink) !important; }
body .panel .qlog.ready summary small { color: var(--cz-amber) !important; }
body .panel code { color: #8a3a12; background: rgba(160, 110, 50, 0.12); border-radius: 4px; padding: 0 3px; }
body .panel hr, body .panel .stat, body .panel .shop-row, body .panel .qlog { border-color: rgba(120, 80, 40, 0.22) !important; }
body .panel .p-top { border-bottom: 1.5px solid rgba(120, 80, 40, 0.25) !important; box-shadow: 0 6px 8px -7px rgba(90, 55, 20, 0.45) !important; }
body .panel .p-bot { border-top: 1.5px solid rgba(120, 80, 40, 0.25) !important; color: var(--cz-ink-2); }

/* ---------------- Nút ---------------- */
body .panel .btn, body .gdlg .btn, body #confirm .btn {
  color: var(--cz-ink); font-weight: 600; text-shadow: 0 1px 0 rgba(255, 250, 230, 0.6);
  background: linear-gradient(180deg, var(--cz-parch-0), var(--cz-parch-2)) !important;
  border: 2px solid var(--cz-wood-2) !important; border-radius: 9px !important;
  box-shadow: inset 0 1px 0 #fffbea, inset 0 -2px 0 rgba(150, 100, 40, 0.25), 0 2px 0 var(--cz-wood-1), 0 3px 6px rgba(40, 20, 6, 0.25) !important;
  backdrop-filter: none !important;
}
body .panel .btn:hover:not(:disabled), body .gdlg .btn:hover:not(:disabled), body #confirm .btn:hover:not(:disabled) {
  filter: brightness(1.05); border-color: var(--cz-leaf-1) !important; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fffbea, 0 3px 0 var(--cz-wood-1), 0 0 10px rgba(106, 170, 59, 0.45) !important;
}
body .panel .btn:active:not(:disabled), body .gdlg .btn:active:not(:disabled), body #confirm .btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(90, 55, 20, 0.35) !important; }
/* nút chính: xanh lá như nút "CREATE" */
body .panel .btn.gold, body .gdlg .btn.gold, body #confirm .btn.gold, body .panel .btn.on {
  color: #fdfbe8 !important; font-weight: 700; letter-spacing: 0.3px; text-shadow: 0 1px 0 rgba(20, 50, 10, 0.8);
  background: linear-gradient(180deg, var(--cz-leaf-3), var(--cz-leaf-2) 35%, var(--cz-leaf-1)) !important;
  border-color: var(--cz-leaf-0) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 220, 0.55), inset 0 -2px 0 rgba(20, 50, 10, 0.3), 0 2px 0 var(--cz-leaf-0), 0 3px 8px rgba(30, 60, 10, 0.3) !important;
}
body .panel .btn:disabled { opacity: 0.55; filter: grayscale(0.4); }

/* ---------------- Ô đồ (lõm vào giấy) ---------------- */
body .panel .item, body .panel .eslot, .panel .ru-slot {
  background: linear-gradient(180deg, #dcc08a, var(--cz-slot) 30%, #efdcb2) !important;
  border: 1.5px solid #b8925a; border-radius: 9px !important; color: var(--cz-ink) !important;
  box-shadow: inset 0 2px 4px rgba(100, 65, 25, 0.38), inset 0 -1px 0 rgba(255, 250, 230, 0.6), 0 1px 0 rgba(255, 250, 230, 0.7);
  backdrop-filter: none !important;
}
body .panel .item:hover { border-color: var(--cz-leaf-1); box-shadow: inset 0 2px 4px rgba(100, 65, 25, 0.3), 0 0 0 2px rgba(106, 170, 59, 0.45), 0 0 10px rgba(106, 170, 59, 0.4); }
body .panel .item[data-sel] { background: linear-gradient(180deg, #c9dd9c, #e2efc0) !important; border-color: var(--cz-leaf-1) !important; box-shadow: inset 0 2px 4px rgba(40, 80, 20, 0.3), 0 0 0 2px rgba(74, 138, 43, 0.5) !important; }
body .panel .item img.ic { filter: drop-shadow(0 2px 2px rgba(60, 35, 10, 0.45)); }
body .panel .item .nm { color: var(--cz-ink); }
body .panel .item.potion .nm { color: #2f7a1c; } body .panel .item.high .nm { color: var(--cz-sky); }
body .panel .item.bad { color: var(--cz-red) !important; }
body .panel .eslot { border-style: solid; }
body .panel .eslot > small, body .panel .eslot .lbl { color: var(--cz-ink-2) !important; text-shadow: none !important; }
/* phẩm chất đồ: giữ viền màu, chữ màu đậm cho nền sáng */
.panel .item.r1 .nm { color: #1d5fb8; } .panel .item.r2 .nm { color: #7a3fb8; } .panel .item.r3 .nm { color: #9a5f00; } .panel .item.r4 .nm { color: #b81f14; }

/* ---------------- Khối nội dung / hàng danh sách ---------------- */
body .panel :is(.block, .bulk, .mining, .quest, .lore, .trade-cols > div, .rk-row, .dl-task, .dl-bonus, .dl-day, .fr-row, .ac-row, .gd-card, .au-row, .tx, .stat-box) {
  background: rgba(255, 250, 235, 0.55) !important; color: var(--cz-ink) !important;
  border: 1px solid rgba(160, 115, 60, 0.45) !important; border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 245, 0.8), 0 1px 2px rgba(90, 55, 20, 0.15) !important;
}
body .panel :is(.rk-row.top, .dl-day.big, .dl-task.ok, .dl-bonus.ok, .ac-row.ok) { background: rgba(250, 220, 140, 0.45) !important; border-color: #c48a2a !important; }
body .panel :is(.rk-row.me, .dl-day.now) { background: rgba(190, 225, 140, 0.55) !important; border-color: var(--cz-leaf-1) !important; box-shadow: 0 0 0 1.5px var(--cz-leaf-1) inset, 0 0 10px rgba(106, 170, 59, 0.35) !important; }
body .panel .fr-row.on { border-color: var(--cz-leaf-1) !important; }
body .panel :is(.fr-info b, .dl-tx b, .dl-bonus b, .lore b, .rk-n, .gdlg-text) { color: var(--cz-ink) !important; }
body .panel :is(.fr-info small, .dl-tx small, .dl-bonus small, .dl-st, .rk-c, .rk-v small, .lore p) { color: var(--cz-ink-2) !important; }
body .panel .fr-info .fr-where { color: #2f7a1c !important; }
body .panel .ac-t, body .panel .lore .lore-when { color: var(--cz-amber) !important; text-shadow: none !important; }
body .panel .lore { border-left: 4px solid var(--cz-red) !important; }
body .panel .lore.locked { border-left-color: #a08a6a !important; opacity: 0.7; }
body .panel .dl-bar { background: rgba(120, 80, 40, 0.2) !important; }
body .panel .dl-day i { color: #2f7a1c; }

/* ô nhập */
body .panel input, body .panel select, body .panel textarea, body .gdlg input {
  background: #fffaf0 !important; color: var(--cz-ink) !important; border: 1.5px solid var(--cz-wood-3) !important; border-radius: 8px !important;
  box-shadow: inset 0 2px 3px rgba(100, 65, 25, 0.2) !important;
}
body .panel input:focus, body .panel select:focus, body .panel textarea:focus { outline: none; border-color: var(--cz-leaf-1) !important; box-shadow: 0 0 0 2px rgba(106, 170, 59, 0.35) !important; }
body .panel input[type=checkbox], body .panel input[type=range] { box-shadow: none !important; accent-color: var(--cz-leaf-1); }

/* thanh cuộn gỗ */
body .panel * { scrollbar-color: var(--cz-wood-3) rgba(150, 100, 40, 0.15); }
body .panel ::-webkit-scrollbar-track { background: rgba(150, 100, 40, 0.15); box-shadow: none; }
body .panel ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--cz-wood-2), var(--cz-wood-4) 50%, var(--cz-wood-2)); border: 2px solid var(--cz-parch-1); border-radius: 6px; }

/* tab trong bảng (Xếp Hạng, Bang, Đấu giá…) */
body .panel :is(.tabs, .rk-tabs, .au-tabs, .gd-tabs) button:not(.btn) { color: var(--cz-ink-2); }

/* ---------------- Hộp thoại, xác nhận ---------------- */
body .gdlg, body #confirm, body #arena-call, body #q-prompt, body #xq {
  --text: var(--cz-ink); --muted: var(--cz-ink-2); --gold: var(--cz-amber);
  color: var(--cz-ink) !important;
  background: var(--cz-paper) padding-box, var(--cz-woodgrad) border-box !important;
  border: 6px solid transparent !important; border-radius: 16px !important;
  box-shadow: var(--cz-frame-shadow) !important; backdrop-filter: none !important;
}
body .gdlg :is(h3, h4, .gdlg-title), body #confirm :is(h3, h4, b) { color: var(--cz-amber) !important; text-shadow: none !important; }
body .gdlg .gdlg-text, body .gdlg p, body #confirm p, body #confirm div { color: var(--cz-ink) !important; text-shadow: none !important; }

/* chú thích vật phẩm & menu chuột phải: gỗ tối (chữ màu phẩm chất sáng vẫn rõ) */
body #tooltip {
  background: linear-gradient(180deg, rgba(62, 38, 20, 0.97), rgba(40, 24, 12, 0.97)) !important;
  border: 2px solid var(--cz-wood-3) !important; border-radius: 10px !important;
  box-shadow: 0 0 0 1.5px var(--cz-wood-0), 0 8px 20px rgba(0, 0, 0, 0.5) !important; color: #f6e8c8;
}
body #ctxmenu {
  background: linear-gradient(180deg, var(--cz-parch-0), var(--cz-parch-2)) !important;
  border: 3px solid var(--cz-wood-2) !important; border-radius: 12px !important; box-shadow: 0 0 0 1.5px var(--cz-wood-0), 0 8px 20px rgba(0, 0, 0, 0.45) !important;
}
body #ctxmenu button { color: var(--cz-ink) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 7px !important; text-shadow: none !important; }
body #ctxmenu button:hover { background: rgba(106, 170, 59, 0.22) !important; border-color: rgba(74, 138, 43, 0.5) !important; }
body #ctxmenu button.cm-no { color: var(--cz-red) !important; background: rgba(176, 50, 31, 0.1) !important; }

/* ---------------- HUD: khung nhân vật ---------------- */
body.dragon-ui .fr-panel, body #frame .fr-panel {
  --text: var(--cz-ink); --muted: var(--cz-ink-2);
  color: var(--cz-ink) !important;
  background: var(--cz-paper) padding-box, var(--cz-woodgrad) border-box !important;
  border: 4px solid transparent !important; border-left: none !important; border-radius: 0 14px 14px 0 !important;
  box-shadow: 0 0 0 2px var(--cz-wood-0), 0 8px 18px rgba(30, 16, 6, 0.45), inset 0 0 18px rgba(150, 100, 40, 0.2) !important;
  backdrop-filter: none !important;
}
body.dragon-ui .fr-panel::after { display: none; }
body.dragon-ui #frame-name, body #frame-name { color: var(--cz-ink) !important; text-shadow: 0 1px 0 rgba(255, 250, 230, 0.8) !important; }
body.dragon-ui #frame-lv, body #frame-lv { color: var(--cz-ink-2) !important; }
body #frame #gold, body.dragon-ui .fr-panel #gold { color: var(--cz-amber) !important; text-shadow: none; }
body #power { color: var(--cz-red) !important; text-shadow: none !important; }
body #frame .bar, body.dragon-ui .fr-panel .bar { background: #6b4a2c !important; border: 1.5px solid var(--cz-wood-0) !important; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.45); }
body #frame .bar.hp > div { background: linear-gradient(180deg, #ff8a74, #e0442e 55%, #b52a18) !important; box-shadow: none !important; }
body #frame .bar.mp > div { background: linear-gradient(180deg, #8fd4ff, #3b9be0 55%, #1f6fb0) !important; box-shadow: none !important; }
/* vòng ảnh đại diện: vòng gỗ thay vòng rồng */
body.dragon-ui #portrait .ring {
  background: none !important; border-radius: 50%; border: 9px solid var(--cz-wood-2);
  box-shadow: 0 0 0 2px var(--cz-wood-0), inset 0 0 0 2px var(--cz-wood-0), 0 2px 0 2px var(--cz-wood-1), 0 6px 12px rgba(30, 16, 6, 0.45);
  border-top-color: var(--cz-wood-3);
}
body.dragon-ui #portrait .pic { inset: 9px !important; box-shadow: inset 0 0 8px rgba(40, 20, 6, 0.6); background-color: var(--cz-parch-2); }
body.dragon-ui #lv-badge, body #lv-badge {
  color: #fdfbe8 !important; text-shadow: 0 1px 0 rgba(20, 50, 10, 0.8);
  background: linear-gradient(180deg, var(--cz-leaf-3), var(--cz-leaf-1)) !important; border: 2px solid var(--cz-leaf-0) !important;
  box-shadow: 0 0 0 1.5px var(--cz-wood-0), 0 2px 5px rgba(0, 0, 0, 0.4) !important;
}

/* bản đồ nhỏ góc phải */
body #topright, body.dragon-ui #topright {
  --text: var(--cz-ink); --muted: var(--cz-ink-2);
  color: var(--cz-ink) !important;
  background: var(--cz-paper) padding-box, var(--cz-woodgrad) border-box !important;
  border: 5px solid transparent !important; border-radius: 14px !important;
  box-shadow: var(--cz-frame-shadow) !important; backdrop-filter: none !important;
}
body.dragon-ui #topright::after { display: none !important; }
body #region-name { color: var(--cz-ink) !important; text-shadow: 0 1px 0 rgba(255, 250, 230, 0.8) !important; }
body #coords, body #net-info, body.dragon-ui #frame-lv { color: var(--cz-ink-2) !important; }
body #net-info b, body #net-info strong { color: var(--cz-ink) !important; }
body #minimap { border: 2px solid var(--cz-wood-2); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--cz-wood-0); filter: drop-shadow(0 2px 3px rgba(60, 35, 10, 0.35)) !important; }

/* bảng nhiệm vụ đang theo dõi */
body #tracker {
  --text: var(--cz-ink); --muted: var(--cz-ink-2);
  color: var(--cz-ink) !important;
  background: linear-gradient(180deg, rgba(253, 245, 225, 0.94), rgba(240, 222, 182, 0.94)) padding-box, var(--cz-woodgrad) border-box !important;
  border: 4px solid transparent !important; border-radius: 14px !important;
  box-shadow: 0 0 0 2px var(--cz-wood-0), 0 8px 18px rgba(30, 16, 6, 0.4) !important; backdrop-filter: none !important;
}
body #tracker .tr-h { color: var(--cz-amber) !important; text-shadow: none !important; }
body #tracker .tr-q b, body #tracker b { color: var(--cz-ink) !important; }
body #tracker .tr-q span, body #tracker .tr-q.nav span { color: var(--cz-sky) !important; }
body #tracker .tr-q.ready span { color: var(--cz-amber) !important; }
body #tracker .tr-q:hover { background: rgba(106, 170, 59, 0.16); }
body #tracker .tr-q.nav { background: rgba(43, 106, 150, 0.12); outline-color: rgba(43, 106, 150, 0.45); }
body #tracker .tr-home { color: var(--cz-ink-2) !important; border-top-color: rgba(120, 80, 40, 0.25) !important; }
body #tracker :is(small, .tr-g, .tr-sub) { color: var(--cz-ink-2) !important; }

/* ---------------- Menu ---------------- */
body:not(.touch) #menu, body:not(.touch).dragon-ui #menu, body.touch.menu-open #menu, body.touch.menu-open.dragon-ui #menu {
  background: var(--cz-paper) padding-box, var(--cz-woodgrad) border-box !important;
  border: 5px solid transparent !important; border-radius: 16px !important;
  box-shadow: var(--cz-frame-shadow) !important; backdrop-filter: none !important;
}
body:not(.touch) #menu::after { background: var(--cz-wood-1) !important; border-color: var(--cz-wood-0) !important; }
body #menu button[data-open], body #menu #dev-btn, body.dragon-ui #menu button[data-open], body.touch.menu-open #menu button[data-open], body.touch.menu-open #menu #dev-btn {
  background: linear-gradient(180deg, #e2c793, var(--cz-slot) 35%, #f0dfb8) !important;
  border: 1.5px solid #b8925a !important; border-radius: 10px !important; color: var(--cz-ink) !important;
  box-shadow: inset 0 2px 4px rgba(100, 65, 25, 0.32), 0 1px 0 rgba(255, 250, 230, 0.8) !important; backdrop-filter: none !important;
}
body #menu button[data-open]:hover { border-color: var(--cz-leaf-1) !important; box-shadow: inset 0 2px 4px rgba(100, 65, 25, 0.25), 0 0 0 2px rgba(106, 170, 59, 0.45) !important; }
body #menu button .lbl { color: var(--cz-ink) !important; text-shadow: none !important; font-weight: 600; }
body #menu button small { color: var(--cz-wood-2) !important; text-shadow: none !important; }
body #menu button img { filter: drop-shadow(0 2px 2px rgba(60, 35, 10, 0.4)) !important; }
body.touch.menu-open #menu::before { color: var(--cz-amber) !important; }

/* nút tròn nổi: menu ☰, trò chuyện 💬, bản đồ, nhiệm vụ */
body #menu-toggle, body #chat-toggle, body .hud-bub {
  color: var(--cz-ink) !important; text-shadow: none !important;
  background: radial-gradient(circle at 50% 35%, var(--cz-parch-0), var(--cz-parch-2) 70%) padding-box, var(--cz-woodgrad) border-box !important;
  border: 4px solid transparent !important;
  box-shadow: 0 0 0 2px var(--cz-wood-0), 0 4px 10px rgba(30, 16, 6, 0.45), inset 0 -3px 6px rgba(150, 100, 40, 0.25) !important;
}
body.menu-open #menu-toggle, body.chat-open #chat-toggle, body .hud-bub.on {
  color: #fdfbe8 !important;
  background: radial-gradient(circle at 50% 35%, var(--cz-leaf-3), var(--cz-leaf-1) 75%) padding-box, var(--cz-woodgrad) border-box !important;
}
body .hud-bub .bub-t { color: var(--cz-parch-0) !important; background: var(--cz-wood-1) !important; border: 1px solid var(--cz-wood-0) !important; border-radius: 6px; text-shadow: none !important; }

/* ---------------- Thanh chiêu: tấm gỗ ---------------- */
body:not(.touch).dragon-ui #skillbar {
  border-image: none !important; border: 4px solid transparent !important; border-radius: 16px;
  height: auto; padding: 7px 9px; bottom: 18px;
  background: linear-gradient(180deg, rgba(253, 245, 225, 0.93), rgba(234, 212, 165, 0.93)) padding-box, var(--cz-woodgrad) border-box;
  box-shadow: 0 0 0 2px var(--cz-wood-0), 0 8px 18px rgba(30, 16, 6, 0.45), inset 0 0 14px rgba(150, 100, 40, 0.2);
  filter: none;
}
body #skillbar .slot, body.dragon-ui #skillbar .slot {
  background-color: var(--cz-slot) !important;
  border: 1.5px solid #9c7444 !important; border-radius: 10px !important; color: var(--cz-ink);
  box-shadow: inset 0 2px 4px rgba(100, 65, 25, 0.4), 0 1px 0 rgba(255, 250, 230, 0.8) !important; backdrop-filter: none !important;
}
body #skillbar .slot:not(.art):not(.pot) .sk-name { color: var(--cz-ink); text-shadow: none; }
body #skillbar .slot .key { color: #fdfbe8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
body #skillbar .slot.empty-sk .plus-sk, body #skillbar .slot.empty-sk .key { color: var(--cz-wood-2); text-shadow: none; }
body #skillbar .slot.empty-sk { border-style: dashed !important; opacity: 0.85; }
body #skillbar .slot:hover { border-color: var(--cz-leaf-1) !important; box-shadow: inset 0 2px 4px rgba(100, 65, 25, 0.3), 0 0 0 2px rgba(106, 170, 59, 0.5) !important; }
body #skillbar .slot.auto.on { border-color: var(--cz-leaf-1) !important; box-shadow: 0 0 0 2px rgba(106, 170, 59, 0.6), 0 0 12px rgba(106, 170, 59, 0.6) !important; }
body #sb-toggle { color: var(--cz-parch-0) !important; background: linear-gradient(180deg, var(--cz-wood-3), var(--cz-wood-1)) !important; border: 2px solid var(--cz-wood-0) !important; }

/* thanh kinh nghiệm */
body #exp { background: rgba(58, 35, 19, 0.85) !important; border-top: 1.5px solid var(--cz-wood-3) !important; }
body #exp-fill { background: linear-gradient(180deg, var(--cz-leaf-3), var(--cz-leaf-1)) !important; box-shadow: none !important; }

/* ---------------- Khung trò chuyện: gỗ tối trong mờ (chữ sáng dễ đọc trên cảnh) ---------------- */
body #chat, body.dragon-ui #chat {
  background: linear-gradient(180deg, rgba(58, 36, 18, 0.86), rgba(40, 24, 12, 0.88)) !important;
  border: 2.5px solid var(--cz-wood-3) !important; border-radius: 14px !important;
  box-shadow: 0 0 0 1.5px var(--cz-wood-0), 0 8px 18px rgba(0, 0, 0, 0.35) !important; backdrop-filter: none !important;
}
body #chat::after { background: rgba(48, 30, 15, 0.88) !important; border-color: var(--cz-wood-3) !important; }
body #chat-tabs button { background: rgba(253, 245, 225, 0.12) !important; color: #ecd9b0 !important; border: 1px solid rgba(201, 154, 94, 0.45) !important; border-radius: 999px !important; }
body #chat-tabs button.on { background: linear-gradient(180deg, var(--cz-leaf-2), var(--cz-leaf-1)) !important; color: #fdfbe8 !important; border-color: var(--cz-leaf-0) !important; }
body #chat-input { background: rgba(253, 245, 225, 0.92) !important; color: var(--cz-ink) !important; border: 1.5px solid var(--cz-wood-3) !important; border-radius: 10px !important; }
body #chat-input::placeholder { color: var(--cz-ink-2); }

/* thông báo nổi */
body .toast.good { color: #fff3b0 !important; }

/* thanh chiêu: tên chiêu trên ô có hình — chữ sáng có bóng */
body #skillbar .slot.art .sk-name, body #skillbar .slot.pot .sk-name, body #skillbar .slot.auto .sk-name { color: #fffbe8 !important; text-shadow: 0 1px 2px #000, 0 0 3px #000 !important; }

/* túi đồ: lưới ô trống in chìm trên giấy, như rương đồ */
body .panel:has(.doll) .grid.bag {
  min-height: 230px; align-content: start;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='0.75' y='0.75' width='38.5' height='38.5' rx='8' fill='%23e8d2a2' stroke='%23c9a46c' stroke-width='1.5'/%3E%3Cpath d='M2 9 Q2 2 9 2 H31 Q38 2 38 9' fill='none' stroke='%23b8915a' stroke-opacity='0.55' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 44px 44px; background-repeat: repeat; background-origin: content-box; background-clip: content-box;
}
body .panel:has(.doll) .grid.bag .item:not(.r1):not(.r2):not(.r3):not(.r4):not(.exc):not(.jewel):not(.high) { border-color: #b8925a; }
body .panel:has(.doll) .grid.bag .item:hover { border-color: var(--cz-leaf-1); }
body .panel:has(.doll) .grid.bag .item[data-sel] { border-color: var(--cz-leaf-1); }
body .panel:has(.doll) .empty-note { color: var(--cz-ink-2) !important; }
body .panel .doll .eslot .empty { color: var(--cz-ink-2) !important; text-shadow: none !important; }
body .panel .doll .sl-ghost { opacity: 0.45; filter: sepia(0.6) brightness(0.7); }
body .p-body.split:has(.doll) > .p-top { border-right: 1.5px solid rgba(120, 80, 40, 0.25) !important; }
/* lưới ô trống khớp đúng số cột (không lẹm nửa ô ở mép phải) */
@supports (width: round(down, 100%, 44px)) { body .panel:has(.doll) .grid.bag { width: round(down, 100%, 44px); } }

/* điện thoại: bảng phủ kín màn hình nên nhãn tiêu đề nằm trong khung, không nhô lên */
body.touch .panel .p-head .p-title { margin-top: 4px; }
body.touch .panel .p-close { margin-top: 2px; }
body.touch .panel { margin-top: 0; }
/* điện thoại: ô túi đồ to hơn 40px nên bỏ lưới ô in sẵn */
body.touch .panel:has(.doll) .grid.bag { background-image: none; width: auto; }