.hand {
  display: flex;
  max-width: 650px;
  width: 100%;
  background: #eee;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  position: relative;
}

.card-container {
  overflow: visible;
  width: 1px;
  flex-grow: 1;
}

.card-container:last-child {
  width: 100px;
  flex-grow: 0;
}

.card {
  width: 100px;
  height: 200px;
  background: darksalmon;
  border: 5px solid #000;
  box-shadow: -5px 0px 10px #000c;
  box-sizing: border-box;
  position: relative;
}

.card-name {
  background-color: #00000088;
  border-radius: 10px;
  padding: 3px;
  display: flex;
  align-items: center; /* Centers text vertically */
  justify-content: center; /* Centers text horizontally */
  text-align: center;
}

.card-top-left {
  background-color: #00000088;
  border-radius: 10px;
  padding: 3px;
}

.card-top-right {
  background-color: #00000088;
  border-radius: 10px;
  padding: 5px;
  color: white;
}

.card-cost {
  background-color: #00000088;
  border-radius: 10px;
  padding: 3px;
}

.long-press {
  transform: translateY(-50px);
}