.game{
  display: flex;
  width: 100%;
  flex-direction: row;
}
.gameBoard {
  flex-grow: 75;
}
.controlBoard {
  flex-grow: 25;
  padding: 12px;
}
.cardRow {
  display: flex;
  width: 100%;
  flex-direction: row;
  height: 18%;
}
card{
  overflow: hidden;
  margin: 6px;
  border-radius: 14px;
  flex-grow: 1;
  position: relative;
}
card > div{
  position: absolute;
  text-align: center;
  display: table;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
card > div > div{
  display: table-cell;
  vertical-align: middle;
}
card.selected.blue{
  background-color: #44d;
}
card.selected.red{
  background-color: #d44;
}
card.selected.gray{
  background-color: #935100;
}
card.selected.black{
  background-color: #555;
}
card:not([selected]){
  background-color: #2ff;
}
card.used{
  opacity: 0.4;
}


.center {
  text-align: center;
}