/* One character window: equipped source art on the left, icon grid on the right. */
.bag-layer{position:absolute;inset:0;z-index:8;pointer-events:none;font-family:Arial,Helvetica,sans-serif}
.bag-layer[hidden],.bag-actions[hidden],.bag-actions [hidden]{display:none!important}
.bag-actions{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1080px,calc(100% - var(--safe-left,0px) - var(--safe-right,0px) - 32px));height:min(640px,calc(100% - var(--safe-top,0px) - var(--safe-bottom,0px) - 100px));display:flex;flex-direction:column;pointer-events:auto;box-sizing:border-box;overflow:hidden;border:2px solid #a39164;outline:1px solid #253c31;box-shadow:0 12px 50px #000b,inset 0 0 0 2px #d1bd89;color:#263d32;background:#c4bca2;font:13px/1.4 Arial;user-select:none;-webkit-user-select:none}
.bag-actions button{min-height:44px;border:1px solid #a2936d;background:#355b4f;color:#f2ecd4;padding:6px 10px;cursor:pointer;font:inherit;touch-action:manipulation}
.bag-actions button:hover{filter:brightness(1.12)}.bag-actions button:active{filter:brightness(.87)}.bag-actions button:disabled{opacity:.45;cursor:default}.bag-actions button:focus-visible{outline:2px solid #ffe9a0;outline-offset:-4px}
.bag-heading{height:54px;flex:none;display:flex;align-items:center;gap:20px;padding:0 16px;background:#31574f;border-bottom:2px solid #ab9870;color:#eedca0}
.bag-heading h2{margin:0;font:24px Georgia,serif}.bag-heading>span{color:#b8cabc;letter-spacing:2px;font-size:11px}.bag-heading button{margin-left:auto;background:transparent;border:0;font-size:30px;line-height:1;min-width:44px;padding:0}
.bag-mobile-content{display:grid;grid-template-columns:100px minmax(230px,39%) minmax(0,1fr);flex:1;min-height:0;position:relative}
.bag-sidebar{background:#416053;display:flex;flex-direction:column;padding:12px 0;gap:4px;border-right:2px solid #ad9b75}
.bag-sidebar button{min-height:64px;background:transparent;border:0;border-bottom:1px solid #adc1a32b;text-align:center;color:#c2d8c8;padding:8px}
.bag-sidebar button[aria-pressed="true"]{color:#fff3c8;background:#457c6c;box-shadow:inset 3px 0 #e7d39a,inset 0 0 0 1px #8fae8c}
.bag-sidebar small{padding:20px 8px;text-align:center;color:#b9caba;font-size:10px;line-height:1.7}
.bag-character{min-height:0;min-width:0;display:flex;flex-direction:column;padding:12px 10px 8px;border-right:3px double #948f74;background:radial-gradient(ellipse at 50% 50%,#edd59180 0,#e4d4af 40%,#bdc0a4 100%)}
.bag-character-heading{text-align:center;flex:none}.bag-player-name{display:block;font:18px Georgia,serif;color:#294838}.bag-player-sect{font-size:11px;color:#677666}
.bag-equipment{position:relative;flex:1;min-height:0;margin-top:12px}
.bag-doll-aura{position:absolute;width:70%;aspect-ratio:1;left:15%;top:42%;transform:translateY(-50%);border:1px solid #b5934a55;border-radius:50%;box-shadow:0 0 0 13px #f5e5b522,inset 0 0 0 13px #f5e5b522;pointer-events:none}
.status-doll{position:absolute;width:75%;height:calc(100% - 64px);object-fit:contain;left:12.5%;top:0;pointer-events:none}
.bag-doll-loading{position:absolute;left:22%;right:22%;top:40%;padding:4px!important;font-size:11px!important;background:#dcd2b4e6!important;color:#4d5d4c!important;z-index:2}
.bag-mobile-item{position:relative!important;display:block;min-width:0;aspect-ratio:1;box-sizing:border-box;border:2px solid var(--quality,#958967)!important;background:#4b5747!important;padding:0!important;overflow:hidden}
.bag-mobile-item .vicon{position:absolute;inset:4px 4px 12px;background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}
.bag-mobile-item .vicon.glyph{display:grid;place-items:center;color:#eed997;font:20px Georgia,serif}
.bag-quality{position:absolute;right:3px;bottom:1px;max-width:90%;font:9px Arial;color:#fff1c5;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
.bag-mobile-item.picked{outline:2px solid #ffe6a2;outline-offset:-5px;box-shadow:inset 0 0 18px #efcf7080}
.bag-worn-slot{position:absolute!important;width:64px;height:64px;z-index:1}
.bag-slot-label{position:absolute;left:0;right:0;bottom:2px;font:10px Arial;text-align:center;line-height:11px;color:#eee2bc;text-shadow:0 1px 2px #000;pointer-events:none}
.bag-worn-slot .bag-quality{top:2px;bottom:auto;font-size:8px}.bag-worn-slot .vicon{inset:5px 6px 15px}
.slot-weapon-one{left:0;top:0}.slot-weapon-two{right:0;top:0}.slot-armor{left:0;top:calc(50% - 50px)}.slot-bracer{right:0;top:calc(50% - 50px)}.slot-boots{left:calc(50% - 32px);bottom:74px}
.slot-art-0{left:0;bottom:0}.slot-art-1{left:calc(33.333% - 21px);bottom:0}.slot-art-2{right:calc(33.333% - 21px);bottom:0}.slot-art-3{right:0;bottom:0}
.bag-worn-slot.inuse:after{content:'Đang cầm';position:absolute;top:2px;left:2px;padding:1px 2px;background:#234134e8;color:#ffe196;font-size:8px}.bag-worn-slot.inuse .bag-quality{display:none}
.bag-costume-note{margin:8px 0 0;text-align:center;font-size:12px;color:#405540}.bag-one-outfit{text-align:center;font-size:9px;color:#687460;margin-top:3px}
.bag-attributes{flex:1;overflow:auto;display:grid;grid-template-columns:1fr;align-content:start;gap:8px;margin:20px 4px}.bag-attributes dt{color:#748065;font-size:11px}.bag-attributes dd{margin:0 0 10px;font-size:16px;color:#36533e;border-bottom:1px solid #a9a886;padding-bottom:8px}
.bag-storage{padding:12px;display:flex;flex-direction:column;min-height:0;min-width:0;gap:10px;background:#bfbba3}
.bag-filters{display:flex;gap:4px;flex:none}.bag-filters button{flex:1;min-width:0;padding:5px;font-size:12px;background:#65745f;color:#f6efd1}.bag-filters button[aria-pressed="true"]{background:#3b7b67;border-color:#e4ce92;box-shadow:inset 0 -2px #e4ce92}
.bag-grid-area{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.bag-mobile-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;align-content:start;min-height:0}
.bag-empty-cell{aspect-ratio:1;box-sizing:border-box;background:#68706055;border:2px solid #a9a482;box-shadow:inset 0 0 0 1px #7a807244}
.bag-empty{position:absolute;left:4px;right:4px;top:40%;margin:0;padding:12px 4px;background:#d0c9acef;text-align:center;font-size:12px;color:#4d644f;pointer-events:none}
.bag-footer{display:flex;align-items:center;gap:6px;flex:none;border-top:1px solid #969476;padding-top:8px}.bag-mobile-count{margin-right:auto;color:#304b3c;font-weight:bold;white-space:nowrap;font-size:12px}.bag-footer button{font-size:11px;padding:5px 8px}.bag-footer [aria-pressed="true"]{border-color:#ead18f;background:#38745e}
.bag-detail{display:flex;flex-direction:column;max-height:52%;min-height:0;background:#243e32;color:#e1ddc7;border:1px solid #8f996e;padding:8px;box-shadow:0 4px 10px #0002;font-size:12px}
.bag-detail-heading{display:flex;align-items:center;gap:5px;flex:none}.bag-action-name{flex:1;font-size:15px;line-height:1.3;min-width:0}.bag-detail-heading button{width:44px;min-width:44px;height:44px;font-size:24px;background:transparent;border:0;padding:0}
.bag-detail-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding-right:3px}.bag-action-info p,.bag-comparison p{margin:0 0 5px}.bag-action-info small{color:#aab69a}
.bag-comparison{margin:8px 0;padding-top:8px;border-top:1px solid #738060}.bag-comparison:empty{display:none}.bag-comparison h4{margin:0 0 6px;color:#bccb9d;font-size:11px}.bag-comparison b{color:#ece2b7}
.bag-equip-targets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:8px}.bag-equip-choice{text-align:left;font-size:11px!important;padding:6px!important}.bag-equip-choice b,.bag-equip-choice span,.bag-equip-choice small{display:block}.bag-equip-choice span{font-size:10px;color:#c6d1b7;margin-top:4px}.bag-equip-choice small{font-size:9px;color:#e5cfa8}
.bag-item-buttons{display:flex;gap:6px;padding-top:6px;flex:none}.bag-item-buttons button{flex:1;text-align:center;font-size:11px;padding:5px}.bag-action-use{background:#457963!important;border-color:#c5b47e!important}.bag-action-drop{color:#f0bda5!important}
body.bag-open .training-panel{visibility:hidden}
#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{left:calc(var(--safe-left,0px) + 8px);right:calc(var(--safe-right,0px) + 8px);top:calc(var(--safe-top,0px) + 48px);bottom:calc(var(--safe-bottom,0px) + 8px);transform:none;width:auto;height:auto}.bag-heading{height:40px;padding:0 10px}.bag-heading h2{font-size:20px}.bag-mobile-content{grid-template-columns:64px minmax(196px,38%) minmax(0,1fr)}.bag-sidebar{padding-top:5px}.bag-sidebar button{min-height:48px;font-size:11px}.bag-sidebar small{padding:12px 4px;font-size:9px}.bag-character{padding:5px 7px}.bag-character-heading{height:25px}.bag-player-name{font-size:14px;line-height:15px}.bag-player-sect{font-size:9px;line-height:10px}.bag-equipment{margin-top:5px}.bag-worn-slot{width:44px;height:44px}.bag-slot-label{font-size:8px;line-height:9px}.bag-worn-slot .bag-quality{font-size:7px}.bag-worn-slot .vicon{inset:3px 3px 12px}.slot-armor,.slot-bracer{top:50px}.slot-boots{left:calc(50% - 22px);bottom:50px}.slot-art-1{left:calc(33.333% - 15px)}.slot-art-2{right:calc(33.333% - 15px)}.status-doll{height:calc(100% - 50px)}.bag-costume-note{font-size:10px;margin-top:4px}.bag-one-outfit{font-size:8px;line-height:10px}.bag-storage{padding:6px;gap:5px}.bag-mobile-list{gap:4px}.bag-footer{padding-top:4px;gap:4px}.bag-footer button{padding:4px;font-size:10px}.bag-mobile-count{font-size:10px}.bag-quality{font-size:8px}.bag-filters button{font-size:10px;padding:3px}.bag-detail{font-size:11px;padding:5px}.bag-action-name{font-size:13px}}
@media(max-width:700px){.bag-mobile-content{grid-template-columns:52px minmax(196px,38%) minmax(0,1fr)}.bag-mobile-list{grid-template-columns:repeat(4,minmax(0,1fr))}.bag-heading>span{display:none}.bag-footer{flex-wrap:wrap}.bag-mobile-count{flex:1 0 100%}.bag-sidebar small{display:none}}
/* On a short landscape phone, inspect a selected item in the character pane;
   the inventory grid stays reachable. Close details to see the figure again. */
@media(max-height:500px) and (min-width:501px){.bag-actions{height:auto;top:calc(var(--safe-top,0px) + 48px);bottom:calc(var(--safe-bottom,0px) + 8px);transform:translateX(-50%)}.bag-heading{height:36px}.bag-character{padding:4px 6px}.bag-mobile-content{grid-template-columns:52px minmax(196px,38%) minmax(0,1fr)}.bag-sidebar button{min-height:44px;font-size:11px}.bag-sidebar small{display:none}.bag-character-heading{height:20px}.bag-player-name{font-size:12px;line-height:12px}.bag-player-sect{font-size:8px;line-height:8px}.bag-equipment{margin-top:4px}.bag-worn-slot{width:44px;height:44px}.bag-slot-label{font-size:8px;line-height:9px}.slot-armor,.slot-bracer{top:48px}.slot-boots{left:calc(50% - 22px);bottom:48px}.slot-art-1{left:calc(33.333% - 15px)}.slot-art-2{right:calc(33.333% - 15px)}.bag-costume-note{font-size:9px;line-height:10px;margin-top:2px}.bag-one-outfit{font-size:8px;line-height:9px}.bag-storage{padding:5px;gap:4px}.bag-footer{flex-wrap:nowrap}.bag-mobile-count{flex:initial;font-size:9px}.bag-footer button{font-size:9px;padding:3px}.bag-detail{position:absolute;left:54px;top:0;bottom:0;width:calc(38% - 20px);min-width:178px;max-height:none;box-sizing:border-box;z-index:3}.bag-actions.has-selection .bag-character{visibility:hidden}.bag-detail-heading button{height:44px}.bag-equip-targets{grid-template-columns:1fr}.bag-actions .bag-mobile-list{grid-template-columns:repeat(6,minmax(44px,1fr))}.bag-grid-area{overflow:auto}.bag-mobile-list{min-width:284px}}
@media(pointer:coarse) and (max-height:500px) and (min-width:501px){.bag-actions{transform:none}}
@media(max-width:500px){.bag-actions{top:calc(var(--safe-top,0px) + 54px);bottom:calc(var(--safe-bottom,0px) + 8px);left:calc(var(--safe-left,0px) + 8px);right:calc(var(--safe-right,0px) + 8px);width:auto;height:auto;transform:none}.bag-heading{height:40px}.bag-mobile-content{grid-template-columns:1fr;grid-template-rows:44px 210px minmax(0,1fr)}.bag-sidebar{flex-direction:row;padding:0;border-right:0;border-bottom:1px solid #a5936b;gap:0}.bag-sidebar button{flex:1;min-height:44px;font-size:12px}.bag-character{border-right:0;border-bottom:2px solid #a09879;padding:5px 12px}.bag-equipment{margin-top:3px}.bag-character-heading{height:22px}.bag-worn-slot{width:44px;height:44px}.bag-slot-label{font-size:8px}.slot-armor,.slot-bracer{top:48px}.slot-boots{left:calc(50% - 22px);bottom:48px}.slot-art-1{left:calc(33.333% - 15px)}.slot-art-2{right:calc(33.333% - 15px)}.status-doll{width:50%;left:25%;height:calc(100% - 48px)}.bag-one-outfit{display:none}.bag-costume-note{font-size:9px;line-height:10px;margin-top:2px}.bag-storage{padding:6px;gap:5px}.bag-mobile-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.bag-footer{flex-wrap:nowrap}.bag-mobile-count{flex:initial;font-size:10px}.bag-footer button{padding:4px;font-size:10px}.bag-detail{position:absolute;left:0;right:0;top:44px;height:210px;max-height:none;z-index:3;margin:0 6px;box-sizing:border-box}.bag-actions.has-selection .bag-character{visibility:hidden}.bag-equip-targets{grid-template-columns:repeat(2,minmax(0,1fr))}.bag-detail-heading button{height:44px}.bag-action-name{font-size:13px}}
@media(prefers-reduced-motion:reduce){#bagBtn.fresh{animation:none}}

/* Full equipment layout, one weapon. Scroll the character column on short phones. */
.bag-character{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.bag-equipment{--eq:clamp(44px,5vw,60px);flex:none;height:calc(var(--eq)*6 + 30px);min-height:calc(var(--eq)*6 + 30px)}
.bag-worn-slot{width:var(--eq);height:var(--eq);touch-action:none}
.slot-weapon-one,.slot-hat,.slot-armor,.slot-belt,.slot-boots{left:0;right:auto;bottom:auto}
.slot-neck,.slot-jade,.slot-bracer,.slot-ring1,.slot-ring2{right:0;left:auto;bottom:auto}
.slot-weapon-one,.slot-neck{top:0}.slot-hat,.slot-jade{top:calc(var(--eq) + 5px)}
.slot-armor,.slot-bracer{top:calc(var(--eq)*2 + 10px)}.slot-belt,.slot-ring1{top:calc(var(--eq)*3 + 15px)}
.slot-boots,.slot-ring2{top:calc(var(--eq)*4 + 20px)}
.slot-art-1{left:calc(33.333% - var(--eq)/3)}.slot-art-2{right:calc(33.333% - var(--eq)/3)}
.bag-future-slots{display:flex;justify-content:center;gap:6px;font-size:9px;color:#626f59;margin:5px 0}.bag-future-slots span{border:1px dashed #889479;padding:5px}
.bag-mobile-item{touch-action:none}.bag-drag-ghost{position:fixed;left:0;top:0;width:56px;height:56px;z-index:1000;pointer-events:none;background:#34563c;border:2px solid #e7d392;opacity:.9}.bag-drag-ghost .vicon{position:absolute;inset:3px;background-size:contain;background-repeat:no-repeat;background-position:center}
.bag-drag-ghost .bag-quality,.bag-drag-ghost .bag-slot-label{display:none}
.bag-quick{display:flex;align-items:center;gap:8px;flex:none;padding:4px 6px;border:1px solid #c5b47e55;background:#1b2a1f;font-size:11px}.bag-quick[hidden]{display:none}
.bag-quick-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e7d392}.bag-quick-drop{flex:none;min-height:30px;padding:4px 12px;font-size:11px;border-color:#b86454aa;color:#f0b4a6}
.bag-drag-ghost.will-drop{border-color:#e0705a;box-shadow:0 0 0 2px #e0705a66}.bag-drag-ghost.will-drop::after{content:"VỨT";position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;padding:1px 6px;border-radius:3px;background:#a43c2c;color:#fff;font:700 10px Arial}
.bag-drag-ghost.is-precious{border-color:#e8c25a;box-shadow:0 0 0 2px #e8c25a66}.bag-drag-ghost.is-precious::after{content:"MÓN QUÝ";position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;padding:1px 6px;border-radius:3px;background:#7a5a14;color:#fff;font:700 10px Arial;white-space:nowrap}