feat(ui): Minimalist top navigation bar with Drawer slider, Pause & Speed controls

game/css/style.css

@@ -28,19 +28,19 @@ body {
   max-width: 98vw;
 }
 
-/* Clean Flexbox Top Navigation Bar (Adaptive & Responsive) */
+/* Minimalist Clean Top Navigation Bar */
 .top-nav-bar {
   width: 100%;
   background: linear-gradient(to bottom, #3e2723, #2a160c);
   border: 3px solid #5d4037;
   border-bottom: 2px solid #231209;
   border-radius: 10px 10px 0 0;
-  padding: 4px 8px;
+  padding: 4px 10px;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.5);
   z-index: 10;
   box-sizing: border-box;
@@ -50,23 +50,27 @@ body {
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 4px;
+  gap: 6px;
 }
 
-.desktop-nav-links {
-  display: flex;
-  align-items: center;
-  gap: 4px;
+.btn-menu-main {
+  background: linear-gradient(135deg, #e65100, #bf360c) !important;
+  color: #fff !important;
+  border-color: #ffb74d !important;
+  font-size: 12px !important;
+  padding: 5px 12px !important;
+  box-shadow: 0 2px 6px rgba(230, 81, 0, 0.4) !important;
 }
 
-.btn-drawer-toggle {
-  display: none;
-  background: #ff8f00;
-  color: #fff;
-  border-color: #ffd54f;
+.btn-menu-main:hover {
+  background: linear-gradient(135deg, #f57c00, #d84315) !important;
+  border-color: #ffe082 !important;
+  transform: translateY(-1px);
 }
-.btn-drawer-toggle:hover {
-  background: #ffa000;
+
+.btn-icon-nav {
+  padding: 4px 10px;
+  font-size: 11px;
 }
 
 .nav-btn {
@@ -93,16 +97,6 @@ body {
   transform: translateY(1px);
 }
 
-.btn-bug-nav {
-  border-color: #4fc3f7;
-  color: #e1f5fe;
-}
-
-.btn-bug-nav:hover {
-  background: #0277bd;
-  border-color: #81d4fa;
-}
-
 /* User Profile Badge */
 .profile-badge {
   display: flex;

game/index.html

@@ -16,44 +16,48 @@
 </head>
 <body>
   <div id="game-wrapper">
-    <!-- Clean Responsive Top Navigation Bar -->
+    <!-- Minimalist Clean Top Navigation Bar -->
     <header class="top-nav-bar">
       <div class="nav-left">
-        <button id="btn-menu" class="nav-btn" title="Выйти в главное меню">🏠 Меню</button>
-        <div id="user-profile-badge" class="profile-badge">
+        <button id="btn-main-menu-drawer" class="nav-btn btn-menu-main" title="Открыть меню разделов">☰ Меню</button>
+        <div id="user-profile-badge" class="profile-badge cursor-pointer" title="Управление профилем">
           <span id="badge-user-name">👤 Гость</span>
-          <button id="btn-auth-open" class="btn-mini" title="Управление профилем">Войти</button>
-          <button id="btn-auth-logout-nav" class="btn-mini btn-logout-mini hidden" title="Выйти из профиля в гостевой режим">Выйти</button>
-        </div>
-        <div class="desktop-nav-links">
-          <button id="btn-campaign-open" class="nav-btn" title="Карта Кампании: 25 уровней и 5 биомов">🗺️ Кампания</button>
-          <button id="btn-workshop" class="nav-btn" title="Сад-Мастерская: прокачка растений и перки">🧪 Мастерская</button>
-          <button id="btn-zengarden" class="nav-btn" title="Дзен-Сад: пассивный доход и улитка Стинки">🪴 Дзен-Сад</button>
-          <button id="btn-almanac" class="nav-btn" title="Пригородный Альманах растений и зомби">📖 Альманах</button>
-          <button id="btn-achievements" class="nav-btn" title="Зал Достижений и Трофеев">🏆 Достижения</button>
-          <button id="btn-tree" class="nav-btn" title="Древо Мудрости и Секретные Чит-коды">🌳 Древо</button>
-          <button id="btn-leaderboard" class="nav-btn" title="Доска Почёта и Рекорды">🏅 Рекорды</button>
-          <button id="btn-bugreport" class="nav-btn btn-bug-nav" title="Чат баг-репортов и предложений">🐛 Баги</button>
+          <button id="btn-auth-open" class="btn-mini" title="Профиль / Авторизация">Войти</button>
+          <button id="btn-auth-logout-nav" class="btn-mini btn-logout-mini hidden" title="Выйти из аккаунта">Выйти</button>
         </div>
       </div>
       <div class="nav-right">
-        <button id="btn-theme" class="nav-btn" title="Смена темы оформления (Классика, Киберпанк, Ретро, Зима)">🎨 Классика</button>
-        <button id="btn-speed" class="nav-btn" title="Ускорить игру">⚡ 1x</button>
-        <button id="btn-pause" class="nav-btn btn-pause" title="Пауза / Продолжить (Пробел)">⏸️ Пауза</button>
-        <button id="btn-music" class="nav-btn" title="Включить/выключить музыку">🎵 Музыка</button>
-        <button id="btn-mute" class="nav-btn" title="Включить/выключить звук">🔊 Звук</button>
-        <button id="btn-mobile-drawer" class="nav-btn btn-drawer-toggle" title="Открыть меню разделов">☰ Разделы</button>
+        <button id="btn-speed" class="nav-btn btn-icon-nav" title="Скорость игры (1x / 2x)">⚡ 1x</button>
+        <button id="btn-pause" class="nav-btn btn-pause btn-icon-nav" title="Пауза / Продолжить (Пробел)">⏸️ Пауза</button>
+        <button id="btn-mute" class="nav-btn btn-icon-nav" title="Включить / выключить звук">🔊 Звук</button>
+      </div>
+
+      <!-- Hidden trigger targets for backwards compatibility & tests -->
+      <div style="display: none;">
+        <button id="btn-menu"></button>
+        <button id="btn-campaign-open"></button>
+        <button id="btn-workshop"></button>
+        <button id="btn-zengarden"></button>
+        <button id="btn-almanac"></button>
+        <button id="btn-achievements"></button>
+        <button id="btn-tree"></button>
+        <button id="btn-leaderboard"></button>
+        <button id="btn-bugreport"></button>
+        <button id="btn-theme"></button>
+        <button id="btn-music"></button>
+        <button id="btn-mobile-drawer"></button>
       </div>
     </header>
 
-    <!-- Mobile Slide-out Drawer Menu -->
+    <!-- Slide-out Drawer Menu with All Game Activities -->
     <div id="drawer-backdrop" class="drawer-backdrop hidden"></div>
     <aside id="mobile-drawer" class="mobile-drawer hidden">
       <div class="drawer-header">
-        <h2>🌻 Разделы игры</h2>
+        <h2>🌻 Меню игры</h2>
         <button id="btn-drawer-close" class="btn-drawer-close" title="Закрыть меню">✕</button>
       </div>
       <div class="drawer-body">
+        <button id="btn-drawer-main-screen" class="drawer-item">🏠 Главный экран (Режимы)</button>
         <button id="btn-drawer-campaign" class="drawer-item">🗺️ Карта Кампании (25 уровней)</button>
         <button id="btn-drawer-workshop" class="drawer-item">🧪 Сад-Мастерская (Крафт и перки)</button>
         <button id="btn-drawer-zengarden" class="drawer-item">🪴 Дзен-Сад (Пассивный доход)</button>
@@ -61,6 +65,8 @@
         <button id="btn-drawer-achievements" class="drawer-item">🏆 Зал Достижений и Трофеев</button>
         <button id="btn-drawer-tree" class="drawer-item">🌳 Древо Мудрости и Чит-коды</button>
         <button id="btn-drawer-leaderboard" class="drawer-item">🏅 Доска Рекордов</button>
+        <button id="btn-drawer-theme" class="drawer-item">🎨 Тема оформления: <span id="drawer-theme-label" style="color: #81d4fa; margin-left: auto;">Классика</span></button>
+        <button id="btn-drawer-music" class="drawer-item">🎵 Фоновая музыка: <span id="drawer-music-label" style="color: #a5d6a7; margin-left: auto;">Вкл</span></button>
         <button id="btn-drawer-bugreport" class="drawer-item btn-drawer-bug">🐛 Баг-репорты и Чат</button>
       </div>
     </aside>

game/js/game.js

@@ -726,9 +726,10 @@ window.GameEngine = class GameEngine {
   }
 
   bindUI() {
-    // Mobile Drawer Handlers
+    // Mobile / Main Drawer Handlers
     const mobileDrawer = document.getElementById('mobile-drawer');
     const drawerBackdrop = document.getElementById('drawer-backdrop');
+    const btnMainMenuDrawer = document.getElementById('btn-main-menu-drawer');
     const btnDrawerOpen = document.getElementById('btn-mobile-drawer');
     const btnDrawerClose = document.getElementById('btn-drawer-close');
 
@@ -743,11 +744,45 @@ window.GameEngine = class GameEngine {
       if (drawerBackdrop) drawerBackdrop.classList.add('hidden');
     };
 
+    if (btnMainMenuDrawer) btnMainMenuDrawer.addEventListener('click', openDrawer);
     if (btnDrawerOpen) btnDrawerOpen.addEventListener('click', openDrawer);
     if (btnDrawerClose) btnDrawerClose.addEventListener('click', closeDrawer);
     if (drawerBackdrop) drawerBackdrop.addEventListener('click', closeDrawer);
 
-    // Mobile Drawer Items delegation to corresponding modal open triggers
+    // Main Screen action from Drawer
+    const btnDrawerMain = document.getElementById('btn-drawer-main-screen');
+    if (btnDrawerMain) {
+      btnDrawerMain.addEventListener('click', () => {
+        closeDrawer();
+        this.openMainMenu();
+      });
+    }
+
+    // Theme & Music actions from Drawer
+    const btnDrawerTheme = document.getElementById('btn-drawer-theme');
+    const drawerThemeLabel = document.getElementById('drawer-theme-label');
+    if (btnDrawerTheme) {
+      btnDrawerTheme.addEventListener('click', () => {
+        const themeNames = { classic: 'Классика', cyberpunk: 'Киберпанк', retro8bit: 'Ретро 8-bit', winter: 'Зима' };
+        const keys = Object.keys(themeNames);
+        const nextIndex = (keys.indexOf(this.currentTheme) + 1) % keys.length;
+        this.applyTheme(keys[nextIndex]);
+        if (drawerThemeLabel) drawerThemeLabel.textContent = themeNames[this.currentTheme];
+        this.triggerHaptic(15);
+      });
+    }
+
+    const btnDrawerMusic = document.getElementById('btn-drawer-music');
+    const drawerMusicLabel = document.getElementById('drawer-music-label');
+    if (btnDrawerMusic) {
+      btnDrawerMusic.addEventListener('click', () => {
+        const isPlaying = window.PvZAudio ? window.PvZAudio.toggleMusic() : false;
+        if (drawerMusicLabel) drawerMusicLabel.textContent = isPlaying ? 'Вкл' : 'Выкл';
+        this.triggerHaptic(15);
+      });
+    }
+
+    // Drawer Items delegation to corresponding modal open triggers
     const drawerActions = [
       { id: 'btn-drawer-campaign', target: 'btn-campaign-open' },
       { id: 'btn-drawer-workshop', target: 'btn-workshop' },