/* GAME OVER SCREEN */
#main-content__game-over-screen-container {
  /* background-color: #000000; */
  width: 100%;
  height: 100%;
}

#main-content__game-over-screen {
  display: grid;
  grid-template-columns: [column1-start] 80px [column1-end column2-start] auto [column2-end column3-start] 80px [column3-end];
  grid-template-rows: [row1-start] 40px [row1-end row2-start] 35vh [row2-end row3-start] 30vh [row3-end row4-start] 10vw [row4-end row5-start] auto [row5-end];
  height: 100%;
  width: 100%;
}

#main-content__game-over-screen__stats {
  border: 1px #ffffff solid;
  grid-row: row2-start / row2-end;
  grid-column: column2-start / column2-end;
  margin: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  overflow-y: hidden;
  height: 100%;
  /* justify-content: space-between; */
}

#main-content__game-over-screen__stats--detailed {
  border: 1px #ffffff solid;
  grid-row: row3-start / row3-end;
  grid-column: column2-start / column2-end;
  margin: 24px 8px 8px 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#main-content__game-over-screen__stats > span {
  width: 45%;
  margin: 0 8px;
}

#main-content__game-over-screen__action-button-container {
  display: flex;
  grid-row: row4-start / row4-end;
  grid-column: column2-start / column2-end;
  justify-content: space-between;
  margin: 40px 8px 8px;
  height: 12.5vh;
  min-height: fit-content;
}

.game-over-screen-button {
  width: 47.5%;
  height: 100%;
  overflow: hidden;
  flex-flow: column wrap;
  border: 1px #ffffff solid;
  transition-duration: var(--transition-duration-short);
}

.game-over-screen-button:hover {
  filter: brightness(1.05);
  transform: scale(1.05);
}

#game-over-screen-button--retry {
  background-color: var(--color-neutral);
  background-image: url("../assets/images/retry.svg");
  background-size: auto 100%;
  background-position-x: 32px;
  background-repeat: no-repeat;
}

#game-over-screen-button--back {
  background-color: var(--color-neutral);
  background-image: url("../assets/images/back.svg");
  background-size: auto 100%;
  background-position-x: 32px;
  background-repeat: no-repeat;
}

.game-over-screen-button__title {
  font-size: min(48px, 4.5vw);
  color: #ffffff;
  margin: 0 0 0 4px;
  text-align: left;
  font-family: inherit;
}
.game-over-screen-button__description {
  font-size: min(24px, 1.5vw);
  color: #ffffff;
  margin: 0 0 0 4px;
  white-space: nowrap;
  text-wrap: pretty;

  overflow: hidden;
  text-overflow: clip;
  text-align: left;
  font-family: inherit;
}

.main-content__game-over-screen__text {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 95%;
  margin: 16px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.main-content__game-over-screen--field {
  width: 100%;
  font-size: 175%;
  display: flex;
  justify-content: space-between;
  padding: 4px 0 0 0;
}

#main-content__game-over-screen__stats--detailed hr {
  width: 100%;
}