.fortune-dialog{width:min(780px,94vw);max-height:92dvh;box-sizing:border-box;overflow:auto;padding:24px;color:#efdfb9;background:#20382e;border:8px solid #806d45;box-shadow:0 18px 90px #0009;font-family:var(--font-ui)}
.fortune-dialog::backdrop{background:#081b146b}.fortune-dialog header{display:flex;align-items:center;justify-content:space-between}.fortune-dialog h2{margin:4px 0 18px;font-size:32px}.fortune-dialog small{display:block;font-size:11px;color:#c2c6a3}.fortune-layout{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,.85fr);gap:28px}.fortune-layout nav{display:flex;gap:5px;margin-bottom:10px}.fortune-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:6/8;background-color:#14261f;background-image:linear-gradient(to right,#a6ab8033 1px,transparent 1px),linear-gradient(to bottom,#a6ab8033 1px,transparent 1px);background-size:calc(100% / 6) calc(100% / 8);border:1px solid #a6ab8066}.fortune-dialog .fortune-item{min-width:0;min-height:0;padding:3px;border:1px solid #a6ab8033;border-image:none;background:#43553a44;border-radius:0;overflow:hidden}.fortune-item svg{width:100%;height:75%;display:block}.fortune-item .carved-charm{height:100%}.fortune-item.selected{outline:2px solid #f0d88c;outline-offset:-2px;background:#c2ad4933}.fortune-dialog button:disabled{opacity:.35}.fortune-layout aside>button{display:block;width:100%;margin:10px 0;padding:12px}.fortune-balance{font-size:22px;color:#8febad}.fortune-result{min-height:55px;color:#e9d48a}.fortune-burst .fortune-result{animation:fortune-flash .8s ease-out}@keyframes fortune-flash{from{transform:scale(1.08);text-shadow:0 0 20px #70efac}to{transform:none}}@media(max-width:520px){.fortune-dialog{padding:12px}.fortune-layout{gap:12px;grid-template-columns:1fr}.fortune-grid{max-height:48dvh;aspect-ratio:6/8;margin:auto}.fortune-layout aside p{margin:8px 0}.fortune-dialog h2{font-size:26px}}@media(prefers-reduced-motion:reduce){.fortune-burst .fortune-result{animation:none}}
.fortune-ceremony{position:relative;height:105px;display:grid;place-items:center;overflow:visible}.fortune-offering{width:46px;height:64px;color:#91efb7;font-size:36px;text-align:center;filter:drop-shadow(0 0 10px #76ef9b55)}.fortune-offering svg{width:100%;height:100%}.fortune-altar{position:absolute;bottom:0;width:110px;height:22px;border-top:10px solid #a4ad8d;background:#657961;box-shadow:0 5px 0 #203529}.fortune-ceremony i{position:absolute;left:50%;top:45%;opacity:0;color:#91ffbc;font-style:normal;text-shadow:0 0 10px #54eb94}.fortune-burst .fortune-ceremony i{animation:fortune-spew 1s var(--delay) ease-out}.fortune-burst .fortune-offering{animation:fortune-shatter .5s ease-out}@keyframes fortune-spew{0%{opacity:1;transform:translate(0,0) scale(.4)}65%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(100deg)}}@keyframes fortune-shatter{from{transform:scale(1.4);filter:brightness(3)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.fortune-burst .fortune-ceremony i,.fortune-burst .fortune-offering{animation:none}}
.fortune-layout p{font-size:14px;line-height:1.5}.fortune-layout .fortune-grid{width:min(100%,calc((92dvh - 175px)*.75));margin:auto}@media(max-width:520px){.fortune-layout .fortune-grid{width:min(100%,36dvh)}}
.fortune-dialog header{gap:18px}.fortune-dialog header h2{margin:0;flex:1}.fortune-dialog header .fortune-balance{font-size:18px;white-space:nowrap}.fortune-selection{display:flex;justify-content:space-between;gap:12px;min-height:24px;margin-top:14px}.fortune-well{width:min(630px,94vw)}.fortune-well .fortune-layout{display:block;margin-top:22px}.fortune-well .fortune-grid{width:min(100%,calc((92dvh - 205px)*.75))}.fortune-well .fortune-item svg{height:100%}.fortune-well aside{max-width:420px;margin:16px auto 0}.fortune-well .fortune-result{min-height:0;margin:0;font-size:12px}.fortune-well .fortune-result:empty{display:none}.fortune-well aside>button{margin:12px 0 0}.fortune-well .fortune-selection{font-size:13px}.fortune-well .mystery-offer{background:transparent;filter:drop-shadow(0 3px 3px #0004)}.fortune-well .mystery-offer:hover:not(:disabled){background:#c2ad491a}.fortune-well .mystery-offer.selected{background:#c2ad4926}.well-reward .bundle-charms{grid-template-columns:minmax(0,280px);justify-content:center}@media(max-width:520px){.fortune-dialog header h2{font-size:23px}.fortune-dialog header{gap:8px}.fortune-dialog header .fortune-balance{font-size:14px}.fortune-well .fortune-grid{max-height:none;width:min(100%,calc((92dvh - 195px)*.75))}}
/* Two live inventories share one physical pocket size. */
body.fortune-stash-open{--well-cell:clamp(12px,min(calc((100vw - 270px)/16),4.3dvh),40px)}
body.fortune-stash-open #loadout-screen{--charm-cell:var(--well-cell)}
body.fortune-stash-open #loadout-screen .loadout-inner{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:calc(var(--well-cell)*10 + 160px);max-width:none}
body.fortune-stash-open .fortune-dialog{position:fixed;left:auto;right:16px;top:50%;bottom:auto;transform:translateY(-50%);margin:0;width:calc(var(--well-cell)*6 + 64px);padding:22px 24px 18px;max-height:94dvh;z-index:60;border:8px solid transparent;border-image:var(--bark-frame) 18 fill / 18px / 2px stretch;background:none;box-shadow:none;overflow:visible}
body.fortune-stash-open .fortune-dialog header{flex-wrap:wrap;gap:8px;position:relative}
body.fortune-stash-open .fortune-dialog h2{flex-basis:100%;font:24px/1.2 'WS BROTHER WIND',serif;padding-right:8px;text-transform:none}
body.fortune-stash-open .fortune-dialog [data-close]{position:absolute;right:-12px;top:-12px;padding:4px}
body.fortune-stash-open .fortune-dialog .fortune-grid{width:calc(var(--well-cell)*6);height:calc(var(--well-cell)*8);max-height:none;aspect-ratio:auto;box-sizing:border-box;border:0;outline:1px solid #a6ab8066;grid-template-columns:repeat(6,var(--well-cell));grid-template-rows:repeat(8,var(--well-cell));gap:0}
body.fortune-stash-open .fortune-dialog .fortune-layout{margin-top:12px}
body.fortune-stash-open .fortune-dialog .fortune-item{padding:0;border:0;filter:none}
body.fortune-stash-open .fortune-dialog aside{margin:8px 0 0}
body.fortune-stash-open .fortune-dialog [hidden]{display:none!important}
.well-item-tooltip{position:fixed;z-index:1000;pointer-events:none;width:240px;box-sizing:border-box;text-align:center}.well-unknown{font-size:38px;line-height:1.2;padding:12px 0;color:#cdd4c3}.well-price{font-size:13px;color:#8febad}
@media(max-width:650px){body.fortune-stash-open{--well-cell:clamp(10px,calc((100vw - 172px)/16),22px)}body.fortune-stash-open #loadout-screen .loadout-inner{left:6px;width:calc(var(--well-cell)*10 + 110px);padding-inline:10px}body.fortune-stash-open .fortune-dialog{right:6px;width:calc(var(--well-cell)*6 + 38px);padding-inline:11px}body.fortune-stash-open .fortune-dialog h2{font-size:15px}}

/* The shrine uses the real stash on the left, with its altar on the right. */
body.fortune-stash-open .fortune-shrine .fortune-layout{display:block}
body.fortune-stash-open .fortune-shrine .fortune-ceremony{height:150px;margin:18px 0}
body.fortune-stash-open .fortune-shrine .fortune-selection{font-size:13px;align-items:center}
body.fortune-stash-open .fortune-shrine .fortune-result{min-height:0;text-align:center}
body.fortune-stash-open .fortune-shrine .shrine-hint{font-size:13px;text-align:center;line-height:1.5}
body.fortune-stash-open .fortune-shrine [data-confirm]{font-size:13px;padding:10px 4px}
body.shrine-open #charm-tray [data-piece]{cursor:pointer}
.fortune-dialog button.fortune-offering{padding:0;border:0;border-image:none;background:none;box-shadow:none;cursor:grab;pointer-events:auto}
.fortune-dialog button.fortune-offering:disabled{opacity:1;cursor:default}
body.shrine-open #pack-drag-preview{z-index:1100}
/* One pane geometry and pocket scale for every inventory entry point. */
body{--inventory-pane-width:min(620px,calc((100vw - 40px)/2));--inventory-pane-height:92dvh;--inventory-cell:clamp(12px,calc((var(--inventory-pane-width) - 150px)/10),40px)}
body #loadout-screen.minimal-packing,body.fortune-stash-open #loadout-screen{--charm-cell:var(--inventory-cell);--well-cell:var(--inventory-cell)}
body #loadout-screen.minimal-packing .loadout-inner,body.fortune-stash-open #loadout-screen .loadout-inner,body.fortune-stash-open .fortune-dialog{position:fixed;box-sizing:border-box;width:var(--inventory-pane-width);height:var(--inventory-pane-height);max-height:var(--inventory-pane-height);max-width:none;top:50%;bottom:auto;transform:translateY(-50%);margin:0;padding:22px 24px;overflow:auto;justify-content:flex-start;gap:12px}
body #loadout-screen.minimal-packing .loadout-inner,body.fortune-stash-open #loadout-screen .loadout-inner{left:12px;right:auto}
body.fortune-stash-open .fortune-dialog{left:auto;right:12px;--well-cell:var(--inventory-cell)}
body #loadout-screen .packing-workbench,body #loadout-screen .hat-equipment{width:calc(var(--inventory-cell)*10 + 96px);flex:none}
body #emerald-stash{width:calc(var(--inventory-cell)*6);max-height:none;overflow:visible;position:relative}
body #emerald-stash [data-emerald-stacks]{display:grid;grid-template-columns:repeat(6,var(--inventory-cell));gap:0}
body #emerald-stash [data-emerald-stack],body #emerald-stash .emerald-empty{width:var(--inventory-cell);height:var(--inventory-cell);min-width:0;min-height:0;padding:2px;box-sizing:border-box}
body #emerald-stash [data-emerald-stack] svg{width:100%;height:100%}
body #emerald-stash [data-emerald-stack] b{font-size:10px;bottom:1px;right:2px}
[data-emerald-counter]{position:absolute;left:0;bottom:100%;z-index:1200;padding:10px;background:#20382e;border:1px solid #acb493;white-space:nowrap}
[data-emerald-counter] input{width:64px}[data-emerald-counter] button{padding:6px;font-size:12px}
#emerald-cursor{position:fixed;z-index:1300;pointer-events:none;width:40px;height:40px;transform:translate(-50%,-50%)}
#emerald-cursor svg{width:100%;height:100%}#emerald-cursor b{position:absolute;right:0;bottom:0;color:#efffd4}
body.fortune-stash-open .fortune-shrine .fortune-ceremony{height:320px;margin:22px 0;isolation:isolate}
.shrine-stonework{position:absolute;width:100%;height:100%;inset:0;pointer-events:none;z-index:-1}
body .fortune-dialog button.fortune-offering{position:absolute;top:32px;left:50%;transform:translateX(-50%);width:75px;height:95px;filter:drop-shadow(0 5px 4px #13291b)}
@media(max-width:700px){body{--inventory-pane-width:calc(100vw - 24px);--inventory-pane-height:44dvh;--inventory-cell:clamp(12px,calc((var(--inventory-pane-width) - 150px)/10),36px)}body #loadout-screen.minimal-packing .loadout-inner,body.fortune-stash-open #loadout-screen .loadout-inner{top:2dvh;transform:none}body.fortune-stash-open .fortune-dialog{top:50dvh;transform:none}}

/* Paired belongings and world-interaction panes, with a shared item scale. */
body{--inventory-pane-width:min(440px,calc((100vw - 48px)/2));--inventory-cell:clamp(14px,min(calc((var(--inventory-pane-width) - 64px)/6),4.8dvh),48px)}
body #inventory-panel,body #loadout-screen.minimal-packing .loadout-inner,body.fortune-stash-open .fortune-dialog{position:fixed;top:50%;bottom:auto;transform:translateY(-50%);width:var(--inventory-pane-width);height:auto;max-height:94dvh;box-sizing:border-box;padding:24px;overflow:auto;border:8px solid transparent;border-image:var(--bark-frame) 18 fill / 18px / 0 stretch;background:linear-gradient(135deg,#2d3529,#111c17 60%,#263022);box-shadow:inset 0 0 0 1px #b7a77a55,0 12px 50px #0005;color:#ead9b0;--charm-cell:var(--inventory-cell)}
body #inventory-panel{right:12px;left:auto;z-index:59;display:flex;flex-direction:column;align-items:center;gap:18px;pointer-events:auto}
body #inventory-panel[hidden]{display:none}
body #loadout-screen.minimal-packing .loadout-inner,body.fortune-stash-open .fortune-dialog{left:12px;right:auto;margin:0}
body #loadout-screen.minimal-packing{background:transparent;pointer-events:none;backdrop-filter:none}
body #loadout-screen .packing-workbench{width:calc(var(--inventory-cell)*6);display:block;margin:0;padding:0;overflow:visible}
body #loadout-screen .loadout-inner{pointer-events:auto;gap:14px}
.inventory-heading{position:relative;width:100%;text-align:center;padding:0 20px 16px!important;margin:0!important;box-sizing:border-box;border-bottom:1px solid #aa99664d}
.inventory-heading>span{font-size:9px;letter-spacing:2.5px;color:#a8ad90}
.inventory-heading h2{font:32px/1.2 'WS BROTHER WIND',serif!important;margin:8px 0 0!important;letter-spacing:2px}
#inventory-close{position:absolute;right:-12px;top:-12px;width:28px;height:28px;padding:0;font-size:23px;color:#d8c18f}
body #inventory-panel .hat-equipment{width:calc(var(--inventory-cell)*6);display:flex;flex-direction:column;gap:14px;margin:0;flex:none}
#inventory-panel #hat-equipment .hat-socket{order:-1;display:grid;place-items:center;width:100%;padding:8px 0 14px;background:radial-gradient(ellipse,#69724a33,transparent 70%)}
#inventory-panel #hat-equipment .hat-socket:before{content:'HAT';font-size:10px;letter-spacing:3px;margin-bottom:8px;color:#b2ab8b}
body #inventory-panel .hat-slot{width:calc(var(--inventory-cell)*1.8);height:calc(var(--inventory-cell)*1.8);background:#101711;box-shadow:inset 0 0 18px #0008}
#hat-storage .hat-inventory{width:calc(var(--inventory-cell)*6);grid-template-columns:repeat(6,var(--inventory-cell));gap:0}
body #hat-storage .hat-choice,body #hat-storage .hat-empty{width:var(--inventory-cell);height:var(--inventory-cell);border:1px solid #aa99662b;background:#0e191580;border-radius:0}
#inventory-panel .emerald-equipment:before{content:'EMERALDS';font-size:10px;letter-spacing:3px;color:#a1c39b}
#inventory-panel .emerald-equipment{gap:8px!important}
#inventory-panel .charm-bag-station{flex:none;width:100%;display:flex;flex-direction:column;align-items:center;position:relative}
#inventory-panel .charm-sack{margin:0;padding:30px 24px 18px;box-sizing:content-box;width:calc(var(--inventory-cell)*4)}
#inventory-panel .packing-grid{width:calc(var(--inventory-cell)*4);height:calc(var(--inventory-cell)*3)}
#inventory-panel .sack-caption{width:calc(var(--inventory-cell)*4);display:flex;justify-content:space-between;margin-top:8px;font-size:12px}
body.fortune-stash-open .fortune-dialog{--well-cell:var(--inventory-cell);z-index:60}
body.fortune-stash-open .fortune-dialog .fortune-grid{max-width:100%}
@media(max-width:600px){body{--inventory-pane-width:calc((100vw - 20px)/2);--inventory-cell:clamp(12px,calc((var(--inventory-pane-width) - 32px)/6),28px)}body #inventory-panel,body #loadout-screen.minimal-packing .loadout-inner,body.fortune-stash-open .fortune-dialog{padding:12px;max-height:96dvh;top:50%;transform:translateY(-50%)}body #inventory-panel{right:4px;gap:12px}body #loadout-screen.minimal-packing .loadout-inner,body.fortune-stash-open .fortune-dialog{left:4px}.inventory-heading h2{font-size:22px!important}.inventory-heading>span{font-size:7px;letter-spacing:1px}#inventory-panel .charm-sack{padding-inline:8px}.inventory-footer span{max-width:80%}}

body #loadout-screen #hat-storage{display:flex;flex-direction:column;gap:8px;width:calc(var(--inventory-cell)*6);margin:4px 0 24px;flex:none}
.hat-storage-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#b2ab8b}
/* Shared spare-item grid; charm powers belong only to the charm bag. */
#backpack{width:calc(var(--inventory-cell)*6);flex:none}
.backpack-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#c5b58d;font-size:13px}
.backpack-heading>span{font-family:'WS BROTHER WIND',serif;font-size:21px}
#backpack-grid{display:grid;grid-template-columns:repeat(6,var(--inventory-cell));grid-template-rows:repeat(4,var(--inventory-cell));width:calc(var(--inventory-cell)*6);height:calc(var(--inventory-cell)*4);background:#0e1915;outline:1px solid #bca67b66;box-shadow:inset 0 0 18px #0008}
#backpack-grid button{min-width:0;min-height:0;width:100%;height:100%;padding:0;border:1px solid #aa996630;border-image:none;border-radius:0;background:transparent;box-shadow:none;touch-action:none}
#backpack-grid .backpack-item{z-index:1;cursor:grab;background:#66744912}
#backpack-grid button:hover,#backpack-grid button:focus-visible{background:#c5b58d22;outline:1px solid #c5b58d}
#backpack-grid svg{display:block;width:100%;height:100%}
#backpack-grid .carved-charm{width:100%;height:100%}
.backpack-emerald{display:grid;place-items:center;position:relative;height:100%;color:#7de78e;font-size:28px}
.backpack-emerald b{position:absolute;bottom:0;right:2px;color:#e4f3ce;font:10px sans-serif}
#backpack-status{font-size:10px;line-height:1.4;color:#aeb394;margin:8px 0 0;min-height:14px}
body{--inventory-cell:clamp(14px,min(calc((var(--inventory-pane-width) - 64px)/6),4dvh),48px)}
body #inventory-panel{gap:10px;padding:18px}
#inventory-panel .inventory-heading{padding-bottom:8px!important}
#inventory-panel .inventory-heading h2{font-size:28px!important;margin-top:4px!important}
#inventory-panel #hat-equipment .hat-socket{padding:0 0 4px}
#inventory-panel #hat-equipment .hat-socket:before{margin-bottom:4px}
body #inventory-panel .hat-slot{width:calc(var(--inventory-cell)*1.4);height:calc(var(--inventory-cell)*1.4)}
#inventory-panel .charm-sack{padding:18px 18px 8px}
#inventory-panel .sack-caption{margin-top:4px}
@media(max-width:600px){body{--inventory-cell:clamp(12px,calc((var(--inventory-pane-width) - 32px)/6),28px)}body #inventory-panel{padding:12px}}

#inventory-panel .sack-caption{white-space:nowrap;gap:10px;flex-wrap:nowrap}
#inventory-panel .sack-caption>span{font-size:11px}

/* All item interfaces share the Stash frame, independent of content. */
body{--item-pane-height:min(800px,94dvh);--item-title-size:32px}
body #inventory-panel,
body #loadout-screen.minimal-packing .loadout-inner,
body.fortune-stash-open .fortune-dialog,
body #bag-inspection #charm-bag-panel{
 width:var(--inventory-pane-width);height:var(--item-pane-height);max-height:var(--item-pane-height);
 box-sizing:border-box;padding:24px;overflow:auto;flex-shrink:0;
 font-family:var(--font-ui);font-size:13px;line-height:1.4;
}
body #bag-inspection #charm-bag-panel{position:fixed;right:12px;left:auto;top:50%;transform:translateY(-50%);margin:0}
body #inventory-panel>header,
body #loadout-screen .loadout-inner>header,
body.fortune-stash-open .fortune-dialog>header,
body #bag-inspection .bag-heading{
 position:relative;display:flex;align-items:center;justify-content:center;flex:none;
 width:100%;min-height:58px;box-sizing:border-box;margin:0 0 12px!important;
 padding:0 38px 16px!important;border-bottom:1px solid #aa996680;text-align:center;gap:0;
}
body #inventory-panel>header h2,
body #loadout-screen .loadout-inner>header h2,
body.fortune-stash-open .fortune-dialog>header h2,
body #bag-inspection .bag-heading strong{
 font:400 var(--item-title-size)/1.2 'WS BROTHER WIND',serif!important;
 margin:0!important;padding:0;letter-spacing:0;text-transform:none;flex:1;
}
body #inventory-close,body #loadout-screen #stash-back,
body.fortune-stash-open .fortune-dialog [data-close],body #bag-inspection #close-bag{
 position:absolute;top:0;right:0;left:auto;display:grid;place-items:center;
 width:32px;height:32px;min-width:32px;min-height:32px;margin:0;padding:0;font-size:23px;
}
body #loadout-screen #stash-back,body.fortune-stash-open .fortune-dialog [data-close]{left:0;right:auto}
body #inventory-panel .sack-caption>span,body #inventory-panel .backpack-heading>span,
body #inventory-panel #hat-equipment .hat-socket:before,body #inventory-panel .emerald-equipment:before{
 font:400 13px/1.4 var(--font-ui);letter-spacing:0;text-transform:none;color:#c5b58d;
}
body #inventory-panel #hat-equipment .hat-socket:before{content:'Hat'}
body #inventory-panel .emerald-equipment:before{content:'Emeralds'}
body #inventory-panel small,body #inventory-panel #backpack-status,body #inventory-panel .inventory-footer{font:400 11px/1.4 var(--font-ui)}
#bag-inspection #charms{grid-template-columns:1fr}
@media(max-width:600px){
 body{--item-title-size:22px}
 body #inventory-panel,body #loadout-screen.minimal-packing .loadout-inner,
 body.fortune-stash-open .fortune-dialog,body #bag-inspection #charm-bag-panel{padding:12px}
 body #inventory-panel>header,body #loadout-screen .loadout-inner>header,
 body.fortune-stash-open .fortune-dialog>header,body #bag-inspection .bag-heading{padding-inline:28px!important;min-height:68px}
}

body #loadout-screen .stash-disposal{position:static;height:auto;margin:0;justify-content:flex-end}
body #loadout-screen.lobby-stash #stash-sort{display:flex}
body #loadout-screen #stash-trash{height:32px;width:32px;padding:5px}

/* Mixed storage keeps hats and charms in the grid; emeralds use a currency bar. */
body #hat-storage,body #inventory-panel .emerald-equipment{display:none!important}
.stash-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:10px}
.stash-currency{position:relative;display:flex;align-items:center;justify-content:flex-start;color:#b8c5a5}
.stash-emerald-counter{position:absolute;left:0;bottom:100%;z-index:1200;display:flex;align-items:center;gap:6px;padding:9px;background:#20382e;border:1px solid #acb493;box-shadow:0 5px 16px #0009;white-space:nowrap}
.stash-emerald-counter[hidden]{display:none}
.stash-emerald-counter label{font:12px var(--font-ui)}
.stash-emerald-counter input{width:68px;box-sizing:border-box;padding:4px;color:#f6f0d7;background:#101d17;border:1px solid #879b7d;font:14px var(--font-ui)}
.stash-emerald-counter button{padding:5px 7px;font-size:12px}
body #stash-emeralds{display:flex;align-items:center;min-width:134px;height:30px;padding:2px 10px 2px 3px;border:2px ridge #797860;border-radius:2px;background:#101411;box-shadow:inset 0 0 0 1px #242a22,0 2px 5px #0009;color:#e4e9d5;cursor:grab;text-align:left}
body #stash-emeralds:hover:not(:disabled),body #stash-emeralds:focus-visible{border-color:#b9b68b;background:#1c2a1e;outline:1px solid #d3c694;outline-offset:2px}
body #stash-emeralds:disabled{cursor:default;opacity:.65}
body #stash-emeralds.mixed-held{background:#193e2a;border-color:#8bc59b}
.stash-currency-icon{display:grid;place-items:center;width:23px;height:23px;margin-right:9px;border-right:1px solid #666b54;background:linear-gradient(135deg,#102f20,#1d4b31);color:#74e5a0;font-size:19px;line-height:1;text-shadow:0 0 5px #55d88799}
#stash-emerald-count{font:17px/1 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:1px}
#charm-tray,#backpack-grid,#pack-pieces{position:relative}
#pack-pieces{position:absolute;inset:0;pointer-events:none}
.mixed-cell,.mixed-item{position:absolute;box-sizing:border-box;min-width:0;min-height:0;margin:0;padding:0;border:1px solid #aa996630;border-image:none;border-radius:0;background:transparent;box-shadow:none;touch-action:none;pointer-events:auto}
.mixed-cell{z-index:0}.mixed-item{z-index:2;cursor:grab}.mixed-item.mixed-held{visibility:hidden}
.mixed-item svg,.mixed-item .carved-charm{width:100%;height:100%;display:block}
#pack-pieces .mixed-cell{pointer-events:auto}
#pack-drag-preview .backpack-emerald{height:100%}
.item-quantity{position:absolute;bottom:2px;right:3px;color:#fff3c9;font:12px var(--font-ui)}
body #charm-tray button.mixed-cell,body #pack-pieces button.mixed-cell,body #backpack-grid button.mixed-cell,
body #charm-tray button.mixed-item,body #pack-pieces button.mixed-item,body #backpack-grid button.mixed-item{
 border-image:none!important;border:1px solid #aa996630!important;background:transparent!important;box-shadow:none!important;border-radius:0;padding:0;min-width:0;min-height:0;
}
body #charm-tray button.mixed-item:hover,body #backpack-grid button.mixed-item:hover{background:#c5b58d22!important}

/* Cells are transparent hit targets over one continuous grid, never framed buttons. */
body #charm-tray,body #backpack-grid{
 background-color:#14271d66;
 background-image:linear-gradient(to right,#abb28a30 1px,transparent 1px),linear-gradient(to bottom,#abb28a30 1px,transparent 1px);
 background-size:var(--inventory-cell) var(--inventory-cell);
}
body #charm-tray button.mixed-cell,body #pack-pieces button.mixed-cell,body #backpack-grid button.mixed-cell,
body #charm-tray button.mixed-item,body #pack-pieces button.mixed-item,body #backpack-grid button.mixed-item{
 border:0!important;border-image:none!important;border-radius:0!important;background:transparent!important;
 box-shadow:none!important;filter:none!important;outline:none;transform:none;
}
body .mixed-cell::before,body .mixed-cell::after,body .mixed-item::before,body .mixed-item::after{display:none!important}
body #charm-tray button.mixed-cell:focus-visible,body #pack-pieces button.mixed-cell:focus-visible,body #backpack-grid button.mixed-cell:focus-visible{outline:1px solid #d5c48a;outline-offset:-2px}
body #loadout-screen #charm-tray{
 background-color:#14271d66!important;
 background-image:linear-gradient(to right,#abb28a38 1px,transparent 1px),linear-gradient(to bottom,#abb28a38 1px,transparent 1px)!important;
 background-size:calc(100% / 6) calc(100% / 8)!important;
}

/* Roomier pockets, content-sized frames, and a centered bag with a side backpack. */
body{--inventory-pane-width:min(580px,calc((100vw - 40px)/2));--inventory-cell:clamp(20px,calc((var(--inventory-pane-width) - 100px)/8),52px)}
body #inventory-panel,body #loadout-screen.minimal-packing .loadout-inner,
body.fortune-stash-open .fortune-dialog,body #bag-inspection #charm-bag-panel{
 top:3dvh;bottom:auto;transform:none;height:auto;min-height:0;max-height:94dvh;
}
body #loadout-screen.minimal-packing .loadout-inner,body.fortune-stash-open .fortune-dialog{--inventory-cell:clamp(26px,calc((var(--inventory-pane-width) - 80px)/6),58px)}
body #inventory-panel .inventory-bags{display:grid;grid-template-columns:2fr 4fr 2fr;gap:12px;align-items:start;width:100%;flex:none}
body #inventory-panel .charm-bag-station{grid-column:2;width:100%;min-width:0}
body #inventory-panel .sack-caption{order:-1;margin:0 0 12px;width:100%;align-items:center;gap:4px}
body #inventory-panel .charm-sack{padding:30px 10px 18px}
body #inventory-panel #backpack{grid-column:3;position:relative;isolation:isolate;width:calc(var(--inventory-cell)*2);padding-top:0;margin:0}
body #inventory-panel .backpack-heading{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:0 0 34px}
body #inventory-panel #backpack-grid{width:calc(var(--inventory-cell)*2);height:calc(var(--inventory-cell)*6);grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,1fr);background-color:#18231866;box-shadow:none}
.backpack-illustration{position:absolute;z-index:-1;pointer-events:none;left:-12%;top:24px;width:124%;height:calc(var(--inventory-cell)*6 + 65px);filter:drop-shadow(0 5px 4px #0006)}
body #inventory-panel #backpack-status{margin-top:30px;text-align:center;font-size:10px}
@media(max-width:700px){
 body{--inventory-pane-width:calc((100vw - 20px)/2);--inventory-cell:max(14px,calc((var(--inventory-pane-width) - 64px)/8))}
 body #inventory-panel .inventory-bags{gap:6px}
 body #inventory-panel .charm-sack{padding-inline:4px}
 body #inventory-panel .backpack-heading>span,body #inventory-panel .sack-caption>span{font-size:11px}
 body #inventory-panel .sack-caption{flex-wrap:wrap;justify-content:center}
 body #loadout-screen.minimal-packing .loadout-inner,body.fortune-stash-open .fortune-dialog{--inventory-cell:max(20px,calc((var(--inventory-pane-width) - 42px)/6))}
}

/* Backpack is parked for now; all loose belongings live in the wider stash. */
body #inventory-panel #backpack{display:none!important}
body #inventory-panel .inventory-bags{display:flex;justify-content:center;width:100%;padding:0}
body #inventory-panel .charm-bag-station{width:calc(var(--inventory-cell)*4);align-self:center}
body{--inventory-pane-width:min(540px,calc((100vw - 40px)*.43))}
body #loadout-screen.minimal-packing .loadout-inner{
 --inventory-pane-width:min(680px,calc((100vw - 40px)*.57));
 --inventory-cell:max(18px,min(calc((var(--inventory-pane-width) - 64px)/10),58px));
}
body #loadout-screen .packing-workbench{width:calc(var(--inventory-cell)*10)}
body #loadout-screen #charm-tray{width:calc(var(--inventory-cell)*10);background-size:10% 12.5%!important}
body #loadout-screen .stash-tabs{width:100%}
@media(max-width:700px){
 body{--inventory-pane-width:calc((100vw - 20px)*.4)}
 body #loadout-screen.minimal-packing .loadout-inner{--inventory-pane-width:calc((100vw - 20px)*.6);--inventory-cell:max(12px,calc((var(--inventory-pane-width) - 40px)/10))}
 body #loadout-screen .stash-tab{font-size:9px;padding-inline:1px}
}

.fortune-dialog .fortune-stash-note,.well-reward .fortune-stash-note{font:400 13px/1.5 var(--font-ui);color:#d2c6a2;text-align:center;margin:14px 0 8px}

/* Narrower item windows with larger, shared headings and matching close controls. */
body{
 --item-title-size:40px;
 --inventory-pane-width:min(400px,calc((100vw - 36px)*.40));
 --inventory-cell:clamp(18px,calc((var(--inventory-pane-width) - 54px)/8),52px);
}
body #loadout-screen.minimal-packing .loadout-inner{
 --inventory-pane-width:min(500px,calc((100vw - 36px)*.52));
 --inventory-cell:max(16px,min(calc((var(--inventory-pane-width) - 52px)/8),56px));
}
body.fortune-stash-open .fortune-dialog{width:var(--inventory-pane-width)}
body #loadout-screen .packing-workbench,
body #loadout-screen #charm-tray{width:calc(var(--inventory-cell)*8)}
body #loadout-screen #charm-tray{background-size:12.5% 12.5%!important}
body #inventory-panel .charm-bag-station{width:min(100%,calc(var(--inventory-cell)*4))}
body #inventory-close,body #loadout-screen #stash-back,
body.fortune-stash-open .fortune-dialog [data-close],body #bag-inspection #close-bag{
 top:0;width:32px;height:32px;min-width:32px;min-height:32px;
 display:grid;place-items:center;padding:0!important;border:0;background:transparent;
 color:#d8c18f;font-size:0!important;line-height:1;box-sizing:border-box;
}
body #inventory-close svg,body #loadout-screen #stash-back svg,
body.fortune-stash-open .fortune-dialog [data-close] svg,body #bag-inspection #close-bag svg{display:none}
body #inventory-close::after,body #loadout-screen #stash-back::after,
body.fortune-stash-open .fortune-dialog [data-close]::after,body #bag-inspection #close-bag::after{
 content:'';display:block;width:18px;height:18px;
 background:linear-gradient(45deg,transparent 46%,currentColor 47% 53%,transparent 54%),linear-gradient(-45deg,transparent 46%,currentColor 47% 53%,transparent 54%);
}
@media(max-width:700px){
 body{--item-title-size:30px;--inventory-pane-width:calc((100vw - 16px)*.40);--inventory-cell:max(11px,calc((var(--inventory-pane-width) - 28px)/8))}
 body #loadout-screen.minimal-packing .loadout-inner{--inventory-pane-width:calc((100vw - 16px)*.58);--inventory-cell:max(11px,calc((var(--inventory-pane-width) - 28px)/8))}
}

/* Keep every item window and pocket on the same scale during transfers. */
body{
 --item-pane-width:min(500px,calc((100vw - 36px)/2));
 --item-pane-height:min(800px,94dvh);
 --item-cell:max(11px,min(56px,calc((var(--item-pane-width) - 64px)/8)));
 --inventory-pane-width:var(--item-pane-width);
 --inventory-cell:var(--item-cell);
}
body #loadout-screen.minimal-packing .loadout-inner,
body.fortune-stash-open .fortune-dialog{
 --inventory-pane-width:var(--item-pane-width);
 --inventory-cell:var(--item-cell);
 --well-cell:var(--item-cell);
}
.fortune-shop .fortune-item.shop-spinning:disabled{opacity:1}
.fortune-shop .shop-spinning svg{animation:shop-charm-spin .48s linear infinite;transform-origin:center;transform-box:fill-box;filter:drop-shadow(0 0 6px #d8e9c488)}
@keyframes shop-charm-spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){.fortune-shop .shop-spinning svg{animation:none}}
body #inventory-panel,
body #loadout-screen.minimal-packing .loadout-inner,
body.fortune-stash-open .fortune-dialog{
 width:var(--item-pane-width);
 height:var(--item-pane-height);
 max-height:var(--item-pane-height);
 top:50%;
 transform:translateY(-50%);
}
body #loadout-screen .stash-collection{width:calc(var(--item-cell)*8)}
body #inventory-panel .inventory-heading h2{font-size:var(--item-title-size)!important}
body #inventory-panel .hat-slot{width:var(--item-cell);height:var(--item-cell)}
@media(max-width:700px){
 body{--item-pane-width:calc((100vw - 16px)/2);--item-cell:max(11px,calc((var(--item-pane-width) - 40px)/8))}
}
/* Keeper totals live immediately below the packed charm bag. */
body #inventory-panel .sack-caption{justify-content:center;text-align:center}
body #inventory-panel .inventory-stats{width:100%;flex:none;margin-top:0;padding:10px;border:1px solid #aa99665c;border-radius:8px;background:linear-gradient(145deg,#39432c99,#17251cdd);box-shadow:inset 0 1px 0 #d9c59221,0 5px 14px #07100b55;box-sizing:border-box}
.inventory-stats-heading{display:flex;align-items:baseline;justify-content:space-between;gap:4px;padding-bottom:8px;border-bottom:1px solid #b9a47545}
.inventory-stats-heading h3{margin:0;font:20px/1.1 var(--font-nature);color:#ead9ab}
body #inventory-panel .inventory-stats-heading small{font:9px/1.2 var(--font-ui);color:#b6bda1;text-align:right}
.inventory-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:7px}
body #inventory-panel .inventory-stat{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;min-height:42px;padding:5px 6px;border:1px solid #a49e7545;border-radius:4px;background:#17251ebd;text-align:left;box-shadow:inset 0 1px #e2d5ab0b;cursor:help}
body #inventory-panel .inventory-stat:hover,body #inventory-panel .inventory-stat:focus-visible{border-color:#dfc887;background:#2b3929;outline:1px solid #dfc887;z-index:4}
.inventory-stat-label{font:9px/1.15 var(--font-ui);color:#c5c9b8}
.inventory-stat-value{display:block;margin-top:3px;font:16px/1.05 var(--font-ui);font-variant-numeric:tabular-nums;color:#f0eee2;white-space:nowrap}
.inventory-stat.is-changed .inventory-stat-value{color:#b7e59d;text-shadow:0 0 8px #8bc36a55}
.inventory-stat.is-lower .inventory-stat-value{color:#e9b185;text-shadow:0 0 8px #dd975055}
.inventory-stat.is-lift-loss{border-color:#dca37a99;background:#4b3128dd}
.inventory-stat.is-lift-loss .inventory-stat-value{color:#ffc398;text-shadow:0 0 8px #f1a47477}
.inventory-stat.is-lift-gain{border-color:#aad59399;background:#2b442cdd}
.inventory-stat.is-lift-gain .inventory-stat-value{color:#c9f4b1}
.inventory-stat-change{position:absolute;top:4px;right:5px;font:10px/1 var(--font-ui);color:#ffd1aa;font-variant-numeric:tabular-nums}
.inventory-stat.is-lift-gain .inventory-stat-change{color:#c9f4b1}
.inventory-stat-tip{display:none;position:absolute;bottom:calc(100% + 6px);left:0;z-index:20;width:min(235px,calc(100vw - 44px));padding:10px 12px;box-sizing:border-box;border:1px solid #b49f70;border-radius:6px;background:#111c17f8;box-shadow:0 8px 22px #0009;color:#e2ddc8;text-align:left;pointer-events:none}
.inventory-stat:nth-child(even) .inventory-stat-tip{left:auto;right:0}
.inventory-stat:hover .inventory-stat-tip,.inventory-stat:focus-visible .inventory-stat-tip{display:grid;gap:5px}
.inventory-stat-tip b{color:#e9d49a;font:12px/1.25 var(--font-ui)}
.inventory-stat-tip span{font:11px/1.3 var(--font-ui);color:#d9e4c3}
.inventory-stat-tip span:first-of-type{color:#aea995}
.inventory-stat-tip em{font:10px/1.3 var(--font-ui);color:#aeb9a5}
.inventory-bonuses{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #b9a47545}
.inventory-bonus-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.inventory-bonus{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:6px 7px;border:1px solid #a49e7545;border-radius:4px;background:#17251ebd}
.inventory-bonus strong{color:#e9d49a;font:11px/1.2 var(--font-ui)}
.inventory-bonus.is-stacked strong{padding-right:26px}
.inventory-bonus-stack{position:absolute;top:5px;right:6px;color:#b7e59d;font:11px/1.2 var(--font-ui);font-variant-numeric:tabular-nums}
.inventory-bonus span{color:#d9e4c3;font:10px/1.3 var(--font-ui)}
.inventory-bonus small{color:#b7e59d;font:9px/1.2 var(--font-ui)}
@media(max-width:700px){body #inventory-panel .inventory-stats{padding:8px 6px}.inventory-stats-heading h3{font-size:15px}body #inventory-panel .inventory-stats-heading small{font-size:8px}.inventory-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}body #inventory-panel .inventory-stat{min-height:44px;padding:4px}.inventory-stat-label{font-size:8px}.inventory-stat-value{font-size:13px}}
@media(max-width:700px){.inventory-bonus-list{grid-template-columns:1fr}}
/* The bag stays in place while the longer stats list scrolls beneath it. */
body #inventory-panel{--inventory-cell:max(18px,min(var(--item-cell),6.2dvh));gap:6px;overflow:hidden}
body #inventory-panel>header{min-height:48px;margin-bottom:0!important;padding-bottom:8px!important}
body #inventory-panel #hat-equipment{gap:0}
body #inventory-panel #hat-equipment .hat-socket{padding:0;background:none}
body #inventory-panel #hat-equipment .hat-socket::before{content:none}
body #inventory-panel .hat-slot{width:var(--inventory-cell);height:var(--inventory-cell)}
body #inventory-panel .charm-sack{padding:14px 8px 8px}
body #inventory-panel #packing-actions{left:auto;right:-40px;bottom:2px;flex-direction:column;width:34px;gap:4px}
body #inventory-panel .inventory-stats{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body #inventory-panel .inventory-stats-heading{flex:none}
body #inventory-panel .inventory-stats-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a49e75 #17251e;padding-right:2px}
body #inventory-panel .inventory-stat-tip{top:calc(100% + 6px);bottom:auto}