body {
  font-family: Arial, sans-serif;
  padding: 40px;
  max-width: 960px;
  margin: 0 auto;
}

h1 {
  margin-bottom: 20px;
}
.back-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:18px;
  padding:8px 13px;
  border:1px solid #b8d1e5;
  border-radius:10px;
  background:var(--pale);
  color:var(--blue);
  font-size:.88rem;
  font-weight:800;
  text-decoration:none;
  transition:.15s ease;
}

.back-button:hover{
  background:#e2eff9;
  border-color:var(--blue);
  color:var(--navy);
}

.back-button svg{
  width:16px;
  height:16px;
  flex:none;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 5px 10px 20px 0;
  cursor: pointer;
}

#app {
  margin-top: 30px;
}

.question-block {
  background: #f2f2f2;
  padding: 20px;
  border-radius: 8px;
}

.question-block h3 {
  margin-bottom: 20px;
  color: #1e7c1e;
}

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.options button {
  flex: 1 1 calc(50% - 10px);
  padding: 12px;
  font-size: 16px;
}

.correct {
  background-color: #d4edda !important;
  border-color: #28a745 !important;
  color: #155724 !important;
}

.incorrect {
  background-color: #f8d7da !important;
  border-color: #dc3545 !important;
  color: #721c24 !important;
}

button:disabled {
  opacity: 0.6;
}
/* ===== Flip Flashcards ===== */
.flashcard-wrap{
  max-width: 720px;
}

.card-scene{
  perspective: 1200px;
}

.card{
  width: 100%;
  min-height: 180px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 500ms ease;
  cursor: pointer;

  /* keep your existing “card-like” look */
  background: transparent;
}

.card.is-flipped{
  transform: rotateY(180deg);
}

.card__face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 12px;
  padding: 22px;
  display: grid;
  align-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
}

.card__front{
  background: #ffffff;
}

.card__back{
  background: #0f172a;
  color: #ffffff;
  transform: rotateY(180deg);
}

.card__hint{
  margin-top: 12px;
  font-size: 13px;
  opacity: .75;
}