feat(ui): 화면들에 레트로 UI 스타일 적용

- front_screen: 레트로 패널 및 버튼 스타일
- game_play_screen: 레트로 색상 및 초기 BGM 로직 개선
- mobile_carousel_layout: 레트로 테마 적용
- carousel_nav_bar: 골드 액센트 색상 적용

lib/src/features/game/game_play_screen.dart

@@ -36,6 +36,7 @@ import 'package:askiineverdie/src/features/game/widgets/statistics_dialog.dart';
 import 'package:askiineverdie/src/features/game/widgets/help_dialog.dart';
 import 'package:askiineverdie/src/core/storage/settings_repository.dart';
 import 'package:askiineverdie/src/core/audio/audio_service.dart';
+import 'package:askiineverdie/src/shared/retro_colors.dart';
 
 /// 게임 진행 화면 (Main.dfm 기반 3패널 레이아웃)
 ///
@@ -829,7 +830,7 @@ class _GamePlayScreenState extends State<GamePlayScreen>
       );
     }
 
-    // 기존 데스크톱 레이아웃
+    // 기존 데스크톱 레이아웃 (레트로 스타일)
     return NotificationOverlay(
       key: localeKey,
       notificationService: _notificationService,
@@ -846,8 +847,17 @@ class _GamePlayScreenState extends State<GamePlayScreen>
           }
         },
         child: Scaffold(
+          backgroundColor: RetroColors.deepBrown,
           appBar: AppBar(
-            title: Text(L10n.of(context).progressQuestTitle(state.traits.name)),
+            backgroundColor: RetroColors.darkBrown,
+            title: Text(
+              L10n.of(context).progressQuestTitle(state.traits.name),
+              style: const TextStyle(
+                fontFamily: 'PressStart2P',
+                fontSize: 12,
+                color: RetroColors.gold,
+              ),
+            ),
             actions: [
               // 치트 버튼 (디버그용)
               if (widget.controller.cheatsEnabled) ...[
@@ -955,6 +965,11 @@ class _GamePlayScreenState extends State<GamePlayScreen>
     final l10n = L10n.of(context);
     return Card(
       margin: const EdgeInsets.all(4),
+      color: RetroColors.panelBg,
+      shape: RoundedRectangleBorder(
+        side: const BorderSide(color: RetroColors.panelBorderOuter, width: 2),
+        borderRadius: BorderRadius.circular(0),
+      ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
@@ -1023,6 +1038,11 @@ class _GamePlayScreenState extends State<GamePlayScreen>
     final l10n = L10n.of(context);
     return Card(
       margin: const EdgeInsets.all(4),
+      color: RetroColors.panelBg,
+      shape: RoundedRectangleBorder(
+        side: const BorderSide(color: RetroColors.panelBorderOuter, width: 2),
+        borderRadius: BorderRadius.circular(0),
+      ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
@@ -1069,6 +1089,11 @@ class _GamePlayScreenState extends State<GamePlayScreen>
     final l10n = L10n.of(context);
     return Card(
       margin: const EdgeInsets.all(4),
+      color: RetroColors.panelBg,
+      shape: RoundedRectangleBorder(
+        side: const BorderSide(color: RetroColors.panelBorderOuter, width: 2),
+        borderRadius: BorderRadius.circular(0),
+      ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
@@ -1112,13 +1137,20 @@ class _GamePlayScreenState extends State<GamePlayScreen>
 
   Widget _buildPanelHeader(String title) {
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-      color: Theme.of(context).colorScheme.primaryContainer,
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+      decoration: const BoxDecoration(
+        color: RetroColors.darkBrown,
+        border: Border(
+          bottom: BorderSide(color: RetroColors.gold, width: 2),
+        ),
+      ),
       child: Text(
-        title,
-        style: TextStyle(
+        title.toUpperCase(),
+        style: const TextStyle(
+          fontFamily: 'PressStart2P',
+          fontSize: 8,
           fontWeight: FontWeight.bold,
-          color: Theme.of(context).colorScheme.onPrimaryContainer,
+          color: RetroColors.gold,
         ),
       ),
     );
@@ -1126,8 +1158,15 @@ class _GamePlayScreenState extends State<GamePlayScreen>
 
   Widget _buildSectionHeader(String title) {
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
-      child: Text(title, style: Theme.of(context).textTheme.labelSmall),
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      child: Text(
+        title.toUpperCase(),
+        style: const TextStyle(
+          fontFamily: 'PressStart2P',
+          fontSize: 6,
+          color: RetroColors.textDisabled,
+        ),
+      ),
     );
   }
 

lib/src/features/game/layouts/mobile_carousel_layout.dart

@@ -15,6 +15,7 @@ import 'package:askiineverdie/src/features/game/pages/story_page.dart';
 import 'package:askiineverdie/src/features/game/widgets/carousel_nav_bar.dart';
 import 'package:askiineverdie/src/features/game/widgets/combat_log.dart';
 import 'package:askiineverdie/src/features/game/widgets/enhanced_animation_panel.dart';
+import 'package:askiineverdie/src/shared/retro_colors.dart';
 
 /// 모바일 캐로셀 레이아웃
 ///
@@ -358,6 +359,7 @@ class _MobileCarouselLayoutState extends State<MobileCarouselLayout> {
     showModalBottomSheet<void>(
       context: context,
       isScrollControlled: true,
+      backgroundColor: RetroColors.panelBg,
       constraints: BoxConstraints(
         maxHeight: MediaQuery.of(context).size.height * 0.7,
       ),
@@ -366,19 +368,22 @@ class _MobileCarouselLayoutState extends State<MobileCarouselLayout> {
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: [
-            // 헤더
+            // 헤더 (레트로 스타일)
             Container(
               padding: const EdgeInsets.all(16),
               width: double.infinity,
-              decoration: BoxDecoration(
-                color: Theme.of(context).colorScheme.primaryContainer,
+              decoration: const BoxDecoration(
+                color: RetroColors.darkBrown,
+                border: Border(
+                  bottom: BorderSide(color: RetroColors.gold, width: 2),
+                ),
               ),
-              child: Text(
-                l10n.menuOptions,
+              child: const Text(
+                'OPTIONS',
                 style: TextStyle(
-                  fontWeight: FontWeight.bold,
-                  fontSize: 16,
-                  color: Theme.of(context).colorScheme.onPrimaryContainer,
+                  fontFamily: 'PressStart2P',
+                  fontSize: 12,
+                  color: RetroColors.gold,
                 ),
               ),
             ),
@@ -555,12 +560,21 @@ class _MobileCarouselLayoutState extends State<MobileCarouselLayout> {
     final state = widget.state;
 
     return Scaffold(
+      backgroundColor: RetroColors.deepBrown,
       appBar: AppBar(
-        title: Text(L10n.of(context).progressQuestTitle(state.traits.name)),
+        backgroundColor: RetroColors.darkBrown,
+        title: Text(
+          L10n.of(context).progressQuestTitle(state.traits.name),
+          style: const TextStyle(
+            fontFamily: 'PressStart2P',
+            fontSize: 10,
+            color: RetroColors.gold,
+          ),
+        ),
         actions: [
           // 옵션 버튼
           IconButton(
-            icon: const Icon(Icons.settings),
+            icon: const Icon(Icons.settings, color: RetroColors.gold),
             onPressed: () => _showOptionsMenu(context),
             tooltip: l10n.menuOptions,
           ),

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

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'package:askiineverdie/data/game_text_l10n.dart' as l10n;
+import 'package:askiineverdie/src/shared/retro_colors.dart';
 
 /// 캐로셀 페이지 인덱스
 enum CarouselPage {
@@ -13,7 +14,7 @@ enum CarouselPage {
   story, // 6: 스토리
 }
 
-/// 캐로셀 네비게이션 바
+/// 캐로셀 네비게이션 바 (레트로 스타일)
 ///
 /// 7개의 페이지 버튼을 표시하고 현재 페이지를 하이라이트.
 /// 버튼 탭 시 해당 페이지로 이동.
@@ -31,10 +32,12 @@ class CarouselNavBar extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       height: 56,
-      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
-      decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceContainerHighest,
-        border: Border(top: BorderSide(color: Theme.of(context).dividerColor)),
+      padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 4),
+      decoration: const BoxDecoration(
+        color: RetroColors.darkBrown,
+        border: Border(
+          top: BorderSide(color: RetroColors.gold, width: 2),
+        ),
       ),
       child: Row(
         children: CarouselPage.values.map((page) {
@@ -52,7 +55,7 @@ class CarouselNavBar extends StatelessWidget {
   }
 }
 
-/// 개별 네비게이션 버튼
+/// 개별 네비게이션 버튼 (레트로 스타일)
 class _NavButton extends StatelessWidget {
   const _NavButton({
     required this.page,
@@ -67,33 +70,32 @@ class _NavButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final (icon, label) = _getIconAndLabel(page);
-    final theme = Theme.of(context);
-    final color = isSelected
-        ? theme.colorScheme.primary
-        : theme.colorScheme.onSurfaceVariant;
+    final color = isSelected ? RetroColors.gold : RetroColors.textDisabled;
+    final bgColor = isSelected
+        ? RetroColors.panelBgLight
+        : Colors.transparent;
 
-    return InkWell(
+    return GestureDetector(
       onTap: onTap,
-      borderRadius: BorderRadius.circular(8),
       child: Container(
+        margin: const EdgeInsets.symmetric(horizontal: 1),
         padding: const EdgeInsets.symmetric(vertical: 4),
-        decoration: isSelected
-            ? BoxDecoration(
-                color: theme.colorScheme.primaryContainer.withValues(
-                  alpha: 0.5,
-                ),
-                borderRadius: BorderRadius.circular(8),
-              )
-            : null,
+        decoration: BoxDecoration(
+          color: bgColor,
+          border: isSelected
+              ? Border.all(color: RetroColors.gold, width: 1)
+              : null,
+        ),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            Icon(icon, size: 20, color: color),
+            Icon(icon, size: 18, color: color),
             const SizedBox(height: 2),
             Text(
               label,
               style: TextStyle(
-                fontSize: 9,
+                fontFamily: 'PressStart2P',
+                fontSize: 5,
                 fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                 color: color,
               ),