/* ============================================================
   GAME: Flashcard Từ vựng — chỉ dùng biến từ tokens.css
   ============================================================ */
.fc-level-filter { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.fc-progress { text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-3); }

.fc-stage { display: flex; justify-content: center; margin-bottom: var(--space-4); perspective: 1200px; }
.fc-card { width: 320px; height: 220px; cursor: pointer; }
.fc-card__inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.5s; transform-style: preserve-3d;
}
.fc-card.is-flipped .fc-card__inner { transform: rotateY(180deg); }
.fc-card__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--radius-xl); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: var(--space-2);
  box-shadow: var(--shadow-3); padding: var(--space-4);
}
.fc-card__face--front { background: var(--gradient-primary); color: #fff; }
.fc-card__face--back { background: var(--color-surface); border: 2px solid var(--color-border); transform: rotateY(180deg); }
.fc-card__hanzi { font-size: 4rem; font-family: var(--font-family-display), "Noto Sans SC", sans-serif; }
.fc-card__hint { font-size: var(--text-body-sm); opacity: 0.85; }
.fc-card__pinyin { font-size: var(--text-h4); color: var(--color-primary); font-weight: 700; }
.fc-card__meaning { font-size: var(--text-body); color: var(--color-text); }

.fc-controls { display: flex; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.fc-controls--secondary { margin-top: 0; }

.hz-speak-btn {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-surface);
  cursor: pointer; font-size: 0.95rem;
}
.hz-speak-btn:hover { transform: scale(1.1); border-color: var(--color-primary); }