.vh-card-tables { margin: 1.5rem 0; padding-top: 1.2rem; border-top: 1px solid #ffffff30; }
.vh-card-tables-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.buurthuis-single-activiteit .vh-card-tables h3 { font-size: 1.25rem; margin: 0; color: #fff; }
.vh-card-tables-game { color: #c9e3e9; font-size: .85rem; }
.vh-activity-participants .vh-card-tables-note { color: #c9e3e9; font-size: .85rem; margin: .45rem 0 1rem; }
.vh-card-tables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 300px)); gap: 1rem; }
.vh-card-table { margin: 0; padding: 1rem; border: 1px solid #ffffff30; border-radius: 16px; background: #ffffff08; }
.vh-card-table-visual { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1; margin: 0 auto .75rem; }
.vh-card-table-felt { position: absolute; inset: 28% 25%; border-radius: 38%; background: radial-gradient(ellipse at 40% 35%, #3c856b, #246551); border: 6px solid #b28656; box-shadow: 0 4px 0 #795a3c, inset 0 0 0 2px #d0ba8550, 0 10px 20px #001e2850; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; }
.vh-card-table-number { color: #fff5d8; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.vh-card-table-cards { display: flex; justify-content: center; padding-right: 7px; }
.vh-card-table-cards span { display: grid; place-items: center; width: 20px; height: 28px; margin-right: -7px; border: 1px solid #e8dec8; border-radius: 3px; color: #203942; background: #fff9e9; box-shadow: 0 2px 4px #0003; font: bold 17px/1 Georgia, serif; transform: rotate(-14deg); }
.vh-card-table-cards span:nth-child(2) { transform: translateY(-3px); color: #b5483b; }
.vh-card-table-cards span:nth-child(3) { transform: rotate(14deg); }
.vh-card-seat { position: absolute; width: 25%; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.vh-card-seat.seat-0 { top: 0; left: 37.5%; }
.vh-card-seat.seat-1 { right: 0; top: 36%; }
.vh-card-seat.seat-2 { bottom: 0; left: 37.5%; }
.vh-card-seat.seat-3 { left: 0; top: 36%; }
.vh-card-seat-portrait { display: grid; place-items: center; width: 82%; max-width: 52px; aspect-ratio: 1; border-radius: 50%; border: 2px solid #a9d6c7; box-sizing: border-box; box-shadow: 0 3px 8px #001d2840; }
.vh-card-seat-portrait svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.is-free .vh-card-seat-portrait { color: #ffd596; border: 2px dashed #efbd70; background: #edbd7112; font-size: 1.8rem; line-height: 1; box-shadow: none; }
.vh-card-seat-label { color: #dceee9; font-size: .7rem; font-weight: 650; line-height: 1.3; }
.is-free .vh-card-seat-label { color: #ffd596; }
.vh-card-table-caption { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; font-size: .9rem; color: #fff; }
.vh-card-table-state { display: inline-block; padding: .35rem .7rem; border-radius: 999px; background: #f6cb831a; color: #ffda9c; font-size: .8rem; font-weight: 650; }
.is-full .vh-card-table-state { background: #acddbd1a; color: #c2ebcf; }
.game-klaverjassen .vh-card-table-felt { border-radius: 18%; }
.game-jokeren .vh-card-table-felt { inset: 27%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8862a6, #563a78); border-color: #c2a878; }
.game-jokeren .vh-card-table { background: #be99e015; border-color: #c5a1e559; }
.game-jokeren .vh-card-tables-game { color: #e8d5fa; }
.game-jokeren .is-ready .vh-card-table-state { background: #dbbaff24; color: #efdcff; }
.vh-card-table-extra { color: #e3d5ec; font-size: .8rem; }
.vh-card-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.vh-card-games.has-single-game { grid-template-columns: minmax(0, 1fr); }
.game-sjoelen .vh-card-table { background: #e6b6740c; border-color: #d7b6804a; }
.game-sjoelen .vh-card-table-felt { inset: 12% 27% 10%; border-radius: 7px; border: 4px solid #855630; background: repeating-linear-gradient(92deg, #b98c54 0, #b98c54 15px, #c79c61 16px, #bc9057 18px); box-shadow: 0 5px 0 #5c3c28, 0 10px 15px #001e2850; }
.vh-sjoel-board { display: block; width: 80%; height: 92%; filter: drop-shadow(2px 3px 1px #482d2870); }
.vh-sjoel-table-number { position: absolute; top: 0; left: 25%; width: 50%; text-align: center; color: #ffe5b8; font-size: .85rem; font-weight: 700; }
.game-sjoelen .vh-card-seat.seat-0 { left: 0; top: 16%; }
.game-sjoelen .vh-card-seat.seat-1 { left: 75%; top: 16%; }
.game-sjoelen .vh-card-seat.seat-2 { left: 0; top: 61%; bottom: auto; }
.game-sjoelen .vh-card-seat.seat-3 { left: 75%; top: 61%; }
@media (max-width: 720px) { .vh-card-games { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 420px) {
  .vh-card-table { padding: .8rem .4rem; }
  .vh-card-table-felt { border-width: 4px; gap: .3rem; }
  .vh-card-table-number { font-size: .75rem; }
}
