/* ------ GENERAL LAYOUT ------ */
body{
  font-family: 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  background: linear-gradient(135deg,#FFD86F 0%, #FD6E6A 100%);
  min-height:100vh;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:20px;
  color:#222;
}
#gameWrapper{
  background:#FFF;
  border-radius:20px;
  box-shadow:0 8px 25px rgba(0,0,0,.15);
  width:100%;
  max-width:600px;
  padding:25px 30px 40px;
  position:relative;
}

h1, h2{text-align:center;}

/* ------ HUD (score / progress) ------ */
#hud{
  display:flex;
  justify-content:space-between;
  font-size:1.1rem;
  margin-bottom:10px;
  font-weight:bold;
}

/* ------ QUESTION ------ */
#questionBox{
  background:#F7F7F7;
  border:3px dashed #FFB703;
  padding:20px;
  font-size:1.2rem;
  border-radius:15px;
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* ------ OPTIONS ------ */
#optionsBox{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}
#optionsBox button{
  background:#8ECAE6;
  border:none;
  border-radius:12px;
  padding:15px 10px;
  font-size:1rem;
  color:#003049;
  cursor:pointer;
  transition:transform .15s, background .15s;
}
#optionsBox button:hover{transform:scale(1.06);} /* small grow on hover */
#optionsBox button.correct{background:#06D6A0 !important; color:#053B06;}
#optionsBox button.wrong{background:#EF476F !important; color:#FFF;}
#optionsBox button:disabled{cursor:default;}

/* ------ FEEDBACK MESSAGE ------ */
#feedback{
  text-align:center;
  font-size:1.3rem;
  margin:18px 0 10px;
  min-height:32px;
  font-weight:bold;
  letter-spacing:.5px;
}
#feedback.correct{color:#06D6A0;animation:bounce .6s ease;} /* fun animation */
#feedback.wrong{color:#EF476F;}
@keyframes bounce{0%{transform:scale(.3);} 60%{transform:scale(1.15);} 100%{transform:scale(1);} }

/* ------ NEXT / RETRY BUTTONS ------ */
#nextBtn, #retryBtn{
  background:#FFD166;
  border:none;
  padding:12px 25px;
  border-radius:10px;
  font-size:1rem;
  font-weight:bold;
  cursor:pointer;
  display:block;
  margin:0 auto;
  transition:transform .15s;
}
#nextBtn:hover, #retryBtn:hover{transform:scale(1.05);}
.hidden{display:none;}

/* ------ SUMMARY LIST ------ */
#summaryScreen ol{padding-left:20px;max-height:300px;overflow-y:auto;}
#summaryScreen li{margin:8px 0;}
#summaryScreen li.correct::after{content:" ✅"; color:#06D6A0;}
#summaryScreen li.wrong::after{content:" ❌"; color:#EF476F;}

/* Responsive tweaks */
@media (max-width:480px){
  #optionsBox{grid-template-columns:1fr;}
}