* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;   /*user cannot select & highlight anything on the screen*/
}

body {
  font-family: sans-serif;
  background: #111;
  color: #fff;
  height: 100vh;
  overflow: hidden;
}

header {
  padding: 20px;
  text-align: center;
}

header h1 {
  font-size: 36px;
  color: #00ffcc;
  margin-bottom: 10px;
}

#scoreboard {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 18px;
}

#game-container {
  position: relative;
  width: 100%;
  height: 80vh;
  border-top: 2px solid #fff;
  overflow: hidden;
}

.letter {
  position: absolute;
  font-size: 36px;
  font-weight: 400;
  color: #4dd7bc;
  font-family: 'Press Start 2P', monospace;
  animation-name: fall;
  animation-timing-function: linear; /*linear: Maintains a constant speed from start to finish. Other types such as ease (default: start slow then accelerates*/
  animation-fill-mode: forwards; /*keep the final state after the animation ends, which is at bottom & invisible(opacity=0) rather than from the top*/
}

@keyframes fall {
  to {
    top: 90%; 
    opacity: 0; /*make the letter invisible when it falls doen 90% from the top*/
  }
}

#game-over {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999; /*easy way to ensure elements always on top*/
}

#game-over h1 {
  font-size: 70px; 
  color: rgba(255, 0, 0, 0.78);
  font-family: 'Permanent Marker', cursive;
  animation: zoomFast 0.5s ease forwards;
}

@keyframes zoomFast {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 1; }
}

#game-over p {
  font-size: 24px;
  color: white;
  margin-top: 60px;
}

@keyframes zoomIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 1; }
}

/* Start Screen */
#start-screen {
  background-color: #000;
  color: #fff;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif, cursive;
  padding-top: 10px;
}

#start-screen .title {
  font-size: 100px;
  margin-bottom: 120px;
  color: #ff3366;
}

.pixel-btn {
  font-family: 'Press Start 2P', cursive;
  font-size: 20px;
  padding: 15px 30px 40px;
  margin: 10px;
  width: 220px;
  height: 70px;
  background-color: #ff3366;
  border: 4px solid #660033;
  color: white;
  cursor: pointer;
  box-shadow: 4px 4px #660033;
}

#guidance-btn {
  background-color: #00ffcc;
  border: 4px solid #00665f;
  box-shadow: 4px 4px #00665f;
}

.pixel-btn:active { /*responsive: when the button is being clicked, no shawdow and the button moves to right & down a bit*/
  box-shadow: none;
  transform: translate(4px, 4px);
}

#guidance-text {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 500px;
  text-align: center;
  font-family: sans-serif;
}