feat(ui): 게임 위젯들 레트로 UI 적용

- death_overlay: 사망 화면 레트로 스타일로 재디자인
- help_dialog: RetroDialog 사용으로 통일
- hp_mp_bar: 레트로 프로그레스 바 스타일 적용
- notification_overlay: 레트로 패널 스타일 적용
- statistics_dialog: RetroDialog로 변경

lib/src/features/game/widgets/death_overlay.dart

@@ -4,6 +4,7 @@ import 'package:askiineverdie/data/game_text_l10n.dart' as l10n;
 import 'package:askiineverdie/src/core/l10n/game_data_l10n.dart';
 import 'package:askiineverdie/src/core/model/combat_event.dart';
 import 'package:askiineverdie/src/core/model/game_state.dart';
+import 'package:askiineverdie/src/shared/retro_colors.dart';
 
 /// 사망 오버레이 위젯 (Phase 4)
 ///
@@ -27,96 +28,161 @@ class DeathOverlay extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
-
     return Material(
-      color: Colors.black87,
+      color: Colors.black.withValues(alpha: 0.9),
       child: Center(
         child: Container(
-          constraints: const BoxConstraints(maxWidth: 400),
+          constraints: const BoxConstraints(maxWidth: 420),
           margin: const EdgeInsets.all(24),
-          padding: const EdgeInsets.all(24),
           decoration: BoxDecoration(
-            color: colorScheme.surface,
-            borderRadius: BorderRadius.circular(16),
-            border: Border.all(
-              color: colorScheme.error.withValues(alpha: 0.5),
-              width: 2,
+            color: RetroColors.panelBg,
+            border: const Border(
+              top: BorderSide(color: RetroColors.hpRed, width: 4),
+              left: BorderSide(color: RetroColors.hpRed, width: 4),
+              bottom: BorderSide(color: RetroColors.panelBorderOuter, width: 4),
+              right: BorderSide(color: RetroColors.panelBorderOuter, width: 4),
             ),
             boxShadow: [
               BoxShadow(
-                color: colorScheme.error.withValues(alpha: 0.3),
-                blurRadius: 20,
+                color: RetroColors.hpRed.withValues(alpha: 0.5),
+                blurRadius: 30,
                 spreadRadius: 5,
               ),
             ],
           ),
-          child: SingleChildScrollView(
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                // 사망 타이틀
-                _buildDeathTitle(context),
-                const SizedBox(height: 16),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              // 헤더 바
+              Container(
+                width: double.infinity,
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                decoration: BoxDecoration(
+                  color: RetroColors.hpRed.withValues(alpha: 0.3),
+                  border: const Border(
+                    bottom: BorderSide(color: RetroColors.hpRed, width: 2),
+                  ),
+                ),
+                child: const Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text(
+                      '☠',
+                      style: TextStyle(fontSize: 16, color: RetroColors.hpRed),
+                    ),
+                    SizedBox(width: 8),
+                    Text(
+                      'GAME OVER',
+                      style: TextStyle(
+                        fontFamily: 'PressStart2P',
+                        fontSize: 12,
+                        color: RetroColors.hpRed,
+                        letterSpacing: 2,
+                      ),
+                    ),
+                    SizedBox(width: 8),
+                    Text(
+                      '☠',
+                      style: TextStyle(fontSize: 16, color: RetroColors.hpRed),
+                    ),
+                  ],
+                ),
+              ),
+              // 본문
+              SingleChildScrollView(
+                padding: const EdgeInsets.all(16),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    // 사망 타이틀
+                    _buildDeathTitle(context),
+                    const SizedBox(height: 16),
 
-                // 캐릭터 정보
-                _buildCharacterInfo(context),
-                const SizedBox(height: 16),
+                    // 캐릭터 정보
+                    _buildCharacterInfo(context),
+                    const SizedBox(height: 16),
 
-                // 사망 원인
-                _buildDeathCause(context),
-                const SizedBox(height: 24),
+                    // 사망 원인
+                    _buildDeathCause(context),
+                    const SizedBox(height: 20),
 
-                // 구분선
-                Divider(color: colorScheme.outlineVariant),
-                const SizedBox(height: 16),
+                    // 구분선
+                    _buildRetroDivider(),
+                    const SizedBox(height: 16),
 
-                // 상실 정보
-                _buildLossInfo(context),
+                    // 상실 정보
+                    _buildLossInfo(context),
 
-                // 전투 로그 (있는 경우만 표시)
-                if (deathInfo.lastCombatEvents.isNotEmpty) ...[
-                  const SizedBox(height: 16),
-                  Divider(color: colorScheme.outlineVariant),
-                  const SizedBox(height: 8),
-                  _buildCombatLog(context),
-                ],
+                    // 전투 로그 (있는 경우만 표시)
+                    if (deathInfo.lastCombatEvents.isNotEmpty) ...[
+                      const SizedBox(height: 16),
+                      _buildRetroDivider(),
+                      const SizedBox(height: 8),
+                      _buildCombatLog(context),
+                    ],
 
-                const SizedBox(height: 24),
+                    const SizedBox(height: 24),
 
-                // 부활 버튼
-                _buildResurrectButton(context),
-              ],
-            ),
+                    // 부활 버튼
+                    _buildResurrectButton(context),
+                  ],
+                ),
+              ),
+            ],
           ),
         ),
       ),
     );
   }
 
+  /// 레트로 스타일 구분선
+  Widget _buildRetroDivider() {
+    return Container(
+      height: 2,
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          colors: [
+            Colors.transparent,
+            RetroColors.hpRedDark,
+            RetroColors.hpRed,
+            RetroColors.hpRedDark,
+            Colors.transparent,
+          ],
+        ),
+      ),
+    );
+  }
+
   Widget _buildDeathTitle(BuildContext context) {
     return Column(
       children: [
-        // ASCII 스컬
-        Text(
-          '  _____\n /     \\\n| () () |\n \\  ^  /\n  |||||',
+        // ASCII 스컬 (더 큰 버전)
+        const Text(
+          '    _____ \n'
+          '   /     \\\n'
+          '  | () () |\n'
+          '   \\  ^  /\n'
+          '    ||||| ',
           style: TextStyle(
             fontFamily: 'JetBrainsMono',
-            fontSize: 14,
-            color: Theme.of(context).colorScheme.error,
+            fontSize: 12,
+            color: RetroColors.hpRed,
             height: 1.0,
           ),
           textAlign: TextAlign.center,
         ),
-        const SizedBox(height: 16),
+        const SizedBox(height: 12),
         Text(
-          l10n.deathYouDied,
-          style: TextStyle(
-            fontSize: 32,
-            fontWeight: FontWeight.bold,
-            color: Theme.of(context).colorScheme.error,
-            letterSpacing: 4,
+          l10n.deathYouDied.toUpperCase(),
+          style: const TextStyle(
+            fontFamily: 'PressStart2P',
+            fontSize: 14,
+            color: RetroColors.hpRed,
+            letterSpacing: 2,
+            shadows: [
+              Shadow(color: Colors.black, blurRadius: 4),
+              Shadow(color: RetroColors.hpRedDark, blurRadius: 8),
+            ],
           ),
         ),
       ],
@@ -124,49 +190,62 @@ class DeathOverlay extends StatelessWidget {
   }
 
   Widget _buildCharacterInfo(BuildContext context) {
-    final theme = Theme.of(context);
-    return Column(
-      children: [
-        Text(
-          traits.name,
-          style: theme.textTheme.titleLarge?.copyWith(
-            fontWeight: FontWeight.bold,
+    return Container(
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        color: RetroColors.panelBgLight.withValues(alpha: 0.5),
+        border: Border.all(color: RetroColors.panelBorderInner, width: 1),
+      ),
+      child: Column(
+        children: [
+          Text(
+            traits.name,
+            style: const TextStyle(
+              fontFamily: 'PressStart2P',
+              fontSize: 11,
+              color: RetroColors.gold,
+            ),
           ),
-        ),
-        const SizedBox(height: 4),
-        Text(
-          'Level ${deathInfo.levelAtDeath} ${GameDataL10n.getKlassName(context, traits.klass)}',
-          style: theme.textTheme.bodyLarge?.copyWith(
-            color: theme.colorScheme.onSurfaceVariant,
+          const SizedBox(height: 6),
+          Text(
+            'Lv.${deathInfo.levelAtDeath} ${GameDataL10n.getKlassName(context, traits.klass)}',
+            style: const TextStyle(
+              fontFamily: 'PressStart2P',
+              fontSize: 8,
+              color: RetroColors.textLight,
+            ),
           ),
-        ),
-      ],
+        ],
+      ),
     );
   }
 
   Widget _buildDeathCause(BuildContext context) {
-    final theme = Theme.of(context);
     final causeText = _getDeathCauseText();
 
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
       decoration: BoxDecoration(
-        color: theme.colorScheme.errorContainer.withValues(alpha: 0.3),
-        borderRadius: BorderRadius.circular(8),
+        color: RetroColors.hpRedDark.withValues(alpha: 0.3),
+        border: Border.all(color: RetroColors.hpRed.withValues(alpha: 0.5)),
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          Icon(
-            Icons.dangerous_outlined,
-            size: 20,
-            color: theme.colorScheme.error,
+          const Text(
+            '⚔',
+            style: TextStyle(fontSize: 14, color: RetroColors.hpRed),
           ),
           const SizedBox(width: 8),
-          Text(
-            causeText,
-            style: theme.textTheme.bodyMedium?.copyWith(
-              color: theme.colorScheme.error,
+          Flexible(
+            child: Text(
+              causeText,
+              style: const TextStyle(
+                fontFamily: 'PressStart2P',
+                fontSize: 7,
+                color: RetroColors.hpRed,
+              ),
+              textAlign: TextAlign.center,
             ),
           ),
         ],
@@ -183,7 +262,6 @@ class DeathOverlay extends StatelessWidget {
   }
 
   Widget _buildLossInfo(BuildContext context) {
-    final theme = Theme.of(context);
     final hasLostItem = deathInfo.lostItemName != null;
 
     return Column(
@@ -191,20 +269,18 @@ class DeathOverlay extends StatelessWidget {
         // 제물로 바친 아이템 표시
         if (hasLostItem) ...[
           Container(
-            padding: const EdgeInsets.all(12),
+            padding: const EdgeInsets.all(10),
             decoration: BoxDecoration(
-              color: theme.colorScheme.errorContainer.withValues(alpha: 0.2),
-              borderRadius: BorderRadius.circular(8),
+              color: RetroColors.hpRedDark.withValues(alpha: 0.2),
               border: Border.all(
-                color: theme.colorScheme.error.withValues(alpha: 0.3),
+                color: RetroColors.hpRed.withValues(alpha: 0.4),
               ),
             ),
             child: Row(
               children: [
-                Icon(
-                  Icons.local_fire_department,
-                  size: 20,
-                  color: theme.colorScheme.error,
+                const Text(
+                  '🔥',
+                  style: TextStyle(fontSize: 16),
                 ),
                 const SizedBox(width: 8),
                 Expanded(
@@ -212,17 +288,20 @@ class DeathOverlay extends StatelessWidget {
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Text(
-                        l10n.deathSacrificedToResurrect,
-                        style: theme.textTheme.labelSmall?.copyWith(
-                          color: theme.colorScheme.onSurfaceVariant,
+                        l10n.deathSacrificedToResurrect.toUpperCase(),
+                        style: const TextStyle(
+                          fontFamily: 'PressStart2P',
+                          fontSize: 6,
+                          color: RetroColors.textDisabled,
                         ),
                       ),
-                      const SizedBox(height: 2),
+                      const SizedBox(height: 4),
                       Text(
                         deathInfo.lostItemName!,
-                        style: theme.textTheme.bodyMedium?.copyWith(
-                          fontWeight: FontWeight.bold,
-                          color: theme.colorScheme.error,
+                        style: const TextStyle(
+                          fontFamily: 'PressStart2P',
+                          fontSize: 7,
+                          color: RetroColors.hpRed,
                         ),
                       ),
                     ],
@@ -235,19 +314,19 @@ class DeathOverlay extends StatelessWidget {
         ] else ...[
           _buildInfoRow(
             context,
-            icon: Icons.check_circle_outline,
+            asciiIcon: '✓',
             label: l10n.deathEquipment,
             value: l10n.deathNoSacrificeNeeded,
-            isNegative: false,
+            valueColor: RetroColors.expGreen,
           ),
           const SizedBox(height: 8),
         ],
         _buildInfoRow(
           context,
-          icon: Icons.monetization_on_outlined,
+          asciiIcon: '💰',
           label: l10n.deathCoinRemaining,
           value: _formatGold(deathInfo.goldAtDeath),
-          isNegative: false,
+          valueColor: RetroColors.gold,
         ),
       ],
     );
@@ -255,35 +334,36 @@ class DeathOverlay extends StatelessWidget {
 
   Widget _buildInfoRow(
     BuildContext context, {
-    required IconData icon,
+    required String asciiIcon,
     required String label,
     required String value,
-    required bool isNegative,
+    required Color valueColor,
   }) {
-    final theme = Theme.of(context);
-    final valueColor = isNegative
-        ? theme.colorScheme.error
-        : theme.colorScheme.primary;
-
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
         Row(
           children: [
-            Icon(icon, size: 18, color: theme.colorScheme.onSurfaceVariant),
+            Text(
+              asciiIcon,
+              style: TextStyle(fontSize: 14, color: valueColor),
+            ),
             const SizedBox(width: 8),
             Text(
               label,
-              style: theme.textTheme.bodyMedium?.copyWith(
-                color: theme.colorScheme.onSurfaceVariant,
+              style: const TextStyle(
+                fontFamily: 'PressStart2P',
+                fontSize: 6,
+                color: RetroColors.textDisabled,
               ),
             ),
           ],
         ),
         Text(
           value,
-          style: theme.textTheme.bodyMedium?.copyWith(
-            fontWeight: FontWeight.bold,
+          style: TextStyle(
+            fontFamily: 'PressStart2P',
+            fontSize: 7,
             color: valueColor,
           ),
         ),
@@ -301,17 +381,48 @@ class DeathOverlay extends StatelessWidget {
   }
 
   Widget _buildResurrectButton(BuildContext context) {
-    final theme = Theme.of(context);
-
-    return SizedBox(
-      width: double.infinity,
-      child: FilledButton.icon(
-        onPressed: onResurrect,
-        icon: const Icon(Icons.replay),
-        label: Text(l10n.deathResurrect),
-        style: FilledButton.styleFrom(
-          backgroundColor: theme.colorScheme.primary,
-          padding: const EdgeInsets.symmetric(vertical: 16),
+    return GestureDetector(
+      onTap: onResurrect,
+      child: Container(
+        width: double.infinity,
+        padding: const EdgeInsets.symmetric(vertical: 12),
+        decoration: BoxDecoration(
+          color: RetroColors.expGreen.withValues(alpha: 0.2),
+          border: Border(
+            top: const BorderSide(color: RetroColors.expGreen, width: 3),
+            left: const BorderSide(color: RetroColors.expGreen, width: 3),
+            bottom: BorderSide(
+              color: RetroColors.expGreenDark.withValues(alpha: 0.8),
+              width: 3,
+            ),
+            right: BorderSide(
+              color: RetroColors.expGreenDark.withValues(alpha: 0.8),
+              width: 3,
+            ),
+          ),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            const Text(
+              '↺',
+              style: TextStyle(
+                fontSize: 16,
+                color: RetroColors.expGreen,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            const SizedBox(width: 8),
+            Text(
+              l10n.deathResurrect.toUpperCase(),
+              style: const TextStyle(
+                fontFamily: 'PressStart2P',
+                fontSize: 10,
+                color: RetroColors.expGreen,
+                letterSpacing: 1,
+              ),
+            ),
+          ],
         ),
       ),
     );
@@ -319,29 +430,38 @@ class DeathOverlay extends StatelessWidget {
 
   /// 사망 직전 전투 로그 표시
   Widget _buildCombatLog(BuildContext context) {
-    final theme = Theme.of(context);
     final events = deathInfo.lastCombatEvents;
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Text(
-          l10n.deathCombatLog,
-          style: theme.textTheme.labelMedium?.copyWith(
-            color: theme.colorScheme.onSurfaceVariant,
-            fontWeight: FontWeight.bold,
-          ),
+        Row(
+          children: [
+            const Text(
+              '📜',
+              style: TextStyle(fontSize: 12),
+            ),
+            const SizedBox(width: 6),
+            Text(
+              l10n.deathCombatLog.toUpperCase(),
+              style: const TextStyle(
+                fontFamily: 'PressStart2P',
+                fontSize: 7,
+                color: RetroColors.gold,
+              ),
+            ),
+          ],
         ),
         const SizedBox(height: 8),
         Container(
-          constraints: const BoxConstraints(maxHeight: 120),
+          constraints: const BoxConstraints(maxHeight: 100),
           decoration: BoxDecoration(
-            color: theme.colorScheme.surfaceContainerHighest,
-            borderRadius: BorderRadius.circular(8),
+            color: RetroColors.deepBrown,
+            border: Border.all(color: RetroColors.panelBorderOuter, width: 2),
           ),
           child: ListView.builder(
             shrinkWrap: true,
-            padding: const EdgeInsets.all(8),
+            padding: const EdgeInsets.all(6),
             itemCount: events.length,
             itemBuilder: (context, index) {
               final event = events[index];
@@ -355,22 +475,26 @@ class DeathOverlay extends StatelessWidget {
 
   /// 개별 전투 이벤트 타일
   Widget _buildCombatEventTile(BuildContext context, CombatEvent event) {
-    final (icon, color, message) = _formatCombatEvent(event);
+    final (asciiIcon, color, message) = _formatCombatEvent(event);
 
     return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 2),
+      padding: const EdgeInsets.symmetric(vertical: 1),
       child: Row(
         children: [
-          Icon(icon, size: 12, color: color),
-          const SizedBox(width: 6),
+          Text(
+            asciiIcon,
+            style: TextStyle(fontSize: 10, color: color),
+          ),
+          const SizedBox(width: 4),
           Expanded(
             child: Text(
               message,
               style: TextStyle(
-                fontSize: 11,
-                color: color,
                 fontFamily: 'JetBrainsMono',
+                fontSize: 8,
+                color: color,
               ),
+              overflow: TextOverflow.ellipsis,
             ),
           ),
         ],
@@ -378,75 +502,75 @@ class DeathOverlay extends StatelessWidget {
     );
   }
 
-  /// 전투 이벤트를 아이콘, 색상, 메시지로 포맷
-  (IconData, Color, String) _formatCombatEvent(CombatEvent event) {
+  /// 전투 이벤트를 ASCII 아이콘, 색상, 메시지로 포맷
+  (String, Color, String) _formatCombatEvent(CombatEvent event) {
     final target = event.targetName ?? '';
     return switch (event.type) {
       CombatEventType.playerAttack => (
-        event.isCritical ? Icons.flash_on : Icons.local_fire_department,
-        event.isCritical ? Colors.yellow.shade300 : Colors.green.shade300,
+        event.isCritical ? '⚡' : '⚔',
+        event.isCritical ? RetroColors.gold : RetroColors.expGreen,
         event.isCritical
             ? l10n.combatCritical(event.damage, target)
             : l10n.combatYouHit(target, event.damage),
       ),
       CombatEventType.monsterAttack => (
-        Icons.dangerous,
-        Colors.red.shade300,
+        '💀',
+        RetroColors.hpRed,
         l10n.combatMonsterHitsYou(target, event.damage),
       ),
       CombatEventType.playerEvade => (
-        Icons.directions_run,
-        Colors.cyan.shade300,
+        '➤',
+        RetroColors.asciiCyan,
         l10n.combatEvadedAttackFrom(target),
       ),
       CombatEventType.monsterEvade => (
-        Icons.directions_run,
-        Colors.orange.shade300,
+        '➤',
+        const Color(0xFFFF9933),
         l10n.combatMonsterEvaded(target),
       ),
       CombatEventType.playerBlock => (
-        Icons.shield,
-        Colors.blueGrey.shade300,
+        '🛡',
+        RetroColors.mpBlue,
         l10n.combatBlockedAttack(target, event.damage),
       ),
       CombatEventType.playerParry => (
-        Icons.sports_kabaddi,
-        Colors.teal.shade300,
+        '⚔',
+        const Color(0xFF00CCCC),
         l10n.combatParriedAttack(target, event.damage),
       ),
       CombatEventType.playerSkill => (
-        Icons.auto_fix_high,
-        Colors.purple.shade300,
+        '✧',
+        const Color(0xFF9966FF),
         l10n.combatSkillDamage(event.skillName ?? '', event.damage),
       ),
       CombatEventType.playerHeal => (
-        Icons.healing,
-        Colors.green.shade300,
+        '♥',
+        RetroColors.expGreen,
         l10n.combatHealedFor(event.healAmount),
       ),
       CombatEventType.playerBuff => (
-        Icons.trending_up,
-        Colors.lightBlue.shade300,
+        '↑',
+        RetroColors.mpBlue,
         l10n.combatBuffActivated(event.skillName ?? ''),
       ),
       CombatEventType.playerDebuff => (
-        Icons.trending_down,
-        Colors.deepOrange.shade300,
+        '↓',
+        const Color(0xFFFF6633),
         l10n.combatDebuffApplied(event.skillName ?? '', target),
       ),
       CombatEventType.dotTick => (
-        Icons.whatshot,
-        Colors.deepOrange.shade300,
+        '🔥',
+        const Color(0xFFFF6633),
         l10n.combatDotTick(event.skillName ?? '', event.damage),
       ),
       CombatEventType.playerPotion => (
-        Icons.local_drink,
-        Colors.lightGreen.shade300,
+        '🧪',
+        RetroColors.expGreen,
         l10n.combatPotionUsed(event.skillName ?? '', event.healAmount, target),
       ),
       CombatEventType.potionDrop => (
-        Icons.card_giftcard,
-        Colors.lime.shade300,
+        '🎁',
+        RetroColors.gold,
         l10n.combatPotionDrop(event.skillName ?? ''),
       ),
     };