game.css

body {
  background-color: Khaki;
}

:root {
  --grid-cols: 0;
  --grid-rows: 0;
}

.top_line {
  display: grid;
  grid-gap: 0px;
  grid-template-rows: 30px;
  grid-template-columns: 495px 300px;
}

.top_line_item {
  padding: 1em;
/*   border: 1px color: black; */
  text-align: left;
  font-size: 14px;
  margin: 2px;
  padding: 0;
}

.hand_numbers {
  display: grid;
  grid-gap: 0px;
  grid-template-rows: repeat(1, 30px);
  grid-template-columns: repeat(11, 70px);
}

.hand_number_box {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 14px;
  margin: 2px;
  padding: 0;
}

.hand_number_pad {
  padding: 1em;
  border: 0px solid #ddd;
  text-align: center;
  font-size: 14px;
  margin: 2px;  /* auto */
  padding: 0;
}

.hand_number_box_small {
  padding: 1em;
  border: 0px solid #ddd;
  font-size: 12px;
  margin: 2px;
  padding: 0;
}

.card-container {
  display: inline-grid;
  grid-gap: 0px;
  grid-template-rows: repeat(var(--grid-rows), 80px);
  grid-template-columns: repeat(var(--grid-cols), 70px);
}

.card-grid-item {
  padding: 1em;
  border: 1px solid green;
  text-align: center;
  font-size: 60px;
  margin: 0;
  padding: 0;
}