mili icon

website/Areas/Millions/Controllers/HomeController.cs

@@ -930,13 +930,16 @@ namespace LotteryWebApp.Areas.Millions.Controllers
         }
 
         [HttpPost]
-        public IActionResult ConfirmTransfer(string otp, string phone, string amount)
+        public IActionResult ConfirmTransfer(string otp, string phone, string amount, int channelPayment = 1)
         {
             try
             {
                 var token = HttpContext.Session.GetComplexData<string>("token");
                 var msisdn = HttpContext.Session.GetComplexData<string>("msisdn");
                 if (string.IsNullOrEmpty(token)) return Json(new { status = Code.SESSION_EXPIRED, message = "Session expired" });
+                var transferChannel = channelPayment == 2
+                    ? Constants.NATCASH_WALLET_TRANSFER
+                    : Constants.BASIC_WALLET_TRANSFER;
 
                 // Step 1: Verify OTP
                 ConfirmOTPRequest otpRequest = new ConfirmOTPRequest
@@ -962,7 +965,7 @@ namespace LotteryWebApp.Areas.Millions.Controllers
                     money = amount,
                     otp = otp,
                     token = token,
-                    channelPayment = Constants.BASIC_WALLET_TRANSFER,
+                    channelPayment = transferChannel,
                     language = CultureInfo.CurrentCulture.Name.StartsWith("en") ? "0" : "1",
                     channel = configuration.GetSection("channel").Value
                 };

website/Areas/Millions/Views/Home/BuyTicket.cshtml

@@ -24,20 +24,19 @@
     var prizeAmount = isBigSmall ? "100.000" : "200.000";
     
     <!-- ==================== CARD SELECTION GAME UI (BIG/SMALL or ODD/EVEN) ==================== -->
-    <div class="main-container animate__animated animate__fadeIn bg-[#F5F5F5] h-screen flex flex-col font-bricolage overflow-hidden max-w-[414px] mx-auto relative">
+    <div class="millions-buy-ticket-page main-container animate__animated animate__fadeIn overflow-hidden">
         <!-- Header -->
-        <div class="w-full py-3 px-4 text-white flex items-center justify-between sticky top-0 z-[60]" style="background: @themeColor;">
-            <button onclick="location.href='@Url.Action("GameHome", "Home")'" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-all">
-                <i class="fa-solid fa-arrow-left text-[20px]"></i>
+        <div class="header">
+            <button onclick="location.href='@Url.Action("GameHome", "Home")'" class="back-btn" type="button">
+                <i class="fa-solid fa-arrow-left"></i>
             </button>
-            <span class="font-[800] text-[18px] absolute left-1/2 -translate-x-1/2 whitespace-nowrap">
-                @gameTitle
-            </span>
-            <div class="w-8"></div>
+            <div class="header-title">@gameTitle</div>
         </div>
 
+        <div class="content-card">
         <!-- Sticky Term Info sub-header -->
-        <div class="p-4 py-2.5 bg-white flex items-center justify-between shadow-sm sticky top-[52px] z-50">
+        <div class="ticket-subheader">
+            <div class="flex items-center justify-between">
             <div class="flex items-center gap-2 border border-[#E5E7EB] rounded-lg px-3 py-1.5 bg-gray-50">
                 <i class="fa-regular fa-calendar text-[[@themeColor]] text-sm" style="color: @themeColor"></i>
                 <span class="text-[12px] font-bold text-gray-700">@DateTime.Now.ToString("dddd, MMM dd, yyyy", System.Globalization.CultureInfo.InvariantCulture)</span>
@@ -46,10 +45,11 @@
                 <span class="text-[12px] font-bold text-gray-400">@Lang.millions_round</span>
                 <span class="text-[18px] font-black text-brown-main">#@(currentTerm?.id ?? "123")</span>
             </div>
+            </div>
         </div>
 
         <!-- Scrollable Content Area -->
-        <div class="flex-1 overflow-y-auto bg-white pb-40" id="bsContent">
+        <div class="ticket-scroll-area bg-white pb-40" id="bsContent">
             <!-- Results for the last 5 days -->
             <div class="px-5 pt-4 pb-2">
                 <h3 class="text-[17px] font-bold text-black text-center mb-3">Results for the last 5 days</h3>
@@ -203,27 +203,29 @@
                 </button>
             </div>
         </div>
+        </div>
     </div>
 }
 else
 {
 <!-- ==================== Basic Pick 10 / Odd-Even GAME UI ==================== -->
-<div class="main-container animate__animated animate__fadeIn bg-[#F5F5F5] h-screen flex flex-col font-bricolage overflow-hidden max-w-[414px] mx-auto relative">
+<div class="millions-buy-ticket-page main-container animate__animated animate__fadeIn overflow-hidden">
     <!-- Header -->
-    <div class="w-full bg-[#0062FF] py-3 px-4 text-white flex items-center justify-between sticky top-0 z-[60]">
-        <button onclick="location.href='@Url.Action("GameHome", "Home")'" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-all">
-            <i class="fa-solid fa-arrow-left text-[20px]"></i>
+    <div class="header">
+        <button onclick="location.href='@Url.Action("GameHome", "Home")'" class="back-btn" type="button">
+            <i class="fa-solid fa-arrow-left"></i>
         </button>
-        <span class="font-[800] text-[18px] absolute left-1/2 -translate-x-1/2 whitespace-nowrap">
+        <div class="header-title">
             @if (Model.termType == Constants.PIC10_BASIC_CODE) { <text>Basic Pick 10</text> }
             else if (Model.termType == Constants.Millions_CODE) { <text>Millions</text> }
             else { @Lang.millions_odd_even }
-        </span>
-        <div class="w-8"></div>
+        </div>
     </div>
 
+    <div class="content-card">
     <!-- Sticky Term Info sub-header -->
-    <div class="p-4 py-2.5 bg-white flex items-center justify-between shadow-sm sticky top-[52px] z-50">
+    <div class="ticket-subheader">
+        <div class="flex items-center justify-between">
         <div class="flex items-center gap-2 border border-[#E5E7EB] rounded-lg px-3 py-1.5 bg-gray-50">
             <i class="fa-regular fa-calendar text-[#0062FF] text-sm"></i>
             <span class="text-[12px] font-bold text-gray-700">@DateTime.Now.ToString("dddd, MMM dd, yyyy", System.Globalization.CultureInfo.InvariantCulture)</span>
@@ -232,10 +234,11 @@ else
             <span class="text-[12px] font-bold text-gray-400">@Lang.millions_round</span>
             <span class="text-[18px] font-black text-brown-main">#@(currentTerm?.id ?? "12459")</span>
         </div>
+        </div>
     </div>
 
     <!-- Ticket Scrollable List Area -->
-    <div id="ticketContainer" class="p-4 flex flex-col gap-6 flex-1 overflow-y-auto bg-[#F5F5F5] pb-6">
+    <div id="ticketContainer" class="ticket-scroll-area p-4 flex flex-col gap-6 bg-[#F5F5F5] pb-6">
         @for (int i = 1; i <= 2; i++)
         {
             <div class="ticket-card relative group active:bg-gray-50 transition-colors cursor-pointer animate__animated animate__fadeIn">
@@ -279,7 +282,7 @@ else
     </div>
 
     <!-- Bottom Action Bar -->
-    <div class="p-4 bg-white border-t border-gray-200 z-[70] shadow-[0px_-4px_10px_rgba(0,0,0,0.03)] sticky bottom-0">
+    <div class="ticket-bottom-bar p-4 bg-white border-t border-gray-200 z-[70] shadow-[0px_-4px_10px_rgba(0,0,0,0.03)]">
         <div class="flex items-center justify-between">
             <div class="flex flex-col">
                 <div class="flex items-center gap-1.5 mb-0.5">
@@ -298,23 +301,23 @@ else
         </div>
     </div>
 </div>
+</div>
 }
 
 <!-- Order Summary Screen (from Figma) -->
 <div id="orderSummaryModal" class="hidden fixed inset-0 z-[150] bg-black/60 flex items-center justify-center p-0 font-bricolage backdrop-blur-[2px]">
-    <div class="w-full h-full bg-white flex flex-col animate__animated animate__fadeInRight animate__faster shadow-2xl relative lg:max-w-[414px]">
+        <div class="w-full h-full bg-white flex flex-col animate__animated animate__fadeInRight animate__faster shadow-2xl relative lg:max-w-[414px]">
         <!-- Header đồng bộ tuyệt đối -->
-        <div class="w-full bg-[#0062FF] py-3 px-4 text-white flex items-center justify-between sticky top-0 z-[60]">
-            <button onclick="hideOrderSummary()" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-all">
-                <i class="fa-solid fa-arrow-left text-[20px]"></i>
+        <div class="buy-ticket-modal-header sticky top-0 z-[60]">
+            <button onclick="hideOrderSummary()" class="back-btn" type="button">
+                <i class="fa-solid fa-arrow-left"></i>
             </button>
-            <span class="font-[800] text-[18px] absolute left-1/2 -translate-x-1/2 whitespace-nowrap">
+            <div class="header-title">
                 @if (Model.termType == Constants.PIC10_BASIC_CODE) { <text>Basic Pick 10</text> }
                 else if (Model.termType == Constants.Millions_CODE) { <text>Millions</text> }
                 else if (Model.termType == Constants.PIC10_BIGSMALL_CODE) { @Lang.millions_big_small }
                 else { @Lang.millions_odd_even }
-            </span>
-            <div class="w-8"></div>
+            </div>
         </div>
 
         <!-- Content Area: Split into scrollable list and static summary -->
@@ -1412,10 +1415,14 @@ else
             
             <div class="text-[#534A4A] font-[900] text-[18px] relative z-10 text-center mt-3">@Lang.thank_you <span class="text-[#0062FF]">♥️</span></div>
             
-            <!-- Action Button -->
-            <button onclick="location.href='@Url.Action("GameHome", "Home", new { termType = Model.termType })'" class="w-full bg-[#0062FF] text-white font-[900] text-[18px] py-[13px] rounded-[18px] shadow-[0_8px_20px_rgba(238,0,51,0.25)] active:scale-95 transition-all mt-4 relative z-10 uppercase tracking-wide">
-                @Lang.back_to_homepage
-            </button> 
+            <div class="w-full flex gap-2.5 mt-4 relative z-10">
+                <button type="button" onclick="window.location.href = subDomain + '@Url.Action("BuyTicket", "Home", new { termType = Model.termType })';" class="flex-1 min-w-0 border-2 border-[#0062FF] bg-white text-[#0062FF] font-[900] text-[15px] py-3 rounded-[18px] active:scale-95 transition-all uppercase tracking-wide shadow-sm">
+                    @Lang.millions_continue
+                </button>
+                <button type="button" onclick="window.location.href = subDomain + '@Url.Action("GameHome", "Home", new { termType = Model.termType })';" class="flex-1 min-w-0 bg-[#0062FF] text-white font-[900] text-[15px] py-3 rounded-[18px] shadow-[0_8px_20px_rgba(0,98,255,0.25)] active:scale-95 transition-all uppercase tracking-wide">
+                    @Lang.close
+                </button>
+            </div>
         </div>
     </div>
 }

website/Areas/Millions/Views/Home/GameHome.cshtml

@@ -40,10 +40,10 @@
                     <button onclick='location.href=subDomain + "@Url.Action("Index", "Home", new { area = "LotteryV2" })";' class="js-back w-6 h-6 flex items-center justify-center">
                         <img src="/Millions/assets/icons/arrow-left.svg" alt="Back" class="w-6 h-6"/>
                     </button>
-                    <button class="flex items-center gap-2 bg-white/15 rounded-full px-3 py-1 text-white text-sm">
+                    <!-- <button class="flex items-center gap-2 bg-white/15 rounded-full px-3 py-1 text-white text-sm">
                         <span>🏴󠁧󠁢󠁥󠁮󠁧󠁿 English</span>
                         <img src="/Millions/assets/icons/chevron-down.svg" alt="" class="w-2 h-2"/>
-                    </button>
+                    </button> -->
                 </div>
 
                 <!-- User profile -->
@@ -53,10 +53,15 @@
                     </div>
                     <div class="flex-1 min-w-0">
                         <p class="text-white text-base font-semibold leading-tight">@(Model?.profile?.users ?? "User")</p>
-                        <div class="flex items-center gap-1 mt-1">
-                            <span class="text-3xl font-condensed text-gold-gradient leading-none">@FormatMoney(Model?.userStatus?.bet_coin)</span>
-                            <img src="/Millions/assets/icons/coin.png" alt="" class="w-5 h-5"/>
-                            <span class="text-white text-sm">@Lang.millions_htg</span>
+                        <div class="mt-2 flex items-center justify-between gap-2 rounded-full border border-white/35 bg-white/10 px-3 py-2">
+                            <div class="flex items-center gap-1 min-w-0">
+                                <span class="text-3xl font-condensed text-gold-gradient leading-none truncate">@FormatMoney(Model?.userStatus?.bet_coin)</span>
+                                <img src="/Millions/assets/icons/coin.png" alt="" class="w-5 h-5 shrink-0"/>
+                                <span class="text-white text-sm shrink-0">@Lang.millions_htg</span>
+                            </div>
+                            <button type="button" onclick="transferWinMoney()" class="shrink-0 rounded-full px-3 py-2 min-h-[40px] w-[4.9rem] font-extrabold text-[#0a1f44] text-[9px] leading-[1.12] text-center active:scale-[0.98] transition-transform" style="background: linear-gradient(90deg, #ffcf0f 0%, #fff1b8 100%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);">
+                                @Lang.millions_redeem_rewards
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -128,8 +133,8 @@
                 </p>
                 <p class="text-white text-xs mt-2">Estimate Jackpot Prize</p>
                 <p class="leading-none mt-1 flex items-start" style="margin-bottom:18px;">
-                    <span class="mega-amount text-[40px] font-condensed text-gold-gradient tracking-tight leading-none animate__animated animate-rotate-3s">30.000.000</span>
-                    <span class="text-gold-gradient text-sm font-bold uppercase ml-1 animate__animated animate-rotate-3s">@Lang.v2_htg</span>
+                    <span class="mega-amount mega-jackpot-wiggle text-[40px] font-condensed text-gold-gradient tracking-tight leading-none">30.000.000</span>
+                    <span class="mega-jackpot-wiggle text-gold-gradient text-sm font-bold uppercase ml-1">@Lang.v2_htg</span>
                 </p>
                 <p class="text-white text-[10px] mt-1 ">Be the next millionaire</p>
 
@@ -225,7 +230,7 @@
 
             // Withdraw money function
             function transferWinMoney() {
-                location.href = '@Url.Action("TransferWinMoney", "Home")';
+                location.href = subDomain + '@Url.Action("TransferWinMoney", "Home", new { area = "Millions" })';
             }
 
         document.addEventListener('DOMContentLoaded', startCountdown);

website/Areas/Millions/Views/Home/TransferWinMoney.cshtml

@@ -14,44 +14,24 @@
         return amount;
     }
 }
-<style>
-    @@keyframes float {
-        0%, 100% { transform: translateY(0); }
-        50% { transform: translateY(-8px); }
-    }
-    .animate-float {
-        animation: float 4s ease-in-out infinite;
-    }
-    .btn-premium {
-        border: 2px solid #ffffff !important;
-        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .btn-premium:active {
-        transform: scale(0.95);
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-    }
-    .btn-premium-red {
-        background: linear-gradient(135deg, #0062FF 0%, #004ecb 100%);
-    }
-</style>
-
-<div class="main-container animate__animated animate__fadeIn bg-[#EAEAEA] min-h-screen font-bricolage overflow-x-hidden">
-    <!-- Standardized Header (Matches Profile/Rules) -->
-    <div class="sticky top-0 w-full bg-[#0062FF] h-[52px] flex items-center justify-between px-4 z-[100] shadow-sm">
-        <!-- Back Button -->
-        <button onclick="history.back()" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-colors z-10 text-white">
-            <i class="fa-solid fa-arrow-left text-[20px]"></i>
-        </button>
-        <!-- Title centered -->
-        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
-            <span class="font-bold text-[24px] text-white tracking-wide uppercase">@Lang.millions_transfer</span>
-        </div>
+
+@section Styles {
+    <link rel="stylesheet" href="/Millions/css/transfer-win-money.css" />
+}
+
+<div class="millions-transfer-page animate__animated animate__fadeIn overflow-x-hidden">
+    <div class="header">
+        <a href="javascript:history.back()" class="back-btn" aria-label="Back">
+            <i class="fa-solid fa-arrow-left"></i>
+        </a>
+        <div class="header-title">@Lang.millions_transfer</div>
     </div>
 
-    <div class="pt-[20px] px-4 pb-24 max-w-[414px] mx-auto">
+    <div class="content-card">
+        <div class="content-inner">
+            <div class="max-w-[414px] mx-auto w-full">
         <!-- Account Card Section (Matching Figma: Frame 69) -->
-        <div class="relative w-full bg-[#0062FF] rounded-[12px] overflow-hidden shadow-xl mb-6 pl-8 pr-5 py-2 flex flex-col justify-between" style="border: 4px solid transparent; border-image: linear-gradient(175deg, rgba(255,255,255,0.2) 0%, rgba(255,199,0,0.4) 100%) 1; border-radius: 12px; aspect-ratio: 383/92;">
+        <div class="relative w-full bg-[#0062FF] rounded-[12px] overflow-hidden shadow-xl mb-4 pl-8 pr-5 py-2 flex flex-col justify-between" style="border: 4px solid transparent; border-image: linear-gradient(175deg, rgba(255,255,255,0.2) 0%, rgba(255,199,0,0.4) 100%) 1; border-radius: 12px; aspect-ratio: 383/92;">
             <!-- Decorative Elements (positions from Figma: card 383×92) -->
             <div class="absolute inset-0 pointer-events-none overflow-hidden rounded-[12px]">
                 <!-- Golden Ribbon: Figma x:232.58 y:19.11 w:202.23 h:113.29 → right:0, top:20.8%, w:52.8% -->
@@ -80,11 +60,11 @@
         </div>
 
         <!-- Selection Area (Horizontal Cards) -->
-        <div class="mb-6">
-            <h2 class="text-[#534A4A] font-[900] text-[18px] mb-3 pl-1">@Lang.millions_choose_account</h2>
+        <div class="mb-4">
+            <h2 class="text-[#534A4A] font-[900] text-[18px] mb-2 pl-1">@Lang.millions_choose_account</h2>
             <div class="flex gap-3">
             <!-- Basic Account Option -->
-            <div id="selectBasic" onclick="selectChannel(1)" class="channel-card flex-1 bg-white h-[76px] rounded-[18px] border-2 border-[#0062FF] shadow-md flex items-center px-3 gap-2 cursor-pointer relative">
+            <div id="selectBasic" onclick="selectChannel(1)" class="channel-card flex-1 bg-white h-[68px] rounded-[18px] border-2 border-[#0062FF] shadow-md flex items-center px-3 gap-2 cursor-pointer relative">
                 <!-- Selected Icon -->
                 <div class="check-icon absolute -top-2 -right-1 bg-white rounded-full">
                     <i class="fa-solid fa-circle-check text-[#00AF1B] text-[20px]"></i>
@@ -93,7 +73,7 @@
                 <img src="/Millions/img/transfer_basic_icon.png" alt="Basic" class="w-12 h-10 object-contain" />
             </div>
             <!-- Natcash Card -->
-            <div id="selectNatcash" onclick="selectChannel(2)" class="channel-card flex-1 bg-white h-[76px] rounded-[18px] border border-gray-100 shadow-sm flex items-center px-3 gap-2 cursor-pointer relative overflow-visible">
+            <div id="selectNatcash" onclick="selectChannel(2)" class="channel-card flex-1 bg-white h-[68px] rounded-[18px] border border-gray-100 shadow-sm flex items-center px-3 gap-2 cursor-pointer relative overflow-visible">
                 <!-- Selected Icon (Hidden by default) -->
                 <div class="check-icon absolute -top-2 -right-1 bg-white rounded-full hidden">
                     <i class="fa-solid fa-circle-check text-[#00AF1B] text-[20px]"></i>
@@ -102,16 +82,16 @@
                     <img src="/Millions/img/transfer_other_card.png" alt="Natcash" class="w-full h-full object-contain" />
                 </div>
             </div>
-        </div>
+            </div>
         </div>
 
         <!-- Form Fields Area -->
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-1.5">
             <!-- Sender Phone -->
-            <div class="flex flex-col gap-2">
-                <label class="text-[#534A4A] font-[900] text-[16px] px-1 capitalize">@Lang.millions_sender_phone</label>
+            <div class="flex flex-col gap-1.5">
+                <label class="text-[#534A4A] font-[900] text-[15px] px-1 capitalize">@Lang.millions_sender_phone</label>
                 <div class="relative w-full group">
-                    <input type="text" readonly value="@(Model?.userStatus?.msisdn ?? "0")" class="w-full bg-gray-100 border border-gray-300 text-[#534A4A] text-[17px] font-[800] rounded-[18px] py-[15px] px-5 outline-none transition-all cursor-not-allowed" />
+                    <input type="text" readonly value="@(Model?.userStatus?.msisdn ?? "0")" class="w-full bg-gray-100 border border-gray-300 text-[#534A4A] text-[17px] font-[800] rounded-[18px] py-3 px-5 outline-none transition-all cursor-not-allowed" />
                     <div class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400">
                         <i class="fa-solid fa-lock text-[20px] opacity-40"></i>
                     </div>
@@ -119,10 +99,10 @@
             </div>
 
             <!-- Receiver Phone (Mandatory same as sender) -->
-            <div class="flex flex-col gap-2">
-                <label class="text-[#534A4A] font-[900] text-[16px] px-1 capitalize">@Lang.millions_receiver_phone</label>
+            <div class="flex flex-col gap-1.5">
+                <label class="text-[#534A4A] font-[900] text-[15px] px-1 capitalize">@Lang.millions_receiver_phone</label>
                 <div class="relative w-full">
-                    <input id="receiverPhone" type="tel" readonly value="@(Model?.userStatus?.msisdn ?? "0")" class="w-full bg-gray-100 border border-gray-300 text-[#534A4A] text-[17px] font-[800] rounded-[18px] py-[15px] px-5 outline-none transition-all cursor-not-allowed" />
+                    <input id="receiverPhone" type="tel" readonly value="@(Model?.userStatus?.msisdn ?? "0")" class="w-full bg-gray-100 border border-gray-300 text-[#534A4A] text-[17px] font-[800] rounded-[18px] py-3 px-5 outline-none transition-all cursor-not-allowed" />
                     <div class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400">
                         <i class="fa-solid fa-lock text-[20px] opacity-40"></i>
                     </div>
@@ -130,14 +110,14 @@
             </div>
 
             <!-- Amount -->
-            <div class="flex flex-col gap-2">
-                <label class="text-[#534A4A] font-[900] text-[16px] px-1 capitalize">@Lang.millions_amount_htg</label>
+            <div class="flex flex-col gap-1.5">
+                <label class="text-[#534A4A] font-[900] text-[15px] px-1 capitalize">@Lang.millions_amount_htg</label>
                 <div class="relative w-full">
-                    <input id="transferAmount" type="number" value="5000" placeholder="5,000" class="w-full bg-white border border-gray-300 focus:border-[#0062FF] focus:ring-2 focus:ring-[#0062FF]/10 text-[#0062FF] text-[17px] font-[800] rounded-[18px] py-[15px] px-5 outline-none transition-all placeholder:text-gray-300" />
+                    <input id="transferAmount" type="number" value="5000" placeholder="5,000" class="w-full bg-white border border-gray-300 focus:border-[#0062FF] focus:ring-2 focus:ring-[#0062FF]/10 text-[#0062FF] text-[17px] font-[800] rounded-[18px] py-3 px-5 outline-none transition-all placeholder:text-gray-300" />
                     <span class="absolute right-5 top-1/2 -translate-y-1/2 text-gray-400 font-black">HTG</span>
                 </div>
                 <!-- Shortcut Buttons -->
-                <div class="flex gap-2 mt-1">
+                <div class="flex gap-2 mt-0.5">
                     <button onclick="setAmount(10, this)" class="amt-btn flex-1 py-1.5 border border-gray-300 rounded-lg text-[14px] font-black transition-all bg-white text-[#534A4A] flex items-center justify-center gap-1 shadow-sm">
                         10
                         <i class="fa-solid fa-circle-check text-[#00AF1B] text-[14px] hidden"></i>
@@ -153,85 +133,133 @@
                 </div>
 
                 <!-- Fee Section (Newly placed on a new line) -->
-                <div class="mt-6 flex flex-col gap-1 px-1">
-                    <span class="text-gray-500 font-bold text-[14px]">@Lang.millions_fee</span>
-                    <span class="text-black font-black text-[28px] leading-none mt-1">@Lang.millions_free</span>
+                <div class="mt-3 flex flex-col gap-0.5 px-1">
+                    <span class="text-gray-500 font-bold text-[13px]">@Lang.millions_fee</span>
+                    <span class="text-black font-black text-[24px] leading-none">@Lang.millions_free</span>
                 </div>
             </div>
         </div>
 
         <!-- Main Action Button -->
-        <div class="mt-6">
-            <button id="btnContinue" class="btn-premium btn-premium-red w-full text-white font-[900] text-[18px] py-[18px] rounded-[22px] active:scale-95 transition-all uppercase tracking-wide">
+        <div class="mt-4">
+            <button id="btnContinue" class="btn-premium btn-premium-red w-full text-white font-[900] text-[17px] py-4 rounded-[22px] active:scale-95 transition-all uppercase tracking-wide">
                 @Lang.millions_continue
             </button>
         </div>
+            </div>
+        </div>
     </div>
 
     <!-- Success Modal Overlay -->
-    <div id="successModal" class="fixed inset-0 z-[110] flex items-center justify-center hidden px-6" style="background: rgba(0,0,0,0.7);">
-        <div class="w-full max-w-[370px] bg-white rounded-[32px] overflow-hidden flex flex-col items-center animate__animated animate__zoomIn animate__faster shadow-2xl relative">
-            <!-- Content Container -->
-            <div class="relative z-10 w-full flex flex-col items-center pt-10 pb-8 px-6">
-                
-                <!-- Success Icon Group -->
-                <div class="relative w-full flex justify-center mb-0 mt-2 z-10 px-4">
-                    <img src="/Millions/img/modal/otp_success.png" alt="Success" class="w-full max-w-[200px] h-auto object-contain">
+    <div id="successModal" class="transfer-success-overlay fixed inset-0 z-[110] flex items-center justify-center hidden px-4">
+        <div class="transfer-success-card animate__animated animate__zoomIn animate__faster relative">
+            <div class="transfer-success-body">
+                <div class="transfer-success-hero">
+                    <div class="transfer-success-deco" aria-hidden="true">
+                        <span class="d1"></span><span class="d2"></span><span class="d3"></span><span class="d4"></span>
+                        <span class="dash dash-1"></span><span class="dash dash-2"></span><span class="dash dash-3"></span>
+                        <i class="fa-solid fa-star spark spark-1"></i>
+                        <i class="fa-solid fa-star spark spark-2"></i>
+                    </div>
+                    <div class="transfer-success-ring">
+                        <i class="fa-solid fa-check" aria-hidden="true"></i>
+                    </div>
                 </div>
 
-                <h2 class="text-[#0A9800] font-[800] text-[32px] mb-1 tracking-tight">@Lang.success</h2>
-                <p class="text-[#000000] font-[700] text-[20px] text-center px-4 mb-6 leading-tight">
-                    @Lang.millions_payment_successfully
-                </p>
+                <h2 class="transfer-success-title">@Lang.success</h2>
+                <p class="transfer-success-sub">@Lang.millions_payment_successfully</p>
 
-                <div class="w-full border-t border-dashed border-gray-200 pt-5 flex flex-col gap-3 mb-5">
-                    <!-- Info Rows -->
-                    <div class="flex justify-between items-center text-[15px]">
-                        <span class="text-[#534A4A] font-bold">@Lang.amount_transfered</span>
-                        <span id="successAmount" class="text-black font-black text-right">5.000 HTG</span>
+                <div class="transfer-success-panel">
+                    <div class="transfer-success-row">
+                        <div class="transfer-success-row-icon"><i class="fa-solid fa-credit-card" aria-hidden="true"></i></div>
+                        <span class="transfer-success-row-label">@Lang.amount_transfered</span>
+                        <span id="successAmount" class="transfer-success-row-value transfer-success-row-value--accent">5.000 HTG</span>
                     </div>
-                    <div class="flex justify-between items-center text-[15px]">
-                        <span class="text-[#534A4A] font-bold">@Lang.sender</span>
-                        <span id="successSender" class="text-black font-black text-right">50940236545</span>
+                    <div class="transfer-success-row">
+                        <div class="transfer-success-row-icon"><i class="fa-solid fa-user" aria-hidden="true"></i></div>
+                        <span class="transfer-success-row-label">@Lang.sender</span>
+                        <span id="successSender" class="transfer-success-row-value">50940236545</span>
                     </div>
-                    <div class="flex justify-between items-center text-[15px]">
-                        <span class="text-[#534A4A] font-bold">@Lang.receiver</span>
-                        <span id="successReceiver" class="text-black font-black text-right">50940236545</span>
+                    <div class="transfer-success-row">
+                        <div class="transfer-success-row-icon"><i class="fa-solid fa-user" aria-hidden="true"></i></div>
+                        <span class="transfer-success-row-label">@Lang.receiver</span>
+                        <span id="successReceiver" class="transfer-success-row-value">50940236545</span>
                     </div>
-                    <div class="flex justify-between items-center text-[15px]">
-                        <span class="text-[#534A4A] font-bold">@Lang.fee</span>
-                        <span class="text-black font-black text-right">0 HTG</span>
+                    <div class="transfer-success-row">
+                        <div class="transfer-success-row-icon"><i class="fa-solid fa-tag" aria-hidden="true"></i></div>
+                        <span class="transfer-success-row-label">@Lang.fee</span>
+                        <span class="transfer-success-row-value">0 HTG</span>
                     </div>
                 </div>
 
-                <div class="w-full border-t border-dashed border-gray-200 pt-4 flex justify-between items-center mb-8">
-                    <span class="text-[#534A4A] font-bold text-[15px]">@Lang.time</span>
-                    <span id="successTime" class="text-[#534A4A] font-medium text-[14px] text-right">08/01/2022 - 10:00:20</span>
+                <div class="transfer-success-time">
+                    <div class="transfer-success-row-icon"><i class="fa-regular fa-clock" aria-hidden="true"></i></div>
+                    <span class="transfer-success-time-label">@Lang.time</span>
+                    <span id="successTime" class="transfer-success-time-value">08/01/2022 - 10:00:20</span>
                 </div>
 
-                <button onclick="window.location.href='/Millions/Home/GameHome'" class="btn-premium btn-premium-red w-full text-white font-[800] text-[20px] py-[14px] rounded-[18px] active:scale-95 transition-all">
-                    @Lang.back_to_homepage
+                <div class="transfer-success-illustration" aria-hidden="true">
+                    <svg viewBox="0 0 140 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M6 44h18M6 52h12" stroke="#0062FF" stroke-width="2.2" stroke-linecap="round"/>
+                        <path d="M24 36c2-8 10-10 18-8l52 12c8 2 12 8 10 16l-6 14c-2 6-8 8-16 6L32 66c-8-2-12-10-8-30z" stroke="#0062FF" stroke-width="2.2" fill="none" stroke-linejoin="round"/>
+                        <rect x="38" y="40" width="40" height="24" rx="4" transform="rotate(-10 58 52)" stroke="#0062FF" stroke-width="2" fill="#fff"/>
+                        <text x="54" y="58" transform="rotate(-10 58 52)" fill="#0062FF" font-size="17" font-weight="800" font-family="system-ui,Segoe UI,sans-serif">$</text>
+                        <circle cx="108" cy="60" r="17" fill="#0062FF"/>
+                        <path d="M102 60l5 5 11-12" stroke="#fff" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </div>
+            </div>
+            <div class="transfer-success-actions">
+                <button type="button" class="transfer-success-btn-continue" onclick="window.location.href = (typeof subDomain !== 'undefined' ? subDomain : '') + '@Url.Action("TransferWinMoney", "Home", new { area = "Millions" })';">
+                    @Lang.millions_continue
+                </button>
+                <button type="button" class="transfer-success-btn-close" onclick="window.location.href = (typeof subDomain !== 'undefined' ? subDomain : '') + '@Url.Action("GameHome", "Home", new { area = "Millions" })';">
+                    @Lang.close
                 </button>
             </div>
         </div>
     </div>
 
     <!-- Failure Modal Overlay -->
-    <div id="failureModal" class="fixed inset-0 z-[110] flex items-center justify-center hidden px-6" style="background: rgba(0,0,0,0.5);">
-        <div class="w-full max-w-[343px] min-h-[420px] bg-white rounded-[20px] overflow-hidden flex flex-col items-center p-8 animate__animated animate__zoomIn animate__faster shadow-2xl">
-            <div class="w-full flex flex-col items-center mb-6 mt-4">
-                <div class="relative w-full flex items-center justify-center">
-                    <img src="/Millions/img/modal/fail_icon.png" class="w-[160px] h-auto object-contain" />
+    <div id="failureModal" class="transfer-success-overlay fixed inset-0 z-[110] flex items-center justify-center hidden px-4">
+        <div class="transfer-fail-card animate__animated animate__zoomIn animate__faster relative w-full max-w-[370px]">
+            <div class="transfer-fail-header">
+                <div class="transfer-fail-header-deco" aria-hidden="true"></div>
+                <div class="transfer-fail-icon-wrap">
+                    <div class="transfer-fail-icon-circle">
+                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+                    </div>
+                    <div class="transfer-fail-icon-warn">
+                        <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
+                    </div>
                 </div>
             </div>
-            <div class="px-2 text-center mb-12 mt-2">
-                <p id="failErrorMessage" class="text-black font-[700] text-[20px] leading-tight">
-                    @Lang.millions_enter_valid_amount
-                </p>
+            <div class="transfer-fail-body">
+                <h2 class="transfer-fail-title">@Lang.fail_exclamation</h2>
+                <p id="failErrorMessage" class="transfer-fail-msg">@Lang.millions_enter_valid_amount</p>
+                <div class="transfer-fail-divider" aria-hidden="true"><span></span></div>
+                <div class="transfer-fail-illustration" aria-hidden="true">
+                    <svg viewBox="0 0 140 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M18 52h22M18 60h14" stroke="#0062FF" stroke-width="2" stroke-linecap="round"/>
+                        <path d="M36 42c2-7 9-9 16-7l46 10c7 2 11 7 9 14l-5 12c-2 5-7 7-14 5L40 64c-7-2-11-8-8-26z" stroke="#0062FF" stroke-width="2" fill="none" stroke-linejoin="round"/>
+                        <path d="M78 38c8-6 18-8 26-4" stroke="#0062FF" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="96" cy="28" r="14" stroke="#0062FF" stroke-width="2" fill="#fff"/>
+                        <path d="M92 28h8M96 24v8" stroke="#0062FF" stroke-width="1.8" stroke-linecap="round"/>
+                        <path d="M88 22l4-6 3 5M104 20l6-2-2 6" stroke="#0062FF" stroke-width="1.5" stroke-linecap="round" opacity="0.7"/>
+                    </svg>
+                </div>
+            </div>
+            <div id="failureModalStandardActions" class="transfer-success-actions">
+                <button type="button" class="transfer-success-btn-continue" onclick="window.location.href = (typeof subDomain !== 'undefined' ? subDomain : '') + '@Url.Action("TransferWinMoney", "Home", new { area = "Millions" })';">
+                    @Lang.millions_continue
+                </button>
+                <button type="button" class="transfer-success-btn-close" onclick="window.location.href = (typeof subDomain !== 'undefined' ? subDomain : '') + '@Url.Action("GameHome", "Home", new { area = "Millions" })';">
+                    @Lang.close
+                </button>
             </div>
-            <div class="w-full mt-auto">
-                <button onclick="closeFailureModal()" class="btn-premium btn-premium-red w-full text-white font-[800] text-[20px] py-[10px] rounded-[14px] active:scale-95 transition-all">
-                    @Lang.try_again
+            <div id="failureModalUpgradeActions" class="transfer-success-actions is-hidden">
+                <button type="button" class="transfer-success-btn-close" onclick="window.location.href = (typeof subDomain !== 'undefined' ? subDomain : '') + '/Account/Login';">
+                    @Lang.login
                 </button>
             </div>
         </div>
@@ -257,7 +285,7 @@
                 
                 <!-- Shield Icon -->
                 <div class="flex flex-col items-center gap-1 mb-2">
-                    <img src="/Millions/img/modal/otp_shield.png" class="w-[90px] h-auto object-contain drop-shadow-md" />
+                    <img src="/Millions/img/modal/transfer_coins_exchange.png" class="w-[168px] max-w-[85vw] h-auto object-contain drop-shadow-md" alt="" />
                     <span class="text-[#534A4A] font-bold text-[14px]">@Lang.millions_convert</span>
                 </div>
 
@@ -566,26 +594,17 @@
             });
         });
 
-        var systemUpgrading = false;
         function showFailureModal(message, code) {
             $("#failErrorMessage").html(message);
-            const $btn = $("#failureModal button");
             if (code === "-2" || (message && message.includes("System is upgrading"))) {
-                systemUpgrading = true;
-                $btn.text("@Lang.login");
+                $("#failureModalStandardActions").addClass("is-hidden");
+                $("#failureModalUpgradeActions").removeClass("is-hidden");
             } else {
-                systemUpgrading = false;
-                $btn.text("@Lang.try_again");
+                $("#failureModalStandardActions").removeClass("is-hidden");
+                $("#failureModalUpgradeActions").addClass("is-hidden");
             }
             $("#failureModal").removeClass("hidden").addClass("flex");
         }
-
-        function closeFailureModal() {
-            $("#failureModal").addClass("hidden").removeClass("flex");
-            if (systemUpgrading) {
-                window.location.href = subDomain + "/Account/Login";
-            }
-        }
     </script>
 }
 

website/Languages/Lang.Designer.cs

@@ -2187,6 +2187,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Redeem Rewards.
+        /// </summary>
+        public static string millions_redeem_rewards {
+            get {
+                return ResourceManager.GetString("millions_redeem_rewards", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Demand nouvo OTP.
         /// </summary>
@@ -3745,7 +3754,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 💰12,000 HTG..
+        ///   Looks up a localized string similar to 12,000 HTG..
         /// </summary>
         public static string rule_prize_12k {
             get {
@@ -3754,7 +3763,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 💰160 HTG..
+        ///   Looks up a localized string similar to 160 HTG..
         /// </summary>
         public static string rule_prize_160 {
             get {
@@ -3908,7 +3917,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 1,000,000 HTG ap separe egal bay ganyan yo .
+        ///   Looks up a localized string similar to 1.000 .000 HTG ap separe egal bay ganyan yo .
         /// </summary>
         public static string rule_shared_equally {
             get {
@@ -4863,7 +4872,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Lajan 💸 an transfere ak sikse!.
+        ///   Looks up a localized string similar to Lajan’¸ an transfere ak sikse!.
         /// </summary>
         public static string v2_payment_successfully {
             get {

website/Languages/Lang.fr.resx

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <root>
   <!-- 
     Microsoft ResX Schema 
@@ -1302,7 +1302,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Choose the account</value>
   </data>
   <data name="v2_sender_phone" xml:space="preserve">
-    <value>💸 Sender phone</value>
+    <value>Sender phone</value>
   </data>
   <data name="v2_receiver_phone" xml:space="preserve">
     <value>💰 Receiver phone</value>
@@ -1599,7 +1599,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Choose the account</value>
   </data>
   <data name="millions_sender_phone" xml:space="preserve">
-    <value>💸 Sender phone</value>
+    <value>Sender phone</value>
   </data>
   <data name="millions_receiver_phone" xml:space="preserve">
     <value>Receiver phone</value>
@@ -1650,7 +1650,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>How are winnings calculated?</value>
   </data>
   <data name="faq_millions_a4" xml:space="preserve">
-    <value>Winnings depend on how many numbers you match, including the Mega Ball.
 The more numbers you match, the higher your prize.</value>
+    <value>Winnings depend on how many numbers you match, including the Mega Ball. The more numbers you match, the higher your prize.</value>
   </data>
   <data name="faq_millions_q5" xml:space="preserve">
     <value>Can I win multiple prizes with one ticket?</value>
@@ -1662,7 +1662,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Where do the results come from?</value>
   </data>
   <data name="faq_millions_a6" xml:space="preserve">
-    <value>All results are taken from the official Mega Millions source:
https://www.lotteryusa.com/new-york/</value>
+    <value>All results are taken from the official Mega Millions source:https://www.lotteryusa.com/new-york/</value>
   </data>
   <data name="faq_millions_q7" xml:space="preserve">
     <value>How will I receive my winnings?</value>
@@ -1817,7 +1817,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>You select 5 numbers from 1 to 70 and 1 Mega Ball from 1 to 24, then purchase your ticket before the draw time.</value>
   </data>
   <data name="faq_millions_a2" xml:space="preserve">
-    <value>Draws take place twice a week (Tuesday and Friday) at 11:00 PM (ET).
 Ticket sales close at 10:30 PM (ET)</value>
+    <value>Draws take place twice a week (Tuesday and Friday) at 11:00 PM (ET). Ticket sales close at 10:30 PM (ET)</value>
   </data>
   <data name="faq_millions_a3" xml:space="preserve">
     <value>Each ticket costs 20 HTG.</value>
@@ -1831,4 +1831,7 @@ We’ll help you create an account in a few easy steps.</value>
   <data name="faq_millions_q3" xml:space="preserve">
     <value>How much does a ticket cost?</value>
   </data>
+  <data name="millions_redeem_rewards" xml:space="preserve">
+    <value>Redeem Rewards</value>
+  </data>
 </root>

website/Languages/Lang.resx

@@ -996,7 +996,7 @@ N ap ede w kreye yon kont byen fasil.</value>
     <value>Si  &gt; 10 Ganyan</value>
   </data>
   <data name="rule_shared_equally" xml:space="preserve">
-    <value>1,000,000 HTG ap separe egal bay ganyan yo </value>
+    <value>1.000 .000 HTG ap separe egal bay ganyan yo </value>
   </data>
   <data name="rule_numbers_matches" xml:space="preserve">
     <value>Nimewo matche</value>
@@ -1005,13 +1005,13 @@ N ap ede w kreye yon kont byen fasil.</value>
     <value>Prize Pool (HTG)</value>
   </data>
   <data name="rule_prize_12k" xml:space="preserve">
-    <value>💰12,000 HTG.</value>
+    <value>12,000 HTG.</value>
   </data>
   <data name="rule_prize_600" xml:space="preserve">
     <value>💰600 HTG.</value>
   </data>
   <data name="rule_prize_160" xml:space="preserve">
-    <value>💰160 HTG.</value>
+    <value>160 HTG.</value>
   </data>
   <data name="rule_prize_20" xml:space="preserve">
     <value>💰20 HTG.</value>
@@ -1289,7 +1289,7 @@ Rezilta ofisyel la se &lt;span class="text-[#A236C8]"&gt;ODD&lt;/span&gt;.</valu
     <value>Konfime</value>
   </data>
   <data name="v2_payment_successfully" xml:space="preserve">
-    <value>Lajan 💸 an transfere ak sikse!</value>
+    <value>Lajan’¸ an transfere ak sikse!</value>
   </data>
   <data name="v2_your_choice" xml:space="preserve">
     <value>Chwazi</value>
@@ -1832,4 +1832,7 @@ Apre yo fin tire 20 nimewo, sistem nan konte konbyen nimewo ki enpe oswa pe: &lt
   <data name="faq_millions_q3" xml:space="preserve">
     <value>faq_millions_q3</value>
   </data>
+  <data name="millions_redeem_rewards" xml:space="preserve">
+    <value>Redeem Rewards</value>
+  </data>
 </root>

website/wwwroot/Millions/css/buy-ticket.css

@@ -2,6 +2,125 @@
     font-family: 'Bricolage Grotesque', sans-serif;
 }
 
+:root {
+    --buy-ticket-primary-blue: #0062FF;
+    --buy-ticket-dark-blue: #004ecc;
+}
+
+.millions-buy-ticket-page {
+    background-color: var(--buy-ticket-primary-blue);
+    height: 100vh;
+    height: 100dvh;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    max-width: 430px;
+    margin: 0 auto;
+    font-family: 'Bricolage Grotesque', sans-serif;
+    overflow: hidden;
+}
+
+.millions-buy-ticket-page .header {
+    background-color: var(--buy-ticket-primary-blue);
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' viewBox='0 0 60 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 L15 0 L30 15 L45 0 L60 15 L60 30 L45 15 L30 30 L15 15 L0 30 Z' fill='%23004ecc' fill-opacity='0.4'/%3E%3C/svg%3E");
+    height: 64px;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    color: #fff;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.millions-buy-ticket-page .back-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    text-decoration: none;
+    font-size: 18px;
+    flex-shrink: 0;
+}
+
+.millions-buy-ticket-page .header-title {
+    flex: 1;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 800;
+    margin-right: 32px;
+    line-height: 1.1;
+}
+
+.millions-buy-ticket-page .content-card {
+    background-color: #ffffff;
+    flex: 1;
+    border-radius: 40px 40px 0 0;
+    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.millions-buy-ticket-page .ticket-subheader {
+    background: #fff;
+    padding: 12px 16px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+    position: relative;
+    z-index: 20;
+}
+
+.millions-buy-ticket-page .ticket-scroll-area {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+}
+
+.millions-buy-ticket-page .ticket-bottom-bar {
+    position: relative;
+    z-index: 20;
+    flex-shrink: 0;
+    background: #fff;
+}
+
+.buy-ticket-modal-header {
+    background-color: var(--buy-ticket-primary-blue);
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' viewBox='0 0 60 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 L15 0 L30 15 L45 0 L60 15 L60 30 L45 15 L30 30 L15 15 L0 30 Z' fill='%23004ecc' fill-opacity='0.4'/%3E%3C/svg%3E");
+    height: 64px;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    color: #fff;
+}
+
+.buy-ticket-modal-header .back-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    text-decoration: none;
+    font-size: 18px;
+    flex-shrink: 0;
+}
+
+.buy-ticket-modal-header .header-title {
+    flex: 1;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 800;
+    margin-right: 32px;
+    line-height: 1.1;
+}
+
 .ticket-card {
     background: url('/LotteryV2/img/Rectangle 132.svg') no-repeat center center;
     background-size: 100% 100%;

website/wwwroot/Millions/css/site.css

@@ -238,21 +238,33 @@ input[type=number] {
     -moz-appearance: textfield;
 }
 
-/* Animation for Jackpot rotation */
-.animate-rotate-3s {
-    animation: rotateCustom 3s linear infinite;
+/* Mega Jackpot amount — custom name avoids Tailwind CDN hijacking class "animate-*" */
+.mega-jackpot-wiggle {
     display: inline-block;
+    animation: megaJackpotWiggleHtg 2s ease-in-out infinite;
+    will-change: transform;
 }
 
-@keyframes rotateCustom {
-    0% {
-        transform: rotate(-5deg) scale(1);
+.mega-amount.mega-jackpot-wiggle {
+    animation-name: megaJackpotWiggleAmount;
+    transform-origin: top left;
+}
+
+@keyframes megaJackpotWiggleAmount {
+    0%, 100% {
+        transform: scaleY(1.35) rotate(-4deg) scale(1);
     }
     50% {
-        transform: rotate(5deg) scale(1.1);
+        transform: scaleY(1.35) rotate(4deg) scale(1.06);
     }
-    100% {
-        transform: rotate(-5deg) scale(1);
+}
+
+@keyframes megaJackpotWiggleHtg {
+    0%, 100% {
+        transform: rotate(-4deg);
+    }
+    50% {
+        transform: rotate(4deg);
     }
 }
 

website/wwwroot/Millions/css/transfer-win-money.css

@@ -0,0 +1,509 @@
+/* Millions — Transfer Win Money (TransferWinMoney.cshtml)
+   Page shell + header match Rule (rule.css / millions-rule-page) */
+
+:root {
+    --primary-blue: #0062FF;
+    --dark-blue: #004ecc;
+}
+
+@keyframes transfer-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+}
+
+.animate-float {
+    animation: transfer-float 4s ease-in-out infinite;
+}
+
+.btn-premium {
+    border: 2px solid #ffffff !important;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-premium:active {
+    transform: scale(0.95);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.btn-premium-red {
+    background: linear-gradient(135deg, #0062FF 0%, #004ecb 100%);
+}
+
+/* ===== Page shell (same idea as .millions-rule-page) ===== */
+.millions-transfer-page {
+    background-color: var(--primary-blue);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    max-width: 430px;
+    margin: 0 auto;
+    font-family: 'Bricolage Grotesque', sans-serif;
+}
+
+/* Header with chevron pattern — mirrors .millions-rule-page .header */
+.millions-transfer-page .header {
+    background-color: var(--primary-blue);
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' viewBox='0 0 60 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 L15 0 L30 15 L45 0 L60 15 L60 30 L45 15 L30 30 L15 15 L0 30 Z' fill='%23004ecc' fill-opacity='0.4'/%3E%3C/svg%3E");
+    height: 64px;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    color: #fff;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.millions-transfer-page .back-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    text-decoration: none;
+    font-size: 18px;
+}
+
+.millions-transfer-page .header-title {
+    flex: 1;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 800;
+    margin-right: 32px; /* balance back button — same as Rule */
+}
+
+/* White content card — mirrors .millions-rule-page .content-card */
+.millions-transfer-page .content-card {
+    background-color: #ffffff;
+    flex: 1;
+    border-radius: 40px 40px 0 0;
+    padding: 16px 18px 20px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* Clearance for home indicator; was 100px — too tall on short phones */
+    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
+    position: relative;
+}
+
+.millions-transfer-page .content-inner {
+    max-width: 100%;
+}
+
+/* ===== Success modal (transfer complete) ===== */
+.transfer-success-overlay {
+    background: rgba(0, 0, 0, 0.72);
+}
+
+.transfer-success-card {
+    width: 100%;
+    max-width: 370px;
+    background: #fff;
+    border: 2px solid var(--primary-blue);
+    border-radius: 28px;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
+    font-family: 'Bricolage Grotesque', sans-serif;
+}
+
+.transfer-success-body {
+    padding: 16px 18px 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.transfer-success-hero {
+    position: relative;
+    width: 92px;
+    height: 92px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 4px;
+}
+
+.transfer-success-deco {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.transfer-success-deco span {
+    position: absolute;
+    display: block;
+    border-radius: 50%;
+    background: var(--primary-blue);
+    opacity: 0.85;
+}
+
+.transfer-success-deco .d1 { width: 6px; height: 6px; top: 8px; left: 4px; }
+.transfer-success-deco .d2 { width: 4px; height: 4px; top: 22px; right: 2px; opacity: 0.6; }
+.transfer-success-deco .d3 { width: 5px; height: 5px; bottom: 18px; left: 0; }
+.transfer-success-deco .d4 { width: 4px; height: 4px; bottom: 6px; right: 8px; opacity: 0.55; }
+
+.transfer-success-deco .dash {
+    position: absolute;
+    width: 10px;
+    height: 3px;
+    background: var(--primary-blue);
+    border-radius: 2px;
+    opacity: 0.7;
+}
+
+.transfer-success-deco .dash-1 { top: 4px; right: 28px; transform: rotate(-25deg); }
+.transfer-success-deco .dash-2 { bottom: 12px; right: 0; transform: rotate(15deg); }
+.transfer-success-deco .dash-3 { left: 10px; bottom: 4px; transform: rotate(-12deg); }
+
+.transfer-success-deco .spark {
+    position: absolute;
+    color: #0A9800;
+    font-size: 11px;
+    line-height: 1;
+    opacity: 0.95;
+}
+
+.transfer-success-deco .spark-1 { top: 0; right: 6px; }
+.transfer-success-deco .spark-2 { bottom: 2px; left: 16px; }
+
+.transfer-success-ring {
+    width: 68px;
+    height: 68px;
+    border-radius: 50%;
+    border: 4px solid var(--primary-blue);
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 98, 255, 0.18);
+    position: relative;
+    z-index: 1;
+}
+
+.transfer-success-ring i {
+    color: #0A9800;
+    font-size: 32px;
+    line-height: 1;
+}
+
+.transfer-success-title {
+    margin: 0 0 4px;
+    font-size: 26px;
+    font-weight: 800;
+    color: var(--primary-blue);
+    letter-spacing: -0.02em;
+}
+
+.transfer-success-sub {
+    margin: 0 0 12px;
+    font-size: 15px;
+    font-weight: 700;
+    color: #1a1a1a;
+    text-align: center;
+    line-height: 1.3;
+    max-width: 300px;
+}
+
+.transfer-success-sub .transfer-success-sub-highlight {
+    color: var(--primary-blue);
+    font-weight: 800;
+}
+
+.transfer-success-panel {
+    width: 100%;
+    background: #e8f2ff;
+    border-radius: 14px;
+    padding: 8px 10px 6px;
+    margin-bottom: 8px;
+}
+
+.transfer-success-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 2px;
+    border-bottom: 1px solid rgba(0, 98, 255, 0.12);
+    font-size: 13px;
+}
+
+.transfer-success-row:last-child {
+    border-bottom: none;
+    padding-bottom: 2px;
+}
+
+.transfer-success-row-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 9px;
+    background: rgba(255, 255, 255, 0.95);
+    color: var(--primary-blue);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 14px;
+    box-shadow: 0 1px 3px rgba(0, 98, 255, 0.1);
+}
+
+.transfer-success-row-label {
+    flex: 1;
+    font-weight: 700;
+    color: #534a4a;
+    min-width: 0;
+}
+
+.transfer-success-row-value {
+    font-weight: 800;
+    color: #1a1a1a;
+    text-align: right;
+    flex-shrink: 0;
+}
+
+.transfer-success-row-value--accent {
+    color: var(--primary-blue);
+}
+
+.transfer-success-time {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    background: #e8f2ff;
+    border-radius: 14px;
+    padding: 10px 12px;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.transfer-success-time i.transfer-success-row-icon {
+    margin: 0;
+}
+
+.transfer-success-time-label {
+    font-weight: 700;
+    color: #534a4a;
+    flex: 1;
+}
+
+.transfer-success-time-value {
+    font-weight: 700;
+    color: #1a1a1a;
+    text-align: right;
+}
+
+.transfer-success-illustration {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0;
+    min-height: 48px;
+}
+
+.transfer-success-illustration svg {
+    width: 96px;
+    height: auto;
+}
+
+.transfer-success-actions {
+    display: flex;
+    gap: 10px;
+    width: 100%;
+    padding: 12px 14px 14px;
+    box-sizing: border-box;
+}
+
+.transfer-success-actions button {
+    flex: 1;
+    min-width: 0;
+    border-radius: 14px;
+    font-family: inherit;
+    font-weight: 800;
+    font-size: 15px;
+    padding: 12px 10px;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s, transform 0.15s, border-color 0.2s;
+}
+
+.transfer-success-actions button:active {
+    transform: scale(0.98);
+}
+
+.transfer-success-btn-continue {
+    border: 2px solid var(--primary-blue);
+    background: #fff;
+    color: var(--primary-blue);
+}
+
+.transfer-success-btn-continue:hover {
+    background: #f0f6ff;
+}
+
+.transfer-success-btn-close {
+    border: 2px solid var(--primary-blue);
+    background: var(--primary-blue);
+    color: #fff;
+}
+
+.transfer-success-btn-close:hover {
+    background: var(--dark-blue);
+    border-color: var(--dark-blue);
+}
+
+.transfer-success-actions.is-hidden {
+    display: none !important;
+}
+
+/* ===== Failure modal (transfer / exchange error) ===== */
+.transfer-fail-card {
+    width: 100%;
+    max-width: 370px;
+    background: #fff;
+    border: 2px solid var(--primary-blue);
+    border-radius: 28px;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
+    font-family: 'Bricolage Grotesque', sans-serif;
+}
+
+.transfer-fail-header {
+    position: relative;
+    background: var(--primary-blue);
+    padding: 12px 16px 18px;
+    overflow: hidden;
+}
+
+.transfer-fail-header-deco {
+    position: absolute;
+    inset: 0;
+    opacity: 0.35;
+    background-image: url("data:image/svg+xml,%3Csvg width='80' height='40' viewBox='0 0 80 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 L20 0 L40 20 L60 0 L80 20' stroke='%23ffffff' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
+    background-position: 100% 0;
+    background-repeat: no-repeat;
+    background-size: 120px auto;
+    pointer-events: none;
+}
+
+.transfer-fail-icon-wrap {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin: 0 auto;
+    width: 72px;
+    height: 56px;
+}
+
+.transfer-fail-icon-circle {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+    position: relative;
+    z-index: 1;
+}
+
+.transfer-fail-icon-circle i {
+    color: var(--primary-blue);
+    font-size: 24px;
+    line-height: 1;
+}
+
+.transfer-fail-icon-warn {
+    position: absolute;
+    right: -2px;
+    bottom: 2px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: #fff;
+    border: 2px solid var(--primary-blue);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    color: var(--primary-blue);
+    z-index: 2;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+}
+
+.transfer-fail-body {
+    padding: 10px 16px 4px;
+    text-align: center;
+}
+
+.transfer-fail-title {
+    margin: 0 0 6px;
+    font-size: 22px;
+    font-weight: 800;
+    color: var(--primary-blue);
+    letter-spacing: -0.02em;
+}
+
+.transfer-fail-msg {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 700;
+    color: #1a1a1a;
+    line-height: 1.35;
+    max-width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.transfer-fail-msg .transfer-fail-msg-accent {
+    color: var(--primary-blue);
+    font-weight: 800;
+}
+
+.transfer-fail-divider {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    max-width: 280px;
+    margin: 8px auto 4px;
+}
+
+.transfer-fail-divider::before,
+.transfer-fail-divider::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: rgba(0, 98, 255, 0.22);
+}
+
+.transfer-fail-divider span {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--primary-blue);
+    flex-shrink: 0;
+}
+
+.transfer-fail-illustration {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0;
+    min-height: 40px;
+}
+
+.transfer-fail-illustration svg {
+    width: 88px;
+    height: auto;
+}
+
+.transfer-fail-card .transfer-success-actions {
+    padding: 8px 12px 12px;
+    gap: 8px;
+}
+
+.transfer-fail-card .transfer-success-actions button {
+    padding: 10px 8px;
+    font-size: 14px;
+}