.mnist {
  margin-bottom: 3.5em;
}

.mnist .mnist-header {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .04rem;
  font-size: 1.3em;
  padding: 8px 0px 7px 0px;
  margin-top: 6px;
}

.honest {
  color: rgb(84, 54, 218);
  fill: rgb(84, 54, 218);
}
.lie {
  color: rgb(239, 65, 70);
  fill: rgb(239, 65, 70);
}

.thumbnail-border {
  fill: rgba(0, 0, 0, .4);
  pointer-events: all;
}
.thumbnail-border.active {
  fill: none;
  stroke: rgb(135, 219, 132);
  stroke-width: 2;
}
.thumbnail-guess {
  display: none;
}

rect.background {
  fill: rgb(65, 65, 65);
}
rect.blank {
  fill: rgb(0, 0, 0);
}

circle.current {
  stroke: rgb(135, 219, 132);
  stroke-width: 2;
  fill: none;
}

.info {
  display: inline-block;
}

.mnist image {
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.mnist .info {
  text-transform: none;
  border-top: 1px solid rgb(210, 210, 210);
  border-bottom: 1px solid rgb(210, 210, 210);
}
.mnist .info .detail {
  float: left;
  height: 3em;
  display: flex;
  align-items: center;
  font-size: 1.4em;
}
.mnist .info .sep {
  display: inline-block;
  width: 1.5em;
}
.mnist .player {
  width: 6ch;
  text-align: center;
  display: inline-block;
}
.mnist .digit {
  width: 1ch;
  text-align: center;
  display: inline-block;
}

.mnist .moves {
  text-transform: uppercase;
  letter-spacing: .04rem;
  font-size: 1.3em;
  padding-top: 0.5em;
  color: rgb(100, 100, 100);
}
.mnist .move-label {
  display: inline-block;
}