/* Hành trang và Trang bị (bag-ui.js): ảnh nền, nút và ô lấy từ client VLTK1, đặt theo số đo của chính các tệp .ini.
   Cả hai cửa sổ co chung một tỉ lệ (--bag-s) để vừa chiều cao màn hình; ô gốc 28 px. */
.bag-layer{position:absolute;right:calc(var(--safe-right,0px) + 8px);top:58px;z-index:7;display:flex;gap:8px;align-items:flex-start;transform-origin:top right;transform:scale(var(--bag-s,1));pointer-events:none;touch-action:none;font-family:Arial,Helvetica,sans-serif}
.vwin{position:relative;flex:none;background-repeat:no-repeat;background-position:0 0;pointer-events:auto;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 6px 14px #000a)}
/* nút có ảnh nhiều khung của client: Up / Down / Over */
.spr-btn{position:absolute;padding:0;border:0;background-color:transparent;background-repeat:no-repeat;background-position:0 0;cursor:pointer}
.spr-btn:hover{background-position:calc(var(--w) * -2) 0}
.spr-btn:active{background-position:calc(var(--w) * -1) 0}
.spr-btn:focus-visible{outline:1px solid #f4db9c;outline-offset:-2px}
/* nút phủ lên ba nút bán hàng gốc: nền xanh đậm như ảnh, chữ xanh nhạt */
.plate-teal{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid #050d0a;background:linear-gradient(#21402f,#13271d);box-shadow:inset 0 0 0 1px #3a6a4a;color:#9fe29a;font:12px Arial;cursor:pointer;white-space:nowrap}
.plate-teal:hover{background:linear-gradient(#2a5139,#193423);color:#d4ffc4}
.plate-teal:active{background:#0f2118}
.plate-teal.check i{display:inline-block;width:11px;height:11px;margin-right:4px;border:1px solid #cfe9b8;background:#0d1812}
.plate-teal.check.on i{background:#9fe29a;box-shadow:inset 0 0 0 2px #0d1812}
/* nút đá bên trái hàng dưới (thay "Gửi tiền") */
.plate-stone{position:absolute;padding:0;border:1px solid #403c2e;background:linear-gradient(#bcb8a2,#9d9981);color:#16130c;font:bold 13px Arial;text-shadow:0 1px 0 #fff7;cursor:pointer}
.plate-stone:not(.ready){filter:brightness(.82) saturate(.7)}
.plate-stone.ready{outline:2px solid #ffe27a;outline-offset:-3px}
.plate-stone:hover{filter:brightness(1.08)}
.bag-money{position:absolute;color:rgb(255,217,78);font:12px/14px Arial;text-align:center;text-shadow:0 1px 1px #000;pointer-events:none}
.bag-box{position:absolute}
.vitem{position:absolute;box-sizing:border-box;cursor:pointer}
.vitem:hover{outline:1px solid #f0d78a;outline-offset:-1px;background-color:#ffffff12}
.vicon{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:auto;pointer-events:none}
.vicon.is-book{inset:2px;background-size:contain}
.vicon.glyph{display:grid;place-items:center;font:20px serif;color:var(--c,#ddd)}
.vcount{position:absolute;right:2px;bottom:0;font:bold 11px Arial;color:#fff2b0;text-shadow:0 0 2px #000,0 0 2px #000;pointer-events:none}
/* cửa sổ Trang bị */
.status-title{position:absolute;text-align:center;font:bold 14px/20px Arial;letter-spacing:2px;color:rgb(169,211,190);text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
.status-doll{position:absolute;pointer-events:none}
.slot{position:absolute;box-sizing:border-box;background-repeat:repeat;background-color:#050807;outline:1px solid #00000099;cursor:pointer}
.slot small{position:absolute;left:0;right:0;bottom:1px;text-align:center;font:10px/11px Arial;color:#b9a86a;text-shadow:0 0 2px #000,0 0 2px #000;pointer-events:none}
.slot.full small{opacity:.0}
.slot:hover{outline:1px solid #f0d78a}
.slot.inuse{outline:1px solid #ffe27a;box-shadow:0 0 6px #ffe27a88}
.slot .vicon{inset:0}
.slot .vicon.is-book{inset:8px}
.status-note{position:absolute;left:10px;top:348px;width:298px;text-align:center;font:10px/12px Arial;color:#a8b39a;pointer-events:none}
/* hướng dẫn, thẻ mô tả và món đang cầm */
.bag-help{position:absolute;box-sizing:border-box;z-index:3;overflow:auto;padding:8px 10px;background:#070a08f7;border:1px solid #8d794d;font:11px/1.45 Arial;color:#d8dcc4}
.bag-help h4{margin:0 0 6px;font:bold 12px Arial;letter-spacing:1px;color:#e4c978;text-transform:uppercase}
.bag-help ul{margin:0 0 8px;padding-left:14px}.bag-help li{margin-bottom:5px}.bag-help b{color:#fff0b8}
.bag-help .plate-teal{position:static;width:100%;height:22px}
.bag-tip{position:absolute;z-index:9;width:214px;padding:8px 10px;background:#0b110df0;border:1px solid #b69c60;box-shadow:0 6px 18px #000a;pointer-events:none;font:11px/1.45 Arial;color:#cfd6bf}
.bag-tip b{display:block;font:bold 13px Arial;margin-bottom:3px}
.bag-tip p{margin:0 0 3px}
.bag-tip small{display:block;color:#8f9984;margin-top:2px}
.bag-tip em{display:block;margin-top:6px;padding-top:5px;border-top:1px solid #ffffff22;font-style:normal;color:#e4c978}
.bag-cursor{position:absolute;left:0;top:0;z-index:10;pointer-events:none;transform-origin:0 0;opacity:.95;filter:drop-shadow(0 2px 4px #000c)}
.bag-cursor .vicon{position:absolute;inset:0}
/* nút TÚI trên thanh trên: sáng lên khi có đồ mới nhặt mà chưa mở túi */
#bagBtn.on{background:#4c5a3a;border-color:#d4b97a}
#bagBtn.fresh{box-shadow:0 0 0 2px #f2c36a;animation:bagfresh 1.1s ease-in-out infinite}
@keyframes bagfresh{50%{box-shadow:0 0 0 2px #f2c36a00}}
@media (pointer:coarse){#bagBtn .k{display:none}}
.bag-actions{display:none}
@media(pointer:coarse){
  body.bag-open .training-panel{visibility:hidden}
  .bag-layer,.bag-cursor{display:none!important}
  .bag-actions:not([hidden]){display:flex;flex-direction:column;position:absolute;inset:calc(var(--safe-top) + 48px) calc(var(--safe-right) + 8px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 8px);z-index:8;padding:10px;border:1px solid #9b885d;background:#10241efc;box-shadow:0 3px 12px #0008;color:#e0d5b5;font:13px/1.5 Arial;touch-action:pan-y;min-height:0}
  .bag-actions nav,.bag-item-buttons{display:flex;gap:6px;flex:none;align-items:center}
  .bag-actions button{min-height:44px;padding:8px;border:1px solid #60775c;background:#1c362a;color:#f0e3be;font:12px/1.35 Arial;touch-action:manipulation;text-align:left}
  .bag-actions button:active{background:#39553a}.bag-actions button:focus-visible{outline:2px solid #f4d184;outline-offset:-3px}
  .bag-actions button:disabled{opacity:.45}.bag-actions nav{margin-bottom:8px;gap:8px}
  .bag-actions nav button{padding:8px 12px;text-align:center}.bag-actions nav button[aria-pressed="true"]{border-color:#e0c489;color:#ffe4a8;background:#3a4930}
  .bag-mobile-count{margin-left:auto;font-size:12px;white-space:nowrap;color:#c7c7ab}
  .bag-actions nav [data-action="close"]{margin-left:auto}
  .bag-mobile-content{display:grid;grid-template-columns:minmax(160px,40%) minmax(0,1fr);gap:12px;min-height:0;flex:1}
  .bag-mobile-list{overflow:auto;min-height:0;padding-right:6px;overscroll-behavior:contain;touch-action:pan-y;border-right:1px solid #9b885d55}
  .bag-mobile-list h4{margin:10px 0 6px;font-size:11px;letter-spacing:1px;color:#baac80}.bag-mobile-list h4:first-child{margin-top:0}
  .bag-mobile-list .bag-mobile-item{position:relative;display:flex;width:100%;gap:10px;align-items:center;margin-bottom:6px;min-height:58px;padding:7px;border-color:#60775c66}
  .bag-mobile-item .vicon{position:relative;inset:auto!important;width:36px;height:40px;flex:none;background-size:contain}
  .bag-mobile-item-text{display:block;min-width:0}.bag-mobile-item-text b{display:block;line-height:1.35;font-size:13px}.bag-mobile-item-text small{display:block;font-size:10px;margin-top:3px;color:#c1c5ac}
  .bag-mobile-item.picked{border-color:#f4d184!important;background:#354733}.bag-empty-icon{display:grid;place-items:center;width:36px;flex:none;font:24px Arial;color:#9fa48b}
  .bag-detail{display:flex;flex-direction:column;min-height:0;min-width:0}.bag-detail-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding-right:4px}
  .bag-action-name{display:block;font-size:17px;line-height:1.4;color:#f4d184}.bag-action-info{margin:8px 0 12px}.bag-action-info p,.bag-comparison p{margin:0 0 6px}
  .bag-comparison{border-top:1px solid #9b885d55;padding-top:8px}.bag-comparison:empty{display:none}.bag-comparison h4{font-size:12px;color:#a9c3a4;margin:0 0 8px}.bag-comparison b{color:#d2d7ba}
  .bag-equip-targets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}.bag-equip-choice b,.bag-equip-choice span,.bag-equip-choice small{display:block}.bag-equip-choice span{margin-top:4px;color:#ccd5ba}.bag-equip-choice small{margin-top:4px;font-size:11px;color:#a9bda7}
  .bag-item-buttons{padding-top:8px;border-top:1px solid #9b885d55;margin-top:6px}.bag-item-buttons button{flex:1;text-align:center}.bag-action-use{background:#445737!important;border-color:#cbb075!important}.bag-action-drop{color:#efa392!important}
}
@media(pointer:coarse) and (max-width:660px){.bag-mobile-count{display:none}.bag-actions:not([hidden]){padding:8px}.bag-actions nav button{padding:8px}.bag-mobile-content{gap:8px;grid-template-columns:minmax(156px,40%) minmax(0,1fr)}}
@media(pointer:coarse) and (orientation:portrait){
  .bag-actions:not([hidden]){inset:calc(var(--safe-top) + 54px) calc(var(--safe-right) + 8px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 8px)}
  .bag-mobile-content{grid-template-columns:1fr;grid-template-rows:minmax(120px,40%) minmax(0,1fr)}
  .bag-mobile-list{border-right:0;border-bottom:1px solid #9b885d55;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 0 6px}
  .bag-mobile-list h4,.bag-empty{grid-column:1/-1}.bag-mobile-list h4{margin:4px 0}.bag-mobile-list .bag-mobile-item{height:auto;margin:0;gap:6px;align-self:start}.bag-mobile-item-text b{font-size:12px}.bag-mobile-item .vicon{width:28px}
  .bag-actions nav{gap:4px}.bag-actions nav button{font-size:11px;padding:6px}.bag-mobile-count{display:none}
}