feat: Add game over message and player performance information

index.html

@@ -24,7 +24,7 @@
         <h1 class="sm:text-xl">
           <span class="sm:text-2xl">🐞</span> Fake Insects <span class="bg-gray-200 text-sm text-gray-500 px-1 py-0.5 rounded ml-1 align-text-bottom">v0.0</span>
         </h1>
-        <div class="flex items-center gap-1 max-sm:text-sm sm:gap-1.5 mx-auto">
+        <div class="flex items-center gap-1 max-sm:text-sm sm:gap-1.5 ml-auto sm:ml-12">
           <p class="rounded bg-black px-1.5 text-white">
             <span class="font-normal">TIME LEFT:</span> <span id="time-left">25</span>s
           </p>
@@ -88,16 +88,17 @@
       <div
         class="flex flex-col gap-6 rounded-xl bg-white p-12 text-center shadow-2xl"
       >
-        <p id="game-over-reason"></p>
+        <p id="game-over-reason" class="font-semibold text-lg"></p>
         <div class="text-5xl">🐞</div>
         <div>
           <p class="mb-2 text-4xl font-bold">
             Your score:
             <span id="final-score" class="rounded-xl bg-black px-2 text-white">0</span>
           </p>
-          <p id="game-over-message" class="text-lg text-gray-400">
+          <p id="game-over-message" class="text-lg text-gray-500">
             You found 0 fake insects in 25 seconds.
           </p>
+          <p class="text-md text-gray-500">You've outperformed 97% of players.</p>
         </div>
 
         <button