.inventory {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
  
  /* Use cell size directly or simpler calculation */
  grid-template-rows: repeat(3, calc(var(--grid-cell-size) * 0.9));
}

#player1-inventory,
#player1-inventory-right {
  grid-template-columns: calc(var(--grid-cell-size) * 0.9);
  border-right: 2px solid var(--accent-cyan);
}

#player1-inventory-right {
  border-right: none;
  border-left: 2px solid var(--accent-cyan);
}

body[data-players="2"] #player1-inventory,
body[data-players="2"] #player2-inventory {
  grid-template-columns: calc(var(--grid-cell-size) * 0.9);
}

.inventory .grid-cell {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
}

.inventory .grid-cell:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Make tiles in inventory slightly smaller */
.inventory .tile {
  transform: scale(0.9);
}
.inventory .tile:hover {
  transform: scale(1.5) translateY(-10px);
  z-index: 500;
}