body {
  background-color: #fff;
}

#game {
  width: 590px;
}

#grid {
  display: grid;
  grid-template: repeat(10, 50px) / repeat(10, 50px);
  gap: 10px;
}

#grid > div {
  background: #cce;
  color: transparent;
  font-size: 36px;
  text-align: center;
  vertical-align: middle;
}

#grid > div.hit {
  background: #ecc;
  color: red;
}

#grid > div.hit::before {
  content: '🔥';
}

#grid > div.missed {
  background: #aac;
  color: blue;
}

#grid > div.missed::before {
  content: '🐟';
}

#grid > div.hit,
#grid > div.missed {
  animation: cell-state-change 0.2s ease-in;
}

@keyframes cell-state-change {
  0% {
    transform: scale(1.0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.0);
  }
}

#message {
  font-size: 24pt;
  padding: 20px;
  text-align: center;
}