/* Basic resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
  text-align: center;
  padding: 20px;
  min-height: 100vh;
}

.qd_app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #568299;
}

.qd_app h1 {
  color: white;
  font-weight: 800;
}

.welcome_screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.welcome_screen img {
  width: 50rem;
}

#startButton {
  font-size: 2.5rem;
  font-weight: 900;
  padding: 10px 50px;
}

.directions {
  color: white;
  font-weight: 300;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

/* Screen styling: hidden by default */
.screen {
  display: none !important;
}

.screen.active {
  display: block !important;
}

/* Welcome, Game Over Screens */
#welcomeScreen, #gameOverScreen {
  padding: 40px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
}

/* Game Screen styling */
#gameScreen {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#gifContainer {
  margin-bottom: 20px;
}

#gifContainer img {
  max-width: 100%;
  height: auto;
}

#caseContainer {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
  width: 100%;
  font-size: 2rem;
  text-align: center;
}

#statement {
  font-weight: 700;
  border: 1px solid #333;
}

/* Style each sentence as clickable */
.sentence {
  display: block;
  margin: 10px 0;
  cursor: pointer;
  padding: 5px;
  border-radius: 3px;
}

.sentence:hover {
  background: #ffd001;
}

/* Highlight for selected sentence (when correct) */
.sentence.correct {
  background: #c8e6c9;
}

/* Feedback message for incorrect answer */
.feedback {
  color: #d32f2f;
  font-style: italic;
}

/* Overlay for correct answer feedback */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
}

.overlay.active {
  display: flex;
}

.overlay-content {
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  text-align: center;
}

.overlay-content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.game_over {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Responsive Styles */

/* For mobile devices (max-width: 600px) */
@media only screen and (max-width: 600px) {
  .qd_app h1 {
    font-size: 1rem;
  }
  .welcome_screen img {
    width: 90%;
  }
  #startButton {
    font-size: 2rem;
    padding: 8px 20px;
  }
  .game_screen {
    padding: 10px;
  }
  #caseContainer {
    font-size: 1.5rem;
    padding: 10px;
  }
  .sentence {
    font-size: 1.5rem;
  }
}

/* For tablets (max-width: 768px) */
@media only screen and (max-width: 768px) {
  .qd_app h1 {
    font-size: 2rem;
  }
  .welcome_screen img {
    width: 80%;
  }
  #startButton {
    font-size: 2.2rem;
    padding: 8px 30px;
  }
  #caseContainer {
    font-size: 1.8rem;
  }
  .sentence {
    font-size: 1.8rem;
  }
}

/* For larger screens (min-width: 1024px) */
@media only screen and (min-width: 1024px) {
  .qd_app h1 {
    font-size: 3rem;
  }
  .welcome_screen img {
    width: 50rem;
  }
  #startButton {
    font-size: 2.5rem;
    padding: 10px 50px;
  }
  #caseContainer {
    font-size: 2rem;
  }
  .sentence {
    font-size: 2rem;
  }
}