/* Gør at padding og border tælles med i elementernes størrelse */
* {
  box-sizing: border-box;
}

/* Styling af hele hjemmesiden */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  /* Placerer spillet i midten af skærmen */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Gradient som baggrund */
  background: linear-gradient(135deg, #fdf1e8, #f4d8ca);
}

/* Den hvide boks som indeholder hele spillet */
.game-card {
  width: 450px;
  min-height: 500px;
  background-color: white;
  padding: 45px 40px;
  /* Giver boksen afrundede hjørner */
  border-radius: 30px;
  text-align: center;
  /* Laver en skygge rundt om boksen */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Styling af overskriften */
h1 {
  font-size: 40px;
  margin: 5px 0 10px;
}

/* Styling af teksten under overskriften */
.intro {
  color: #777;
  font-size: 17px;
  margin-bottom: 25px;
}

/* ---------- START-KNAP ---------- */

#start {
  background-color: #b76646;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  /* Gør hover-animationen mere glidende */
  transition: 0.2s;
}

/* ---------- COMPUTERENS GÆT ---------- */

/* Området hvor computerens gæt bliver vist */
.guess-area {
  min-height: 110px;
  margin: 30px 0 15px;
  /* Centrerer computerens gæt */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff7f2;
  border-radius: 20px;
}

/* Styling af teksten med computerens gæt */
#gaet {
  font-size: 30px;
  margin: 0;
}

/* ---------- SVAR-KNAPPER ---------- */

/* Placerer de tre knapper ved siden af hinanden */
.answer-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Fælles styling for de tre svar-knapper */
.answer-buttons button {
  border: none;
  border-radius: 12px;
  padding: 13px 17px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

/* Gul knap til "For lavt" */
#forLavt {
  background-color: #ffd166;
}

/* Orange knap til "For højt" */
#forHoejt {
  background-color: #ef8354;
}

/* Grøn knap til "Rigtigt" */
#rigtigt {
  background-color: #65b96e;
}

/* ---------- HOVER ---------- */

/* Flytter knappen lidt op når musen holdes over */
/* :not(:disabled) gør at det kun gælder knapper der kan klikkes */
button:hover:not(:disabled) {
  transform: translateY(-3px);
}

/* ---------- DEAKTIVEREDE KNAPPER ---------- */

/* Styling af knapper som ikke må kunne klikkes */
button:disabled {
  background-color: #dddddd !important;
  color: #999999 !important;
  /* Viser at knappen ikke kan klikkes */
  cursor: not-allowed;
  opacity: 0.6;
  /* Sørger for at disabled knapper ikke flytter sig */
  transform: none;
}

/* ---------- RESULTAT ---------- */

/* Styling af resultatet når computeren har gættet rigtigt */
#resultat {
  margin-top: 25px;
  font-size: 18px;
  font-weight: bold;
  /* Gør at \n fra JavaScript vises som et linjeskift */
  white-space: pre-line;
  line-height: 1.6;
}

/* ---------- KONFETTI ---------- */

/* Styling af hvert enkelt stykke konfetti */
.konfetti {
  /* Gør at konfettien kan bevæge sig frit hen over siden */
  position: fixed;
  width: 10px;
  height: 15px;
  /* Konfettien skal ikke blokere for klik på knapperne */
  pointer-events: none;
  /* Sørger for at konfettien ligger foran de andre elementer */
  z-index: 9999;
  /* Starter animationen "fald" */
  animation: fald linear forwards;
}

/* Animation der får konfettien til at falde ned */
@keyframes fald {
  /* Starten af animationen */
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  /* Konfettien forbliver synlig næsten hele vejen ned */
  90% {
    opacity: 1;
  }

  /* Til sidst falder konfettien ud af skærmen og fader ud */
  100% {
    transform: translateY(190vh) rotate(1080deg);
    opacity: 0;
  }
}