.quiz-panel {

  min-height: 720px;

}



.quiz-controls {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  align-items: flex-end;

  margin-bottom: 20px;

}



.quiz-player-wrap {

  margin-bottom: 20px;

  display: grid;

  gap: 8px;

  max-width: 360px;

}



.quiz-filter-wrap {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.quiz-filter-label {

  font-weight: 800;

  color: var(--blue-dark);

}



.quiz-select {

  min-width: 220px;

  min-height: 48px;

  border-radius: 16px;

  border: 2px solid var(--border-soft);

  background: var(--white);

  padding: 10px 14px;

  color: var(--text-dark);

}



.quiz-card,

.quiz-result {

  max-width: 760px;

  margin: 0 auto;

  background: var(--white);

  border: 2px solid var(--border-soft);

  border-radius: 30px;

  box-shadow: 0 18px 34px rgba(83, 128, 186, 0.12);

  padding: 28px;

  text-align: center;

}



.quiz-category-badge {

  display: inline-block;

  padding: 8px 16px;

  border-radius: 999px;

  background: #eaf3ff;

  color: var(--blue-dark);

  font-weight: 800;

  margin-bottom: 16px;

}



.quiz-visual {

  font-size: clamp(3rem, 9vw, 4.5rem);

  margin-bottom: 16px;

}



.quiz-question {

  margin: 0 0 22px;

  color: var(--text-dark);

  font-size: 1.6rem;

}



.quiz-options {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}



.quiz-option {

  min-height: 64px;

  padding: 14px 16px;

  border: 2px solid var(--border-soft);

  border-radius: 20px;

  background: #f8fbff;

  font-weight: 800;

  color: var(--text-dark);

  cursor: pointer;

  transition: transform 0.2s ease, background 0.2s ease;

}



.quiz-option:hover,

.quiz-option:focus-visible {

  transform: translateY(-2px);

  outline: none;

}



.quiz-option.correct {

  background: #daf6e2;

  border-color: #8fd8a3;

  color: #1f6b33;

}



.quiz-option.wrong {

  background: #ffe3ea;

  border-color: #f5a0b7;

  color: #8a2e4f;

}



.quiz-option.locked {

  pointer-events: none;

  opacity: 0.92;

}



.quiz-feedback {

  margin-top: 20px;

  padding: 14px 16px;

  border-radius: 18px;

  background: #eef6ff;

  color: var(--blue-dark);

  font-weight: 700;

}



.quiz-actions {

  display: flex;

  justify-content: center;

  gap: 16px;

  margin-top: 22px;

}



.quiz-result h2 {

  margin-top: 0;

  color: var(--blue-dark);

}



#quizScoreText {

  font-size: 1.2rem;

  font-weight: 800;

  color: var(--text-dark);

}



@media (max-width: 760px) {

  .quiz-controls {

    flex-direction: column;

    align-items: stretch;

  }



  .quiz-options {

    grid-template-columns: 1fr;

  }



  .quiz-actions {

    flex-direction: column;

  }



  .quiz-actions .btn {

    width: 100%;

  }

}