/* Pocket bar and dragged items. */
/* inventory: a pocket bar above the main buttons; items are tapped (name, description) or dragged onto things */
.inv { display: flex; align-items: center; gap: 8px; padding-block: 6px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); background: var(--panel-2); border-top: 1px solid var(--line); min-height: 58px; box-sizing: border-box; }
.inv-lbl { font-family: var(--f-type); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); flex: none; }
.inv-slots { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; padding: 2px; }
.inv-slots::-webkit-scrollbar { display: none; }
.slot { position: relative; flex: none; width: 48px; height: 48px; border-radius: 10px; border: 1.5px dashed var(--line); background: transparent; padding: 0; display: grid; place-items: center; touch-action: none; }
.slot.full { border-style: solid; background: var(--file); border-color: var(--file-2); cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.slot svg { width: 38px; height: 38px; pointer-events: none; }
.slot .prog { position: absolute; right: -5px; bottom: -6px; padding: 1px 5px; border-radius: 999px; background: var(--ember); color: var(--ember-ink); font: 700 10.5px/1.4 var(--f-body); font-variant-numeric: tabular-nums; pointer-events: none; }
.slot.target { box-shadow: 0 0 0 3px var(--ember), 0 0 14px rgba(240,138,60,.6); }
.slot.new { animation: pop .35s ease-out; }
.slot.lift { opacity: .35; }
@keyframes shake { 20%, 60% { transform: translateX(-6px) rotate(-3deg); } 40%, 80% { transform: translateX(6px) rotate(3deg); } }
.shake { animation: shake .4s ease-in-out; }
.item-ghost { position: fixed; z-index: 30; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 12px; background: var(--file); display: grid; place-items: center; pointer-events: none; box-shadow: 0 10px 22px rgba(0,0,0,.45); transform: rotate(-6deg) scale(1.08); }
.item-ghost svg { width: 44px; height: 44px; }
.item-ghost.over { box-shadow: 0 0 0 3px var(--ember), 0 10px 22px rgba(0,0,0,.45); }
.drop-ring { position: absolute; border-radius: 50%; border: calc(4px * var(--inv)) dashed var(--ember); background: rgba(240,138,60,.14); pointer-events: none; }
#toast .item-head { display: flex; gap: 10px; align-items: center; }
#toast .item-head svg { width: 44px; height: 44px; flex: none; }