.card {
  background: var(--card);
  padding: 20px;
  border-radius: 18px;
}

#keyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

#keyboard button {
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#keyboard button:hover {
  background: #00cfff;
}

.quiz-box {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

#question {
  font-size: 48px;
  margin-bottom: 20px;
}


.letter {
  font-size: 70px;
}
.quiz-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.quiz-options button {
  padding: 18px;
  font-size: 32px;
  border-radius: 14px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: var(--text);
}