/* kit.css — bộ giao diện chung kiểu game (docs/thiet-ke-giao-dien.md). Nạp CUỐI CÙNG, sau ext.css; cặp với js/ext_uikit.js.
   Một nguồn cho: font, khung cửa sổ, nút, tab, ô nhập, ô đánh dấu / công tắc, thanh trượt, hộp chọn, thanh cuộn, tooltip, con trỏ.
   Gốc là cửa sổ "kiểu K" của ui2.css (= kui.css bản offline). Khi viết DOM mới: dùng .btn / .tab / .card / .card.dark ở đây. */
:root {
  --paper: #fffaf0; --card: #2c2a44; --card-2: #3a3656; --red: #ff7a6a; --red-d: #d8483a; --green: #6ad08a; --green-d: #2a8a3a;
  --amber: #a8620c; --line: rgba(42, 36, 53, .16);
  --f-head: 'Baloo 2', 'Segoe UI', Tahoma, sans-serif; --f-text: 'Mitr', 'Segoe UI', Tahoma, sans-serif;
  --lift: 0 2px 0 var(--ink); --lift-2: 0 3px 0 var(--ink);
  --cur-normal: url(../assets/pixel/cur_normal.png) 4 2, default; --cur-ui: url(../assets/pixel/cur_ui.png) 4 2, pointer;
  --cur-attack: url(../assets/pixel/cur_attack.png) 2 2, crosshair; --cur-talk: url(../assets/pixel/cur_talk.png) 2 2, pointer;
  --cur-pickup: url(../assets/pixel/cur_pickup.png) 8 2, grab;
}

/* ---------- font: Mitr cho chữ, Baloo 2 cho tiêu đề / nút / số (như bản offline) ---------- */
html, body { font-family: var(--f-text); font-weight: 400; }
button, kbd, h1, h2, h3, h4, .win-head, .tab, #h-lv, #h-name, #h-job, .hbar b, .hbar span, .slot .key, .slot .qty, .slot .cdt, #btn-auto,
#zeny, #h-zone, #h-clock, #banner div, #banner small, #bb-name, #bb-pct, #t-name, .toast, .xp label, .track span, #cb-name, #auto-line,
.stat b, .pts b, .zeny, .inv-foot span, label.sld output, .qd-who, .rp-grid b, .mm-btn b, .mm-head span, .mm-no, .mm-info b, .fl-title,
#quest-track > b, .cell .qty, .cell .ref, .cell .hk, .sk-ico span, .gr-track i, .gr-ladder span, .dq-tok, .bk-bar span, .lf-bar span {
  font-family: var(--f-head);
}
b, strong { font-weight: 600; }
button b, .win-head b, kbd { font-weight: 800; }
kbd { font-weight: 800; }
input, select, textarea { font-family: var(--f-text); }

/* ---------- con trỏ chuột pixel (art bản offline, tools/pixelize_npc.py) ---------- */
html, #stage { cursor: var(--cur-normal); }
button, [data-act], [data-mm], [data-wk], [data-o], .row, .cell, .eq, .tab, label.chk, label.sld input, .kit-sel, .kit-menu button,
.mm-slot, .wk-card, .gr-item, .fg-row, .fg-type, .gr-tog, .af-tile, .bk-card, .bk-mon, .bk-src, .bk-maps .tab, #minimap, a, summary,
input[type=checkbox], input[type=range], select { cursor: var(--cur-ui); }
button:disabled, button[disabled], .row.dim, .cell.empty, .eq.empty { cursor: var(--cur-normal); }
.win-head { cursor: var(--cur-normal); }
#worldmap, #bigmap { cursor: var(--cur-ui); }
input:not([type]), input[type=text], input[type=search], textarea { cursor: text; }

/* ---------- thanh cuộn: rãnh kem viền mực, con trượt xanh trời (thẻ tối: con trượt gỗ) ---------- */
.win .win-body, #log, #mm-panel .mm-body, .list, .sk-list, .shop-list, .warp-list, .auto-sk, .ql-keys, .ql-done, .dq-list { scrollbar-width: auto; scrollbar-color: auto; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream-2); border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(42, 36, 53, .22); }
::-webkit-scrollbar-thumb { background: var(--sky); border: 2px solid var(--ink); border-radius: 8px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .15); }
::-webkit-scrollbar-thumb:hover { background: #8ac4f2; }
::-webkit-scrollbar-thumb:active { background: var(--sky-d); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
#log::-webkit-scrollbar, #mm-panel ::-webkit-scrollbar, #tooltip::-webkit-scrollbar { width: 10px; }
#log::-webkit-scrollbar-track, #title ::-webkit-scrollbar-track { background: rgba(10, 8, 16, .45); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
#log::-webkit-scrollbar-thumb, #title ::-webkit-scrollbar-thumb { background: var(--wood); }
@supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: var(--sky-d) var(--cream-2); } }

/* ---------- khung cửa sổ kiểu K: tiêu đề căn giữa, chấm trắng trái, nút đóng tròn đỏ, mở ra "nảy" ---------- */
.win { border-radius: 18px; }
.win.kit-in { animation: kitWinIn .17s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes kitWinIn { from { opacity: 0; transform: translateY(8px) scale(.95); } }
.win.kit-front { z-index: 12; }
.win-head { position: relative; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 5px 8px 5px 12px; font: 800 17px/1.15 var(--f-head); letter-spacing: .3px;
  border-radius: 13px 13px 0 0; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(42, 36, 53, .12); }
.win-head::before { content: ''; flex: none; width: 12px; height: 12px; margin-right: 16px; background: #fff; border: 2px solid var(--ink); border-radius: 50%; box-shadow: inset -2px -2px 0 rgba(42, 36, 53, .18); }
.win-head > span:first-child { flex: 1; min-width: 0; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.win .win-head .x, #wiki .win-head .x { flex: none; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; font: 900 13px/1 var(--f-head); color: #fff;
  background: var(--red); border: 2px solid var(--ink); border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .35), var(--lift);
  text-shadow: 0 1px 0 var(--ink); }
.win .win-head .x:hover, #wiki .win-head .x:hover { background: #ff958a; transform: translateY(-1px); }
.win-body { font-size: 13px; line-height: 1.45; }
.win .hint { font-size: 12px; line-height: 1.5; }

/* thẻ dùng chung: sáng (khối thông tin) / tối (thẻ chi tiết như bản offline) */
.card { padding: 8px 10px; color: var(--ink); background: var(--cream-2); border: 2px solid var(--ink); border-radius: 12px; }
.card.dark { color: #f4ead8; background: var(--card); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); }

/* ---------- nút: một bộ — thường (kem) · pri (vàng) · ok (xanh lá) · blue · danger (đỏ); lún khi bấm, xám khi tắt ---------- */
.win button, #wiki button, #mm-panel button, #mm-ask button, #death button, .kpop button, .btn {
  font-family: var(--f-head); font-weight: 700; color: var(--ink); background: #fff8e8; border: 2px solid var(--ink); border-radius: 9px;
  box-shadow: inset 0 -3px 0 rgba(42, 36, 53, .1), inset 0 2px 0 rgba(255, 255, 255, .7), var(--lift); text-shadow: none;
  transition: transform .06s, background .1s, box-shadow .06s; }
.win button:hover, #wiki button:hover, #mm-panel button:hover, #mm-ask button:hover, #death button:hover, .kpop button:hover, .btn:hover {
  filter: none; background: #fff; transform: translateY(-1px); box-shadow: inset 0 -3px 0 rgba(42, 36, 53, .1), inset 0 2px 0 rgba(255, 255, 255, .7), var(--lift-2); }
.win button:active, #wiki button:active, #mm-panel button:active, #mm-ask button:active, #death button:active, .kpop button:active, .btn:active {
  transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(42, 36, 53, .15); }
.win button:disabled, #wiki button:disabled, #mm-panel button:disabled, .kpop button:disabled, .btn:disabled {
  opacity: .5; filter: grayscale(.7); transform: none; box-shadow: var(--lift); }
.win button.pri, #mm-panel button.pri, #mm-ask button.pri, #death button, .kpop button.pri, .btn.pri, .win .auto-top .big.on, .bw-btn, .mm-go { background: var(--gold-2); }
.win button.pri:hover, #mm-panel button.pri:hover, #mm-ask button.pri:hover, #death button:hover, .kpop button.pri:hover, .btn.pri:hover, .mm-go:hover { background: #ffdb7e; }
.win button.danger, #mm-panel button.danger, #mm-ask button.danger, .kpop button.danger, .btn.danger { color: #fff; background: var(--red); text-shadow: 0 1px 0 var(--ink); }
.win button.danger:hover, #mm-panel button.danger:hover, #mm-ask button.danger:hover, .kpop button.danger:hover, .btn.danger:hover { background: #ff958a; }
.btn.ok, .win button.ok { color: #fff; background: #4ab06a; text-shadow: 0 1px 0 var(--ink); }
.btn.blue, .win button.blue, .win button.pv { color: #fff; background: var(--sky-d); text-shadow: 0 1px 0 var(--ink); }
.win button.pv:hover, .btn.blue:hover { background: #5a9ad8; }
.win button.mini { font-size: 11px; padding: 2px 9px; border-radius: 8px; }
.win button:focus-visible, .btn:focus-visible, #mm-panel button:focus-visible, #wiki button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-2), var(--lift); }
:focus { outline: none; }

/* ---------- tab dạng thẻ hồ sơ: tab đang chọn xanh trời, nhô lên, nối liền đường kẻ dưới ---------- */
.win .tabs { gap: 4px; padding: 0 2px; margin-bottom: 10px; border-bottom: 3px solid var(--ink); align-items: flex-end; }
.win .tab, #wiki .wk-nav .tab { position: relative; top: 3px; padding: 4px 14px 5px; font: 700 13px/1.2 var(--f-head); color: var(--ink-soft); background: var(--cream-2);
  border: 2px solid var(--ink); border-bottom-width: 3px; border-radius: 10px 10px 0 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); transform: none; }
.win .tab:hover, #wiki .wk-nav .tab:hover { color: var(--ink); background: #f6ecd4; transform: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.win .tab:active, #wiki .wk-nav .tab:active { transform: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.win .tab.on, #wiki .wk-nav .tab.on { z-index: 1; padding-top: 6px; color: var(--ink); background: var(--sky); border-bottom-color: var(--sky);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4); }
/* nhóm tab không đứng trên đường kẻ (lọc trong sổ, bảng chọn bậc): viên tròn */
.bk-tools .tabs { border-bottom: 0; margin: 0; padding: 0; align-items: center; }
.bk-tools .tab, .bk-maps .tab, .gr-pick .tab, .dq-tabs .tab { top: 0; border-radius: 9px; border-bottom-width: 2px; padding: 3px 10px; box-shadow: var(--lift); }
.bk-tools .tab.on, .bk-maps .tab.on, .gr-pick .tab.on, .dq-tabs .tab.on { padding-top: 3px; border-bottom-color: var(--ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), var(--lift); }
.win .bk-maps .tab { padding: 1px 8px; font-size: 11px; }
#wiki .wk-nav { border-bottom-width: 3px; }

/* ---------- ô nhập / tìm: nền giấy, kính lúp pixel, nút xoá tự vẽ, focus phát sáng vàng ---------- */
.win input:not([type]), .win input[type=text], .win input[type=search], #wiki input[type=search], #mm-panel input {
  font: 500 13px/1.3 var(--f-text); color: var(--ink); background-color: var(--paper); border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: inset 0 3px 0 rgba(42, 36, 53, .1); padding: 5px 10px; outline: none; -webkit-appearance: none; appearance: none; }
.win input[type=search], #wiki input[type=search] { padding-left: 30px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges' fill='%232a2435'%3E%3Cpath d='M2 0h3v1H2zM1 1h1v1H1zM5 1h1v1H5zM0 2h1v3H0zM6 2h1v3H6zM1 5h1v1H1zM5 5h1v1H5zM2 6h3v1H2zM6 6h1v1H6zM7 7h1v1H7zM8 8h1v1H8z'/%3E%3Cpath fill='%2374b6ec' d='M2 1h3v1H2zM1 2h1v3H1z'/%3E%3C/svg%3E") 9px 50% / 14px 14px no-repeat; }
.win input::placeholder, #wiki input::placeholder, #mm-panel input::placeholder { color: #9a8a76; font-weight: 400; }
.win input:focus, #wiki input:focus, #mm-panel input:focus { border-color: var(--ink); box-shadow: inset 0 3px 0 rgba(42, 36, 53, .1), 0 0 0 3px rgba(255, 207, 90, .85); }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0 -2px 0 4px; cursor: var(--cur-ui);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' rx='2' fill='%23ff7a6a'/%3E%3Cpath fill='%23fff' d='M2 2h1v1H2zM5 2h1v1H5zM3 3h2v2H3zM2 5h1v1H2zM5 5h1v1H5z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.bag-tools input, .bk-tools input { border-radius: 10px; }
#wiki #wk-q { padding-left: 30px; border-radius: 10px; }

/* ---------- ô đánh dấu: ô giấy viền mực, dấu ✓ xanh kiểu pixel ---------- */
.win input[type=checkbox], .kpop input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0 2px 0 0; vertical-align: -4px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 5px; box-shadow: inset 0 2px 0 rgba(42, 36, 53, .12), 0 2px 0 var(--ink); transition: background .1s; }
.win input[type=checkbox]:checked, .kpop input[type=checkbox]:checked { background: #4ab06a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges' fill='%23fff'%3E%3Cpath d='M6 0h1v1H6zM5 1h1v1H5zM4 2h1v1H4zM0 2h1v1H0zM1 3h1v1H1zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") center / 11px no-repeat; }
.win input[type=checkbox]:focus-visible { box-shadow: 0 0 0 3px var(--gold-2); }
.win label.chk { gap: 8px; padding: 3px 0; font-size: 12.5px; }
.win label.chk:hover { color: #000; }

/* công tắc BẬT / TẮT (Cài đặt: ext_uikit.js đổi nút "X: BẬT" thành dòng chữ + công tắc) */
.win button.kit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.kit-sw { flex: none; position: relative; width: 52px; height: 22px; border: 2px solid var(--ink); border-radius: 12px; background: #c8bca4; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .15);
  font: 800 10px/18px var(--f-head); font-style: normal; color: var(--ink); text-align: right; padding-right: 6px; }
.kit-sw::after { content: ''; position: absolute; left: 2px; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-sizing: border-box; transition: left .12s; }
.kit-sw.on { background: var(--green); color: #fff; text-align: left; padding: 0 0 0 6px; text-shadow: 0 1px 0 var(--ink); }
.kit-sw.on::after { left: 30px; }
.kit-val { flex: none; padding: 0 8px; font: 800 12px/20px var(--f-head); background: var(--sky); border: 2px solid var(--ink); border-radius: 8px; }

/* ---------- thanh trượt: rãnh tối viền mực, phần đã kéo vàng (--p), núm vàng ---------- */
.win input[type=range] { -webkit-appearance: none; appearance: none; height: 14px; padding: 0; margin: 6px 0 2px; background: transparent; }
.win input[type=range]::-webkit-slider-runnable-track { height: 12px; border: 2px solid var(--ink); border-radius: 8px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25);
  background: linear-gradient(90deg, #ffd86a 0, #f0a830 var(--p, 50%), #3a3046 var(--p, 50%)); }
.win input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; background: var(--gold-2); border: 2px solid var(--ink); border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .6), 0 2px 0 var(--ink); }
.win input[type=range]:active::-webkit-slider-thumb { background: #ffe08a; transform: scale(1.08); }
.win input[type=range]::-moz-range-track { height: 8px; border: 2px solid var(--ink); border-radius: 8px; background: #3a3046; }
.win input[type=range]::-moz-range-progress { height: 8px; border: 2px solid var(--ink); border-radius: 8px; background: #f0a830; }
.win input[type=range]::-moz-range-thumb { width: 16px; height: 16px; background: var(--gold-2); border: 2px solid var(--ink); border-radius: 50%; }
.win label.sld { font-size: 12.5px; }
.win label.sld output { font-size: 13px; }

/* ---------- hộp chọn kiểu game (ext_uikit.js thay <select>; <select> gốc vẫn còn, ẩn, giữ value / change) ---------- */
select.kit-done { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.kit-sel { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 110px; padding: 4px 8px 4px 11px !important; font-size: 12px !important; text-align: left; }
.kit-sel::after { content: ''; flex: none; width: 10px; height: 7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' shape-rendering='crispEdges' fill='%232a2435'%3E%3Cpath d='M0 0h5v1H0zM1 1h3v1H1zM2 2h1v1H2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.kit-sel.open::after { transform: rotate(180deg); }
.kit-menu { position: fixed; z-index: 90; min-width: 140px; max-height: 280px; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 3px;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 0 0 0 2px var(--sky), 0 5px 0 rgba(0, 0, 0, .35); animation: kitWinIn .12s ease-out; }
.kit-menu button { padding: 4px 10px; text-align: left; font: 600 12.5px/1.3 var(--f-text); color: var(--ink); background: transparent; border: 2px solid transparent; border-radius: 8px; box-shadow: none; }
.kit-menu button:hover { background: #fff8e8; border-color: var(--ink); }
.kit-menu button.on { background: var(--sky); border-color: var(--ink); font-weight: 600; }

/* ---------- tooltip: thẻ tối viền gỗ; dòng tên to, dòng loại / độ hiếm tách bằng vạch ---------- */
#tooltip { padding: 8px 12px 9px; font: 400 12.5px/1.5 var(--f-text); color: #f4ead8; max-width: 290px; border-radius: 12px; z-index: 95; }
#tooltip > b:first-child { display: block; font: 800 15px/1.25 var(--f-head); }
#tooltip > b:first-child + br { display: none; }
#tooltip > b:first-child + br + small { display: block; margin: 1px 0 5px; padding-bottom: 5px; border-bottom: 2px dashed rgba(200, 144, 46, .45); }
#tooltip > b:first-child + br + small + br { display: none; }
#tooltip small { color: #c8b898; }
#tooltip i { color: #d8d0c0; font-style: normal; }
#tooltip .tt-plain { font-weight: 500; }

/* ---------- chữ màu (độ hiếm / hệ) đặt trên nền kem: viền mực để đọc được ---------- */
.gr-head b[style], .win .bk-detail b[style], .win .qd-card b[style], .win .lf-head b[style], .win .eq-name[style] {
  text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink), 0 2px 0 var(--ink); }

/* ---------- vài chỗ nhỏ dùng chung ---------- */
.win h4 { font-family: var(--f-head); font-weight: 800; letter-spacing: .2px; }
.win .auto-grid h4, .win .af-sec h4, .win-life h4, .ql h4 { color: var(--ink); }
.win .auto-grid h4::before, .win .af-sec h4::before, .win-life h4::before, .ql h4::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 7px 1px 1px; background: var(--gold-2); border: 2px solid var(--ink); transform: rotate(45deg); }
kbd { font-family: var(--f-head); }
/* ---------- dọn nhỏ từng cửa sổ ---------- */
/* Nhân vật (C): hàng chỉ số = tên · giá trị · giá điểm (small.cost, js/ext_combat.js STATX) · nút + */
.win .stat { grid-template-columns: 44px 1fr auto 30px; column-gap: 6px; padding: 4px 0; }
.win .stat > b { font-family: var(--f-head); font-weight: 800; }
.win .stat > span { font: 700 14px/1.2 var(--f-head); }
.win .stat small.cost { grid-column: 3; grid-row: 1; padding: 0 6px; font: 700 10.5px/16px var(--f-head); color: var(--ink-soft); background: var(--cream-2); border: 1px solid rgba(42, 36, 53, .25); border-radius: 8px; }
.win .stat > button, .win .stat > i { grid-column: 4; grid-row: 1; }
.win .stat > button { width: 26px; height: 22px; padding: 0; font-size: 14px; }
.win button.kit-mi { display: flex; align-items: center; gap: 10px; text-align: left; font-size: 14px; }
.win.win-menu { width: 280px; left: calc(50% - 140px); }
/* bản đồ: ôm sát canvas, lệch trái để không che minimap / nút menu */
.win.win-map { top: 50px; width: 690px; left: calc(50% - 400px); }
.win.win-map .win-body { max-height: calc(100vh - 110px); }
#bigmap { margin: 0 auto; }
#worldmap { border: 3px solid var(--ink); border-radius: 10px; }
/* lò rèn: không cuộn ngang, hàng đá xuống dòng */
.win-refine .win-body { overflow-x: hidden; }
.gr-stones { flex-wrap: wrap; }
.win .inv-foot { gap: 10px; }
.win .inv-foot > span { flex: none; white-space: nowrap; }
.gr-rows i { color: #c8b898; }
/* chỉ một vùng cuộn mỗi cửa sổ: danh sách bên trong không tự cuộn riêng nữa */
.win .bk-grid, .win .bk-mons, .win .bk-rows, .win .lf-cards, .win .ck-list, .win .af-sp { max-height: none; overflow: visible; }
.win .bk-detail { position: sticky; top: 0; max-height: calc(100vh - 330px); }
/* boss thế giới (js/ext_wboss.js): cùng dòng với Cổng dịch chuyển */
.win.win-wboss { width: 480px; left: calc(50% - 240px); }
.win .row.warp i.lock { font-style: normal; font-size: 11px; color: #c8b898; }
/* tranh vùng đất nhỏ đầu dòng Cổng Dịch Chuyển (js/ext_npcart.js) */
.win .row.warp .wp-art { flex: none; width: 64px; height: 36px; margin-right: 2px; image-rendering: pixelated; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 0 0 0 1px var(--wood); }
.win .row.warp.dun .wp-art { display: none; }
#log { line-height: 1.45; }
/* dấu nhỏ thay emoji: "!" vàng (nhận nhiệm vụ), ổ khoá pixel */
.kit-mark { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; vertical-align: -2px; font: 900 11px/1 var(--f-head); font-style: normal; color: var(--ink); background: var(--gold-2); border: 2px solid var(--ink); border-radius: 50%; }
.kit-lock { display: inline-block; width: 11px; height: 13px; vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' shape-rendering='crispEdges'%3E%3Cpath fill='%232a2435' d='M2 0h4v1H2zM1 1h1v3H1zM6 1h1v3H6zM0 4h8v5H0z'/%3E%3Cpath fill='%23ffcf5a' d='M1 5h6v3H1z'/%3E%3Cpath fill='%232a2435' d='M3 6h2v1H3z'/%3E%3C/svg%3E") center / contain no-repeat; }
#quest-track > b .pxi, .dq-tok .pxi { vertical-align: -6px; margin: -4px 0; }
.kit-orb { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: radial-gradient(circle at 35% 35%, #d8f0ff, #4a8ae8 60%, #2a5ab0); }

/* khối nút menu: góc dưới phải, đáy ngang khay kỹ năng (js/ext_uikit.js layoutMenu: chạm khay thì 6 cột, nằm trên khay) */
body #menu-btns { top: auto; bottom: 6px; transform-origin: bottom right; }
/* thu phóng màn chơi (js/ext_zoom.js): #stage vẽ ở cỡ logic rồi phóng lên đủ màn hình */
#stage { transform-origin: 0 0; }

/* dải kỹ năng auto (js/ext_autohud.js): ô nhỏ phía trên góc phải khay kỹ năng */
#auto-sk { position: fixed; z-index: 6; display: flex; gap: 3px; padding: 3px 4px; pointer-events: auto;
  background: rgba(28, 22, 36, .88); border: 2px solid var(--ink); border-radius: 8px; box-shadow: inset 0 0 0 1px #3f8a52, 0 2px 0 rgba(0, 0, 0, .35);
  transform: scale(var(--hud-k)); transform-origin: bottom right; }
#auto-sk .ask { position: relative; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: #1a1420; overflow: hidden; }
#auto-sk .ask .cd { position: absolute; inset: 0; pointer-events: none; background: conic-gradient(rgba(12, 8, 22, .78) calc(var(--p, 0) * 1%), transparent 0); }
#auto-sk .ask b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 10px/1 var(--f-head); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; pointer-events: none; }
#auto-sk .ask.nosp { filter: grayscale(.8) brightness(.6); }
#auto-sk .ask.used { animation: askUsed .45s ease-out; }
@keyframes askUsed { 0% { box-shadow: 0 0 0 2px #fff, 0 0 10px 3px #6aff9a; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* tooltip bùa / trạng thái (#h-buffs) */
#tooltip .bt { min-width: 170px; }
#tooltip .bt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#tooltip .bt-head b { display: block; font: 800 14px/1.2 var(--f-head); color: var(--gold-2); }
#tooltip .bt-head.bad b { color: #ff8a7a; }
#tooltip .bt-head small { display: block; font-size: 11px; color: #b8a8c8; }
#tooltip .bt-head .pxi, #tooltip .bt-ico { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 50%; background: #1a1420; box-shadow: 0 0 0 2px var(--ink); }
#tooltip .bt-fx { display: flex; flex-direction: column; padding: 4px 0; border-top: 1px dashed rgba(244, 234, 216, .2); }
#tooltip .bt-fx span { color: #9aff9a; font-weight: 700; }
#tooltip .bt-fx.bad span { color: #ffb0a0; }
#tooltip .bt-note { padding: 3px 0; color: #d8cfe0; font-size: 11.5px; border-top: 1px dashed rgba(244, 234, 216, .2); }
#tooltip .bt-time { margin-top: 2px; font: 700 11px/1.3 var(--f-head); color: #ffd35a; }