From 308df174fb49d2d54e4a1f9eb5de1579d392a3f6 Mon Sep 17 00:00:00 2001
From: Dev <dev@local>
Date: Tue, 20 Jan 2026 22:54:32 +0500
Subject: [PATCH] Phase 1-6 Complete

---
 .ai/BENTO_REFACTOR.md                        | 29 ++++++++++++++++----
 src/components/ConnectionModal.tsx           |  6 ++--
 src/components/InsufficientBalancePrompt.tsx |  4 +--
 src/components/TopUpModal.tsx                |  4 +--
 src/pages/Contests.tsx                       |  4 +--
 src/pages/Wheel.tsx                          |  2 +-
 6 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/.ai/BENTO_REFACTOR.md b/.ai/BENTO_REFACTOR.md
index e9cf2f2..37dc66a 100644
--- a/.ai/BENTO_REFACTOR.md
+++ b/.ai/BENTO_REFACTOR.md
@@ -169,11 +169,15 @@ interface BentoCardProps {
 ### Этап 6: Модалки
 > Обновить модальные окна в bento-стиле
 
-| # | Компонент | Заметки |
-|---|-----------|---------|
-| 6.1 | ConnectionModal | QR-код, кнопки подключения |
-| 6.2 | TopUpModal | Форма пополнения |
-| 6.3 | InsufficientBalancePrompt | Промпт о недостатке средств |
+| # | Компонент | Статус | Заметки |
+|---|-----------|--------|---------|
+| 6.1 | ConnectionModal | `[x]` | ✅ z-[60], rounded-3xl, backdrop-blur-xl (desktop + mobile) |
+| 6.2 | TopUpModal | `[x]` | ✅ z-[60], rounded-3xl, backdrop-blur-xl |
+| 6.3 | InsufficientBalancePrompt | `[x]` | ✅ z-[60], rounded-3xl, backdrop-blur-xl (PaymentMethodModal тоже) |
+| 6.4 | Wheel Result Modal | `[x]` | ✅ z-[60] |
+| 6.5 | Contests Modal | `[x]` | ✅ z-[60], bento-card, backdrop-blur-sm |
+
+**Выборка модалок (select/close overlap):** Не найдено — все селекты в Subscription.tsx используют кнопки вместо `<select>` элемента.
 
 ### Этап 7: Header
 > Обновить шапку (опционально)
@@ -224,3 +228,18 @@ interface BentoCardProps {
 - ✅ **Support.tsx**: 3 карточки → `bento-card`, tickets list items → `rounded-bento`
 - ✅ **Profile.tsx**: 3 карточки → `bento-card`
 - ✅ **Info.tsx**: FAQ items, rules, privacy, offer → `bento-card`
+
+### 2026-01-20 — Phase 6 Complete (Модальные окна)
+- ✅ **ConnectionModal.tsx**: z-[60], rounded-3xl, backdrop-blur-xl (desktop + mobile wrapper)
+- ✅ **TopUpModal.tsx**: z-[60], rounded-3xl, backdrop-blur-xl
+- ✅ **InsufficientBalancePrompt.tsx**: z-[60], rounded-3xl, backdrop-blur-xl (PaymentMethodModal тоже)
+- ✅ **Wheel.tsx**: Result modal z-[60]
+- ✅ **Contests.tsx**: Game modal z-[60], bento-card, backdrop-blur-sm
+
+**Z-Index Hierarchy (фиксировано):**
+- z-[9999]: ConnectionModal mobile view
+- z-[9998]: ConnectionModal mobile backdrop
+- z-[100]: Toast, MaintenanceScreen, ChannelSubscriptionScreen
+- z-[60]: Все модальные окна (TopUpModal, InsufficientBalancePrompt, ConnectionModal desktop, Wheel, Contests)
+- z-50: Header, dropdowns
+- z-40: TabBar (bottom nav)
diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index c1563c8..68cd8de 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -215,11 +215,11 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
   // Desktop modal wrapper - compact centered modal with max height
   const DesktopWrapper = ({ children }: { children: React.ReactNode }) => (
     <div
-      className="fixed inset-0 backdrop-blur-sm z-[60] flex items-center justify-center p-4 animate-fade-in"
+      className="fixed inset-0 bg-black/70 backdrop-blur-sm z-[60] flex items-center justify-center p-4 animate-fade-in"
       onClick={onClose}
     >
       <div
-        className="relative w-full max-w-md max-h-[85vh] bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl flex flex-col overflow-hidden animate-scale-in"
+        className="relative w-full max-w-md max-h-[85vh] bg-dark-900/95 backdrop-blur-xl rounded-3xl border border-dark-700/50 shadow-2xl flex flex-col overflow-hidden animate-scale-in"
         onClick={e => e.stopPropagation()}
       >
         {/* Desktop close button */}
@@ -243,7 +243,7 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
         <div className="fixed inset-0 z-[9998] bg-black/50 animate-fade-in" onClick={onClose} />
         {/* Modal - fullscreen overlay */}
         <div
-          className="fixed inset-0 z-[9999] bg-dark-900 flex flex-col animate-slide-up"
+          className="fixed inset-0 z-[9999] bg-dark-900/95 backdrop-blur-xl flex flex-col animate-slide-up"
           style={{
             paddingTop: safeTop ? `${safeTop}px` : 'env(safe-area-inset-top, 0px)',
             paddingBottom: safeBottom ? `${safeBottom}px` : 'env(safe-area-inset-bottom, 0px)'
diff --git a/src/components/InsufficientBalancePrompt.tsx b/src/components/InsufficientBalancePrompt.tsx
index f921a43..9ed2ed5 100644
--- a/src/components/InsufficientBalancePrompt.tsx
+++ b/src/components/InsufficientBalancePrompt.tsx
@@ -145,10 +145,10 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
   const { formatAmount, currencySymbol } = useCurrency()
 
   return (
-    <div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center px-4 pt-14 pb-28 sm:pt-0 sm:pb-0">
+    <div className="fixed inset-0 bg-black/70 backdrop-blur-sm z-[60] flex items-center justify-center px-4 pt-14 pb-28 sm:pt-0 sm:pb-0">
       <div className="absolute inset-0" onClick={onClose} />
 
-      <div className="relative w-full max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl overflow-hidden max-h-full flex flex-col">
+      <div className="relative w-full max-w-sm bg-dark-900/95 backdrop-blur-xl rounded-3xl border border-dark-700/50 shadow-2xl overflow-hidden max-h-full flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-3 bg-dark-800/50">
           <span className="font-semibold text-dark-100">{t('balance.selectPaymentMethod')}</span>
diff --git a/src/components/TopUpModal.tsx b/src/components/TopUpModal.tsx
index 14f42d4..d982d71 100644
--- a/src/components/TopUpModal.tsx
+++ b/src/components/TopUpModal.tsx
@@ -172,7 +172,7 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
 
   const modalContent = (
     <div
-      className="fixed inset-0 bg-black/70 z-[60] flex items-start justify-center p-4 pt-4 overflow-hidden"
+      className="fixed inset-0 bg-black/70 backdrop-blur-sm z-[60] flex items-center justify-center p-4 overflow-hidden"
       style={{
         paddingBottom: `max(1rem, env(safe-area-inset-bottom, 0px))`,
       }}
@@ -180,7 +180,7 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
     >
       <div
         data-modal-content
-        className="w-full max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl overflow-hidden animate-scale-in"
+        className="w-full max-w-sm bg-dark-900/95 backdrop-blur-xl rounded-3xl border border-dark-700/50 shadow-2xl overflow-hidden animate-scale-in"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
diff --git a/src/pages/Contests.tsx b/src/pages/Contests.tsx
index c0b8790..34fc3ac 100644
--- a/src/pages/Contests.tsx
+++ b/src/pages/Contests.tsx
@@ -86,8 +86,8 @@ export default function Contests() {
 
       {/* Game Modal */}
       {selectedContest && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60">
-          <div className="card max-w-lg w-full max-h-[80vh] overflow-y-auto">
+        <div className="fixed inset-0 z-[60] bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+          <div className="bento-card max-w-lg w-full max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
             <div className="flex justify-between items-center mb-4">
               <h2 className="text-xl font-bold">{selectedContest.name}</h2>
               <button onClick={handleCloseGame} className="text-dark-400 hover:text-dark-200">
diff --git a/src/pages/Wheel.tsx b/src/pages/Wheel.tsx
index 9bb871d..bcc66c6 100644
--- a/src/pages/Wheel.tsx
+++ b/src/pages/Wheel.tsx
@@ -692,7 +692,7 @@ export default function Wheel() {
 
       {/* Result Modal */}
       {showResultModal && spinResult && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-fade-in">
+        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-fade-in">
           <div
             className={`relative w-full max-w-md rounded-3xl p-8 text-center overflow-hidden ${
               spinResult.success