@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* 
Contents
1. CSS Basic Reset
2. Body and Main Container Screens
3. Initial Screen
4. Greeting Screen
5. Game Screen
6. Input Label & Buttons
7. Radio Buttons
8. Key Frames
9. Boris
10. Media Queries
*/

/*********************************************************** CSS Basic Reset */

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
li,
p {
  line-height: 1.8;
  margin: 0.2rem;
}

/************************************************************ Body and Main Container Screens */

body {
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem;
  background-color: lightseagreen;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.initial-screen,
.greeting-screen,
.game-screen {
  background-color: #fff;
  height: 65vh;
  width: 65vw;
  color: #000;
  box-shadow: inset -10px -10px 0px 0px #e91e63;
  position: relative;
  display: grid;
  align-content: center;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.initial-screen:before,
.initial-screen:after,
.greeting-screen:before,
.greeting-screen:after,
.game-screen:before,
.game-screen:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  z-index: -9999;
}
.initial-screen:before,
.greeting-screen:before,
.game-screen:before {
  top: -10px;
  left: 0;
  border-top: 10px black solid;
  border-bottom: 10px black solid;
}
.initial-screen:after,
.greeting-screen:after,
.game-screen:after {
  left: -10px;
  top: 0;
  border-left: 10px black solid;
  border-right: 10px black solid;
}

.greeting-screen,
.game-screen {
  display: none;
}

.robot-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 1rem 0;
}

.robot-image1,
.robot-image2,
.robot-image3 {
  max-width: 9rem;
}

.username-container {
  display: flex;
  justify-content: center;
}

/************************************************************ Initial Screen */

.greeting-text {
  text-align: center;
}

.robot-name {
  color: #e91e63;
}

.username-alert {
  opacity: 0;
  margin-bottom: 0.8rem;
  color: #e91e63;
}

/************************************************************ Greeting Screen */

.welcome-text {
  text-align: center;
}

.play-button-container {
  display: flex;
  justify-content: center;
}

/************************************************************ Game Screen */

.game-screen .container {
  width: 60vw;
}

.mid-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.robot-message {
  text-align: center;
}

.secret-number {
  font-size: 2rem;
  text-align: center;
}

.score-data-container {
  display: grid;
  width: 40vw;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-self: left;
  font-size: 0.8rem;
  margin-bottom: 0.8rem;
}

.score-label-container {
  grid-column-start: 1;
  justify-self: left;
}

.high-score-label-container {
  grid-column: 1 / span 2;
  grid-row: 2;
  text-align: left;
}

.heart-container {
  grid-column: 4;
  justify-self: center;
}

.heart {
  max-width: 1.8rem;
}

.lives-number {
  grid-column: 4;
  grid-row: 2;
  justify-self: center;
}

.game-controls-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.guessed-numbers-container {
  text-align: center;
  margin-top: 1.5rem;
  height: 2vh;
}

.guessed-numbers-container p {
  width: 80%;
  margin: 0 auto;
  color: dimgray;
  font-size: 0.8rem;
}

.reset-buttons {
  position: absolute;
  bottom: 8vh;
  opacity: 0;
}

/************************************************************ Input Label & Buttons */

.lets-go,
.play,
.guess,
.play-again,
.retry,
.another-challenge {
  cursor: pointer;
  border: none;
  background: #92cd41;
  color: #fff;
  box-shadow: inset -4px -4px 0px 0px #4aa52e;
  position: relative;
  text-align: center;
  text-decoration: none;
  font-size: 0.8rem;
  font-family: 'Press Start 2P', cursive;
  margin: 0 0.8rem;
  padding: 0.8rem;
}

.lets-go:hover,
.lets-go:focus,
.play:hover,
.play:focus,
.guess:hover,
.guess:focus,
.play-again:hover,
.play-again:focus .retry:hover,
.another-challenge:hover,
.retry:focus,
.another-challenge:focus {
  background: #76c442;
  box-shadow: inset -6px -6px 0px 0px #4aa52e;
}

.lets-go:active,
.play:active,
.guess:active,
.play-again:active,
.retry:active,
.another-challenge:active {
  box-shadow: inset 4px 4px 0px 0px #4aa52e;
}

.lets-go:before,
.lets-go:after,
.play:before,
.play:after,
.guess:before,
.guess:after,
.play-again:before,
.play-again:after,
.retry:before,
.another-challenge:before,
.retry:after,
.another-challenge:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
}

.lets-go:before,
.play:before,
.guess:before,
.play-again:before,
.retry:before,
.another-challenge:before {
  top: -6px;
  left: 0;
  border-top: 6px black solid;
  border-bottom: 6px black solid;
}

.lets-go:after,
.play:after,
.guess:after,
.play-again:after,
.retry:after,
.another-challenge:after {
  left: -6px;
  top: 0;
  border-left: 6px black solid;
  border-right: 6px black solid;
}

.play-again:disabled,
.guess:disabled {
  background: grey;
  box-shadow: inset 4px 4px 0px 0px grey;
}

.play {
  width: 8rem;
}

.retry,
.another-challenge {
  background: #f7d51d;
  box-shadow: inset -4px -4px 0px 0px #e59400;
}
.retry:hover,
.another-challenge:hover,
.retry:active,
.another-challenge:focus {
  background: #f2c409;
  box-shadow: inset -6px -6px 0px 0px #e59400;
}
.retry:active,
.another-challenge:active {
  box-shadow: inset 4px 4px 0px 0px #e59400;
}

input.username,
input.guess-input {
  font-size: 0.8rem;
  font-family: inherit;
  border: 2px solid black;
  color: #e91e63;
  padding: 0.8rem;
}

input.username::placeholder,
input.guess-input::placeholder {
  font-size: 0.8rem;
  font-family: inherit;
  color: #e91e63;
  padding: 0.8rem;
}

/************************************************************ Radio Buttons */

.radio-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.8rem;
  margin-bottom: 1.6rem;
}

.radio {
  display: none;
}

.radio + label {
  margin-right: 1.5rem;
}

.radio + label:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
  border: 2px solid #e91e63;
  margin-bottom: 0.4rem;
  margin-right: 0.8rem;
  color: #e91e63;
}
.radio:checked + label:before {
  box-shadow: 0 0 0 0.1em #e91e63 inset, 0.1em 0.1em 0 0.8em #e91e63 inset;
  animation: blinking 1s infinite;
}

/************************************************************* Keyframes */

@keyframes blinking {
  50% {
    opacity: 0;
  }
}

@keyframes blink-green {
  0%,
  49% {
    background-color: #6eeb3a;
  }
  50%,
  100% {
    background-color: #fff;
  }
}

@keyframes blink-red {
  0%,
  49% {
    background-color: crimson;
  }
  50%,
  100% {
    background-color: #fff;
  }
}

/************************************************************** Boris */

.not-worthy-container {
  position: absolute;
  width: 100%;
  height: 100vh;
  color: #fff;
  background-color: crimson;
  opacity: 0;
  transform: scale(0);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s;
}

.not-worthy-container.active {
  opacity: 1;
  transform: scale(1);
}

/*********************************************************** Media Queries */

@media (max-width: 1090px) {
  .initial-screen,
  .greeting-screen,
  .game-screen {
    height: 75vh;
  }

  .reset-buttons {
    bottom: 4vh;
  }

  .score-data-container {
    width: 50vw;
  }
}

@media (max-width: 990px) {
  .lets-go,
  .play,
  .guess,
  .play-again,
  .retry,
  .another-challenge {
    font-size: 0.6rem;
  }

  input.username,
  input.guess-input,
  input.username::placeholder,
  input.guess-input::placeholder {
    font-size: 0.6rem;
  }

  .score-data-container {
    font-size: 0.6rem;
  }

  .guessed-numbers-container p {
    font-size: 0.6rem;
  }
}

@media (max-width: 810px) {
  body {
    font-size: 0.6rem;
  }

  .initial-screen,
  .greeting-screen,
  .game-screen {
    height: 60vh;
    width: 90vw;
  }

  .greeting-text {
    padding: 1rem;
  }

  .username-alert {
    margin-bottom: 0;
  }

  .username-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  input.username {
    width: 18rem;
  }

  .lets-go {
    width: 10rem;
    margin-top: 1.2rem;
  }

  .welcome-text {
    padding: 1rem;
  }

  .radio-buttons {
    display: flex;
    flex-direction: column;
  }

  .radio + label {
    margin-top: 0.8rem;
  }

  .robot-message {
    height: 4vh;
  }

  .secret-number {
    font-size: 1rem;
  }

  .score-data-container {
    display: grid;
    width: 100%;
    font-size: 0.6rem;
  }

  .score-label-container {
    grid-column: 1 / span 2;
  }

  .high-score-label-container {
    grid-column: 1 / span 3;
  }

  .heart-container {
    align-self: end;
  }

  .game-controls-container {
    flex-wrap: wrap;
  }

  .play,
  .guess,
  .play-again,
  .retry,
  .another-challenge {
    margin-top: 0.8rem;
  }

  .reset-buttons {
    bottom: 12vh;
    display: flex;
  }

  .retry,
  .another-challenge {
    width: 10rem;
    height: 3rem;
    font-size: 0.8rem;
    line-height: 1.1;
    color: #000;
  }
}