.play-table {
  --opponent-portrait: clamp(64px, min(20cqw, 12cqh), 112px);
  --self-portrait-width: clamp(64px, 12cqw, 100px);
}

.seat-rack {
  width: 94%;
}

.table-seat {
  max-width: none;
}

.seat-portrait > span {
  width: var(--opponent-portrait);
  height: calc(var(--opponent-portrait) * 1.18);
  aspect-ratio: auto;
  border-radius: 14px;
}

.seat-portrait b {
  z-index: 2;
}

.table-footer {
  position: relative;
}

.self-portrait {
  position: absolute;
  left: 48px;
  bottom: 0;
  width: var(--self-portrait-width);
  height: clamp(84px, 16cqh, 132px);
  flex: none;
  border-radius: 14px;
}

.self-seat {
  padding-left: calc(var(--self-portrait-width) + 8px);
}

.play-table .hand {
  padding-left: calc(var(--self-portrait-width) + 64px);
}

.play-table .seat-portrait .profile-avatar,
.play-table .self-portrait .profile-avatar {
  object-fit: contain;
}

@media (min-width: 600px) {
  .play-table {
    --opponent-portrait: clamp(80px, 12cqh, 112px);
  }

  .table-seat {
    display: grid;
    grid-template-columns: var(--opponent-portrait) minmax(0, 1fr);
    column-gap: 6px;
    grid-template-rows: auto auto auto 1fr;
  }

  .table-seat .seat-portrait {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .table-seat .seat-name {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }

  .table-seat .seat-score {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
  }

  .table-seat .seat-phase {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
  }

  .table-seat .seat-groups {
    grid-column: 2 / -1;
    grid-row: 1 / -1;
  }
}

  .table-seat:only-child {
    --opponent-portrait: clamp(80px, 17cqh, 140px);
    display: grid;
    grid-template-columns: var(--opponent-portrait) minmax(0, 1fr);
    column-gap: 6px;
    grid-template-rows: auto auto auto 1fr;
  }

  .table-seat:only-child .seat-portrait {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .table-seat:only-child .seat-name {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }

  .table-seat:only-child .seat-score {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
  }

  .table-seat:only-child .seat-phase {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
  }

  .table-seat:only-child .seat-groups {
    grid-column: 2 / -1;
    grid-row: 1 / -1;
  }



@media (max-height: 600px) and (max-width: 599px) {
  .play-table {
    --opponent-portrait: 56px;
  }

  .self-portrait {
    height: 84px;
  }
}

.greeting .avatar,
.seat .avatar {
  width: 72px;
  height: 84px;
  flex-basis: 72px;
  border-radius: 14px;
}

.greeting .avatar img,
.seat .avatar img {
  object-fit: contain;
}