/* ========================================= NUCLEAR MOBILE FIX - ADD THIS AT THE END ========================================= */ @media (max-width: 768px) { /* KILL ALL OVERFLOW - NUCLEAR OPTION */ body, html { position: relative !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; } /* Remove ALL negative margins */ * { margin-left: 0 !important; margin-right: 0 !important; } /* Kill absolute/fixed positioning that causes overflow */ .sidebar, .left-panel, .purple, [class*="purple"], .main-content, .white, [class*="white"], header, footer, nav, aside, main, section { position: relative !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; } /* Fix the purple background area specifically */ div[style*="background"], [style*="background-color"], .purple-bg, .bg-purple, [class*="violet"] { max-width: 100% !important; width: 100% !important; position: relative !important; } /* Force ALL containers to stack */ .container, .wrapper, .row, .col, div[class*="container"], div[class*="row"], .flex, [style*="display: flex"] { display: block !important; width: 100% !important; flex-direction: column !important; } /* Fix the download button area specifically */ .downloads, .download-btn, [class*="download"], button, a.button, .btn { width: 100% !important; max-width: 100% !important; display: block !important; margin: 10px auto !important; left: 0 !important; right: 0 !important; } /* Hide or fix anything still overflowing */ * { max-width: 100vw !important; } /* Emergency: Clip anything still breaking */ body > * { clip-path: inset(0 0 0 0) !important; } } /* ========================================= PRODUCT CARDS MOBILE FIX ========================================= */ @media (max-width: 768px) { /* Fix product card containers/grids */ .products-grid, .cards-grid, .items-grid, .product-list, .card-container, [class*="product"], [class*="card"], .grid, .row.products { display: grid !important; grid-template-columns: 1fr !important; /* 1 column on mobile */ gap: 15px !important; width: 100% !important; max-width: 100% !important; padding: 10px !important; box-sizing: border-box !important; } /* Individual product cards */ .product-card, .card, .item, .product, .product-box, .item-box, div[class*="product"]:not(.products-grid), div[class*="card"]:not(.cards-grid) { width: 100% !important; max-width: 100% !important; display: block !important; margin: 10px 0 !important; padding: 15px !important; box-sizing: border-box !important; float: none !important; clear: both !important; } /* Fix product images */ .product-card img, .card img, .product img, .product-image, .item-image { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; } /* Fix product titles and text */ .product-title, .product-name, .card-title, .product-description, .card-description, .product-text { width: 100% !important; max-width: 100% !important; word-wrap: break-word !important; overflow-wrap: break-word !important; font-size: 16px !important; line-height: 1.4 !important; } /* Fix product prices */ .price, .product-price, .card-price { font-size: 18px !important; font-weight: bold !important; margin: 10px 0 !important; } /* Fix product buttons */ .product-card button, .card button, .product-card a, .card a, .buy-btn, .add-to-cart, .product-btn { width: 100% !important; max-width: 100% !important; display: block !important; margin: 10px 0 !important; padding: 12px !important; text-align: center !important; font-size: 16px !important; } /* If you have 2-column grids on desktop, keep them on tablets */ @media (min-width: 481px) and (max-width: 768px) { .products-grid, .cards-grid { grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on tablet */ } } /* Small phones: force 1 column */ @media (max-width: 480px) { .products-grid, .cards-grid { grid-template-columns: 1fr !important; /* 1 column on phone */ } .product-card, .card { padding: 12px !important; } } } /* ========================================= UNIFORM AUTH BUTTON SIZING (MOBILE) ========================================= */ @media (max-width: 768px) { /* Target ALL possible login/social button classes and links */ .auth-buttons a, .auth-buttons button, .yandex-btn, .vk-btn, .login-btn, .register-btn, .join-btn, a[href*="yandex.ru"], a[href*="vk.com"], button[class*="yandex"], button[class*="vk"], .btn-login, .btn-register, .btn-join, .btn-download, form button[type="submit"] { width: 100% !important; max-width: 100% !important; min-height: 52px !important; /* Forces uniform height */ height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 12px 15px !important; margin: 8px 0 !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 8px !important; box-sizing: border-box !important; white-space: normal !important; word-wrap: break-word !important; border: none !important; cursor: pointer !important; } /* Specific brand colors to keep them recognizable */ .yandex-btn, a[href*="yandex.ru"], button[class*="yandex"] { background-color: #fc3f1d !important; color: #ffffff !important; } .vk-btn, a[href*="vk.com"], button[class*="vk"] { background-color: #0077ff !important; color: #ffffff !important; } .login-btn, .register-btn, .join-btn, button[type="submit"] { background-color: #333333 !important; /* Or your site's primary color */ color: #ffffff !important; } /* ========================================= MOBILE AUTH BUTTONS - CLEAN FIX ========================================= */ /* Only apply on mobile */ @media screen and (max-width: 768px) { /* Find and fix the auth container */ .auth-container, .login-area, .auth-buttons, div[id*="auth"], div[class*="auth"], div[class*="login"] { display: flex; flex-direction: column; gap: 15px; width: 100%; padding: 20px 15px; } /* All buttons inside auth area */ .auth-container a, .auth-container button, .auth-container .yandex-btn, .auth-container .vk-btn, .auth-container .login-btn, .auth-container .register-btn { width: 100%; min-height: 50px; padding: 15px 20px; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; } /* Specific button colors */ .yandex-btn { background-color: #fc3f1d; color: white; } .vk-btn { background-color: #0077ff; color: white; } .login-btn, .register-btn { background-color: #4a5568; color: white; } } /* ========================================= FINAL FIX FOR ARROW ISSUES (MOBILE) ========================================= */ @media screen and (max-width: 768px) { /* 1. FIX TOP BUTTONS (Sign In, Join, Register) */ /* Force the container holding these buttons to stack them */ .auth-buttons, .header-auth, .login-container, div[class*="auth"], div[class*="login"], .top-buttons { display: flex !important; flex-direction: column !important; /* Stack vertically */ width: 100% !important; gap: 10px !important; /* Add space between buttons */ padding: 10px !important; box-sizing: border-box !important; } /* Force the buttons inside to be full width */ .auth-buttons a, .auth-buttons button, .login-btn, .register-btn, .join-btn, a[href*="login"], a[href*="register"] { width: 100% !important; max-width: 100% !important; display: block !important; text-align: center !important; margin: 5px 0 !important; padding: 12px !important; box-sizing: border-box !important; } /* 2. FIX BOTTOM BUTTONS (Yandex & VK Width Sync) */ /* Target Yandex and VK buttons specifically to make them match */ a[href*="yandex.ru"], .yandex-btn, .btn-yandex, a[href*="vk.com"], .vk-btn, .btn-vk { width: 100% !important; max-width: 100% !important; display: flex !important; /* Use flex to center text/icon perfectly */ justify-content: center !important; align-items: center !important; box-sizing: border-box !important; margin: 10px 0 !important; padding: 15px 20px !important; /* Uniform padding */ min-height: 50px !important; /* Ensure same height */ text-align: center !important; border-radius: 8px !important; } /* Specific fix for the Black Yandex Button if it has inline styles */ a[href*="yandex.ru"] { background-color: #000000 !important; color: #ffffff !important; width: 100% !important; /* Override any inline width */ } /* Specific fix for the Blue VK Button */ a[href*="vk.com"] { background-color: #0077ff !important; color: #ffffff !important; width: 100% !important; /* Override any inline width */ } } /* ========================================= FLOATING PANEL FIX (MOBILE TOP LAYER) ========================================= */ @media screen and (max-width: 768px) { /* 1. Target the floating container */ /* Add your specific class name here if these don't work */ .social-sidebar, .floating-menu, .sticky-right, .side-panel, .right-panel, .float-right, div[class*="social"], div[class*="float"] { position: fixed !important; /* Stick to screen */ right: 5px !important; /* Keep it near the right edge */ top: 50% !important; /* Center vertically */ transform: translateY(-50%) !important; /* Perfect centering */ z-index: 999999 !important; /* HIGHEST LAYER - Over everything */ display: flex !important; /* Force visibility */ flex-direction: column !important;/* Stack icons vertically */ gap: 8px !important; /* Space between icons */ background: transparent !important; pointer-events: auto !important; /* Ensure it's clickable */ } /* 2. Fix the icons inside the panel */ .social-sidebar a, .floating-menu a, .side-panel a, .social-sidebar button, .floating-menu button { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; /* Touch-friendly size */ height: 40px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Keep them round */ overflow: hidden !important; } /* 3. Ensure images/icons inside fit perfectly */ .social-sidebar img, .floating-menu img, .side-panel img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; /* Override previous mobile fixes */ } } /* ========================================= FIX FOR .social-icons-bar (MOBILE FLOATING) ========================================= */ @media screen and (max-width: 768px) { /* 1. Force the container to float on the right, on top of everything */ .social-icons-bar { position: fixed !important; right: 10px !important; /* Distance from right edge */ top: 50% !important; /* Center vertically */ transform: translateY(-50%) !important; /* Perfect vertical centering */ z-index: 999999 !important; /* HIGHEST LAYER - above all menus/content */ display: flex !important; flex-direction: column !important; gap: 12px !important; /* Space between icons */ /* CRITICAL: Override the previous "100% width" mobile rules */ width: auto !important; max-width: none !important; min-width: 0 !important; background: transparent !important; pointer-events: auto !important; /* Ensure it remains clickable */ } /* 2. Fix the individual icon buttons inside the bar */ .social-icons-bar .social-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 45px !important; /* Touch-friendly size */ height: 45px !important; min-width: 45px !important; /* Prevent squishing */ min-height: 45px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Keep them perfectly round */ text-decoration: none !important; box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important; /* Pop out from background */ /* Override any previous text/icon sizing rules */ font-size: 20px !important; line-height: 1 !important; } /* 3. Ensure FontAwesome icons (or text like 'T') are centered and visible */ .social-icons-bar .social-icon i, .social-icons-bar .social-icon { color: #ffffff !important; /* Force white icons/text */ } /* 4. Optional: Ensure specific brand colors pop if your original CSS is overridden */ .social-icons-bar .social-icon.youtube { background-color: #ff0000 !important; } .social-icons-bar .social-icon.vk { background-color: #0077ff !important; } .social-icons-bar .social-icon.telegram { background-color: #0088cc !important; } .social-icons-bar .social-icon.twitch { background-color: #9146ff !important; } .social-icons-bar .social-icon.steam { background-color: #171a21 !important; } .social-icons-bar .social-icon.tinkoff-pulse { background-color: #ffdd2d !important; color: #333333 !important; font-weight: bold !important; } } /* ========================================= YANDEX ID BUTTON - ROUNDED & WIDER (MOBILE) ========================================= */ @media screen and (max-width: 768px) { /* Target Yandex button specifically */ a[href*="yandex.ru"], .yandex-btn, .btn-yandex, button[class*="yandex"] { /* ROUNDED CORNERS */ border-radius: 45px !important; /* More rounded (pill shape) */ /* WIDER ON MOBILE */ width: 95% !important; /* Slightly wider than 100% with padding */ max-width: 400px !important; /* Max width for larger phones */ margin: 10px auto !important; /* Center it with auto margins */ display: block !important; /* Ensure margin auto works */ /* BETTER PADDING FOR WIDTH */ padding: 15px 25px !important; /* More horizontal padding */ /* SMOOTH APPEARANCE */ box-sizing: border-box !important; text-align: center !important; } /* Optional: Add subtle hover effect */ a[href*="yandex.ru"]:active, .yandex-btn:active { transform: scale(0.98) !important; opacity: 0.95 !important; } } /* Also apply rounded corners on desktop if desired */ a[href*="yandex.ru"], .yandex-btn { border-radius: 25px !important; transition: all 0.3s ease !important; } /* NUCLEAR CSS OVERRIDE FOR YANDEX BUTTON */ @media screen and (max-width: 768px) { /* Target ANY link or button that contains the word yandex in its href or class */ a[href*="yandex"], div[class*="yandex"], button[class*="yandex"], .ya-auth-button, .ya-button { border-radius: 30px !important; width: 95% !important; max-width: 400px !important; margin: 10px auto !important; display: block !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } }