add new listening comprehension mode

lib/src/widgets/kanji_card.dart

@@ -2,13 +2,15 @@ import 'package:flutter/material.dart';
 
 class KanjiCard extends StatelessWidget {
   final String characters;
+  final Widget? characterWidget;
   final String subtitle;
   final Color? backgroundColor;
   final Color? textColor;
 
   const KanjiCard({
     super.key,
-    required this.characters,
+    this.characters = '',
+    this.characterWidget,
     this.subtitle = '',
     this.backgroundColor,
     this.textColor,
@@ -32,19 +34,20 @@ class KanjiCard extends StatelessWidget {
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              Text(
-                characters,
-                style: theme.textTheme.headlineMedium?.copyWith(
-                  fontSize: 56,
-                  color: fgColor,
-                ),
-                textAlign: TextAlign.center,
-              ),
+              characterWidget ??
+                  Text(
+                    characters,
+                    style: theme.textTheme.headlineMedium?.copyWith(
+                      fontSize: 56,
+                      color: fgColor,
+                    ),
+                    textAlign: TextAlign.center,
+                  ),
               const SizedBox(height: 8),
               Text(
                 subtitle,
                 style: theme.textTheme.bodyMedium?.copyWith(
-                  color: fgColor.withValues(alpha: 0.7),
+                  color: fgColor.withAlpha((255 * 0.7).round()),
                 ),
                 textAlign: TextAlign.center,
               ),