/* Town services share the left dock; the ordinary backpack stays on the right. */
body dialog:is(#bank-dialog,#shop-dialog,#craft-dialog).service-panel.docked-panel{position:absolute;inset:calc(var(--panel-top,0px) + 4px) auto auto 4px;margin:0;width:min(49%,calc((var(--panel-height,90dvh) - 8px)*.716));height:auto;aspect-ratio:1062/1482;max-width:none;max-height:none;box-sizing:border-box;padding:0;border:0;overflow:visible;z-index:30;background-color:transparent;background-position:center;background-size:100% 100%;background-repeat:no-repeat;box-shadow:none;color:#eee9de;container-type:inline-size}
body #bank-dialog.service-panel{background-image:url('assets/ui/bank-menu.png')}
body #shop-dialog.service-panel{background-image:url('assets/ui/shop-menu.png')}
body #craft-dialog.service-panel{background-image:url('assets/ui/crafting-menu.png')}
body dialog.service-panel .service-close{position:absolute;right:3.4%;top:5.7%;width:6.2%;height:3.6%;padding:0;min-height:0;font-size:0;opacity:0;z-index:5}
body dialog.service-panel .service-close:focus-visible{opacity:1;background:transparent;outline:2px solid white}
#bank-dialog.service-panel>.bag-header{position:static;padding:0;border:0;background:none}
#bank-dialog.service-panel>.bag-header>div{display:none}
.service-panel .service-body{position:absolute;inset:18% 8% 8%;overflow:auto}
#bank-dialog.service-panel .bank-columns{display:block}
#bank-dialog.service-panel .bank-columns>section:first-child{display:none}
#bank-dialog.service-panel .bank-grid{min-height:72px;padding:4px;display:grid;grid-template-columns:repeat(auto-fill,64px);gap:6px;max-height:none;overflow:visible}
#bank-dialog.service-panel .bank-controls{display:block;margin:0 0 10px}
#bank-dialog.service-panel .bank-tabs{display:flex;flex-wrap:wrap;gap:4px}
#bank-dialog.service-panel .bank-purchase{display:flex;flex-wrap:wrap;gap:6px;font-size:11px;margin-top:6px}
#bank-dialog.service-panel button:not(.bag-item):not(.service-close){padding:5px 8px;min-height:28px;font-size:11px}
#bank-dialog.service-panel h3{font-size:12px;margin:8px 0}
#bank-dialog.service-panel .bank-detail{display:none}
#bank-dialog.service-panel .bank-status{font-size:11px;margin:8px 0}
#shop-dialog .shop-panel{position:absolute;inset:14% 8% 8%;padding:0;margin:0;border:0;background:none;box-shadow:none;overflow:auto;display:flex;flex-direction:column;gap:8px}
#shop-dialog .shop-panel[hidden]{display:none}
#shop-dialog .shop-panel>.eyebrow,#shop-dialog .shop-panel>h2{display:none}
#shop-dialog .shop-tabs{order:-2;display:flex;margin:0;padding:0;border:0;width:100%;height:34px;flex:none}
#shop-dialog .shop-tabs button{width:50%;font-size:0;border:0;background:none;min-height:0;padding:0}
#shop-dialog .shop-tabs button[aria-selected=true]{border-bottom:1px solid #a4d7f5}
#shop-dialog .shop-wallet{order:-1;font-size:11px;margin:0}
#shop-dialog .shop-grid{display:grid;grid-template-columns:repeat(auto-fill,64px);grid-auto-rows:64px;gap:6px;max-height:none;overflow:visible;flex:none;padding:0}
#shop-dialog .shop-detail{padding:8px;min-height:0;font-size:11px}
#shop-dialog .shop-detail .item-description,#shop-dialog .shop-inspection{display:none}
#shop-dialog .shop-detail h3{font-size:12px}
#shop-dialog .shop-pages{margin:0;gap:4px}
#shop-dialog .shop-pages button{padding:4px 8px;min-height:24px}
#shop-dialog .shop-notice{font-size:11px;margin:0}
#craft-dialog .soul-panel{position:absolute;inset:14% 8% 9%;padding:0;margin:0;border:0;background:none;box-shadow:none;overflow:auto}
#craft-dialog .soul-panel>.eyebrow,#craft-dialog .soul-panel>h2,#craft-dialog .soul-subtitle{display:none}
#craft-dialog .soul-circle{margin:10px auto;padding:0;max-width:240px}
#craft-dialog .soul-core{width:64px;box-sizing:border-box;padding:4px}
#craft-dialog .soul-core img{width:54px;height:54px}
#craft-dialog .soul-slots{margin-top:10px;justify-content:center;gap:16px}
#craft-dialog .soul-slot{width:64px;height:64px;min-height:64px;padding:4px}
#craft-dialog .soul-preview{box-sizing:border-box;width:min(100%,400px);margin:0 auto;min-height:0;padding:8px;font-size:11px;text-align:center}
#craft-dialog .soul-preview p{margin:5px 0}
#craft-dialog .soul-craft-button{display:block;width:fit-content;min-width:150px;max-width:100%;margin:8px auto;padding:5px 16px;min-height:28px;font-size:12px;letter-spacing:1px}
#craft-dialog .soul-services h3{font-size:13px;margin:6px 0}
#craft-dialog .soul-services{width:min(100%,310px);margin:8px auto 0;padding-top:4px}#craft-dialog .soul-services button{width:100%;padding:4px 10px;min-height:28px;margin:4px auto 0;font-size:12px;line-height:1.2;text-align:center}
#craft-dialog .soul-result{margin:6px 0;min-height:0;font-size:11px}
#craft-dialog .craft-source-tabs{position:absolute;left:8%;right:8%;bottom:6%;display:flex;gap:6px;margin:0;padding:0;border:0}
#craft-dialog .craft-source-tabs button{flex:0 1 100px;min-height:28px;padding:4px 12px;font-size:12px;line-height:1.2;text-align:center}
#craft-dialog .craft-bank{position:absolute;left:8%;right:8%;top:58%;bottom:10%;overflow:auto;background:#0c1421;border:1px solid #a39578;padding:8px;z-index:2}
#craft-dialog .craft-bank[hidden]{display:none}
#craft-dialog .craft-bank h3{font-size:12px;margin:0 0 8px}
#craft-bank-items{display:grid;grid-template-columns:repeat(auto-fill,64px);gap:6px}
#craft-bank-items .bag-item{width:64px;height:64px;padding:4px}
#craft-bank-items .item-icon{width:100%;height:100%;display:grid;place-items:center}

#craft-dialog .craft-source-tabs{position:static;display:flex;justify-content:center;gap:8px;margin:10px auto 6px}#craft-dialog .craft-bank{position:static;max-height:220px;margin:0;overflow:auto}

#craft-dialog #soul-select{display:block;box-sizing:border-box;width:min(100%,400px);margin:0 auto;min-height:30px;padding:5px 8px;font-size:12px;text-align:center;text-align-last:center}
#craft-dialog .soul-result:empty{display:none}
/* Reuse the inventory artwork as a CSS crop, including its coin and gold frame. */
#bank-dialog .bank-gold{position:absolute;right:8%;top:11.5%;width:24%;aspect-ratio:224/60;background-image:url('assets/ui/inventory-frame2.png');background-size:474.107% 2470%;background-position:50.119% 5.7665%;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-left:5%;font:clamp(10px,2.7cqw,16px) Georgia;color:#ffe3a2}
#bank-dialog .bank-purchase>span{display:none}
#craft-dialog .craft-source-tabs,#craft-dialog .craft-bank{display:none!important}
#bank-dialog.service-panel .bank-columns .bank-grid{grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:auto;gap:4px;min-height:0;padding:4px;align-content:start}
#bank-dialog.service-panel .bank-grid>.bag-item,#bank-dialog.service-panel .bank-empty-slot{box-sizing:border-box;width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:1;padding:2px;margin:0;position:relative}
#bank-dialog.service-panel .bank-empty-slot{border:1px solid #81718c88;border-radius:2px;background:#131c2b88}
#bank-dialog.service-panel .bank-grid .item-icon{display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0}
#bank-dialog.service-panel .bank-grid .item-icon canvas,#bank-dialog.service-panel .bank-grid .soul-inventory-item>img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
#bank-dialog .bank-gold-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;margin:8px 0 12px}
#bank-dialog .bank-gold-controls input{box-sizing:border-box;width:100px;min-width:70px;min-height:28px;padding:4px 6px;background:#101725;color:#ffe3a2;border:1px solid #958c8b;text-align:center;font-size:12px}
#bank-dialog.service-panel .bank-gold-controls button{padding:4px 7px;min-height:28px;font-size:11px}
#bank-dialog.service-panel .bank-gold-controls button{background:var(--popup-button);color:var(--popup-text);border:3px double #958c8b;border-radius:3px;box-shadow:inset 0 0 0 2px #080d16;font-family:Georgia,serif;text-align:center}
/* Hit areas follow the painted balance, Amount, and transfer controls. */
body #bank-dialog.service-panel{background-image:url('assets/ui/bank-menu.png')}
#bank-dialog .bank-gold{left:78%;right:auto;top:8.05%;width:10.5%;height:3%;aspect-ratio:auto;background:none;padding:0;font-size:clamp(10px,2.7cqw,18px);line-height:1;white-space:nowrap}
#bank-dialog.service-panel .service-close{top:6.05%;right:1.9%;width:6.6%;height:4.4%}
#bank-dialog .service-body{inset:18% 8% 20%}
#bank-dialog .bank-gold-controls{position:absolute;inset:0;margin:0;display:block;pointer-events:none}
#bank-dialog .bank-gold-controls>*{position:absolute;pointer-events:auto}
#bank-dialog .bank-gold-controls input{left:43%;top:88.1%;width:14%;height:2.8%;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:transparent;font:clamp(10px,2.8cqw,18px) Georgia;color:#ffe3a2;appearance:textfield}
#bank-dialog .bank-gold-controls input:not(:placeholder-shown){background:#0c1117}
#bank-dialog .bank-gold-controls input::-webkit-inner-spin-button,#bank-dialog .bank-gold-controls input::-webkit-outer-spin-button{appearance:none;margin:0}
#bank-dialog.service-panel .bank-gold-controls button{top:87.25%;height:4.6%;padding:0;min-height:0;font-size:0;background:none;border:0;box-shadow:none;opacity:0}
#bank-dialog.service-panel .bank-gold-controls button[data-gold-direction="withdraw"][data-gold-all="false"]{left:10%;width:18.5%}
#bank-dialog.service-panel .bank-gold-controls button[data-gold-direction="deposit"][data-gold-all="false"]{left:63%;width:18%}
#bank-dialog.service-panel .bank-gold-controls button[data-gold-all="true"]{top:87.9%;height:3.5%;width:6.5%}
#bank-dialog.service-panel .bank-gold-controls button[data-gold-direction="withdraw"][data-gold-all="true"]{left:29.5%}
#bank-dialog.service-panel .bank-gold-controls button[data-gold-direction="deposit"][data-gold-all="true"]{left:82%}
#bank-dialog.service-panel .bank-gold-controls button:is(:hover,:focus-visible){opacity:1;outline:1px solid #d8d4ed;background:#bcdfff12}

#bank-dialog.service-panel .bank-gold-controls button:not(.bag-item):not(.service-close){padding:0;min-height:0;font-size:0;border:0;box-shadow:none;background:transparent;color:transparent}
#bank-dialog.service-panel .bank-gold-controls button:not(.bag-item):not(.service-close):is(:hover,:focus-visible){background:#bcdfff12;outline:1px solid #d8d4ed}