#grid {
  margin:  auto 0;
  margin-top: 50px;
  display: block;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.grid-parrent {
  display:inline-block;
}
span {
  border: 2px solid #444;
  cursor: pointer;
  width: 50px;
  height: 50px;
  margin-top: -2px;
  display: inline-block;
  margin: -1px;
  margin-bottom: -6px;
  padding: 0;
  color: #fff;
  font-size: 40px;
}
span[value=B] {
  background: 
       
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 2px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 2px),
           rgba(0,0,0,0) 100%);
}
span[value=A] {
  background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 2px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 2px),
           rgba(0,0,0,0) 100%);
}
span.er[value=B] {
  background:
       linear-gradient(to top right,
           rgba(255,0,0,0) 0%,
           rgba(255,0,0,0) calc(50% - 2px),
           rgba(255,0,0,1) 50%,
           rgba(255,0,0,0) calc(50% + 2px),
           rgba(255,0,0,0) 100%);
}
span.er[value=A] {
  background:
       linear-gradient(to top left,
           rgba(255,0,0,0) 0%,
           rgba(255,0,0,0) calc(50% - 2px),
           rgba(255,0,0,1) 50%,
           rgba(255,0,0,0) calc(50% + 2px),
           rgba(255,0,0,0) 100%);
}
hr {
  margin: 0;
  border: 0;
  padding: 0;
}
p {
  margin: 0 auto;
  margin-top: 100px;
  font-size: 60px;
}
h1, h3 {
  text-align: center;
}
#count {
  margin-top: 25px;
  font-size: 30px;
}