@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: linear-gradient(135deg, #122958, #0f1626);
  color: #fff;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.container {
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  max-width: 750px;
  padding: 20px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.6s ease;
}

header h1 {
  text-align: center;
  margin-bottom: 15px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px #ffffff8a;
}

.stats {
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
  font-size:18px;
}

#streak-bar {
  background:#0000004d;
  height:8px;
  border-radius:5px;
  overflow:hidden;
  margin-bottom:20px;
}

#streak-progress {
  height:100%;
  background: #00ff0d;
  width:0%;
  transition: width .3s ease;
}

#question {
  text-align:center;
  font-size:24px;
  margin-bottom:20px;
}

#answers {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:15px;
}

.answer-btn {
  padding:15px;
  background:#ffffff20;
  border:none;
  font-size:16px;
  cursor:pointer;
  border-radius:8px;
  transition:0.25s ease;
}

.answer-btn:hover {
  background:#00b7ff48;
  transform:scale(1.05);
}

.correct {
  background:#00ff408a !important;
}

.wrong {
  background:#ff00339a !important;
}

footer {
  text-align:center;
  margin-top:20px;
}

#sound-toggle {
  padding:10px 20px;
  background:#ffcc00;
  border:none;
  border-radius:6px;
  cursor:pointer;
}

/* Modal */
.modal {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:#000000b7;
  display:flex;
  justify-content:center;
  align-items:center;
}

.modal-content {
  padding:30px;
  background:#111831;
  width:80%;
  max-width:400px;
  border-radius:10px;
  text-align:center;
}

.hide {
  display:none;
}

button#restart {
  margin-top:20px;
  padding:10px 30px;
  background:#2cff15;
  border:none;
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
}

@keyframes fadeIn {
  from {opacity:0; transform:scale(.8);}
  to {opacity:1; transform:scale(1);}
}