/* =====================================================================
   1.26.9 — Nhân vật · Hành trang · Bảng xem vật phẩm · đồng bộ nút, chữ, thanh cuộn
   (nạp SAU ui2.css và hud3.css)
   ===================================================================== */

/* ---------- Nhân vật (sát lề trái) + Hành trang (sát lề phải) ----------
   Hai cửa sổ cùng chiều cao, cùng một tỉ lệ phóng (--cbk) tính theo tổng bề ngang và chiều cao màn hình.
   Cửa sổ khác mở cạnh Hành trang (Cửa hàng, Thú cưng…) cũng sát lề trái. */
#screen-game{
  --cbH: 600; --cbWc: 670; --cbWb: 520; --cbm: 10px;
  --cbk: min(calc((var(--vwn, 1280) - 30) / (var(--cbWc) + var(--cbWb))), calc((var(--vhn, 720) * .96 - 8) / var(--cbH)), 1.2);
  --cell: 74px; --cg: 6px; --eqs: 80px;
}
@media (max-height: 560px), (max-width: 900px) {
  #screen-game{ --cbH: 392; --cbWc: 446; --cbWb: 362; --cbm: 6px; --cell: 50px; --cg: 4px; --eqs: 50px;
    --cbk: min(calc((var(--vwn, 844) - 18) / (var(--cbWc) + var(--cbWb))), calc((var(--vhn, 390) * .985 - 4) / var(--cbH)), 1.2); }
}
#screen-game #win-character.window.dock, #screen-game #win-pinfo.window.dock{ --Wd: var(--cbWc); }
#screen-game #win-pinfo.window.dock.pet-tab{ --Wd: 948; }
@media (max-height: 560px), (max-width: 900px) { #screen-game #win-pinfo.window.dock.pet-tab{ --Wd: 686; } }
#screen-game #win-bag.window.dock{ --Wd: var(--cbWb); }
#screen-game #win-character.window.dock > .dk-wrap, #screen-game #win-pinfo.window.dock > .dk-wrap,
#screen-game:has(#win-bag:not([hidden])) .window.dock.dock-l:not(#win-quest) > .dk-wrap{
  left: calc(var(--cbm) + var(--sl, 0px)) !important; right: auto !important; top: 50% !important; bottom: auto !important;
  height: calc(var(--cbH) * 1px) !important; width: calc(var(--Wd) * 1px) !important;
  transform: translateY(-50%) scale(var(--cbk)) !important; transform-origin: 0 50% !important;
}
#screen-game #win-bag.window.dock > .dk-wrap{
  right: calc(var(--cbm) + var(--sr, 0px)) !important; left: auto !important; top: 50% !important; bottom: auto !important;
  height: calc(var(--cbH) * 1px) !important; width: calc(var(--cbWb) * 1px) !important;
  transform: translateY(-50%) scale(var(--cbk)) !important; transform-origin: 100% 50% !important;
}

/* Nút đóng ✕ to hơn, cùng một kiểu ở mọi cửa sổ */
#screen-game .dk-x, #screen-game .window.parch-win > .parch > .parch-close{
  width: 42px !important; height: 42px !important; top: -11px !important; right: -11px !important; font-size: 20px !important; border-radius: 8px !important;
}
@media (max-height: 560px), (max-width: 900px) {
  #screen-game .dk-x, #screen-game .window.parch-win > .parch > .parch-close{ width: 34px !important; height: 34px !important; top: -8px !important; right: -8px !important; font-size: 16px !important; }
}

/* ---------- Hành trang: lưới 6 cột, thấy 5 hàng, còn lại cuộn ---------- */
#win-bag .bag-body{ gap: 6px !important; }
#win-bag .bag-gridbox{
  flex: 0 0 auto !important; height: calc(var(--cell) * 5 + var(--cg) * 4 + 14px) !important; padding: 7px !important;
  overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scroll-snap-type: y proximity;
}
#win-bag .inv-grid{
  display: grid !important; grid-template-columns: repeat(6, var(--cell)) !important; grid-auto-rows: var(--cell) !important; gap: var(--cg) !important;
  justify-content: center; align-content: start;
}
#win-bag .inv-grid > .inv-slot{ width: var(--cell) !important; height: var(--cell) !important; min-height: 0 !important; aspect-ratio: auto !important; scroll-snap-align: start; }
#win-bag .bag-foot{ margin-top: auto !important; }
@media (max-height: 560px), (max-width: 900px) {
  /* Điện thoại: Ngọc · Vàng · số ô · 2 nút trên một hàng để lưới đồ to, dễ bấm */
  #win-bag .bag-foot{ flex-direction: row !important; align-items: center; gap: 6px !important; }
  #win-bag .bag-money{ flex: 1 1 auto; min-width: 0; display: flex !important; gap: 8px !important; padding: 3px 6px !important; }
  #win-bag .bag-money .bm-gem:first-child{ display: none !important; }
  #win-bag .bag-money span{ font-size: 0 !important; gap: 3px !important; }
  #win-bag .bag-money span b{ font-size: 11px !important; }
  #win-bag .bag-money .bm-gold{ margin-left: auto; }
  #win-bag .bag-acts{ flex: 0 0 auto; gap: 4px !important; }
  #win-bag .bag-acts > span:first-child{ font-size: 10.5px; }
  #win-bag .bag-acts .pbtn{ min-width: 0 !important; height: 26px !important; padding: 0 9px !important; font-size: 11px !important; }
}

/* ---------- Nhân vật: ô trang bị to, sát nhau, cân đối; bỏ nút xoay ---------- */
#win-character .cw-turn .dk-rot{ display: none !important; }
#win-character .cw-eq, #win-pinfo .cw-eq{
  grid-template-columns: var(--eqs) minmax(0, 1fr) var(--eqs) !important; grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 8px 12px !important; padding: 10px 12px !important;
}
#win-character .cw-eq .eq-col, #win-pinfo .cw-eq .eq-col{ justify-content: space-between !important; gap: 8px !important; }
#win-character .cw-eq .eq, #win-pinfo .cw-eq .eq{
  flex: 0 0 var(--eqs) !important; width: var(--eqs) !important; height: var(--eqs) !important; font-size: 12px !important;
}
#win-character .cw-top #cw-name, #win-pinfo .cw-top #cw-name{ font-size: 16px !important; }
#win-character .cw-top .cw-job, #win-pinfo .cw-top .cw-job{ font-size: 13px !important; }
#win-character .cw-power b{ font-size: 22px !important; }
#win-character .cw-power small{ font-size: 12px !important; }
@media (max-height: 560px), (max-width: 900px) {
  #win-character .cw-eq,   #win-pinfo .cw-eq{ gap: 4px 8px !important; padding: 6px 8px !important; }
  #win-character .cw-eq .eq-col,   #win-pinfo .cw-eq .eq-col{ gap: 4px !important; }
  #win-character .cw-eq .eq,   #win-pinfo .cw-eq .eq{ font-size: 9.5px !important; }
  #win-character .cw-top #cw-name,   #win-pinfo .cw-top #cw-name{ font-size: 12.5px !important; }
  #win-character .cw-top .cw-job,   #win-pinfo .cw-top .cw-job{ font-size: 10.5px !important; }
  #win-character .cw-power b{ font-size: 16px !important; }
  #win-character .cw-power small{ font-size: 9.5px !important; }
}

/* ---------- Bảng xem vật phẩm ----------
   Cao vừa đủ nội dung (tối đa bằng cửa sổ): phần đầu (tên, ảnh, loại) và hàng nút đứng yên, thông tin dài thì chỉ phần giữa cuộn. */
#screen-game .dk-wrap > #item-pop.item-pop:not([hidden]){
  display: flex !important; flex-direction: column !important; gap: 8px; padding: 12px !important;
  top: 0 !important; bottom: auto !important; height: auto !important; max-height: 100% !important; overflow: visible !important;
  width: 430px !important; box-sizing: border-box;
}
@media (max-height: 560px), (max-width: 900px) { #screen-game .dk-wrap > #item-pop.item-pop{ width: 330px !important; padding: 9px !important; gap: 6px; } }
#screen-game .dk-wrap > #item-pop.at-l{ right: calc(100% + 10px) !important; left: auto !important; }
#screen-game .dk-wrap > #item-pop.at-r{ left: calc(100% + 10px) !important; right: auto !important; }
/* Mở từ kênh chat (xem đồ người khác khoe): giữa màn hình, khung cố định */
body > #item-pop.item-pop:not([hidden]){
  position: fixed !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important;
  display: flex !important; flex-direction: column !important; gap: 8px; padding: 12px !important;
  width: min(430px, calc(100vw - 24px)) !important; height: auto !important; max-height: min(560px, calc(100dvh - 24px)) !important; overflow: visible !important; z-index: 40;
}
#item-pop.item-pop[hidden]{ display: none !important; }
#item-pop.item-pop > *{ flex: 0 0 auto; min-width: 0; }
#item-pop.item-pop .ip-head{ margin: 0 !important; }
#item-pop.item-pop > .ip-body{
  flex: 1 1 auto !important; min-height: 0; overflow-y: auto !important; overflow-x: hidden; overscroll-behavior: contain;
  padding: 8px 10px !important; border-radius: 6px; background: rgba(0, 0, 0, .34); box-shadow: inset 0 0 0 1px rgba(184, 137, 74, .4), inset 0 0 14px rgba(0, 0, 0, .55);
}
#item-pop.item-pop > .ip-actions{
  order: 5; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important;
  gap: 6px !important; margin: 0 !important; padding: 8px 0 0 !important; border: 0 !important; border-top: 1px solid rgba(240, 200, 120, .22) !important; min-width: 0 !important;
}
#item-pop.item-pop > .ip-actions .pbtn{ width: auto !important; flex: 1 1 0; min-width: 84px !important; max-width: 140px; height: 34px !important; }
#item-pop.item-pop > .ip-pins, #item-pop.item-pop > .ip-confirm{ order: 6; margin: 0 !important; }
@media (max-height: 560px), (max-width: 900px) {
  #item-pop.item-pop > .ip-actions .pbtn{ min-width: 64px !important; height: 28px !important; font-size: 11px !important; padding: 0 6px !important; }
  #item-pop.item-pop > .ip-body{ padding: 6px 8px !important; }
}

/* ---------- Thẻ ngang / thẻ dọc của cửa sổ đôi: cùng kiểu với các cửa sổ khác ---------- */
#screen-game .window.dock .dk-side button{
  color: #f4d8a0 !important; background: linear-gradient(180deg, #7a3418, #4a1c0c) !important; border: 2px solid #9a6a36 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important; font-weight: 800 !important;
}
#screen-game .window.dock .dk-side button.active{
  color: #fff6dc !important; background: linear-gradient(180deg, #f0a050, #b8521c 55%, #8a3410) !important; border-color: var(--fw-gold, #f3cf86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 10px rgba(255, 160, 60, .35) !important;
}
#screen-game .window.dock .dk-tabs button{ border-radius: 6px !important; height: 34px !important; font-size: 13.5px !important; }
@media (max-height: 560px), (max-width: 900px) { #screen-game .window.dock .dk-tabs button{ height: 27px !important; font-size: 10.5px !important; padding-left: 2px !important; padding-right: 2px !important; text-overflow: clip !important; letter-spacing: -.2px; } }

/* ---------- Không hiện thanh cuộn ở bất kỳ đâu: khung ngoài đứng yên, nội dung bên trong vẫn lăn chuột / vuốt được ---------- */
*, *::before, *::after{ scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar, *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-track, *::-webkit-scrollbar-button{
  display: none !important; width: 0 !important; height: 0 !important; background: transparent !important;
}

/* ---------- Khung trò chuyện mở rộng: thẻ kênh nằm trong cùng một khung ---------- */
#chat-panel.dk-chat{
  padding: 0 !important; gap: 0 !important; border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(46, 32, 22, .97), rgba(21, 13, 8, .97)) !important; border: 2px solid var(--fw-line, #b8894a) !important;
  box-shadow: 0 0 0 2px #120a05, inset 0 0 0 1px rgba(255, 220, 150, .16), 0 16px 44px rgba(0, 0, 0, .6) !important;
}
#chat-panel.dk-chat .cp-head{ padding: 44px 8px 8px !important; border-right: 1px solid rgba(90, 62, 34, .9) !important; }
#chat-panel.dk-chat .cp-tabs{ width: 92px !important; }
#chat-panel.dk-chat .cp-main{ border: 0 !important; border-radius: 0 8px 8px 0 !important; background: transparent !important; box-shadow: inset 0 0 26px rgba(0, 0, 0, .55) !important; }
#chat-panel.dk-chat .cp-close{ top: -11px !important; right: -11px !important; width: 42px !important; height: 42px !important; font-size: 20px !important; }
@media (max-height: 560px), (max-width: 900px) {
  #chat-panel.dk-chat .cp-head{ padding: 34px 5px 6px !important; }
  #chat-panel.dk-chat .cp-tabs{ width: 70px !important; }
  #chat-panel.dk-chat .cp-close{ top: -8px !important; right: -8px !important; width: 34px !important; height: 34px !important; font-size: 16px !important; }
}

/* ---------- Hộp hỏi xác nhận / nhập số lượng: luôn ở GIỮA màn hình, khung gỗ tối như các cửa sổ ---------- */
.qty-modal{ place-items: center !important; padding: 12px !important; background: rgba(0, 0, 0, .45) !important; }
body.kb-open .qty-modal{ place-items: start center !important; }   /* bàn phím điện thoại đang mở: dồn lên trên để không bị che */
.qty-card{
  width: min(460px, calc(100vw - 32px)) !important; max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box;
  padding: 18px 22px !important; border-radius: 10px !important; color: #f1e2c4 !important; text-shadow: 0 1px 1px #000;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 196, 110, .1), transparent 60%), linear-gradient(180deg, #2e2016, #150d08) !important;
  border: 2px solid #b8894a !important; box-shadow: 0 0 0 2px #120a05, inset 0 0 0 1px rgba(255, 220, 150, .16), 0 18px 50px rgba(0, 0, 0, .7) !important;
}
.qty-card h3{ color: #f3cf86 !important; font-size: 19px !important; }
.cf-modal.danger .cf-card h3{ color: #ff8a70 !important; }
.qty-card .cf-text{ color: #eadbbd !important; font-size: 15px !important; line-height: 1.5; }
.qty-card .cf-list{ background: rgba(0, 0, 0, .32) !important; box-shadow: inset 0 0 0 1px rgba(184, 137, 74, .38); color: #d9c49c !important; font-size: 13.5px !important; }
.qty-card .qty-item b{ color: #fff3d6 !important; }
.qty-card .qty-ic{ background-color: #160d07 !important; box-shadow: inset 0 0 0 1px #8a6838 !important; }
.qty-card .qty-row input{ background: #1c120a !important; border-color: #8a6838 !important; color: #fff3d6 !important; }
.qty-card .qty-total{ color: #f3cf86 !important; }
.qty-card .qty-total small{ color: #b9a17a !important; }
.qty-card .qty-btns .pbtn{ min-width: 130px !important; height: 40px; }
@media (max-height: 560px), (max-width: 900px) {
  .qty-card{ width: min(420px, calc(100vw - 32px)) !important; padding: 12px 16px !important; }
  .qty-card h3{ font-size: 15px !important; margin-bottom: 6px !important; }
  .qty-card .cf-text{ font-size: 12.5px !important; margin-bottom: 6px !important; }
  .qty-card .cf-list{ font-size: 11.5px !important; margin-bottom: 8px !important; }
  .qty-card .cf-ico{ width: 34px !important; height: 34px !important; margin-bottom: 2px !important; }
  .qty-card .qty-btns .pbtn{ min-width: 110px !important; height: 32px; padding: 0 14px !important; font-size: 13px !important; }
  .qty-card .qty-row input, .qty-card .qty-b{ height: 34px !important; }
  .qty-card .qty-item{ margin-bottom: 6px !important; }
  .qty-card .qty-total{ margin: 6px 0 8px !important; font-size: 13px !important; }
}

/* Thẻ dọc (Trang bị · Ngoại trang · Thú cưỡi · Kỹ năng): đủ rộng, chữ một dòng */
#screen-game .window.dock > .dk-wrap > .dk-side{ width: 128px !important; flex-basis: 128px !important; }
#screen-game .window.dock .dk-side button, #screen-game .window.parch-win > .parch > .side-tabs button{ white-space: nowrap !important; overflow: hidden; text-overflow: clip; }
@media (max-height: 560px), (max-width: 900px) {
  #screen-game .window.dock > .dk-wrap > .dk-side{ width: 86px !important; flex-basis: 86px !important; }
  #screen-game .window.dock .dk-side button{ font-size: 11px !important; letter-spacing: -.2px; }
}

/* Xem người chơi khác: dòng Bộ lạc / Danh hiệu ở chỗ dòng EXP; thẻ Thú cưng dùng y hệt bố cục bảng Thú cưng */
#win-pinfo .pi-foot{ grid-template-columns: 1fr !important; }
#win-pinfo .pi-stats{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
#win-pinfo .pi-note{ margin: 2px 0 0; text-align: center; color: var(--dk-dim, #b9a07c); font-size: 12px; font-style: italic; }
#win-pinfo .cw-pane[hidden]{ display: none !important; }
#win-pinfo .pi-petpane{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#win-pinfo #pi-pets.pvd{ flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; position: relative; }
#win-pinfo #pi-pets.pvd.pv-none{ display: flex; align-items: center; justify-content: center; }
#win-pinfo .eq:not(.has){ cursor: default; }
@media (max-height: 560px), (max-width: 900px) { #win-pinfo .pi-note{ font-size: 9.5px; } }
#win-pinfo .dk-body{ padding-top: 6px; }
#win-pinfo .cw-pane{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
#win-pinfo .cw-top #pi-name{ color: #fff2cf; font-size: 16px; font-weight: 800; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-height: 560px), (max-width: 900px) { #win-pinfo .cw-top #pi-name{ font-size: 12.5px; } }

/* ===================== Nhiệm vụ → Danh hiệu / Thành tựu: hai cột trái (danh sách) · phải (chi tiết + nút) ===================== */
#win-quest .qw-titleb:not([hidden]), #win-quest .qw-achb:not([hidden]){
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important; grid-template-rows: minmax(0, 1fr) !important;
  gap: 10px !important; flex: 1 1 auto; min-height: 0;
}
#win-quest .qw-titleb > section, #win-quest .qw-achb > section{ min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 8px 10px !important; }
#win-quest .tq-list{ flex: 1 1 auto; min-height: 0; overflow-y: auto !important; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
#win-quest .tq-list .qw-drow{ display: flex !important; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 6px 12px !important; cursor: pointer; flex: 0 0 auto; }
#win-quest .tq-list .qw-drow .so-info{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#win-quest .tq-list .qw-drow .so-info b{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#win-quest .tq-list .qw-drow.ready{ box-shadow: inset 0 0 0 1px rgba(127, 227, 106, .55) !important; }
#win-quest .tq-list .qw-drow.worn{ box-shadow: inset 0 0 0 1.5px #7fe36a !important; }
#win-quest .ti-st{ flex: 0 0 auto; padding: 2px 9px; border-radius: 10px; font-weight: 800; font-size: 12px; background: rgba(0, 0, 0, .45); color: #d9c49c; box-shadow: inset 0 0 0 1px rgba(184, 137, 74, .4); white-space: nowrap; }
#win-quest .ti-st.ok{ color: #9be38a; }
#win-quest .ti-st.on{ color: #10200a; background: linear-gradient(180deg, #a6f08a, #5cb840); box-shadow: none; text-shadow: none; }
#win-quest .ti-st.dim{ color: #8f7a5a; }
#win-quest .qw-cats{ display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; flex: 0 0 auto; }
/* Cột phải */
#win-quest .tq-right{ gap: 0; }
#win-quest .tq-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 4px 4px 8px; }
#win-quest .tq-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(240, 200, 120, .25); padding-bottom: 6px; }
#win-quest .tq-name{ margin: 0; color: #ffe9b8; font-size: 18px; font-weight: 900; }
#win-quest .tq-chip{ flex: 0 0 auto; padding: 3px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 800; color: #f3cf86; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(184, 137, 74, .5); }
#win-quest .tq-chip.ok{ color: #9be38a; }
#win-quest .tq-chip.on{ color: #10200a; background: linear-gradient(180deg, #a6f08a, #5cb840); box-shadow: none; text-shadow: none; }
#win-quest .tq-chip.dim{ color: #8f7a5a; }
#win-quest .tq-desc{ margin: 0; color: #e6d5b2; line-height: 1.5; font-size: 14px; }
#win-quest .tq-note{ margin: 0; color: #b9a17a; font-size: 12.5px; font-style: italic; }
#win-quest .tq-sec{ color: #f3cf86; font-weight: 800; font-size: 13.5px; margin-top: 2px; }
#win-quest .tq-info{ display: flex; flex-direction: column; gap: 0; border-radius: 6px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(184, 137, 74, .3); }
#win-quest .tq-line{ display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid rgba(255, 220, 150, .07); }
#win-quest .tq-line:last-child{ border-bottom: 0; }
#win-quest .tq-line .k{ color: #c9a96e; font-weight: 700; white-space: nowrap; }
#win-quest .tq-line .v{ color: #fff3d6; font-weight: 800; text-align: right; }
#win-quest .tq-line.good .v{ color: #9be38a; }
#win-quest .ti-preview{ min-height: 86px !important; margin: 0 !important; border-radius: 8px !important; background: radial-gradient(ellipse at center, rgba(240, 200, 120, .16), rgba(0, 0, 0, .3) 70%) !important; box-shadow: inset 0 0 0 1px rgba(184, 137, 74, .35); }
#win-quest .tq-bar{ position: relative; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(184, 137, 74, .4); overflow: hidden; flex: 0 0 auto; }
#win-quest .tq-bar i{ position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #c9852e, #f3cf86); border-radius: 8px; }
#win-quest .tq-bar em{ position: relative; display: block; text-align: center; font-style: normal; font-size: 11px; font-weight: 800; line-height: 16px; color: #fff; text-shadow: 0 1px 2px #000; }
#win-quest .tq-list .tq-bar{ height: 13px; }
#win-quest .tq-list .tq-bar em{ font-size: 10px; line-height: 13px; }
#win-quest .tq-steps{ display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
#win-quest .tq-step{ display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 4px; border-radius: 6px; cursor: pointer; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(184, 137, 74, .3); }
#win-quest .tq-step b{ color: #d9c49c; font-size: 12px; }
#win-quest .tq-step span{ color: #fff3d6; font-weight: 800; font-size: 12.5px; }
#win-quest .tq-step.done{ opacity: .55; }
#win-quest .tq-step.done b::after{ content: " ✓"; color: #9be38a; }
#win-quest .tq-step.ready{ box-shadow: inset 0 0 0 1.5px #7fe36a; }
#win-quest .tq-step.here{ background: linear-gradient(180deg, rgba(240, 170, 80, .32), rgba(240, 170, 80, .08)); box-shadow: inset 0 0 0 1.5px #f3cf86; }
#win-quest .tq-acts{ flex: 0 0 auto; display: flex; justify-content: center; gap: 10px; padding-top: 9px; border-top: 1px solid rgba(240, 200, 120, .22); }
#win-quest .tq-acts .pbtn{ min-width: 180px; height: 40px; font-size: 15px; }
@media (max-height: 560px), (max-width: 900px) {
  #win-quest .qw-titleb:not([hidden]), #win-quest .qw-achb:not([hidden]){ gap: 6px !important; }
  #win-quest .qw-titleb > section, #win-quest .qw-achb > section{ padding: 5px 6px !important; }
  #win-quest .tq-list{ gap: 4px; }
  #win-quest .tq-list .qw-drow{ min-height: 34px; padding: 4px 8px !important; gap: 6px; }
  #win-quest .ti-st{ font-size: 10px; padding: 1px 6px; }
  #win-quest .tq-body{ gap: 5px; }
  #win-quest .tq-name{ font-size: 13.5px; }
  #win-quest .tq-chip{ font-size: 10px; padding: 2px 8px; }
  #win-quest .tq-desc{ font-size: 11px; }
  #win-quest .tq-note{ font-size: 10px; }
  #win-quest .tq-sec{ font-size: 11px; }
  #win-quest .tq-line{ padding: 4px 8px; font-size: 11px; }
  #win-quest .ti-preview{ min-height: 52px !important; }
  #win-quest .tq-steps{ grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 4px; }
  #win-quest .tq-step{ padding: 3px; }
  #win-quest .tq-step b, #win-quest .tq-step span{ font-size: 10px; }
  #win-quest .tq-acts{ padding-top: 5px; }
  #win-quest .tq-acts .pbtn{ min-width: 130px; height: 30px; font-size: 12px; }
  #win-quest .qw-cats{ gap: 3px; margin-bottom: 5px; }
}