diff --git a/src/views/single/index.ejs b/src/views/single/index.ejs
index ec05334..9253989 100644
--- a/src/views/single/index.ejs
+++ b/src/views/single/index.ejs
@@ -1,138 +1,148 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <%- include("../../partials/head.ejs") %>
-  <title>Tridecco | Single Player</title>
-  <style>
-    .custom-scrollbar::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    .custom-scrollbar::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    .custom-scrollbar::-webkit-scrollbar-thumb {
-      background-color: rgba(180, 83, 9, 0.4);
-      border-radius: 10px;
-    }
-
-    .custom-scrollbar {
-      scrollbar-width: thin;
-      scrollbar-color: rgba(180, 83, 9, 0.4) transparent;
-    }
-  </style>
-</head>
-
-<body class="h-screen overflow-hidden bg-no-repeat bg-center bg-cover" style="background-image: url('<%= env.CDN_URL %>/img/backgrounds/wooden-board.jpg');">
-  <!-- Main Layout Container -->
-  <div class="fixed inset-0 flex flex-col h-screen text-gray-800 z-20">
-    <div class="flex flex-1 w-full h-full p-3 md:p-4 gap-3 md:gap-4 overflow-hidden max-w-7xl mx-auto z-10">
-      <!-- Left Sidebar: Navigation -->
-      <%- include("../../partials/single/navigation-bar.ejs", { page: "menu" }) %>
-
-      <!-- Main Content Area -->
-      <main class="flex-1 flex flex-col overflow-hidden">
-        <!-- Top Bar -->
-        <header class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-amber-700/30 p-3 md:p-4 flex items-center justify-between mb-3 md:mb-4 flex-shrink-0">
-          <div class="flex items-center space-x-3 md:space-x-4 flex-grow min-w-0">
-            <img src="<%= env.CDN_URL %>/img/default-avatar.svg" alt="Avatar" class="w-10 h-10 md:w-12 md:h-12 rounded-full border-2 border-amber-400 shadow-md opacity-80">
-            <div>
-              <h3 class="text-sm md:text-base font-semibold text-amber-900 truncate flex items-center flex-wrap gap-x-1.5 gap-y-0.5 mb-0.5 select-none">
-                <span class="text-amber-800 font-bold">Single Player</span>
-              </h3>
-              <div class="flex items-center space-x-2 text-xs md:text-sm text-gray-600">
-                <div class="flex items-center" title="Difficulty">
-                  <svg class="w-4 h-4 md:w-5 md:h-5 text-green-400 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.196-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                  </svg>
-                  <span class="font-medium text-emerald-600">Pick your challenge</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="flex items-center space-x-2 md:space-x-3 flex-shrink-0 pl-2"></div>
-
-          <!-- Action Buttons -->
-          <div class="flex items-center space-x-2 md:space-x-3 flex-shrink-0 pl-2">
-            <!-- Exit Button -->
-            <a href="/" class="p-2 rounded-full bg-amber-100/50 hover:bg-amber-200/70 border border-amber-300/50 text-amber-700 hover:text-amber-800 transition duration-200" title="Exit Lobby">
-              <svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
-              </svg>
-            </a>
-            <!-- Settings Button -->
-            <a href="/single/settings" class="p-2 rounded-full bg-amber-100/50 hover:bg-amber-200/70 border border-amber-300/50 text-amber-700 hover:text-amber-800 transition duration-200" title="Settings">
-              <svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-              </svg>
-            </a>
-          </div>
-        </header>
-
-        <!-- Difficulty Selection Section -->
-        <div class="flex-1 bg-white/70 backdrop-blur-sm rounded-xl shadow-inner border border-amber-700/20 p-4 md:p-6 flex flex-col items-center justify-start overflow-y-auto custom-scrollbar">
-          <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-amber-800 to-amber-900 mb-10 lg:mb-12 text-center select-none tracking-wide drop-shadow-lg flex-shrink-0">
-            Choose Difficulty
-          </h1>
-          <!-- Difficulty Cards Grid -->
-          <div class="w-full max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 gap-6 pb-4">
-            <!-- Beginner Difficulty Card -->
-            <button onclick="app.location.redirect('/single/game?difficulty=beginner');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-green-300 bg-gradient-to-br from-green-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-green-200 focus:outline-none" tabindex="0">
-              <span class="absolute -top-3 right-4 bg-green-400 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Easy Entry</span>
-              <svg class="w-12 h-12 text-green-500 mb-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <circle cx="12" cy="12" r="10" />
-              </svg>
-              <span class="text-lg md:text-xl font-bold text-green-700 mb-1">Beginner</span>
-              <span class="text-xs text-green-800/80">For new players</span>
-            </button>
-            <!-- Easy Difficulty Card -->
-            <button onclick="app.location.redirect('/single/game?difficulty=easy');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-teal-300 bg-gradient-to-br from-teal-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-teal-200 focus:outline-none" tabindex="0">
-              <span class="absolute -top-3 right-4 bg-teal-400 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Chill</span>
-              <svg class="w-12 h-12 text-teal-500 mb-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
-              </svg>
-              <span class="text-lg md:text-xl font-bold text-teal-700 mb-1">Easy</span>
-              <span class="text-xs text-teal-800/80">Relax and learn</span>
-            </button>
-            <!-- Normal Difficulty Card -->
-            <button onclick="app.location.redirect('/single/game?difficulty=normal');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-blue-300 bg-gradient-to-br from-blue-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-blue-200 focus:outline-none" tabindex="0">
-              <span class="absolute -top-3 right-4 bg-blue-400 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Classic</span>
-              <svg class="w-12 h-12 text-blue-500 mb-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z" />
-              </svg>
-              <span class="text-lg md:text-xl font-bold text-blue-700 mb-1">Normal</span>
-              <span class="text-xs text-blue-800/80">Standard challenge</span>
-            </button>
-            <!-- Hard Difficulty Card -->
-            <button onclick="app.location.redirect('/single/game?difficulty=hard');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-amber-300 bg-gradient-to-br from-amber-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-amber-200 focus:outline-none" tabindex="0">
-              <span class="absolute -top-3 right-4 bg-amber-400 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Tough</span>
-              <svg class="w-12 h-12 text-amber-500 mb-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.362-3.797A8.33 8.33 0 0112 2.25c1.153 0 2.243.3 3.218.834A8.224 8.224 0 0115.362 5.214z" />
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1.001A3.75 3.75 0 0012 18z" />
-              </svg>
-              <span class="text-lg md:text-xl font-bold text-amber-800 mb-1">Hard</span>
-              <span class="text-xs text-amber-800/80">For veterans</span>
-            </button>
-            <!-- Insane Difficulty Card -->
-            <button onclick="app.location.redirect('/single/game?difficulty=insane');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-pink-400 bg-gradient-to-br from-pink-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-pink-200 focus:outline-none" tabindex="0">
-              <span class="absolute -top-3 right-4 bg-pink-500 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Extreme</span>
-              <svg class="w-12 h-12 text-pink-600 mb-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
-              </svg>
-              <span class="text-lg md:text-xl font-bold text-pink-700 mb-1">Insane</span>
-              <span class="text-xs text-pink-800/80">Only for masters</span>
-            </button>
-          </div>
-        </div>
-      </main>
-    </div>
-
-    <!-- Mobile Navigation -->
-    <%- include("../../partials/single/navigation-bar-mobile.ejs", { page: "menu" }) %>
-  </div>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <%- include("../../partials/head.ejs") %>
+  <title>Tridecco | Single Player</title>
+  <style>
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background-color: rgba(180, 83, 9, 0.4);
+      border-radius: 10px;
+    }
+
+    .custom-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(180, 83, 9, 0.4) transparent;
+    }
+  </style>
+</head>
+
+<body class="h-screen overflow-hidden bg-no-repeat bg-center bg-cover" style="background-image: url('<%= env.CDN_URL %>/img/backgrounds/wooden-board.jpg');">
+  <!-- Main Layout Container -->
+  <div class="fixed inset-0 flex flex-col h-screen text-gray-800 z-20">
+    <div class="flex flex-1 w-full h-full p-3 md:p-4 gap-3 md:gap-4 overflow-hidden max-w-7xl mx-auto z-10">
+      <!-- Left Sidebar: Navigation -->
+      <%- include("../../partials/single/navigation-bar.ejs", { page: "menu" }) %>
+
+      <!-- Main Content Area -->
+      <main class="flex-1 flex flex-col overflow-hidden">
+        <!-- Top Bar -->
+        <header class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-amber-700/30 p-3 md:p-4 flex items-center justify-between mb-3 md:mb-4 flex-shrink-0">
+          <div class="flex items-center space-x-3 md:space-x-4 flex-grow min-w-0">
+            <img src="<%= env.CDN_URL %>/img/default-avatar.svg" alt="Avatar" class="w-10 h-10 md:w-12 md:h-12 rounded-full border-2 border-amber-400 shadow-md opacity-80">
+            <div>
+              <h3 class="text-sm md:text-base font-semibold text-amber-900 truncate flex items-center flex-wrap gap-x-1.5 gap-y-0.5 mb-0.5 select-none">
+                <span class="text-amber-800 font-bold">Single Player</span>
+              </h3>
+              <div class="flex items-center space-x-2 text-xs md:text-sm text-gray-600">
+                <div class="flex items-center" title="Difficulty">
+                  <svg class="w-4 h-4 md:w-5 md:h-5 text-green-400 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.196-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+                  </svg>
+                  <span class="font-medium text-emerald-600">Pick your challenge</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center space-x-2 md:space-x-3 flex-shrink-0 pl-2"></div>
+
+          <!-- Action Buttons -->
+          <div class="flex items-center space-x-2 md:space-x-3 flex-shrink-0 pl-2">
+            <!-- Exit Button -->
+            <a href="/" class="p-2 rounded-full bg-amber-100/50 hover:bg-amber-200/70 border border-amber-300/50 text-amber-700 hover:text-amber-800 transition duration-200" title="Exit Lobby">
+              <svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+              </svg>
+            </a>
+            <!-- Settings Button -->
+            <a href="/single/settings" class="p-2 rounded-full bg-amber-100/50 hover:bg-amber-200/70 border border-amber-300/50 text-amber-700 hover:text-amber-800 transition duration-200" title="Settings">
+              <svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+              </svg>
+            </a>
+          </div>
+        </header>
+
+        <!-- Difficulty Selection Section -->
+        <div class="flex-1 bg-white/70 backdrop-blur-sm rounded-xl shadow-inner border border-amber-700/20 p-4 md:p-6 flex flex-col items-center justify-start overflow-y-auto custom-scrollbar">
+          <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-amber-800 to-amber-900 mb-10 lg:mb-12 text-center select-none tracking-wide drop-shadow-lg flex-shrink-0">
+            Choose Difficulty
+          </h1>
+          <!-- Difficulty Cards Grid -->
+          <div class="w-full max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 gap-6 pb-4">
+            <!-- Tutorial Difficulty Card -->
+            <button onclick="app.location.redirect('/single/game?difficulty=normal&tutorial=1');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-green-300 bg-gradient-to-br from-green-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-green-200 focus:outline-none" tabindex="0">
+              <span class="absolute -top-3 right-4 bg-green-400 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Start Here</span>
+              <svg class="w-12 h-12 text-green-500 mb-3 transition-transform duration-200" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path d="M3 6a1 1 0 011-1h14a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V6zm2 2v8h12V8H5z" />
+              </svg>
+              <span class="text-lg md:text-xl font-bold text-green-700 mb-1">Tutorial</span>
+              <span class="text-xs text-green-800/80">Learn to play</span>
+            </button>
+
+            <!-- Beginner Difficulty Card -->
+            <button onclick="app.location.redirect('/single/game?difficulty=beginner');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-teal-300 bg-gradient-to-br from-teal-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-teal-200 focus:outline-none" tabindex="0">
+              <span class="absolute -top-3 right-4 bg-teal-400 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Easy Entry</span>
+              <svg class="w-12 h-12 text-teal-500 mb-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <circle cx="12" cy="12" r="10" />
+              </svg>
+              <span class="text-lg md:text-xl font-bold text-teal-700 mb-1">Beginner</span>
+              <span class="text-xs text-teal-800/80">For new players</span>
+            </button>
+            <!-- Easy Difficulty Card -->
+            <button onclick="app.location.redirect('/single/game?difficulty=easy');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-blue-300 bg-gradient-to-br from-blue-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-blue-200 focus:outline-none" tabindex="0">
+              <span class="absolute -top-3 right-4 bg-blue-400 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Chill</span>
+              <svg class="w-12 h-12 text-blue-500 mb-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
+              </svg>
+              <span class="text-lg md:text-xl font-bold text-blue-700 mb-1">Easy</span>
+              <span class="text-xs text-blue-800/80">Relax and learn</span>
+            </button>
+            <!-- Normal Difficulty Card -->
+            <button onclick="app.location.redirect('/single/game?difficulty=normal');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-amber-300 bg-gradient-to-br from-amber-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-amber-200 focus:outline-none" tabindex="0">
+              <span class="absolute -top-3 right-4 bg-amber-400 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Classic</span>
+              <svg class="w-12 h-12 text-amber-500 mb-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z" />
+              </svg>
+              <span class="text-lg md:text-xl font-bold text-amber-800 mb-1">Normal</span>
+              <span class="text-xs text-amber-800/80">Standard challenge</span>
+            </button>
+            <!-- Hard Difficulty Card -->
+            <button onclick="app.location.redirect('/single/game?difficulty=hard');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-orange-400 bg-gradient-to-br from-orange-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-orange-200 focus:outline-none" tabindex="0">
+              <span class="absolute -top-3 right-4 bg-orange-500 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Tough</span>
+              <svg class="w-12 h-12 text-orange-600 mb-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.362-3.797A8.33 8.33 0 0112 2.25c1.153 0 2.243.3 3.218.834A8.224 8.224 0 0115.362 5.214z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1.001A3.75 3.75 0 0012 18z" />
+              </svg>
+              <span class="text-lg md:text-xl font-bold text-pink-700 mb-1">Hard</span>
+              <span class="text-xs text-pink-800/80">For veterans</span>
+            </button>
+            <!-- Insane Difficulty Card -->
+            <button onclick="app.location.redirect('/single/game?difficulty=insane');" class="relative group flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-red-400 bg-gradient-to-br from-red-50/90 to-white/90 shadow-lg hover:shadow-2xl transition-all duration-200 hover:-translate-y-2 active:scale-95 focus:ring-4 focus:ring-red-200 focus:outline-none" tabindex="0">
+              <span class="absolute -top-3 right-4 bg-red-500 text-white text-xs font-semibold rounded-full px-3 py-0.5 shadow-md select-none">Extreme</span>
+              <svg class="w-12 h-12 text-red-600 mb-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+              </svg>
+              <span class="text-lg md:text-xl font-bold text-red-700 mb-1">Insane</span>
+              <span class="text-xs text-red-800/80">Only for masters</span>
+            </button>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <!-- Mobile Navigation -->
+    <%- include("../../partials/single/navigation-bar-mobile.ejs", { page: "menu" }) %>
+  </div>
+</body>
+
 </html>
\ No newline at end of file
