body {
  background: black;
  filter: invert(1);
  font-family: Helvetica;
  margin: 0;
}
.App {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 16px auto;
  max-width: 48em;
}
.Board {
  justify-content: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    'l12 c11 r12'
    'l13 c10 r13'
    '. c9 .'
    '. c8 .'
    'l0 c7 r0'
    'l1 c6 r1'
    'l2 c5 r2'
    'l3 c4 r3';
}
.Cell {
  background-image: url(./assets/cell_empty.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 56px;
  width: 56px;
  transition: 0.25s ease-in-out;
  margin: 0 auto;
}
.Cell--bonus {
  background-image: url(./assets/cell_bonus.svg);
}
.Cell--enabled {
  filter: brightness(0.5);
}
.Cell--left {
  background-image: url(./assets/player_left.svg);
  background-size: 90%;
}
.Cell--right {
  background-image: url(./assets/player_right.svg);
  background-size: 90%;
}
.Player {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.25s ease-in-out;
}
.Player--enabled {
  filter: brightness(0.7);
}
.Player__stats {
  color: #666;
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 1fr;
  margin: 16px 0 8px;
}
.Player__coins {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 4px;
  margin: 8px 0 16px;
}
.Player__roll {
  background: 0;
  border: 2px solid #666;
  border-radius: 4px;
  color: #666;
  font-family: inherit;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.Player__roll:disabled {
  text-decoration: line-through;
  border-color: white;
}
.Winner {
  margin: 16px auto;
  max-width: 48em;
}
.Winner__token {
  width: 128px;
}

@media (max-width: 48em) {
  .Player__coins {
    grid-template-columns: repeat(2, 1fr);
  }
}