#backpack{position:fixed;z-index:90;left:0;top:0;isolation:isolate;font-family:Georgia,serif;user-select:none}
#backpack[hidden],#backpack [hidden]{display:none!important}
#backpack .bp-art{position:relative;width:380px;height:410px;transform-origin:0 0}
#backpack .bp-base{position:absolute;inset:0;background:url('backpack/window-frame.png') center/100% 100% no-repeat;pointer-events:none}
#backpack .bp-base::before{content:'';position:absolute;left:19px;top:58px;width:341px;height:293px;background:url('backpack/leather.png') center/100% 100%;z-index:-1}
#backpack button{box-sizing:border-box;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background-color:transparent;color:#f9dda0;font:16px Georgia;min-width:0;min-height:0}
#backpack button:hover{filter:none}
#backpack button:focus-visible{outline:1px solid #ffe89b;outline-offset:-8px}
#backpack .bp-handle{position:absolute;left:23px;top:25px;width:309px;height:31px;cursor:move;display:flex;align-items:center;justify-content:center;touch-action:none}
#backpack .bp-handle img{width:104px;height:22px;pointer-events:none}
#backpack .bp-close{position:absolute;left:329px;top:23px;width:36px;height:36px;z-index:2;background:url('backpack/close@2x.png') center/34px 34px no-repeat;transition:translate .12s ease}
#backpack .bp-tabs{position:absolute;left:22px;top:60px;width:335px;height:47px;display:flex;gap:0}
#backpack .bp-tabs button{flex:0 0 67px;width:67px;height:47px;background-size:67px 47px;background-repeat:no-repeat;transform:none!important;transition:none;filter:none!important}
#backpack .bp-grid{position:absolute;left:22px;top:110px;width:336px;max-height:244px;overflow-y:auto;display:grid;grid-template-columns:repeat(6,55px);grid-auto-rows:54px;gap:3px 1px;align-content:start;scrollbar-width:thin;scrollbar-color:#9f7a39 #09231b}
#backpack .bp-slot{position:relative;width:55px;height:54px;background:url('backpack/slot.png') center/100% 100% no-repeat;touch-action:none}
#backpack .bp-slot img{width:78%;height:78%;object-fit:contain;position:absolute;left:11%;top:11%;pointer-events:none;filter:drop-shadow(0 1px 1px #000)}
#backpack .bp-slot img.bp-equipment-icon{width:49px;height:48px;left:3px;top:3px;filter:none}
#backpack .bp-slot b{position:absolute;right:4px;bottom:3px;font:600 12px Georgia;color:#fff2bd;text-shadow:1px 1px 1px #000;pointer-events:none}
#backpack .bp-expand{background-image:url('backpack/expand.png')}
#backpack .bp-currency{position:absolute;top:358px;width:135px;height:31px;background-size:100% 100%;background-repeat:no-repeat;display:flex;align-items:center}
#backpack .bp-gold{left:42px;background-image:url('backpack/gold-field.png')}
#backpack .bp-premium{left:203px;background-image:url('backpack/premium-field.png')}
#backpack .bp-currency::before{content:'';position:absolute;left:6px;top:3px;width:24px;height:26px;background:center/contain no-repeat}
#backpack .bp-gold::before{background-image:image-set(url('gold-coin-tree-24-v1.png') 1x,url('gold-coin-tree-24-v1@2x.png') 2x)}
#backpack .bp-premium::before{background-image:image-set(url('backpack/icon-premium.png') 1x,url('backpack/icon-premium@2x.png') 2x)}
#backpack .bp-currency output{margin-left:36px;width:92px;text-align:right;font:15px Georgia;color:#ffe49b;text-shadow:0 1px 1px #000}
#backpack .bp-divider{position:absolute;left:181px;top:361px;width:20px;height:26px}
#backpack .bp-buy{position:absolute;left:28px;top:236px;width:321px;box-sizing:border-box;padding:9px;background:#0b211af5;border:1px solid #b78b45;border-radius:4px;color:#f7ddb0;font:14px/1.4 Georgia;box-shadow:0 4px 9px #000a}
#backpack .bp-buy p{margin:0 0 6px}
#backpack .bp-buy button{font:12px Georgia;padding:5px 8px;border:1px solid #b78b45;margin-right:6px;background:#24382b}
#backpack .bp-buy-status{font-size:11px;margin-top:5px!important;color:#e8b09a}
.bp-drag-ghost{position:fixed;width:44px;height:44px;object-fit:contain;z-index:2147483646;pointer-events:none}
#backpack .bp-slot img{filter:none;width:44px;height:44px;left:5px;top:5px}
#backpack .bp-slot img.bp-elixir-icon{width:49px;height:48px;left:3px;top:3px;border-radius:3px;object-fit:fill}
#backpack .bp-slot b{z-index:1}
#backpack .bp-slot{filter:none!important;transform:none!important;transition:none}
@media(prefers-reduced-motion:reduce){#backpack button{transition:none}}
#backpack .bp-tabs button{position:relative}
#backpack .bp-tabs button::after,#backpack .bp-slot::after,#backpack .bp-close::after{content:'';position:absolute;inset:2px;border-radius:5px;pointer-events:none;opacity:0;box-shadow:inset 0 0 7px #f6cd7470,0 0 4px #e6bb4f55;background:#ffe9a408;transition:opacity .16s ease}
#backpack .bp-tabs button:hover::after,#backpack .bp-slot:hover::after,#backpack .bp-close:hover::after,#backpack .bp-slot.bp-drop-target::after{opacity:1}
#backpack .bp-close::after{inset:1px;border-radius:7px;background:radial-gradient(circle,#ffdfa638,transparent 72%);box-shadow:inset 0 0 9px #ffd87b90,0 0 12px #e8a93d85;transition:opacity .18s ease}
#backpack .bp-close::before{content:'';position:absolute;inset:3px;border-radius:5px;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#fff1b970 48%,transparent 70%);background-size:250% 100%;background-position:150% 0;opacity:0}
#backpack .bp-close:hover::before{opacity:1;animation:bp-close-shine 1.15s ease-in-out infinite}
#backpack .bp-close:hover::after{animation:bp-close-glow 1.4s ease-in-out infinite}
#backpack .bp-close:active{translate:0 1px}
#backpack .bp-close:active::after{opacity:1;background:#ffdc8b45;animation:none;box-shadow:inset 0 0 12px #7c3b09b0,0 0 15px #efb54a99}
@keyframes bp-close-shine{0%{background-position:150% 0;opacity:0}25%{opacity:.8}75%{opacity:.8}100%{background-position:-80% 0;opacity:0}}
@keyframes bp-close-glow{0%,100%{opacity:.65}50%{opacity:1}}
#backpack .bp-tabs button:active::after,#backpack .bp-slot:active::after{background:#ffe6a324;transition-duration:.06s}
#backpack .bp-drag-source img,#backpack .bp-drag-source b{opacity:.4}
#backpack .bp-feedback::after{animation:bp-action-light .42s ease-out}
#backpack .bp-buy.bp-feedback{animation:bp-panel-appear .2s ease-out}
#backpack .bp-handle::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#ffe5a9,transparent);opacity:0;pointer-events:none}
#backpack.bp-opening .bp-handle::after{animation:bp-title-light .8s ease-out}
#backpack .bp-value-change{animation:bp-currency-light .55s ease-out}
#backpack .bp-expand::before{content:'';position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle,#eac16630,transparent 70%);opacity:.55;pointer-events:none;animation:bp-expand-breathe 3.8s ease-in-out infinite}
@keyframes bp-action-light{0%{opacity:1;background:#ffe7b02b}100%{opacity:0;background:transparent}}
@keyframes bp-panel-appear{from{opacity:0}to{opacity:1}}
@keyframes bp-title-light{0%{opacity:0}30%{opacity:.85}100%{opacity:0}}
@keyframes bp-currency-light{0%{color:#fff8de;text-shadow:0 0 5px #efc86e}100%{color:#ffe49b;text-shadow:0 1px 1px #000}}
@keyframes bp-expand-breathe{0%,100%{opacity:.4}50%{opacity:.8}}
@media(prefers-reduced-motion:reduce){#backpack *,#backpack *::before,#backpack *::after{animation:none!important;transition:none!important}}
@media(min-resolution:1.5dppx){
 #backpack .bp-base{background-image:url('backpack/window-frame@2x.png')}
 #backpack .bp-base::before{background-image:url('backpack/leather@2x.png')}
 #backpack .bp-slot{background-image:url('backpack/slot@2x.png')}
 #backpack .bp-expand{background-image:url('backpack/expand@2x.png')}
 #backpack .bp-close{background-image:url('backpack/close@2x.png')}
 #backpack .bp-gold{background-image:url('backpack/gold-field@2x.png')}
 #backpack .bp-premium{background-image:url('backpack/premium-field@2x.png')}
}

#currency-tooltip{position:fixed;z-index:10000;pointer-events:none;margin:0;padding:8px 12px;border:1px solid #b69b5d;border-radius:4px;background:#0c1a13fa;color:#f3dfa7;box-shadow:0 4px 14px #0009;font:600 15px/1.25 Georgia,serif;white-space:nowrap;backdrop-filter:none}#currency-tooltip[hidden]{display:none}


#backpack .bp-slot.bp-quest-trophy::before {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: 1;
  pointer-events: none;
  background: url('backpack/quest-trophy-frame-v1.png') center / 100% 100% no-repeat;
}
#backpack .bp-slot.bp-quest-trophy b { z-index: 2; }