style: change

.vscode/launch.json

@@ -7,7 +7,7 @@
       "type": "dart",
       "program": "lib/main.dart",
       "args": [
-        "--dart-define=BASE_URL=http://192.168.1.105:8080",
+        "--dart-define=BASE_URL=http://192.168.100.6:8080",
         "--target-platform=android-arm64"
       ]
     },

lib/core/config.dart

@@ -6,8 +6,10 @@ class AppConfig {
   /// - وب / شبیه‌ساز iOS: `--dart-define=BASE_URL=http://localhost:8080`
   /// - پروداکشن: `--dart-define=BASE_URL=https://api.hakemsho.ir`
   /// با تغییر شبکه/IP مک، مقدار dart-define یا همین پیش‌فرض را عوض کنید.
-  static const String baseUrl =
+  static const String baseUrl = String.fromEnvironment(
-      String.fromEnvironment('BASE_URL', defaultValue: 'http://192.168.1.105:8080');
+    'BASE_URL',
+    defaultValue: 'http://192.168.100.6:8080',
+  );
 
   static String get apiUrl => '$baseUrl/api';
 

lib/core/widgets/game_ui.dart

@@ -0,0 +1,233 @@
+import 'package:flutter/material.dart';
+
+import '../theme/app_theme.dart';
+
+/// مجموعه‌ی ویجت‌های گرافیکیِ مشترک برای ظاهرِ بازیِ (Unity-style):
+/// پس‌زمینه‌ی گرادیانی، پنل براق، دکمه‌ی جواهرگون، و عنوانِ درخشان.
+
+/// پس‌زمینه‌ی گرادیانیِ قرمز/طلایی با وینیت — زیربنای همه‌ی صفحات.
+class GameBackground extends StatelessWidget {
+  final Widget child;
+  final bool safeArea;
+  const GameBackground({super.key, required this.child, this.safeArea = true});
+
+  @override
+  Widget build(BuildContext context) {
+    final content = safeArea ? SafeArea(child: child) : child;
+    return DecoratedBox(
+      decoration: const BoxDecoration(
+        gradient: RadialGradient(
+          center: Alignment(0, -0.4),
+          radius: 1.3,
+          colors: [Color(0xFF5A0F1E), Color(0xFF240108)],
+          stops: [0.0, 1.0],
+        ),
+      ),
+      child: Stack(
+        children: [
+          // درخششِ ملایمِ بالا برای حسِ عمق.
+          const Positioned.fill(
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                gradient: RadialGradient(
+                  center: Alignment(0, -1.1),
+                  radius: 1.0,
+                  colors: [Color(0x33E9B949), Color(0x00000000)],
+                ),
+              ),
+            ),
+          ),
+          content,
+        ],
+      ),
+    );
+  }
+}
+
+/// پنلِ براقِ طلایی‌حاشیه با گرادیان و سایه.
+class GamePanel extends StatelessWidget {
+  final Widget child;
+  final EdgeInsetsGeometry padding;
+  final double radius;
+  const GamePanel({
+    super.key,
+    required this.child,
+    this.padding = const EdgeInsets.all(16),
+    this.radius = 18,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: padding,
+      decoration: BoxDecoration(
+        gradient: const LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [Color(0xFF6E1322), Color(0xFF3A0A12)],
+        ),
+        borderRadius: BorderRadius.circular(radius),
+        border: Border.all(color: AppColors.gold, width: 2),
+        boxShadow: const [
+          BoxShadow(color: Colors.black54, blurRadius: 14, offset: Offset(0, 6)),
+          BoxShadow(color: Color(0x22E9B949), blurRadius: 2, spreadRadius: 1),
+        ],
+      ),
+      child: child,
+    );
+  }
+}
+
+/// دکمه‌ی جواهرگون با گرادیان، بِوِل، سایه و انیمیشنِ فشار.
+class GameButton extends StatefulWidget {
+  final String label;
+  final IconData? icon;
+  final VoidCallback? onTap;
+  final List<Color> colors; // گرادیان (روشن بالا → تیره پایین)
+  final double height;
+  final double? width;
+
+  const GameButton({
+    super.key,
+    required this.label,
+    this.icon,
+    this.onTap,
+    this.colors = const [Color(0xFFD83A4A), Color(0xFF8E0E1B)],
+    this.height = 56,
+    this.width,
+  });
+
+  @override
+  State<GameButton> createState() => _GameButtonState();
+}
+
+class _GameButtonState extends State<GameButton> {
+  bool _down = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final enabled = widget.onTap != null;
+    return GestureDetector(
+      onTapDown: enabled ? (_) => setState(() => _down = true) : null,
+      onTapUp: enabled ? (_) => setState(() => _down = false) : null,
+      onTapCancel: enabled ? () => setState(() => _down = false) : null,
+      onTap: widget.onTap,
+      child: AnimatedScale(
+        scale: _down ? 0.96 : 1.0,
+        duration: const Duration(milliseconds: 90),
+        child: Opacity(
+          opacity: enabled ? 1 : 0.5,
+          child: Container(
+            width: widget.width,
+            height: widget.height,
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+                colors: widget.colors,
+              ),
+              borderRadius: BorderRadius.circular(16),
+              border: Border.all(color: AppColors.gold, width: 1.6),
+              boxShadow: _down
+                  ? const []
+                  : const [
+                      BoxShadow(
+                          color: Colors.black54,
+                          blurRadius: 8,
+                          offset: Offset(0, 5)),
+                    ],
+            ),
+            foregroundDecoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(16),
+              // هایلایتِ بالا برای حسِ شیشه‌ای/بِوِل.
+              gradient: const LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.center,
+                colors: [Color(0x40FFFFFF), Color(0x00FFFFFF)],
+              ),
+            ),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                if (widget.icon != null) ...[
+                  Icon(widget.icon, color: AppColors.gold, size: 22),
+                  const SizedBox(width: 10),
+                ],
+                Text(
+                  widget.label,
+                  style: const TextStyle(
+                    color: Colors.white,
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                    shadows: [Shadow(color: Colors.black54, blurRadius: 3)],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// عنوانِ درخشان (هاله‌ی طلایی).
+class GlowText extends StatelessWidget {
+  final String text;
+  final double size;
+  const GlowText(this.text, {super.key, this.size = 34});
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      text,
+      textAlign: TextAlign.center,
+      style: TextStyle(
+        fontFamily: 'Dana',
+        fontSize: size,
+        fontWeight: FontWeight.bold,
+        color: AppColors.gold,
+        shadows: const [
+          Shadow(color: Color(0xCCE9B949), blurRadius: 18),
+          Shadow(color: Color(0x88E9B949), blurRadius: 36),
+        ],
+      ),
+    );
+  }
+}
+
+/// چیپِ آماری براق (سکه/بلیط) با آیکن و مقدار.
+class StatChip extends StatelessWidget {
+  final IconData icon;
+  final String value;
+  final Color iconColor;
+  const StatChip({
+    super.key,
+    required this.icon,
+    required this.value,
+    this.iconColor = AppColors.gold,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+      decoration: BoxDecoration(
+        gradient: const LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [Color(0xFF2A0610), Color(0xFF14040A)],
+        ),
+        borderRadius: BorderRadius.circular(20),
+        border: Border.all(color: AppColors.goldDark),
+        boxShadow: const [BoxShadow(color: Colors.black54, blurRadius: 4)],
+      ),
+      child: Row(mainAxisSize: MainAxisSize.min, children: [
+        Icon(icon, color: iconColor, size: 18),
+        const SizedBox(width: 6),
+        Text(value, style: const TextStyle(color: AppColors.text, fontWeight: FontWeight.bold)),
+      ]),
+    );
+  }
+}

lib/features/auth/mobile_screen.dart

@@ -3,7 +3,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 
-import '../../core/theme/app_theme.dart';
+import '../../core/widgets/game_ui.dart';
 import 'auth_cubit.dart';
 
 /// صفحه‌ی ورود شماره موبایل.
@@ -28,7 +28,7 @@ class _MobileScreenState extends State<MobileScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: SafeArea(
+      body: GameBackground(
         child: BlocConsumer<AuthCubit, AuthState>(
           listener: (context, state) {
             if (state.status == AuthStatus.otpSent) {
@@ -41,47 +41,50 @@ class _MobileScreenState extends State<MobileScreen> {
           },
           builder: (context, state) {
             final loading = state.status == AuthStatus.loading;
-            return Padding(
+            return Center(
-              padding: const EdgeInsets.all(24),
+              child: SingleChildScrollView(
-              child: Column(
+                padding: const EdgeInsets.all(24),
-                mainAxisAlignment: MainAxisAlignment.center,
+                child: Column(
-                children: [
+                  mainAxisSize: MainAxisSize.min,
-                  const Text('سلطان حکم',
+                  children: [
-                      style: TextStyle(
+                    const GlowText('سلطان حکم', size: 40),
-                          fontSize: 36,
+                    const SizedBox(height: 28),
-                          fontWeight: FontWeight.bold,
+                    GamePanel(
-                          color: AppColors.gold)),
+                      padding: const EdgeInsets.all(22),
-                  const SizedBox(height: 8),
+                      child: Column(
-                  const Text('برای ورود شماره موبایلت رو وارد کن',
+                        mainAxisSize: MainAxisSize.min,
-                      style: TextStyle(color: Colors.white70)),
+                        children: [
-                  const SizedBox(height: 32),
+                          const Text('برای ورود شماره موبایلت رو وارد کن',
-                  TextField(
+                              style: TextStyle(color: Colors.white70)),
-                    controller: _controller,
+                          const SizedBox(height: 20),
-                    keyboardType: TextInputType.phone,
+                          TextField(
-                    textAlign: TextAlign.center,
+                            controller: _controller,
-                    style: const TextStyle(fontSize: 20, letterSpacing: 2),
+                            keyboardType: TextInputType.phone,
-                    inputFormatters: [
+                            textAlign: TextAlign.center,
-                      FilteringTextInputFormatter.digitsOnly,
+                            style: const TextStyle(fontSize: 20, letterSpacing: 2),
-                      LengthLimitingTextInputFormatter(11),
+                            inputFormatters: [
-                    ],
+                              FilteringTextInputFormatter.digitsOnly,
-                    decoration: const InputDecoration(hintText: '09xxxxxxxxx'),
+                              LengthLimitingTextInputFormatter(11),
-                    onChanged: (_) => setState(() {}),
+                            ],
-                  ),
+                            decoration: const InputDecoration(hintText: '09xxxxxxxxx'),
-                  const SizedBox(height: 24),
+                            onChanged: (_) => setState(() {}),
-                  ElevatedButton(
+                          ),
-                    onPressed: (!_valid || loading)
+                          const SizedBox(height: 20),
-                        ? null
+                          GameButton(
-                        : () => context
+                            label: 'دریافت کد',
-                            .read<AuthCubit>()
+                            width: double.infinity,
-                            .requestOtp(_controller.text.trim()),
+                            colors: const [Color(0xFF3FA34D), Color(0xFF1B5E20)],
-                    child: loading
+                            onTap: (!_valid || loading)
-                        ? const SizedBox(
+                                ? null
-                            height: 22,
+                                : () => context
-                            width: 22,
+                                    .read<AuthCubit>()
-                            child: CircularProgressIndicator(strokeWidth: 2))
+                                    .requestOtp(_controller.text.trim()),
-                        : const Text('دریافت کد'),
+                          ),
-                  ),
+                        ],
-                ],
+                      ),
+                    ),
+                  ],
+                ),
               ),
             );
           },

lib/features/auth/otp_screen.dart

@@ -4,6 +4,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 
 import '../../core/theme/app_theme.dart';
+import '../../core/widgets/game_ui.dart';
 import 'auth_cubit.dart';
 
 /// صفحه‌ی ورود کد یک‌بارمصرف (۵ رقمی).
@@ -28,8 +29,7 @@ class _OtpScreenState extends State<OtpScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('تأیید کد')),
+      body: GameBackground(
-      body: SafeArea(
         child: BlocConsumer<AuthCubit, AuthState>(
           listener: (context, state) {
             if (state.status == AuthStatus.authenticated) {
@@ -43,47 +43,56 @@ class _OtpScreenState extends State<OtpScreen> {
           },
           builder: (context, state) {
             final loading = state.status == AuthStatus.loading;
-            return Padding(
+            return Center(
-              padding: const EdgeInsets.all(24),
+              child: SingleChildScrollView(
-              child: Column(
+                padding: const EdgeInsets.all(24),
-                mainAxisAlignment: MainAxisAlignment.center,
+                child: Column(
-                children: [
+                  mainAxisSize: MainAxisSize.min,
-                  Text('کد پیامک‌شده به ${state.mobile} را وارد کنید',
+                  children: [
-                      textAlign: TextAlign.center,
+                    const GlowText('تأیید کد', size: 32),
-                      style: const TextStyle(color: Colors.white70)),
+                    const SizedBox(height: 24),
-                  const SizedBox(height: 32),
+                    GamePanel(
-                  TextField(
+                      padding: const EdgeInsets.all(22),
-                    controller: _controller,
+                      child: Column(
-                    keyboardType: TextInputType.number,
+                        mainAxisSize: MainAxisSize.min,
-                    textAlign: TextAlign.center,
+                        children: [
-                    style: const TextStyle(fontSize: 28, letterSpacing: 12),
+                          Text('کد پیامک‌شده به ${state.mobile} را وارد کنید',
-                    inputFormatters: [
+                              textAlign: TextAlign.center,
-                      FilteringTextInputFormatter.digitsOnly,
+                              style: const TextStyle(color: Colors.white70)),
-                      LengthLimitingTextInputFormatter(5),
+                          const SizedBox(height: 20),
-                    ],
+                          TextField(
-                    decoration: const InputDecoration(hintText: '- - - - -'),
+                            controller: _controller,
-                    onChanged: (_) => setState(() {}),
+                            keyboardType: TextInputType.number,
-                  ),
+                            textAlign: TextAlign.center,
-                  const SizedBox(height: 24),
+                            style: const TextStyle(fontSize: 28, letterSpacing: 12),
-                  ElevatedButton(
+                            inputFormatters: [
-                    onPressed: (!_valid || loading)
+                              FilteringTextInputFormatter.digitsOnly,
-                        ? null
+                              LengthLimitingTextInputFormatter(5),
-                        : () => context
+                            ],
-                            .read<AuthCubit>()
+                            decoration: const InputDecoration(hintText: '- - - - -'),
-                            .verifyOtp(_controller.text.trim()),
+                            onChanged: (_) => setState(() {}),
-                    child: loading
+                          ),
-                        ? const SizedBox(
+                          const SizedBox(height: 20),
-                            height: 22,
+                          GameButton(
-                            width: 22,
+                            label: 'ورود',
-                            child: CircularProgressIndicator(strokeWidth: 2))
+                            width: double.infinity,
-                        : const Text('ورود'),
+                            colors: const [Color(0xFF3FA34D), Color(0xFF1B5E20)],
-                  ),
+                            onTap: (!_valid || loading)
-                  TextButton(
+                                ? null
-                    onPressed: loading ? null : () => context.pop(),
+                                : () => context
-                    child: const Text('تغییر شماره',
+                                    .read<AuthCubit>()
-                        style: TextStyle(color: AppColors.gold)),
+                                    .verifyOtp(_controller.text.trim()),
-                  ),
+                          ),
-                ],
+                          TextButton(
+                            onPressed: loading ? null : () => context.pop(),
+                            child: const Text('تغییر شماره',
+                                style: TextStyle(color: AppColors.gold)),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
               ),
             );
           },

lib/features/game/tier_list_screen.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 import '../../core/theme/app_theme.dart';
+import '../../core/widgets/game_ui.dart';
 import 'game_repository.dart';
 import 'tier.dart';
 
@@ -26,92 +27,172 @@ class _TierListScreenState extends State<TierListScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('انتخاب میز')),
+      body: GameBackground(
-      body: FutureBuilder<List<TableTier>>(
+        child: Column(
-        future: _future,
-        builder: (context, snap) {
-          if (snap.connectionState != ConnectionState.done) {
-            return const Center(child: CircularProgressIndicator());
-          }
-          if (snap.hasError || snap.data == null) {
-            return Center(
-              child: Column(mainAxisSize: MainAxisSize.min, children: [
-                const Text('خطا در بارگذاری میزها'),
-                TextButton(
-                  onPressed: () =>
-                      setState(() => _future = widget.repo.getTiers()),
-                  child: const Text('تلاش مجدد'),
-                ),
-              ]),
-            );
-          }
-          final tiers = snap.data!;
-          return ListView.separated(
-            padding: const EdgeInsets.all(16),
-            itemCount: tiers.length,
-            separatorBuilder: (_, __) => const SizedBox(height: 12),
-            itemBuilder: (_, i) => _TierCard(tier: tiers[i]),
-          );
-        },
-      ),
-    );
-  }
-}
-
-class _TierCard extends StatelessWidget {
-  final TableTier tier;
-  const _TierCard({required this.tier});
-
-  @override
-  Widget build(BuildContext context) {
-    return InkWell(
-      borderRadius: BorderRadius.circular(14),
-      onTap: () => context.push('/game/${tier.id}?prize=${tier.prize}'),
-      child: Container(
-        padding: const EdgeInsets.all(16),
-        decoration: BoxDecoration(
-          color: AppColors.panel,
-          borderRadius: BorderRadius.circular(14),
-          border: Border.all(color: AppColors.goldDark),
-        ),
-        child: Row(
           children: [
-            Column(
+            Padding(
-              crossAxisAlignment: CrossAxisAlignment.start,
+              padding: const EdgeInsets.all(12),
-              children: [
+              child: Row(children: [
-                Text(tier.title,
+                _BackButton(onTap: () => context.pop()),
-                    style: const TextStyle(
+                const Spacer(),
-                        color: AppColors.gold,
+                const GlowText('انتخاب میز', size: 26),
-                        fontSize: 18,
+                const Spacer(),
-                        fontWeight: FontWeight.bold)),
+                const SizedBox(width: 48),
-                const SizedBox(height: 4),
+              ]),
-                Text('${tier.hands} دست',
-                    style: const TextStyle(color: Colors.white60)),
-              ],
             ),
-            const Spacer(),
+            Expanded(
-            Column(
+              child: FutureBuilder<List<TableTier>>(
-              crossAxisAlignment: CrossAxisAlignment.end,
+                future: _future,
-              children: [
+                builder: (context, snap) {
-                _row(Icons.login, 'ورودی', tier.entry),
+                  if (snap.connectionState != ConnectionState.done) {
-                _row(Icons.emoji_events, 'جایزه', tier.prize),
+                    return const Center(
-              ],
+                        child: CircularProgressIndicator(color: AppColors.gold));
+                  }
+                  if (snap.hasError || snap.data == null) {
+                    return Center(
+                      child: Column(mainAxisSize: MainAxisSize.min, children: [
+                        const Text('خطا در بارگذاری میزها'),
+                        TextButton(
+                          onPressed: () =>
+                              setState(() => _future = widget.repo.getTiers()),
+                          child: const Text('تلاش مجدد'),
+                        ),
+                      ]),
+                    );
+                  }
+                  final tiers = snap.data!;
+                  return ListView.separated(
+                    padding: const EdgeInsets.fromLTRB(16, 4, 16, 20),
+                    itemCount: tiers.length,
+                    separatorBuilder: (_, __) => const SizedBox(height: 14),
+                    itemBuilder: (_, i) => _TierCard(tier: tiers[i], index: i),
+                  );
+                },
+              ),
             ),
           ],
         ),
       ),
     );
   }
+}
 
-  Widget _row(IconData icon, String label, int value) {
+class _BackButton extends StatelessWidget {
-    return Padding(
+  final VoidCallback onTap;
-      padding: const EdgeInsets.symmetric(vertical: 2),
+  const _BackButton({required this.onTap});
-      child: Row(mainAxisSize: MainAxisSize.min, children: [
+  @override
-        Text('$label: $value',
+  Widget build(BuildContext context) => GestureDetector(
-            style: const TextStyle(color: AppColors.text, fontSize: 13)),
+        onTap: onTap,
-        const SizedBox(width: 4),
+        child: Container(
-        Icon(icon, size: 16, color: AppColors.gold),
+          width: 48,
-      ]),
+          height: 48,
+          decoration: BoxDecoration(
+            color: AppColors.panel,
+            borderRadius: BorderRadius.circular(12),
+            border: Border.all(color: AppColors.gold, width: 1.5),
+          ),
+          child: const Icon(Icons.arrow_back, color: AppColors.gold),
+        ),
+      );
+}
+
+class _TierCard extends StatelessWidget {
+  final TableTier tier;
+  final int index;
+  const _TierCard({required this.tier, required this.index});
+
+  // پالتِ رنگیِ هر میز (مطابق اپ مرجع).
+  static const _palettes = [
+    [Color(0xFF43A047), Color(0xFF1B5E20)], // سبز
+    [Color(0xFFE53935), Color(0xFF8E0E1B)], // قرمز
+    [Color(0xFF1E88E5), Color(0xFF0D3C73)], // آبی
+    [Color(0xFF8E24AA), Color(0xFF4A0D5E)], // بنفش
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = _palettes[index % _palettes.length];
+    return GestureDetector(
+      onTap: () => context.push('/game/${tier.id}?prize=${tier.prize}'),
+      child: Container(
+        padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: colors,
+          ),
+          borderRadius: BorderRadius.circular(16),
+          border: Border.all(color: AppColors.gold, width: 2),
+          boxShadow: const [
+            BoxShadow(color: Colors.black54, blurRadius: 10, offset: Offset(0, 5)),
+          ],
+        ),
+        child: Row(
+          children: [
+            // ریبونِ تعداد دست
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+              decoration: BoxDecoration(
+                color: const Color(0xFFE9952F),
+                borderRadius: BorderRadius.circular(8),
+                border: Border.all(color: AppColors.gold),
+              ),
+              child: Column(children: [
+                Text('${tier.hands}',
+                    style: const TextStyle(
+                        color: Colors.white,
+                        fontSize: 18,
+                        fontWeight: FontWeight.bold)),
+                const Text('دست',
+                    style: TextStyle(color: Colors.white, fontSize: 11)),
+              ]),
+            ),
+            const SizedBox(width: 14),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(tier.title,
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                      shadows: [Shadow(color: Colors.black54, blurRadius: 3)],
+                    )),
+                const SizedBox(height: 6),
+                _stat(Icons.login, 'ورودی', tier.entry),
+                _stat(Icons.monetization_on, 'جایزه', tier.prize),
+              ],
+            ),
+            const Spacer(),
+            Column(children: [
+              _badge(Icons.star, 'XP ${tier.xp}'),
+              const SizedBox(height: 6),
+              _badge(Icons.emoji_events, '${tier.trophy}'),
+            ]),
+          ],
+        ),
+      ),
     );
   }
+
+  Widget _stat(IconData icon, String label, int value) => Padding(
+        padding: const EdgeInsets.symmetric(vertical: 2),
+        child: Row(mainAxisSize: MainAxisSize.min, children: [
+          Icon(icon, size: 15, color: AppColors.gold),
+          const SizedBox(width: 5),
+          Text('$label: $value',
+              style: const TextStyle(color: Colors.white, fontSize: 13)),
+        ]),
+      );
+
+  Widget _badge(IconData icon, String text) => Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(icon, size: 16, color: AppColors.gold),
+          const SizedBox(width: 4),
+          Text(text,
+              style: const TextStyle(color: Colors.white, fontSize: 12)),
+        ],
+      );
 }

lib/features/lobby/lobby_screen.dart

@@ -3,11 +3,12 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 
 import '../../core/theme/app_theme.dart';
+import '../../core/widgets/game_ui.dart';
 import '../auth/auth_cubit.dart';
 import 'wallet.dart';
 import 'wallet_cubit.dart';
 
-/// لابی اصلی: کیف‌پول، دکمه بازی، سکه روزانه.
+/// لابی اصلی: کیف‌پول، دکمه بازی، فروشگاه، سکه روزانه (ظاهرِ بازی‌گونه).
 class LobbyScreen extends StatefulWidget {
   const LobbyScreen({super.key});
 
@@ -25,54 +26,51 @@ class _LobbyScreenState extends State<LobbyScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: SafeArea(
+      body: GameBackground(
         child: BlocBuilder<WalletCubit, WalletState>(
           builder: (context, state) {
             return Column(
               children: [
-                _TopBar(wallet: state.wallet),
+                _TopBar(wallet: state.wallet, onCoinTap: () => _openShop(context)),
                 Expanded(
                   child: Center(
-                    child: Column(
+                    child: SingleChildScrollView(
-                      mainAxisSize: MainAxisSize.min,
+                      padding: const EdgeInsets.symmetric(horizontal: 28),
-                      children: [
+                      child: Column(
-                        const Text('سلطان حکم',
+                        mainAxisSize: MainAxisSize.min,
-                            style: TextStyle(
+                        children: [
-                                fontSize: 40,
+                          const GlowText('سلطان حکم', size: 44),
-                                fontWeight: FontWeight.bold,
+                          const SizedBox(height: 44),
-                                color: AppColors.gold)),
+                          GameButton(
-                        const SizedBox(height: 48),
+                            label: 'بازی',
-                        _MenuButton(
+                            icon: Icons.style,
-                          label: 'بازی',
+                            width: double.infinity,
-                          icon: Icons.style,
+                            colors: const [Color(0xFFC2185B), Color(0xFF6A0D38)],
-                          color: const Color(0xFF8E1B5B),
+                            onTap: () async {
-                          onTap: () async {
+                              await context.push('/game/tiers');
-                            await context.push('/game/tiers');
+                              if (context.mounted) {
-                            if (context.mounted) {
+                                context.read<WalletCubit>().load();
-                              context.read<WalletCubit>().load();
+                              }
-                            }
+                            },
-                          },
+                          ),
-                        ),
+                          const SizedBox(height: 16),
-                        const SizedBox(height: 16),
+                          GameButton(
-                        _MenuButton(
+                            label: 'فروشگاه',
-                          label: 'فروشگاه',
+                            icon: Icons.storefront,
-                          icon: Icons.storefront,
+                            width: double.infinity,
-                          color: const Color(0xFF4A148C),
+                            colors: const [Color(0xFF7B1FA2), Color(0xFF3E0A57)],
-                          onTap: () async {
+                            onTap: () => _openShop(context),
-                            await context.push('/shop');
+                          ),
-                            if (context.mounted) {
+                          const SizedBox(height: 16),
-                              context.read<WalletCubit>().load();
+                          GameButton(
-                            }
+                            label: 'سکه روزانه',
-                          },
+                            icon: Icons.monetization_on,
-                        ),
+                            width: double.infinity,
-                        const SizedBox(height: 16),
+                            colors: const [Color(0xFF3FA34D), Color(0xFF1B5E20)],
-                        _MenuButton(
+                            onTap: () => _claimDaily(context),
-                          label: 'سکه روزانه',
+                          ),
-                          icon: Icons.monetization_on,
+                        ],
-                          color: AppColors.green,
+                      ),
-                          onTap: () => _claimDaily(context),
-                        ),
-                      ],
                     ),
                   ),
                 ),
@@ -94,6 +92,11 @@ class _LobbyScreenState extends State<LobbyScreen> {
     );
   }
 
+  Future<void> _openShop(BuildContext context) async {
+    await context.push('/shop');
+    if (context.mounted) context.read<WalletCubit>().load();
+  }
+
   Future<void> _claimDaily(BuildContext context) async {
     final amount = await context.read<WalletCubit>().claimDaily();
     if (!context.mounted) return;
@@ -109,7 +112,8 @@ class _LobbyScreenState extends State<LobbyScreen> {
 
 class _TopBar extends StatelessWidget {
   final Wallet? wallet;
-  const _TopBar({this.wallet});
+  final VoidCallback onCoinTap;
+  const _TopBar({this.wallet, required this.onCoinTap});
 
   @override
   Widget build(BuildContext context) {
@@ -118,136 +122,70 @@ class _TopBar extends StatelessWidget {
       margin: const EdgeInsets.all(8),
       padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
       decoration: BoxDecoration(
-        color: AppColors.bgDark,
+        gradient: const LinearGradient(
-        borderRadius: BorderRadius.circular(14),
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [Color(0xFF3A0A12), Color(0xFF1A0106)],
+        ),
+        borderRadius: BorderRadius.circular(16),
         border: Border.all(color: AppColors.goldDark),
+        boxShadow: const [BoxShadow(color: Colors.black54, blurRadius: 8)],
       ),
       child: Row(
         children: [
-          const CircleAvatar(
+          Container(
-            backgroundColor: AppColors.panel,
+            decoration: BoxDecoration(
-            child: Icon(Icons.person, color: AppColors.gold),
+              shape: BoxShape.circle,
+              border: Border.all(color: AppColors.gold, width: 2),
+            ),
+            child: const CircleAvatar(
+              radius: 22,
+              backgroundColor: AppColors.panel,
+              child: Icon(Icons.person, color: AppColors.gold),
+            ),
           ),
           const SizedBox(width: 10),
           Column(
             crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
             children: [
-              Text('سطح ${w?.level ?? '-'}',
+              Row(children: [
-                  style: const TextStyle(color: AppColors.gold)),
+                const Icon(Icons.star, color: AppColors.gold, size: 16),
-              if (w != null)
+                const SizedBox(width: 4),
-                SizedBox(
+                Text('سطح ${w?.level ?? '-'}',
-                  width: 90,
+                    style: const TextStyle(
+                        color: AppColors.gold, fontWeight: FontWeight.bold)),
+              ]),
+              const SizedBox(height: 4),
+              ClipRRect(
+                borderRadius: BorderRadius.circular(4),
+                child: SizedBox(
+                  width: 96,
+                  height: 7,
                   child: LinearProgressIndicator(
-                    value: w.xpForNext == 0 ? 0 : w.xpIntoLevel / w.xpForNext,
+                    value: (w == null || w.xpForNext == 0)
-                    backgroundColor: Colors.white12,
+                        ? 0
-                    color: AppColors.gold,
+                        : w.xpIntoLevel / w.xpForNext,
-                    minHeight: 5,
+                    backgroundColor: Colors.white10,
+                    valueColor: const AlwaysStoppedAnimation(AppColors.gold),
                   ),
                 ),
+              ),
             ],
           ),
           const Spacer(),
-          _Chip(icon: Icons.confirmation_number, value: w?.tickets ?? 0),
+          GestureDetector(
-          const SizedBox(width: 8),
+            onTap: onCoinTap,
-          _Chip(icon: Icons.monetization_on, value: w?.coins ?? 0),
+            child: StatChip(
-        ],
+                icon: Icons.confirmation_number, value: '${w?.tickets ?? 0}'),
-      ),
-    );
-  }
-}
-
-class _Chip extends StatelessWidget {
-  final IconData icon;
-  final int value;
-  const _Chip({required this.icon, required this.value});
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
-      decoration: BoxDecoration(
-        color: AppColors.panel,
-        borderRadius: BorderRadius.circular(20),
-        border: Border.all(color: AppColors.goldDark),
-      ),
-      child: Row(
-        children: [
-          Icon(icon, color: AppColors.gold, size: 18),
-          const SizedBox(width: 6),
-          Text('$value', style: const TextStyle(color: AppColors.text)),
-        ],
-      ),
-    );
-  }
-}
-
-class _MenuButton extends StatelessWidget {
-  final String label;
-  final IconData icon;
-  final Color color;
-  final VoidCallback onTap;
-  const _MenuButton({
-    required this.label,
-    required this.icon,
-    required this.color,
-    required this.onTap,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    // رنگِ تیره‌ترِ پایه برای بِوِل (لبه‌ی پایینیِ برجسته).
-    final dark = Color.lerp(color, Colors.black, 0.45)!;
-    final light = Color.lerp(color, Colors.white, 0.12)!;
-    return SizedBox(
-      width: 280,
-      child: Material(
-        color: Colors.transparent,
-        borderRadius: BorderRadius.circular(16),
-        child: InkWell(
-          borderRadius: BorderRadius.circular(16),
-          onTap: onTap,
-          child: Container(
-            padding: const EdgeInsets.symmetric(vertical: 15),
-            decoration: BoxDecoration(
-              gradient: LinearGradient(
-                begin: Alignment.topCenter,
-                end: Alignment.bottomCenter,
-                colors: [light, color, dark],
-                stops: const [0, 0.5, 1],
-              ),
-              borderRadius: BorderRadius.circular(16),
-              border: Border.all(color: AppColors.gold, width: 1.6),
-              boxShadow: [
-                BoxShadow(
-                  color: Colors.black.withValues(alpha: 0.55),
-                  blurRadius: 10,
-                  offset: const Offset(0, 5),
-                ),
-                // هایلایتِ بالا برای حسِ شیشه‌ای/برجسته.
-                BoxShadow(
-                  color: Colors.white.withValues(alpha: 0.12),
-                  blurRadius: 1,
-                  offset: const Offset(0, 1),
-                  spreadRadius: -1,
-                ),
-              ],
-            ),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Icon(icon, color: AppColors.gold),
-                const SizedBox(width: 10),
-                Text(label,
-                    style: const TextStyle(
-                      color: AppColors.text,
-                      fontSize: 18,
-                      fontWeight: FontWeight.bold,
-                      shadows: [Shadow(color: Colors.black54, blurRadius: 3)],
-                    )),
-              ],
-            ),
           ),
-        ),
+          const SizedBox(width: 8),
+          GestureDetector(
+            onTap: onCoinTap,
+            child: StatChip(
+                icon: Icons.monetization_on, value: '${w?.coins ?? 0}'),
+          ),
+        ],
       ),
     );
   }

lib/features/shop/shop_screen.dart

@@ -1,12 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:go_router/go_router.dart';
 
 import '../../core/theme/app_theme.dart';
+import '../../core/widgets/game_ui.dart';
 import '../lobby/wallet_cubit.dart';
 import 'shop_cubit.dart';
 import 'shop_models.dart';
 
-/// صفحه‌ی فروشگاه با تب‌های سکه/بلیط/کارت/تجهیزات.
+/// فروشگاه با تب‌های سکه/بلیط/کارت/تجهیزات و ظاهرِ بازی‌گونه.
 class ShopScreen extends StatelessWidget {
   const ShopScreen({super.key});
 
@@ -15,71 +17,135 @@ class ShopScreen extends StatelessWidget {
     return DefaultTabController(
       length: 4,
       child: Scaffold(
-        appBar: AppBar(
+        backgroundColor: Colors.transparent,
-          title: const Text('فروشگاه'),
+        body: GameBackground(
-          actions: [
+          child: Column(
-            BlocBuilder<WalletCubit, WalletState>(
+            children: [
-              builder: (context, s) => Center(
+              _header(context),
-                child: Padding(
+              Expanded(
-                  padding: const EdgeInsets.only(left: 12),
+                child: Container(
-                  child: Row(children: [
+                  margin: const EdgeInsets.fromLTRB(8, 0, 8, 8),
-                    const Icon(Icons.monetization_on,
+                  decoration: BoxDecoration(
-                        color: AppColors.gold, size: 18),
+                    gradient: const LinearGradient(
-                    const SizedBox(width: 4),
+                      begin: Alignment.topCenter,
-                    Text('${s.wallet?.coins ?? 0}',
+                      end: Alignment.bottomCenter,
-                        style: const TextStyle(color: AppColors.text)),
+                      colors: [Color(0xFF4A0C16), Color(0xFF2A0710)],
-                  ]),
+                    ),
+                    borderRadius: BorderRadius.circular(16),
+                    border: Border.all(color: AppColors.goldDark, width: 1.5),
+                  ),
+                  child: Column(
+                    children: [
+                      const _ShopTabs(),
+                      Expanded(
+                        child: BlocBuilder<ShopCubit, ShopState>(
+                          builder: (context, state) {
+                            if (state.status == ShopStatus.loading ||
+                                state.status == ShopStatus.initial) {
+                              return const Center(
+                                  child: CircularProgressIndicator(
+                                      color: AppColors.gold));
+                            }
+                            if (state.status == ShopStatus.error ||
+                                state.data == null) {
+                              return Center(
+                                child: Column(
+                                    mainAxisSize: MainAxisSize.min,
+                                    children: [
+                                      const Text('خطا در بارگذاری فروشگاه'),
+                                      TextButton(
+                                        onPressed: () =>
+                                            context.read<ShopCubit>().load(),
+                                        child: const Text('تلاش مجدد'),
+                                      ),
+                                    ]),
+                              );
+                            }
+                            final d = state.data!;
+                            return TabBarView(
+                              children: [
+                                _CoinsTab(packages: d.coinPackages),
+                                _TicketsTab(packages: d.ticketPackages),
+                                _CardsTab(data: d),
+                                _BoostersTab(boosters: d.boosters),
+                              ],
+                            );
+                          },
+                        ),
+                      ),
+                    ],
+                  ),
                 ),
               ),
-            ),
-          ],
-          bottom: const TabBar(
-            isScrollable: true,
-            labelColor: AppColors.gold,
-            indicatorColor: AppColors.gold,
-            tabs: [
-              Tab(text: 'سکه'),
-              Tab(text: 'بلیط'),
-              Tab(text: 'کارت'),
-              Tab(text: 'تجهیزات'),
             ],
           ),
         ),
-        body: BlocConsumer<ShopCubit, ShopState>(
-          listener: (context, state) {},
-          builder: (context, state) {
-            if (state.status == ShopStatus.loading ||
-                state.status == ShopStatus.initial) {
-              return const Center(child: CircularProgressIndicator());
-            }
-            if (state.status == ShopStatus.error || state.data == null) {
-              return Center(
-                child: Column(mainAxisSize: MainAxisSize.min, children: [
-                  const Text('خطا در بارگذاری فروشگاه'),
-                  TextButton(
-                    onPressed: () => context.read<ShopCubit>().load(),
-                    child: const Text('تلاش مجدد'),
-                  ),
-                ]),
-              );
-            }
-            final d = state.data!;
-            return TabBarView(
-              children: [
-                _CoinsTab(packages: d.coinPackages),
-                _TicketsTab(packages: d.ticketPackages),
-                _CardsTab(data: d),
-                _BoostersTab(boosters: d.boosters),
-              ],
-            );
-          },
-        ),
       ),
     );
   }
+
+  Widget _header(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8),
+      child: Row(children: [
+        GestureDetector(
+          onTap: () => context.pop(),
+          child: Container(
+            width: 46,
+            height: 46,
+            decoration: BoxDecoration(
+              color: AppColors.panel,
+              borderRadius: BorderRadius.circular(12),
+              border: Border.all(color: AppColors.gold, width: 1.5),
+            ),
+            child: const Icon(Icons.arrow_back, color: AppColors.gold),
+          ),
+        ),
+        const Spacer(),
+        BlocBuilder<WalletCubit, WalletState>(
+          builder: (context, s) => Row(children: [
+            StatChip(
+                icon: Icons.confirmation_number,
+                value: '${s.wallet?.tickets ?? 0}'),
+            const SizedBox(width: 8),
+            StatChip(
+                icon: Icons.monetization_on, value: '${s.wallet?.coins ?? 0}'),
+          ]),
+        ),
+      ]),
+    );
+  }
 }
 
-/// اجرای یک عملیات فروشگاه و نمایش نتیجه + بازخوانی کیف‌پول.
+class _ShopTabs extends StatelessWidget {
+  const _ShopTabs();
+  @override
+  Widget build(BuildContext context) {
+    return const TabBar(
+      indicator: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [Color(0xFFC62828), Color(0xFF7B0E14)],
+        ),
+        borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
+      ),
+      indicatorSize: TabBarIndicatorSize.tab,
+      labelColor: AppColors.gold,
+      unselectedLabelColor: Colors.white60,
+      labelStyle: TextStyle(fontWeight: FontWeight.bold),
+      dividerColor: Colors.transparent,
+      tabs: [
+        Tab(text: 'سکه'),
+        Tab(text: 'بلیط'),
+        Tab(text: 'کارت'),
+        Tab(text: 'تجهیزات'),
+      ],
+    );
+  }
+}
+
+/// اجرای یک عملیات فروشگاه، نمایش نتیجه و بازخوانی کیف‌پول.
 Future<void> _do(BuildContext context, Future<String> Function() action) async {
   final msg = await action();
   if (!context.mounted || msg.isEmpty) return;
@@ -88,34 +154,39 @@ Future<void> _do(BuildContext context, Future<String> Function() action) async {
   ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(msg)));
 }
 
+// ===== تب‌ها =====
+
 class _CoinsTab extends StatelessWidget {
   final List<CoinPackage> packages;
   const _CoinsTab({required this.packages});
-
   @override
   Widget build(BuildContext context) {
-    return GridView.count(
+    return _grid(
-      crossAxisCount: 2,
+      note: 'با داشتن اشتراک VIP در هر خرید ۱۰٪ سکه اضافه هدیه می‌گیرید.',
-      padding: const EdgeInsets.all(12),
-      childAspectRatio: 0.82,
-      mainAxisSpacing: 12,
-      crossAxisSpacing: 12,
       children: [
-        _FreeCoinCard(
+        _ItemCard(
-          onTap: () => _do(context, () => context.read<ShopCubit>().claimAd()),
+          title: 'سکه رایگان',
+          glowColor: const Color(0xFF1B5E20),
+          icon: Icons.card_giftcard,
+          subtitle: 'با دیدن تبلیغ',
+          action: _PriceButton(
+            label: 'رایگان',
+            green: true,
+            onTap: () => _do(context, () => context.read<ShopCubit>().claimAd()),
+          ),
         ),
         for (final p in packages)
-          _StoreCard(
+          _ItemCard(
             title: p.title,
-            badge: p.bonusPct > 0 ? '+${p.bonusPct}%' : null,
+            glowColor: const Color(0xFF1B5E20),
-            lines: [
-              '${p.coins} سکه',
-              if (p.vipDays > 0) '${p.vipDays} روز VIP',
-            ],
-            priceLabel: '${p.priceToman} تومان',
             icon: Icons.savings,
-            onTap: () =>
+            ribbon: p.bonusPct > 0 ? '+${p.bonusPct}٪' : null,
-                _do(context, () => context.read<ShopCubit>().purchase('coin', p.id)),
+            subtitle: '${p.coins} سکه${p.vipDays > 0 ? ' + ${p.vipDays} روز VIP' : ''}',
+            action: _PriceButton(
+              label: '${p.priceToman} تومان',
+              onTap: () => _do(
+                  context, () => context.read<ShopCubit>().purchase('coin', p.id)),
+            ),
           ),
       ],
     );
@@ -125,24 +196,22 @@ class _CoinsTab extends StatelessWidget {
 class _TicketsTab extends StatelessWidget {
   final List<TicketPackage> packages;
   const _TicketsTab({required this.packages});
-
   @override
   Widget build(BuildContext context) {
-    return GridView.count(
+    return _grid(
-      crossAxisCount: 2,
+      note: 'با خرید بلیط می‌توانید درخواست بر زدن مجدد در بازی‌ها انجام دهید.',
-      padding: const EdgeInsets.all(12),
-      childAspectRatio: 0.82,
-      mainAxisSpacing: 12,
-      crossAxisSpacing: 12,
       children: [
         for (final p in packages)
-          _StoreCard(
+          _ItemCard(
             title: p.title,
-            lines: ['${p.tickets} بلیط'],
+            glowColor: const Color(0xFF8E1B7A),
-            priceLabel: '${p.priceToman} تومان',
             icon: Icons.confirmation_number,
-            onTap: () =>
+            subtitle: '${p.tickets} بلیط',
-                _do(context, () => context.read<ShopCubit>().purchase('ticket', p.id)),
+            action: _PriceButton(
+              label: '${p.priceToman} تومان',
+              onTap: () => _do(context,
+                  () => context.read<ShopCubit>().purchase('ticket', p.id)),
+            ),
           ),
       ],
     );
@@ -152,24 +221,22 @@ class _TicketsTab extends StatelessWidget {
 class _BoostersTab extends StatelessWidget {
   final List<Booster> boosters;
   const _BoostersTab({required this.boosters});
-
   @override
   Widget build(BuildContext context) {
-    return GridView.count(
+    return _grid(
-      crossAxisCount: 2,
+      note: 'با بسته‌های تجربه، چند برابر XP بگیرید و سریع‌تر بالا بروید.',
-      padding: const EdgeInsets.all(12),
-      childAspectRatio: 0.82,
-      mainAxisSpacing: 12,
-      crossAxisSpacing: 12,
       children: [
         for (final b in boosters)
-          _StoreCard(
+          _ItemCard(
             title: b.title,
-            lines: ['تجربه ×${b.multiplier}', '${b.hours} ساعت'],
+            glowColor: const Color(0xFF1E3A8A),
-            priceLabel: '${b.priceToman} تومان',
             icon: Icons.bolt,
-            onTap: () =>
+            subtitle: 'تجربه ×${b.multiplier} — ${b.hours} ساعت',
-                _do(context, () => context.read<ShopCubit>().purchase('booster', b.id)),
+            action: _PriceButton(
+              label: '${b.priceToman} تومان',
+              onTap: () => _do(context,
+                  () => context.read<ShopCubit>().purchase('booster', b.id)),
+            ),
           ),
       ],
     );
@@ -179,206 +246,224 @@ class _BoostersTab extends StatelessWidget {
 class _CardsTab extends StatelessWidget {
   final ShopData data;
   const _CardsTab({required this.data});
-
   @override
   Widget build(BuildContext context) {
-    return GridView.count(
+    return _grid(
-      crossAxisCount: 2,
+      note: 'با اسکین کارت‌های متنوع حال‌وهوای بازی را عوض کن.',
-      padding: const EdgeInsets.all(12),
-      childAspectRatio: 0.82,
-      mainAxisSpacing: 12,
-      crossAxisSpacing: 12,
       children: [
         for (final c in data.cardSkins)
-          _CardSkinCard(
+          _ItemCard(
-            skin: c,
+            title: c.title,
-            owned: data.owns(c.id),
+            glowColor: const Color(0xFF0E3C73),
-            selected: data.selectedCard == c.id,
+            icon: Icons.style,
+            subtitle: c.priceCoins > 0 ? '${c.priceCoins} سکه' : 'پیش‌فرض',
+            action: _cardAction(context, c, data),
           ),
       ],
     );
   }
-}
 
-class _CardSkinCard extends StatelessWidget {
+  Widget _cardAction(BuildContext context, CardSkin c, ShopData d) {
-  final CardSkin skin;
+    if (d.selectedCard == c.id) {
-  final bool owned;
+      return const _PriceButton(label: 'انتخاب شده', disabled: true);
-  final bool selected;
+    }
-  const _CardSkinCard(
+    if (d.owns(c.id)) {
-      {required this.skin, required this.owned, required this.selected});
+      return _PriceButton(
-
-  @override
-  Widget build(BuildContext context) {
-    final Widget action;
-    if (selected) {
-      action = const _Pill(text: 'انتخاب شده', color: AppColors.goldDark);
-    } else if (owned) {
-      action = _ActionButton(
         label: 'انتخاب',
-        color: AppColors.green,
+        green: true,
         onTap: () =>
-            _do(context, () => context.read<ShopCubit>().selectCard(skin.id)),
+            _do(context, () => context.read<ShopCubit>().selectCard(c.id)),
-      );
-    } else {
-      action = _ActionButton(
-        label: '${skin.priceCoins} سکه',
-        color: AppColors.accent,
-        onTap: () => _do(context, () => context.read<ShopCubit>().buyCard(skin.id)),
       );
     }
-    return _Panel(
+    return _PriceButton(
-      child: Column(
+      label: '${c.priceCoins} سکه',
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      green: true,
-        children: [
+      coin: true,
-          Text(skin.title,
+      onTap: () => _do(context, () => context.read<ShopCubit>().buyCard(c.id)),
-              textAlign: TextAlign.center,
-              style: const TextStyle(color: AppColors.gold)),
-          const Icon(Icons.style, size: 48, color: AppColors.text),
-          SizedBox(width: double.infinity, child: action),
-        ],
-      ),
     );
   }
 }
 
-class _FreeCoinCard extends StatelessWidget {
+Widget _grid({required String note, required List<Widget> children}) {
-  final VoidCallback onTap;
+  return Column(
-  const _FreeCoinCard({required this.onTap});
+    children: [
-
+      Padding(
-  @override
+        padding: const EdgeInsets.fromLTRB(16, 12, 16, 6),
-  Widget build(BuildContext context) {
+        child: Text(note,
-    return _Panel(
+            textAlign: TextAlign.center,
-      child: Column(
+            style: const TextStyle(color: AppColors.gold, fontSize: 13)),
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          const Text('سکه رایگان',
-              textAlign: TextAlign.center,
-              style: TextStyle(color: AppColors.gold)),
-          const Icon(Icons.ondemand_video, size: 44, color: AppColors.green),
-          const Text('با دیدن تبلیغ',
-              style: TextStyle(color: Colors.white60, fontSize: 12)),
-          SizedBox(
-            width: double.infinity,
-            child: _ActionButton(
-                label: 'رایگان', color: AppColors.green, onTap: onTap),
-          ),
-        ],
       ),
-    );
+      Expanded(
-  }
+        child: GridView.count(
+          crossAxisCount: 2,
+          padding: const EdgeInsets.all(12),
+          childAspectRatio: 0.74,
+          mainAxisSpacing: 12,
+          crossAxisSpacing: 12,
+          children: children,
+        ),
+      ),
+    ],
+  );
 }
 
-class _StoreCard extends StatelessWidget {
+// ===== ویجت‌های کارت آیتم =====
+
+class _ItemCard extends StatelessWidget {
   final String title;
-  final List<String> lines;
-  final String priceLabel;
   final IconData icon;
-  final String? badge;
+  final Color glowColor;
-  final VoidCallback onTap;
+  final String subtitle;
-  const _StoreCard({
+  final String? ribbon;
+  final Widget action;
+  const _ItemCard({
     required this.title,
-    required this.lines,
-    required this.priceLabel,
     required this.icon,
-    required this.onTap,
+    required this.glowColor,
-    this.badge,
+    required this.subtitle,
+    required this.action,
+    this.ribbon,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
+    final card = Container(
-      children: [
+      padding: const EdgeInsets.all(8),
-        _Panel(
+      decoration: BoxDecoration(
-          child: Column(
+        gradient: const LinearGradient(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          begin: Alignment.topCenter,
-            children: [
+          end: Alignment.bottomCenter,
-              Text(title,
+          colors: [Color(0xFF6E1322), Color(0xFF3A0A12)],
-                  textAlign: TextAlign.center,
+        ),
-                  style: const TextStyle(color: AppColors.gold)),
+        borderRadius: BorderRadius.circular(14),
-              Icon(icon, size: 40, color: AppColors.gold),
+        border: Border.all(color: AppColors.gold, width: 1.6),
-              Column(
+        boxShadow: const [
-                children: [
+          BoxShadow(color: Colors.black54, blurRadius: 8, offset: Offset(0, 4)),
-                  for (final l in lines)
+        ],
-                    Text(l, style: const TextStyle(color: AppColors.text)),
+      ),
-                ],
+      child: Column(
-              ),
+        children: [
-              SizedBox(
+          Text(title,
-                width: double.infinity,
+              maxLines: 1,
-                child: _ActionButton(
+              overflow: TextOverflow.ellipsis,
-                    label: priceLabel, color: AppColors.accent, onTap: onTap),
+              style: const TextStyle(
-              ),
+                  color: AppColors.gold, fontWeight: FontWeight.bold)),
-            ],
+          const SizedBox(height: 6),
+          Expanded(child: _GlowArt(color: glowColor, icon: icon)),
+          const SizedBox(height: 4),
+          Text(subtitle,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(color: Colors.white70, fontSize: 11)),
+          const SizedBox(height: 6),
+          SizedBox(width: double.infinity, child: action),
+        ],
+      ),
+    );
+    if (ribbon == null) return card;
+    return Stack(clipBehavior: Clip.none, children: [
+      card,
+      Positioned(
+        top: 8,
+        left: -22,
+        child: Transform.rotate(
+          angle: -0.7,
+          child: Container(
+            padding: const EdgeInsets.symmetric(horizontal: 26, vertical: 3),
+            color: const Color(0xFF2E7D32),
+            child: Text(ribbon!,
+                style: const TextStyle(
+                    color: Colors.white,
+                    fontSize: 11,
+                    fontWeight: FontWeight.bold)),
           ),
         ),
-        if (badge != null)
+      ),
-          Positioned(
+    ]);
-            top: 4,
-            left: 4,
-            child: _Pill(text: badge!, color: AppColors.green),
-          ),
-      ],
-    );
   }
 }
 
-class _Panel extends StatelessWidget {
+/// قابِ هنریِ آیتم با درخششِ شعاعی و آیکن.
-  final Widget child;
+class _GlowArt extends StatelessWidget {
-  const _Panel({required this.child});
+  final Color color;
-
+  final IconData icon;
+  const _GlowArt({required this.color, required this.icon});
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(10),
+      width: double.infinity,
       decoration: BoxDecoration(
-        color: AppColors.panel,
+        borderRadius: BorderRadius.circular(10),
-        borderRadius: BorderRadius.circular(14),
+        gradient: RadialGradient(
-        border: Border.all(color: AppColors.goldDark),
+          colors: [color, Colors.black.withValues(alpha: 0.85)],
+          radius: 0.9,
+        ),
+        border: Border.all(color: Colors.black26),
+      ),
+      child: Center(
+        child: Icon(icon, size: 44, color: AppColors.gold),
       ),
-      child: child,
     );
   }
 }
 
-class _ActionButton extends StatelessWidget {
+class _PriceButton extends StatelessWidget {
   final String label;
-  final Color color;
+  final VoidCallback? onTap;
-  final VoidCallback onTap;
+  final bool green;
-  const _ActionButton(
+  final bool coin;
-      {required this.label, required this.color, required this.onTap});
+  final bool disabled;
+  const _PriceButton({
+    required this.label,
+    this.onTap,
+    this.green = false,
+    this.coin = false,
+    this.disabled = false,
+  });
 
   @override
   Widget build(BuildContext context) {
     final busy = context.select((ShopCubit c) => c.state.busy);
-    return ElevatedButton(
+    final colors = disabled
-      style: ElevatedButton.styleFrom(
+        ? const [Color(0xFF555555), Color(0xFF333333)]
-        backgroundColor: color,
+        : green
-        minimumSize: const Size.fromHeight(38),
+            ? const [Color(0xFF3FA34D), Color(0xFF1B5E20)]
-        padding: const EdgeInsets.symmetric(horizontal: 6),
+            : const [Color(0xFFD83A4A), Color(0xFF8E0E1B)];
+    return Opacity(
+      opacity: disabled ? 0.85 : 1,
+      child: GestureDetector(
+        onTap: (disabled || busy) ? null : onTap,
+        child: Container(
+          height: 36,
+          alignment: Alignment.center,
+          padding: const EdgeInsets.symmetric(horizontal: 6),
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: colors,
+            ),
+            borderRadius: BorderRadius.circular(10),
+            border: Border.all(color: AppColors.gold, width: 1.2),
+          ),
+          child: Row(mainAxisSize: MainAxisSize.min, children: [
+            if (coin) ...[
+              const Icon(Icons.monetization_on,
+                  color: AppColors.gold, size: 16),
+              const SizedBox(width: 4),
+            ],
+            Flexible(
+              child: Text(label,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 13,
+                      fontWeight: FontWeight.bold)),
+            ),
+          ]),
+        ),
       ),
-      onPressed: busy ? null : onTap,
-      child: Text(label,
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-          style: const TextStyle(fontSize: 13)),
-    );
-  }
-}
-
-class _Pill extends StatelessWidget {
-  final String text;
-  final Color color;
-  const _Pill({required this.text, required this.color});
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
-      decoration: BoxDecoration(
-        color: color,
-        borderRadius: BorderRadius.circular(8),
-      ),
-      child: Text(text,
-          style: const TextStyle(color: Colors.white, fontSize: 12)),
     );
   }
 }