.exercise-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 1.1rem; overflow: hidden; box-shadow: var(--shadow-sm);
}
.exercise-card .ex-header {
  padding: 0.75rem 1.3rem; font-weight: 700; font-size: 0.82rem; font-family: var(--font-sans);
  background: var(--paper-2); border-bottom: 1px solid var(--border); color: var(--ink);
}
.exercise-card .ex-header h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.exercise-card .ex-header .heading-en { font-weight: 400; color: var(--text-muted); }
.exercise-card .ex-body { padding: 1.1rem 1.3rem; }
.exercise-card .ex-footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  padding: 0.75rem 1.3rem 1.1rem;
  border-top: 1px solid var(--border-light);
}
.exercise-card .ex-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
/* Practice actions share one size, including buttons that carry .btn-sm. */
.exercise-card .ex-footer .btn {
  min-width: 6.5rem;
  min-height: 2.4rem;
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
}
.exercise-card .ex-footer .btn.btn-sm { padding: 0.55rem 1rem; font-size: 0.8rem; }
.ex-question { padding: 0.55rem 0; font-size: 0.92rem; font-family: var(--font-jp); color: var(--ink); }
.ex-question .q-text { margin-bottom: 0.45rem; }
.ex-question .options { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Fill exercise — sentence with inline blank */
.exercise-card--fill .ex-question {
  padding: 0.4rem 0;
  line-height: 2;
}
.exercise-card--fill .q-text {
  font-size: 0.95rem;
}

/* Feedback */
.ex-feedback {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  font-family: var(--font-sans);
  margin-top: 0.35rem;
}
.ex-feedback.correct {
  color: var(--success);
  background: var(--success-light);
}
.ex-feedback.wrong {
  color: var(--error);
  background: var(--error-light);
}

/* Interactive Matching Game */
.matching-game { display: flex; gap: 0; align-items: flex-start; position: relative; margin: 0.8rem 0; }
.matching-col { display: flex; flex-direction: column; gap: 0.5rem; z-index: 1; }
.matching-col-left { width: 145px; flex-shrink: 0; }
.matching-col-right { width: 175px; flex-shrink: 0; }
.matching-lines-wrap { flex: 1; min-width: 60px; align-self: stretch; position: relative; overflow: visible; }
.matching-lines-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.matching-card {
  padding: 0.55rem 0.85rem; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: var(--card);
  cursor: pointer; transition: all 0.12s ease;
  display: flex; flex-direction: column; user-select: none;
}
.matching-card.person { background: #fef2f2; border-color: #dc2626; }
.matching-card.place  { background: #f0fdf4; border-color: #16a34a; }
.matching-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.matching-card.selected { box-shadow: 0 0 0 2px var(--accent-soft); border-color: var(--accent); }
.matching-card.matched { opacity: 0.6; border-style: dashed; }
.matching-card.correct { border-color: var(--success); background: var(--success-light); opacity: 1; border-style: solid; }
.matching-card.wrong { border-color: var(--error); background: var(--error-light); opacity: 1; border-style: solid; }
.matching-card .mc-name { font-family: var(--font-jp); font-size: 0.9rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.matching-card .mc-desc { font-family: var(--font-sans); font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; }
.matching-controls { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.85rem; }
.matching-result { font-size: 0.85rem; font-weight: 700; font-family: var(--font-sans); }