add category descriptions in login, explain what to do in order screen, remove unused code, fix design for "error occurred" screen

ng-app/src/lib/Login.svelte

@@ -374,6 +374,14 @@
       class:max-w-[600px]={!mobile}
     >
       <div class="mt-auto">
+        <p class="max-w-xl md:mx-auto lg:max-w-2xl">
+          <span class="text-xl">
+            <!-- TODO: Internationalization-->
+            Select your emoji of category: {emoji_cat[
+              shuffle.category_indices[pazzlePage]
+            ]}</span
+          >
+        </p>
         {#each [0, 1, 2, 3, 4] as row}
           <div class="columns-3 gap-0">
             {#each emojis2[pazzlePage]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i (pazzlePage + "-" + row + "-" + i)}
@@ -419,6 +427,9 @@
       class:max-w-[600px]={!mobile}
     >
       <div class="mt-auto">
+        <p class="max-w-xl md:mx-auto lg:max-w-2xl mb-2">
+          <span class="text-xl">Click your emojis in the correct order</span>
+        </p>
         {#each [0, 1, 2] as row}
           <div class="columns-3 gap-0">
             {#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
@@ -575,6 +586,7 @@
   {:else if step == "end"}
     {#if error}
       <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
+        <div class="mt-auto max-w-6xl lg:px-8">
           An error occurred !
           <svg
             fill="none"
@@ -594,21 +606,28 @@
           <Alert color="red" class="mt-5">
             {error}
           </Alert>
+        </div>
+        <div class="flex justify-between mt-auto gap-4">
           <button
             class="mt-10 select-none text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
             on:click={init}
           >
+            <ArrowPath
+              tabindex="-1"
+              class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
+            />
             Try again
           </button>
           <button
             on:click={cancel}
-          class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+            class="mt-10 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
             ><XCircle
               tabindex="-1"
               class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
             />Cancel</button
           >
         </div>
+      </div>
     {:else}
       <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800">
         Your wallet is opened! <br />Please wait while the app is loading...
@@ -659,28 +678,4 @@
   border: 0;
   box-shadow: none; */
   }
-
-  .scale-to-fit {
-    /* Use the smaller of viewport width or height to maintain aspect ratio */
-    /* width: 100vw; */
-    /* height: 100vh; */
-    max-width: calc(100vh * (3 / 5)); /* Adjust the ratio to fit your needs */
-    max-height: calc(100vw * (5 / 3)); /* Inverse of the above ratio */
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  /* Additional styles for responsiveness */
-  @media (orientation: landscape) {
-    .scale-to-fit {
-      max-width: calc(100vh * (3 / 5));
-    }
-  }
-
-  @media (orientation: portrait) {
-    .scale-to-fit {
-      max-height: calc(100vw * (5 / 3));
-    }
-  }
 </style>