Нужно сверстать игровое поле

Если вы играли в игру "Дурак Онлайн" на мобиле, то вам должно быть всё понятно сразу, но попробую объяснить подробно:

1. По факту, мне нужно почти такое же игровое поле с этими же механиками но в web интерфейсе на VueJS
2. Нам надо игровое поле на 4х4
3. из этого поля 4х4 мне нужно центральное поле которое занимает 4 клетки, первые клетки в каждом столбце не участвуют кроме центральной, там лежит "колода карт"
4. вся колода должна быть реализована с помощью css т.е, рубашки и карты я подгружаю, но "руки" и колоды делаются вычислениями на css
5. При этом каждая зона игрока респонсивна относительно себя(элементы в ней должны уменьшаться если экран маленький), а сама клетка относительно игрового поля в процентах
6. Самое важное центральное поле должно быть отдельной сущностью(если рассматривать это в парадигме VueJS проекта, это должно быть SFC, т.е код центрального поля независим от общей вёрстки, но есть входящие пропсы), так как "игры" могут быть разные, может быть и "покер" и "21" и "108" и совершенно не карточными, а настольными

В прикреплённых файлах, референс и видение проекта