인벤토리 그리드

<div class="igrid" id="igrid"></div>

.igrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(4px,1.6vmin,8px);width:min(92%,420px)}
.islot{position:relative;aspect-ratio:1;border-radius:7px;background:var(--surface);border:1px solid var(--line)}
.islot.filled{border-color:var(--tier,var(--line))}
.iicon{position:absolute;inset:20%;border-radius:4px;background:var(--tier,var(--muted))}
.icount{position:absolute;right:3px;bottom:2px;font:800 clamp(6px,1.8vmin,9px) monospace;color:var(--fg)}
.ibadge{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--accent-2);
  display:grid;place-items:center;font:800 7px monospace;color:#fff;opacity:0;transform:scale(0.4);transition:all .3s cubic-bezier(.3,1.6,.4,1)}
.ibadge.show{opacity:1;transform:scale(1)}

const igrid=document.getElementById('igrid');
const tiers=['var(--muted)','var(--accent-3)','var(--accent)','#a259ff'];
const slots=[];
for(let i=0;i<24;i++){
  const el=document.createElement('div');
  el.className='islot';
  igrid.appendChild(el);
  slots.push(el);
}
function fillSlot(i, count){
  const el=slots[i];
  const tier=tiers[Math.floor(Math.random()*tiers.length)];
  el.classList.add('filled');
  el.style.setProperty('--tier', tier);
  el.innerHTML='<div class="iicon"></div>'+(count>1?'<div class="icount">x'+count+'</div>':'')+'<div class="ibadge">N</div>';
  requestAnimationFrame(function(){ el.querySelector('.ibadge').classList.add('show'); });
  setTimeout(function(){
    const b=el.querySelector('.ibadge');
    if(b) b.classList.remove('show');
  }, 1600);
}
for(let s=0;s<14;s++){ fillSlot(s, Math.random()<0.4 ? Math.ceil(Math.random()*9) : 1); }
document.querySelectorAll('.ibadge').forEach(function(b){ b.classList.remove('show'); });
let filled=14;
function tick(){
  if(filled>=slots.length){ filled=14; setTimeout(tick, 1400); return; }
  fillSlot(filled, Math.random()<0.4 ? Math.ceil(Math.random()*9) : 1);
  filled++;
  setTimeout(tick, 420);
}
setTimeout(tick, 500);