/* Keep the current five-card layout. Only hands with 6+ cards become horizontally scrollable. */
.hand.is-overflowing {
  display:flex;
  justify-content:flex-start;
  justify-items:initial;
  align-items:flex-end;
  gap:8px;
  overflow-x:auto;
  overflow-y:visible;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding-inline:8px;
  touch-action:pan-x;
}

.hand.is-overflowing .card {
  flex:0 0 auto;
  width:auto;
  scroll-snap-align:start;
}

@media (orientation:landscape) and (max-height:700px) {
  .hand.is-overflowing { gap:6px; padding-inline:4px; }
}

@media (max-width:700px) and (orientation:portrait) {
  .hand.is-overflowing {
    padding:28px 18px 4px;
    scroll-padding-inline:18px;
  }
}