* {
  box-sizing: border-box;
}

body {
  text-align: center;
  background-color: rgb(142, 138, 138);
  overflow-y: hidden;
}

h1 {
  font-size: 42px;
  margin: 8px;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
}

.game {
  width: 1000px;
  height: 550px;
  margin: auto;
  background: url(imgs/background.png) center/cover no-repeat;
  border-radius: 0 0 20px 20px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.game__header {
  width: 1000px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding: 8px;
  margin: auto;
  background-color: whitesmoke;
  border-bottom: 4px solid darkgrey;
  border-radius: 20px 20px 0 0;
  gap: 8px;
  user-select: none;
  cursor: auto;
}

.game__button {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: rgb(225, 255, 57);
  border: 2px dashed darkgray;
  border-radius: 40%;
  font-size: 32px;
  user-select: auto;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.game__button i {
  transition: transform 300ms ease-in;
}

.game__button:hover i {
  transform: scale(1.2);
}

.game__score__total {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 48px;
  border-radius: 50%;
  outline: 3px dashed darkgray;
  background-color: rgb(123, 218, 39);
  color: white;
  visibility: hidden;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.game__timer__left {
  display: inline-block;
  width: 150px;
  height: 60px;
  line-height: 60px;
  background-color: white;
  outline: 4px dashed darkgray;
  border-radius: 20px;
  font-size: 48px;
  visibility: hidden;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.game__field {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0 0 20px 20px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.pop-up {
  display: block;
  width: 1000px;
  height: 550px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  background-color: #000000a0;
  color: white;
  text-align: center;
  transform: translateY(-100%);
  border-radius: 0 0 20px 20px;
}

.pop-up--hide {
  display: none;
}

.pop-up__refresh {
  width: 120px;
  height: 120px;
  font-size: 80px;
  background-color: white;
  outline: 5px dashed gray;
  border-radius: 100%;
}

.pop-up__refresh i {
  transition: transform 300ms ease-in;
}

.pop-up__refresh:hover i {
  transform: scale(1.1);
}

.pop-up__message {
  display: block;
  font-size: 120px;
}

.minion {
  width: 130px;
  height: 130px;
  user-select: none;
  cursor: auto;
}

.evil {
  width: 115px;
  height: 130px;
}

.minion,
.evil {
  transition: all 100ms ease-in-out;
}

.minion:hover,
.evil:hover {
  transform: scale(1.1);
}