/* mobile-nav-v2 - brand new bottom bar + drawer for the hv2-/v1- themed page family. Built as an independent component: reuses auth.js's existing IDs/classes for data binding (drawer open/close, user card, coins, level, notif badge) so that wiring keeps working untouched, but every visual rule here is new and scoped under .mnv2-bar / .mnv2-drawer so it wins over the old global mobile-nav.css by specificity instead of editing it. */ .mobile-nav.mnv2-bar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; margin: 0; border-radius: 0; display: flex; align-items: stretch; justify-content: center; padding: 0 0 env(safe-area-inset-bottom); background: #0b0b0c; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; border-top-width: medium; border-top-style: none; border-top-color: currentcolor; border-top: 1px solid var(--v1-line, rgba(255, 255, 255, 0.08)); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25); z-index: 950; } /* senku-overlay-guard.js sets this on whenever any modal/drawer/sheet is open (scroll-lock or a known overlay selector) - the bottom bar was still rendering on top of those overlays, so hide it for the duration. */ html[data-senku-overlay] .mobile-nav.mnv2-bar { display: none !important; } html[data-theme="light"] .mobile-nav.mnv2-bar { background: #ffffff; border-top-color: #eef0f2; box-shadow: 0 -4px 20px rgba(20, 20, 30, 0.08); } .mobile-nav.mnv2-bar .mnv2-list { width: 100%; margin: 0 auto; display: flex; align-items: stretch; justify-content: space-around; padding: 8px 6px; } .mobile-nav.mnv2-bar .mnv2-item { flex: 1; display: flex; justify-content: center; } .mobile-nav.mnv2-bar .mnv2-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; max-width: 68px; padding: 2px 2px 0; border-radius: 14px; background: transparent; border: none; cursor: pointer; text-decoration: none; font-family: "Unbounded", sans-serif; font-size: 9px; font-weight: 700; color: var(--v1-muted, rgba(255, 255, 255, 0.42)); transition: transform 0.2s ease; } .mobile-nav.mnv2-bar .mnv2-link:active { transform: scale(0.94); } .mobile-nav.mnv2-bar .mnv2-icon-wrap { display: flex; align-items: center; justify-content: center; width: 38px; height: 34px; flex: 0 0 34px; border-radius: 12px; background: transparent; transition: background 0.25s ease; } .mobile-nav.mnv2-bar .mnv2-link svg { width: 20px; height: 20px; stroke-width: 2; color: inherit; transition: color 0.2s ease; } .mobile-nav.mnv2-bar .mnv2-label { color: var(--v1-muted, rgba(255, 255, 255, 0.42)); transition: color 0.2s ease; } .mobile-nav.mnv2-bar .mnv2-link.is-active .mnv2-icon-wrap { background: #f2543d; } .mobile-nav.mnv2-bar .mnv2-link.is-active svg { color: #ffffff; } .mobile-nav.mnv2-bar .mnv2-link.is-active .mnv2-label { color: #f2543d; font-weight: 800; } .mnv2-badge { position: absolute; top: -2px; right: calc(50% - 22px); min-width: 15px; height: 15px; background: #ff3b30; color: #fff; border-radius: 50%; font-size: 8px; font-weight: 900; align-items: center; justify-content: center; border: 2px solid var(--v1-card, #17171a); padding: 0 3px; z-index: 5; } html[data-theme="light"] .mnv2-badge { border-color: #ffffff; } /* ---- Drawer ("Ещё") ---- */ .mnv2-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 11000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } .mnv2-drawer-overlay.open { opacity: 1; visibility: visible; } #mobileDrawer.mnv2-drawer { position: fixed; top: 0; right: 0; width: 340px; max-width: 88%; height: 100%; background: var(--v1-page, #0b0b0c); z-index: 11001; transform: translateX(100%); /* visibility, not just the transform: parked off-screen the drawer still held 340px of live content to the right of the viewport. That only stays out of the page because the