/* Emberfall ui2.css (v0.5.3 preview): painted item icons fill their slots, drag-and-drop feedback, bigger close X (Tyler Oct 18 5:17 PM). */
/* icons: the painted icon carries its own frame, so it fills more of the slot */
.packgrid .slot img,.grid .slot img{width:90%!important;height:90%!important;margin:5%!important;object-fit:contain}
.cw .slot.cws img,.aed .slot.cws img{width:74%!important;height:74%!important}
.row img{border-radius:3px}
/* drag and drop */
#panel .slot,#aebag .slot{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:none}
#panel .slot:not(.empty),#aebag .slot:not(.empty){cursor:grab}
body.ivdrag,body.ivdrag *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}
#ivghost{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;opacity:.92;filter:drop-shadow(0 6px 10px rgba(0,0,0,.75));will-change:transform}
#ivghost img{width:100%;height:100%;display:block}
#ivghost b{position:absolute;right:6%;bottom:4%;font:800 calc(13px*var(--hk,1))/1 system-ui,sans-serif;color:#fff;text-shadow:0 0 2px #000,0 1px 1px #000}
#ivghost.ivd-back{transition:transform .16s ease-out,opacity .16s;opacity:.35}
.slot.ivd-src{opacity:.38;outline:1px dashed #c9a45a;outline-offset:-3px}
.slot.ivd-ok,.cw-fig.ivd-ok{box-shadow:inset 0 0 0 2px rgba(120,220,120,.55),0 0 6px rgba(120,220,120,.35)!important}
.slot.ivd-hover,.cw-fig.ivd-hover{box-shadow:inset 0 0 0 2px #8ef08e,0 0 12px rgba(140,240,140,.8)!important;border-color:#8ef08e!important}
.slot.ivd-bad,.cw-fig.ivd-bad{box-shadow:inset 0 0 0 2px #e05a4a,0 0 10px rgba(230,80,60,.6)!important;border-color:#e05a4a!important}
/* bigger close X: conversation / bank / shop / character windows (#pclose) and the AE windows (.aex). ~2x the old 14 px,
   with an invisible hit area of ~38 px at 1080p; everything scales with the HUD (--hk is 2 at 4K). */
body #panel #pclose,body.aeui #panel #pclose{position:relative!important;width:calc(26px*var(--hk,1))!important;height:calc(26px*var(--hk,1))!important;min-width:0!important;padding:0!important;margin:0 0 0 calc(6px*var(--hk,1))!important;border:1px solid #8a6e30!important;border-image:none!important;border-radius:3px!important;background:linear-gradient(#2a2010,#120d06)!important;color:#f0d78a!important;font:700 calc(15px*var(--hk,1))/1 Verdana,sans-serif!important;display:inline-flex!important;align-items:center;justify-content:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,230,160,.18),0 0 0 1px #000!important;cursor:pointer;transition:background .1s,color .1s,box-shadow .1s}
body #panel #pclose::before{content:"";position:absolute;inset:calc(-6px*var(--hk,1))}
body #panel #pclose:hover,body #panel #pclose:focus-visible{background:linear-gradient(#7a2a18,#40100a)!important;color:#fff!important;border-color:#e8c060!important;box-shadow:0 0 0 1px #000,0 0 8px rgba(232,192,96,.55)!important}
body.aeui .aex{position:relative!important;width:calc(16px*var(--hk,1))!important;height:calc(16px*var(--hk,1))!important;font:700 calc(11px*var(--hk,1))/1 Verdana,sans-serif!important;display:inline-flex!important;align-items:center;justify-content:center;border-color:#8a6e30!important;color:#f0d78a!important}
body.aeui .aex::before{content:"";position:absolute;inset:calc(-10px*var(--hk,1)) calc(-11px*var(--hk,1))}
body.aeui .aex:hover{background:#7a2a18!important;color:#fff!important;border-color:#e8c060!important}