/* A card hand owns geometry only. Its cards/keyboard/focus state remain
   game-controlled, or may use shared-hand-navigation separately. */
.xg-card-hand {
  --xg-hand-card-width: 132px;
  --xg-hand-exposed: 84px;
  --xg-hand-lift: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  min-width: 0;
  min-height: calc(var(--xg-hand-card-width) * 7 / 5 + var(--xg-hand-lift));
  padding-block-start: var(--xg-hand-lift);
  padding-block-end: 4px;
  box-sizing: border-box;
  isolation: isolate;
}
.xg-card-hand > .xg-card {
  --xg-card-width: var(--xg-hand-card-width);
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  transition: transform 140ms ease;
}
.xg-card-hand--overlap > .xg-card {
  margin-inline-end: min(0px, calc(var(--xg-hand-exposed) - var(--xg-hand-card-width)));
}
.xg-card-hand--overlap > .xg-card:last-child { margin-inline-end: 0; }
.xg-card-hand > .xg-card:hover,
.xg-card-hand > .xg-card:focus-visible,
.xg-card-hand > .xg-card:focus-within {
  z-index: 4;
  transform: translateY(calc(-1 * var(--xg-hand-lift)));
}
.xg-card-hand[data-hand-align="center"] { justify-content: center; }
.xg-card-hand[data-hand-align="start"] { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .xg-card-hand > .xg-card { transition: none; }
}