/* Native item icons are small raster artwork. Keep their intrinsic size. */
:root{--item-cell:40px;--item-art-width:32px;--item-art-height:96px}
html body img[data-item-art],html body img[src^="/icons/"]{display:block;position:static!important;inset:auto!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;max-width:min(100%,var(--item-art-width))!important;max-height:min(100%,var(--item-art-height))!important;object-fit:contain!important;transform:none!important;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
/* Scrolling wins until the pointer controller completes a deliberate hold. */
html body .slot,html body .slot.occupied,html body [data-wear],html body [data-drop],html body [data-buy],html body [data-market-slot]{touch-action:pan-y!important}
#panel-inventory.inventory-workspace #inventory{--inventory-cell:var(--item-cell)}
#panel-inventory.inventory-workspace .inventory-bag>.segmented button{min-height:34px;font-size:16px}
#panel-inventory.inventory-workspace #inventory>.slot b{font-size:11px;right:3px;bottom:2px}
/* Equipment stays at the original artwork's 156 by 188 resolution. */
#panel-inventory .inventory-equipment .equipment{width:156px;height:188px}
#panel-inventory .equipment button{width:32px;height:32px}
#panel-inventory .equipment [data-wear="90"]{left:42px;top:40px;height:64px}
#panel-inventory .equipment [data-wear="91"]{left:42px;top:5px}
#panel-inventory .equipment [data-wear="92"]{left:42px;top:148px}
#panel-inventory .equipment [data-wear="93"]{left:78px;top:70px}
#panel-inventory .equipment [data-wear="94"]{left:6px;top:6px;height:96px}
#panel-inventory .equipment [data-wear="95"]{left:117px;top:87px}
#panel-inventory .equipment [data-wear="96"]{left:117px;top:55px}
#panel-inventory .equipment [data-wear="97"]{left:5px;top:116px}
#panel-inventory .equipment [data-wear="98"]{left:78px;top:116px}
#panel-inventory .equipment [data-wear="99"]{left:117px;top:4px}
#panel-inventory .equipment [data-wear="100"]{left:78px;top:38px}
/* Original client costume board and its own head/body slot coordinates. */
#panel-inventory .inventory-costumes{box-sizing:border-box;gap:12px;padding:12px;margin:0;background:transparent;overflow:hidden}
#panel-inventory .inventory-costumes:before{display:none}
#panel-inventory .inventory-costume-piece{width:100%;max-width:204px;padding:0}
#panel-inventory .inventory-costume-slot{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;max-width:100%;padding:0;text-align:left;min-width:0}
#panel-inventory .costume-slot-art{display:grid;place-items:center;width:32px;height:32px;flex:none;padding:0;background:url('/ui/assets/metin2/equipment.png') -42px -5px/156px 188px no-repeat;filter:none}
#panel-inventory .costume-body .costume-slot-art{height:64px;background-position:-42px -40px}
#panel-inventory .costume-slot-copy{display:block;min-width:0;flex:1}
#panel-inventory .costume-slot-copy strong{display:block;font:14px Georgia;color:#dfc99a}
#panel-inventory .costume-slot-copy small{display:block;font:12px/1.4 Arial;color:#b3ad9a;margin-top:4px;overflow-wrap:anywhere}
#panel-inventory .costume-equipment-board{position:relative;width:164px;height:129px;flex:none;background:url('/ui/assets/metin2/costume-mounts-v2.webp') center/164px 129px no-repeat}
#panel-inventory .costume-equipment-board .inventory-costume-slot{position:absolute;left:70px;top:14px;width:29px;height:31px;min-height:0;gap:0;border:0;padding:0;background:none;box-shadow:none}
#panel-inventory .costume-equipment-board .costume-body{top:49px;height:62px}
#panel-inventory .costume-equipment-board .costume-slot-art{width:100%;height:100%;background:none}
#panel-inventory .costume-equipment-board .costume-slot-copy{display:none}
#panel-inventory .costume-equipment-board .inventory-costume-slot:hover{outline:1px solid #c2a165}
#panel-inventory .costume-mount-slot{position:absolute;left:123px;top:18px;width:30px;height:28px;min-width:0;min-height:0;padding:2px;border:0;background:transparent;box-shadow:none;display:grid;place-items:center;touch-action:pan-y}
#panel-inventory .costume-mount-caption{margin:0;max-width:210px;text-align:center;font:11px/1.4 Arial;color:#c6b997}
/* Every backpack uses the same compact five-column footprint. */
html body .market-selling .market-backpack{--market-cell:var(--item-cell)}
#storekeeper-sheet #storage-items,#storekeeper-sheet .inventory-grid{--inventory-cell:var(--item-cell);grid-template-columns:repeat(5,var(--item-cell));grid-auto-rows:var(--item-cell);grid-template-rows:repeat(9,var(--item-cell))}
#village-shop{--vendor-cell:var(--item-cell)}
.merchant-layout .inventory-grid,.merchant-layout .storage-grid{grid-template-columns:repeat(5,var(--item-cell));grid-auto-rows:var(--item-cell);grid-template-rows:repeat(9,var(--item-cell))}
.merchant-layout .slot,.merchant-layout .storage-grid .slot{width:var(--item-cell);background-size:var(--item-cell) var(--item-cell)}
/* Small framed previews; tall weapons fit inside instead of being enlarged. */
html body .item-portrait,html body .item-sheet .item-portrait,html body .market-item-dialog .item-portrait{display:grid;place-items:center;width:42px;min-width:42px;height:58px;min-height:58px;padding:8px;flex:none;box-sizing:border-box;overflow:hidden}
html body .item-portrait img[data-item-art],html body .item-portrait img[src^="/icons/"]{max-width:26px!important;max-height:42px!important}
html body .loot-refined .loot-icon{display:grid;place-items:center;width:42px;height:54px;min-height:54px;flex:0 0 42px;padding:4px}
html body .market-item-slot{display:grid;place-items:center;width:40px;min-width:40px;height:52px;padding:4px;isolation:isolate}
/* The themed slot has an opaque well. Paint artwork above its frame layer. */
html body .market-item-slot img[data-item-art],html body .market-item-slot img[src^="/icons/"]{position:relative!important;z-index:1}
html body .market-full-page .market-row,html body .market-full-page .market-owned-row{grid-template-columns:40px minmax(0,1fr) auto!important;gap:10px!important;min-height:64px!important;padding:9px 0!important}
html body #panel-itemshop .itemshop-slot,html body .itemshop-inspect .itemshop-slot{width:46px;height:62px;padding:4px;box-sizing:border-box}
html body .shop-inbox-icon{width:42px;height:58px;padding:4px;box-sizing:border-box}
html body .shop-inbox-item{gap:10px;padding:8px 10px}
html body .item-summary{gap:12px}
html body .itemshop-inspect{gap:12px}
.timed-item-status{display:flex;flex-direction:column;align-items:center;gap:4px;margin:10px 0;font:13px/1.4 Arial,sans-serif;color:#dbc28c;font-variant-numeric:tabular-nums}
.timed-item-status small{font-size:11px;color:#aaa596}
.timed-item-selected{color:#bad8a5}
html body .market-sell-item>img,html body .gather-tool>img,html body .gather-purchase>img{max-height:64px!important;max-width:32px!important}
@media(max-width:849px){#panel-inventory .inventory-equipment-body{padding:12px}#panel-inventory .inventory-equipment-stage{min-height:212px}#panel-inventory.inventory-workspace .inventory-layout{gap:12px}}
@media(max-width:360px){:root{--item-cell:38px}}