Refactor FlagQuiz and GeographyQuiz to replace WelcomeStats with QuizInfo component for improved consistency and clarity in the welcome subpage.

src/pages/FlagQuiz.svelte

@@ -6,7 +6,7 @@ import { quizInfo } from '../quizInfo/FlagQuizInfo.js';
   import InlineSvg from "../components/InlineSvg.svelte";
   import Achievements from "../components/Achievements.svelte";
   import QuizSettings from "../components/QuizSettings.svelte";
-  import WelcomeStats from "../components/WelcomeStats.svelte";
+  import QuizInfo from "../components/QuizInfo.svelte";
   import ActionButtons from "../components/ActionButtons.svelte";
 
   // Game data
@@ -965,7 +965,7 @@ import { quizInfo } from '../quizInfo/FlagQuizInfo.js';
 
     {#if quizSubpage === "welcome"}
       <!-- Welcome/Stats Subpage -->
-      <WelcomeStats
+  <QuizInfo
         {gameStats}
         {sessionStats}
         {sessionLength}

src/pages/Game.svelte

@@ -4,29 +4,13 @@
   import Header from '../components/Header.svelte';
   import Footer from '../components/Footer.svelte';
 
-  let availableGames = [
+  import { quizInfo as flagQuizInfo } from '../quizInfo/FlagQuizInfo.js';
-    {
+  import { quizInfo as capitalsQuizInfo } from '../quizInfo/CapitalsQuizInfo.js';
-      name: 'flags',
+  import { quizInfo as geographyQuizInfo } from '../quizInfo/GeographyQuizInfo.js';
-      title: 'Flag Quiz',
+  import { quizInfo as logoQuizInfo } from '../quizInfo/LogoQuizInfo.js';
-      description: 'Test your knowledge of world flags',
+  import { quizInfo as emblemQuizInfo } from '../quizInfo/EmblemQuizInfo.js';
-      icon: '🏳️',
+
-      route: '#/game/flags'
+  let availableGames = [flagQuizInfo, capitalsQuizInfo, geographyQuizInfo, logoQuizInfo, emblemQuizInfo];
-    },
-    {
-      name: 'capitals',
-      title: 'Capitals Quiz',
-      description: 'Test your knowledge of world capitals',
-      icon: '🏛️',
-      route: '#/game/capitals'
-    },
-    {
-      name: 'geography',
-      title: 'Geography Quiz',
-      description: 'Test your knowledge of world geography',
-      icon: '🗺️',
-      route: '#/game/geography'
-    }
-  ];
 
   let theme = 'system';
 
@@ -72,28 +56,42 @@
 
     <div class="game-grid">
       {#each availableGames as game}
-        <a href={game.route} class="game-card">
+        {#if game.state === 'released'}
-          <div class="game-icon">{game.icon}</div>
+          <a href={game.route} class="game-card">
-          <h2>{game.title}</h2>
+            <div class="game-icon">
-          <p>{game.description}</p>
+              {#if game.emoji}
-          <div class="play-button">Play Now →</div>
+                <span>{game.emoji}</span>
-        </a>
+              {/if}
+            </div>
+            <h2>{game.title}</h2>
+            <p>{game.description}</p>
+            <div class="play-button">Play Now →</div>
+          </a>
+        {:else if game.state === 'testing'}
+          <a href={game.route} class="game-card testing">
+            <div class="game-icon">
+              {#if game.emoji}
+                <span>{game.emoji}</span>
+              {/if}
+            </div>
+            <h2>{game.title}</h2>
+            <p>{game.description}</p>
+            <div class="play-button">Play Now →</div>
+          </a>
+        {:else if game.state === 'scheduled'}
+          <div class="game-card scheduled">
+            <div class="game-icon">
+              {#if game.emoji}
+                <span class="grayscale">{game.emoji}</span>
+              {/if}
+            </div>
+            <h2>{game.title}</h2>
+            <p>{game.description}</p>
+            <div class="coming-soon-text">Coming soon</div>
+          </div>
+        {/if}
       {/each}
     </div>
-
-    <div class="coming-soon">
-      <h3>⏳ Coming Soon</h3>
-      <div class="upcoming-games">
-        <div class="upcoming-game">
-          <span class="icon">🏢</span>
-          <span>Logo Quiz</span>
-        </div>
-        <div class="upcoming-game">
-          <span class="icon">🛡️</span>
-          <span>Emblem Quiz</span>
-        </div>
-      </div>
-    </div>
   </div>
 </main>
 
@@ -145,10 +143,30 @@
     color: var(--color-text-primary);
   }
 
-  .game-card:hover {
+  .game-card.scheduled {
-    transform: translateY(-4px);
+    border: 2px dashed var(--color-border);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    opacity: 0.7;
-    border-color: var(--color-primary);
+  }
+
+  .game-card.testing {
+    border: 2px solid #ef4444;
+  }
+
+  .game-card.scheduled .game-icon .grayscale {
+    filter: grayscale(1);
+    opacity: 0.5;
+  }
+
+  .game-card.scheduled .play-button {
+    display: none;
+  }
+
+  .coming-soon-text {
+    margin-top: 1.5rem;
+    font-size: 1.1rem;
+    color: var(--color-text-secondary);
+    font-weight: 600;
+    opacity: 0.8;
   }
 
   .game-icon {

src/pages/GeographyQuiz.svelte

@@ -5,7 +5,7 @@ import { quizInfo } from '../quizInfo/GeographyQuizInfo.js';
   import Header from "../components/Header.svelte";
   import Footer from "../components/Footer.svelte";
   import CountryMap from "../components/CountryMap.svelte";
-  import WelcomeStats from "../components/WelcomeStats.svelte";
+  import QuizInfo from "../components/QuizInfo.svelte";
   import ActionButtons from "../components/ActionButtons.svelte";
 
   // Game data
@@ -104,7 +104,7 @@ import { quizInfo } from '../quizInfo/GeographyQuizInfo.js';
 <main class="map-quiz">
   {#if quizSubpage === "welcome"}
     <div class="container">
-      <WelcomeStats
+  <QuizInfo
         gameStats={sessionStats}
         {sessionStats}
         {sessionLength}