Refactor FlagQuiz component: standardize string quotes, improve session state management, and integrate ActionButtons component for better UI control

public/icons/github.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 24 24" fill="#ccc" style="margin-right:0.3em;">
+    <path
+        d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z" />
+</svg>

src/components/ActionButtons.svelte

@@ -0,0 +1,117 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let mode = 'welcome'; // 'welcome', 'quiz', 'results'
+  export let sessionInfo = '';
+  export let hasPlayedBefore = false;
+
+  function handleAction(action, data = null) {
+    dispatch('action', { action, data });
+  }
+</script>
+
+<div class="action-container">
+  {#if sessionInfo}
+    <div class="session-info">
+      {sessionInfo}
+    </div>
+  {/if}
+
+  <div class="action-buttons">
+    {#if mode === 'welcome'}
+      <button class="action-btn primary" on:click={() => handleAction('startQuiz')}>
+        {hasPlayedBefore ? 'Start New Quiz' : 'Start Quiz'}
+      </button>
+      <button class="action-btn secondary" on:click={() => handleAction('openSettings')}>
+        Settings
+      </button>
+    {:else if mode === 'quiz'}
+      <button class="action-btn secondary" on:click={() => handleAction('endSession')}>
+        End Quiz
+      </button>
+      <button class="action-btn secondary" on:click={() => handleAction('openSettings')}>
+        Settings
+      </button>
+    {:else if mode === 'results'}
+      <button class="action-btn secondary" on:click={() => handleAction('goToGames')}>
+        Back to Games
+      </button>
+      <button class="action-btn primary" on:click={() => handleAction('playAgain')}>
+        Play Again
+      </button>
+      <button class="action-btn secondary" on:click={() => handleAction('openSettings')}>
+        Settings
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .action-container {
+    text-align: center;
+  }
+
+  .session-info {
+    color: var(--color-text-secondary);
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    line-height: 1.4;
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .action-btn {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 0.95rem;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 120px;
+  }
+
+  .action-btn.primary {
+    background: var(--color-primary);
+    color: white;
+  }
+
+  .action-btn.primary:hover {
+    background: var(--color-primary-dark, #0056b3);
+    transform: translateY(-1px);
+  }
+
+  .action-btn.secondary {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text-primary);
+    border: 2px solid var(--color-border);
+  }
+
+  .action-btn.secondary:hover {
+    background: var(--color-bg-hover);
+    border-color: var(--color-primary);
+    transform: translateY(-1px);
+  }
+
+  @media (max-width: 480px) {
+    .action-buttons {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .action-btn {
+      min-width: auto;
+    }
+  }
+</style>

src/components/Footer.svelte

@@ -1,29 +1,19 @@
 <script>
-  // No props needed for this simple footer
+  import InlineSvg from './InlineSvg.svelte';
 </script>
 
 <footer>
-  <div class="footer-flex">
+  <div class="footer-content">
+    <span class="footer-left">shadoll Logo Gallery and Quiz game</span>
     <span class="footer-center">All logos are property of their respective owners.</span>
-    <div class="footer-bottom">
-      <span class="footer-left">shadoll Logo Gallery and Quiz game</span>
-      <a
-        href="https://github.com/shadoll/sLogos"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="footer-github"
-      >
-        <svg
-          width="22"
-          height="22"
-          viewBox="0 0 24 24"
-          fill="#ccc"
-          style="margin-right:0.3em;"
-        ><path
-            d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
-        /></svg>
-      </a>
-    </div>
+    <a
+      href="https://github.com/shadoll/sLogos"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="footer-right"
+    >
+      <InlineSvg path="/icons/github.svg" alt="GitHub" />
+    </a>
   </div>
 </footer><style>
   footer {
@@ -35,60 +25,68 @@
     margin-top: auto;
   }
 
-  .footer-flex {
+  .footer-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 100%;
-    gap: 1em;
-  }
-
-  .footer-center {
-    flex: 2;
-    text-align: center;
-  }
-
-  .footer-bottom {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex: 1;
-    gap: 1em;
+    gap: 1rem;
+    flex-wrap: wrap;
   }
 
   .footer-left {
-    text-align: left;
+    order: 1;
+    flex: 0 0 auto;
   }
 
-  .footer-github {
+  .footer-center {
+    order: 2;
+    flex: 1;
+    text-align: center;
+    min-width: 250px;
+  }
+
+  .footer-right {
+    order: 3;
+    flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
+    width: 22px;
+    height: 22px;
   }
 
   @media (max-width: 700px) {
-    .footer-flex {
+    .footer-content {
       flex-direction: column;
-      align-items: center;
-      gap: 0.5em;
+      gap: 0.75rem;
     }
 
     .footer-center {
+      order: 1;
       text-align: center;
       width: 100%;
-      margin-bottom: 0.3em;
-    }
-
-    .footer-bottom {
-      width: 100%;
-      justify-content: space-between;
+      flex: none;
     }
 
     .footer-left {
+      order: 2;
       text-align: left;
     }
 
-    .footer-github {
-      margin-left: auto;
+    .footer-right {
+      order: 3;
+      text-align: right;
+    }
+
+    /* Second row with left-right layout */
+    .footer-left,
+    .footer-right {
+      width: 50%;
+    }
+
+    .footer-content::after {
+      content: '';
+      width: 100%;
+      order: 1.5;
     }
   }
 </style>

src/components/WelcomeStats.svelte

@@ -1,531 +1,488 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-  import InlineSvg from './InlineSvg.svelte';
+    import { createEventDispatcher } from "svelte";
+    import InlineSvg from "./InlineSvg.svelte";
 
-  const dispatch = createEventDispatcher();
+    const dispatch = createEventDispatcher();
 
-  export let gameStats = { correct: 0, wrong: 0, total: 0, skipped: 0 };
-  export let sessionStats = null;
-  export let showSessionResults = false;
-  export let sessionLength = 10;
+    export let gameStats = { correct: 0, wrong: 0, total: 0, skipped: 0 };
+    export let sessionStats = null;
+    export let showSessionResults = false;
+    export let sessionLength = 10;
 
-  function startQuiz() {
-    dispatch('startQuiz');
-  }
+    function startQuiz() {
+        dispatch("startQuiz");
+    }
 
-  function handlePlayAgain() {
-    dispatch('startQuiz');
-  }
+    function handlePlayAgain() {
+        dispatch("startQuiz");
+    }
 
-  function handleGoToGames() {
-    window.location.hash = '#/game';
-  }
+    function handleGoToGames() {
+        window.location.hash = "#/game";
+    }
 
-  function openSettings() {
-    dispatch('openSettings');
-  }
+    function openSettings() {
+        dispatch("openSettings");
+    }
 
-  function handleCloseResults() {
-    dispatch('closeResults');
-  }
+    function handleCloseResults() {
+        dispatch("closeResults");
+    }
 
-  $: hasPlayedBefore = gameStats.total > 0;
-  $: totalQuestions = gameStats.correct + gameStats.wrong + gameStats.skipped;
-  $: accuracy = totalQuestions > 0 ? Math.round((gameStats.correct / totalQuestions) * 100) : 0;
+    $: hasPlayedBefore = gameStats.total > 0;
+    $: totalQuestions = gameStats.correct + gameStats.wrong + gameStats.skipped;
+    $: accuracy =
+        totalQuestions > 0
+            ? Math.round((gameStats.correct / totalQuestions) * 100)
+            : 0;
 
-  // Session results calculations
-  $: sessionPercentage = sessionStats && sessionStats.total > 0 ? Math.round((sessionStats.correct / sessionStats.total) * 100) : 0;
-  $: sessionGrade = sessionStats ? getGrade(sessionPercentage) : null;
+    // Session results calculations
+    $: sessionPercentage =
+        sessionStats && sessionStats.total > 0
+            ? Math.round((sessionStats.correct / sessionStats.total) * 100)
+            : 0;
+    $: sessionGrade = sessionStats ? getGrade(sessionPercentage) : null;
 
-  // Welcome page grade display for accuracy
-  $: accuracyGrade = hasPlayedBefore ? getGrade(accuracy) : null;
+    // Welcome page grade display for accuracy
+    $: accuracyGrade = hasPlayedBefore ? getGrade(accuracy) : null;
 
-  function getGrade(percentage) {
-    if (percentage >= 90) return { letter: 'A+', color: '#22c55e', description: 'Excellent!' };
-    if (percentage >= 80) return { letter: 'A', color: '#22c55e', description: 'Great job!' };
-    if (percentage >= 70) return { letter: 'B', color: '#3b82f6', description: 'Good work!' };
-    if (percentage >= 60) return { letter: 'C', color: '#f59e0b', description: 'Not bad!' };
-    if (percentage >= 50) return { letter: 'D', color: '#ef4444', description: 'Keep practicing!' };
-    return { letter: 'F', color: '#ef4444', description: 'Try again!' };
-  }
+    function getGrade(percentage) {
+        if (percentage >= 90)
+            return {
+                letter: "A+",
+                color: "#22c55e",
+                description: "Excellent!",
+            };
+        if (percentage >= 80)
+            return { letter: "A", color: "#22c55e", description: "Great job!" };
+        if (percentage >= 70)
+            return { letter: "B", color: "#3b82f6", description: "Good work!" };
+        if (percentage >= 60)
+            return { letter: "C", color: "#f59e0b", description: "Not bad!" };
+        if (percentage >= 50)
+            return {
+                letter: "D",
+                color: "#ef4444",
+                description: "Keep practicing!",
+            };
+        return { letter: "F", color: "#ef4444", description: "Try again!" };
+    }
 </script>
 
 <div class="welcome-container">
-  {#if showSessionResults && sessionStats}
-    <!-- Session Results View -->
-    <div class="welcome-header">
-      <div class="welcome-icon">
-        <InlineSvg path="/icons/check-circle.svg" alt="Quiz Complete" />
-      </div>
-      <h1>Quiz Complete!</h1>
-      <p class="welcome-subtitle">Great job on completing the quiz</p>
-    </div>
-
-    <div class="stats-section">
-      <div class="grade-display">
-        <div class="grade-circle" style="border-color: {sessionGrade.color}; color: {sessionGrade.color}">
-          {sessionGrade.letter}
-        </div>
-        <div class="grade-text">
-          <div class="percentage">{sessionPercentage}%</div>
-          <div class="description">{sessionGrade.description}</div>
-        </div>
-      </div>
-
-      <div class="stats-grid">
-        <div class="stat-card">
-          <div class="stat-icon correct">
-            <InlineSvg path="/icons/check-square.svg" alt="Correct" />
-          </div>
-          <div class="stat-value">{sessionStats.correct}</div>
-          <div class="stat-label">Correct</div>
-        </div>
-
-        <div class="stat-card">
-          <div class="stat-icon wrong">
-            <InlineSvg path="/icons/close-square.svg" alt="Wrong" />
-          </div>
-          <div class="stat-value">{sessionStats.wrong}</div>
-          <div class="stat-label">Wrong</div>
-        </div>
-
-        <div class="stat-card">
-          <div class="stat-icon skipped">
-            <InlineSvg path="/icons/skip-square.svg" alt="Skipped" />
-          </div>
-          <div class="stat-value">{sessionStats.skipped}</div>
-          <div class="stat-label">Skipped</div>
-        </div>
-      </div>
-
-      <div class="progress-bar">
-        <div class="progress-fill" style="width: {sessionPercentage}%; background-color: {sessionGrade.color}"></div>
-      </div>
-
-      <div class="progress-summary">
-        <h3>You answered {sessionStats.correct} out of {sessionStats.total} questions correctly
-        {#if sessionStats.skipped > 0}
-          and skipped {sessionStats.skipped} question{sessionStats.skipped > 1 ? 's' : ''}
-        {/if}.</h3>
-      </div>
-    </div>
-
-    <div class="action-buttons">
-      <button class="action-btn secondary" on:click={handleGoToGames}>
-        Back to Games
-      </button>
-      <button class="action-btn primary" on:click={handlePlayAgain}>
-        Play Again
-      </button>
-      <button class="action-btn secondary" on:click={openSettings}>
-        Settings
-      </button>
-    </div>
-  {:else}
-    <!-- Welcome/Stats View -->
-    <div class="welcome-header">
-      <div class="welcome-icon">
-        <InlineSvg path="/icons/flag.svg" alt="Flag Quiz" />
-      </div>
-      <h1>Flag Quiz</h1>
-      <p class="welcome-subtitle">Test your knowledge of world flags</p>
-    </div>
-
-    {#if hasPlayedBefore}
-      <div class="stats-section">
-        <h2>Your Statistics</h2>
-
-        <div class="grade-display">
-          <div class="accuracy-icon" style="color: {accuracyGrade.color}">
-            <InlineSvg path="/icons/medal-star.svg" alt="Accuracy" />
-          </div>
-          <div class="grade-text">
-            <div class="percentage">{accuracy}%</div>
-            <div class="description">Accuracy</div>
-          </div>
-        </div>
-
-        <div class="stats-grid">
-          <div class="stat-card">
-            <div class="stat-icon correct">
-              <InlineSvg path="/icons/check-square.svg" alt="Correct" />
+    {#if showSessionResults && sessionStats}
+        <!-- Session Results View -->
+        <div class="welcome-header">
+            <div class="welcome-icon">
+                <InlineSvg path="/icons/check-circle.svg" alt="Quiz Complete" />
             </div>
-            <div class="stat-value">{gameStats.correct}</div>
-            <div class="stat-label">Correct</div>
-          </div>
-
-          <div class="stat-card">
-            <div class="stat-icon wrong">
-              <InlineSvg path="/icons/close-square.svg" alt="Wrong" />
-            </div>
-            <div class="stat-value">{gameStats.wrong}</div>
-            <div class="stat-label">Wrong</div>
-          </div>
-
-          <div class="stat-card">
-            <div class="stat-icon skipped">
-              <InlineSvg path="/icons/skip-square.svg" alt="Skipped" />
-            </div>
-            <div class="stat-value">{gameStats.skipped}</div>
-            <div class="stat-label">Skipped</div>
-          </div>
+            <h1>Quiz Complete!</h1>
+            <p class="welcome-subtitle">Great job on completing the quiz</p>
         </div>
 
-        <div class="progress-summary">
-          <h3>Total Questions Answered: {totalQuestions}</h3>
+        <div class="stats-section">
+            <div class="grade-display">
+                <div
+                    class="grade-circle"
+                    style="border-color: {sessionGrade.color}; color: {sessionGrade.color}"
+                >
+                    {sessionGrade.letter}
+                </div>
+                <div class="grade-text">
+                    <div class="percentage">{sessionPercentage}%</div>
+                    <div class="description">{sessionGrade.description}</div>
+                </div>
+            </div>
+
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="stat-icon correct">
+                        <InlineSvg
+                            path="/icons/check-square.svg"
+                            alt="Correct"
+                        />
+                    </div>
+                    <div class="stat-value">{sessionStats.correct}</div>
+                    <div class="stat-label">Correct</div>
+                </div>
+
+                <div class="stat-card">
+                    <div class="stat-icon wrong">
+                        <InlineSvg path="/icons/close-square.svg" alt="Wrong" />
+                    </div>
+                    <div class="stat-value">{sessionStats.wrong}</div>
+                    <div class="stat-label">Wrong</div>
+                </div>
+
+                <div class="stat-card">
+                    <div class="stat-icon skipped">
+                        <InlineSvg
+                            path="/icons/skip-square.svg"
+                            alt="Skipped"
+                        />
+                    </div>
+                    <div class="stat-value">{sessionStats.skipped}</div>
+                    <div class="stat-label">Skipped</div>
+                </div>
+            </div>
+
+            <div class="progress-bar">
+                <div
+                    class="progress-fill"
+                    style="width: {sessionPercentage}%; background-color: {sessionGrade.color}"
+                ></div>
+            </div>
+
+            <div class="progress-summary">
+                <h3>
+                    You answered {sessionStats.correct} out of {sessionStats.total}
+                    questions correctly
+                    {#if sessionStats.skipped > 0}
+                        and skipped {sessionStats.skipped} question{sessionStats.skipped >
+                        1
+                            ? "s"
+                            : ""}
+                    {/if}.
+                </h3>
+            </div>
         </div>
-      </div>
     {:else}
-      <div class="welcome-message">
-        <h2>Welcome to Flag Quiz!</h2>
-        <p>Challenge yourself to identify flags from around the world. Each quiz contains <strong>{sessionLength} questions</strong> with a mix of flag-to-country and country-to-flag challenges.</p>
-
-        <div class="features">
-          <div class="feature">
-            <InlineSvg path="/icons/global.svg" alt="Global" />
-            <span>Flags from every continent</span>
-          </div>
-          <div class="feature">
-            <InlineSvg path="/icons/medal-ribbon.svg" alt="Achievements" />
-            <span>Unlock achievements</span>
-          </div>
-          <div class="feature">
-            <InlineSvg path="/icons/chart-square.svg" alt="Statistics" />
-            <span>Track your progress</span>
-          </div>
+        <!-- Welcome/Stats View -->
+        <div class="welcome-header">
+            <div class="welcome-icon">
+                <InlineSvg path="/icons/flag.svg" alt="Flag Quiz" />
+            </div>
+            <h1>Flag Quiz</h1>
+            <p class="welcome-subtitle">Test your knowledge of world flags</p>
         </div>
-      </div>
-    {/if}
 
-    <div class="start-section">
-      <button class="start-quiz-btn" on:click={startQuiz}>
-        {hasPlayedBefore ? 'Start New Quiz' : 'Start Quiz'}
-      </button>
-      <p class="session-info">{sessionLength} questions per quiz</p>
-    </div>
-  {/if}
+        {#if hasPlayedBefore}
+            <div class="stats-section">
+                <h2>Your Statistics</h2>
+
+                <div class="grade-display">
+                    <div
+                        class="accuracy-icon"
+                        style="color: {accuracyGrade.color}"
+                    >
+                        <InlineSvg
+                            path="/icons/medal-star.svg"
+                            alt="Accuracy"
+                        />
+                    </div>
+                    <div class="grade-text">
+                        <div class="percentage">{accuracy}%</div>
+                        <div class="description">Accuracy</div>
+                    </div>
+                </div>
+
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-icon correct">
+                            <InlineSvg
+                                path="/icons/check-square.svg"
+                                alt="Correct"
+                            />
+                        </div>
+                        <div class="stat-value">{gameStats.correct}</div>
+                        <div class="stat-label">Correct</div>
+                    </div>
+
+                    <div class="stat-card">
+                        <div class="stat-icon wrong">
+                            <InlineSvg
+                                path="/icons/close-square.svg"
+                                alt="Wrong"
+                            />
+                        </div>
+                        <div class="stat-value">{gameStats.wrong}</div>
+                        <div class="stat-label">Wrong</div>
+                    </div>
+
+                    <div class="stat-card">
+                        <div class="stat-icon skipped">
+                            <InlineSvg
+                                path="/icons/skip-square.svg"
+                                alt="Skipped"
+                            />
+                        </div>
+                        <div class="stat-value">{gameStats.skipped}</div>
+                        <div class="stat-label">Skipped</div>
+                    </div>
+                </div>
+
+                <div class="progress-summary">
+                    <h3>Total Questions Answered: {totalQuestions}</h3>
+                </div>
+            </div>
+        {:else}
+            <div class="welcome-message">
+                <h2>Welcome to Flag Quiz!</h2>
+                <p>
+                    Challenge yourself to identify flags from around the world.
+                    Each quiz contains <strong>{sessionLength} questions</strong
+                    > with a mix of flag-to-country and country-to-flag challenges.
+                </p>
+
+                <div class="features">
+                    <div class="feature">
+                        <InlineSvg path="/icons/global.svg" alt="Global" />
+                        <span>Flags from every continent</span>
+                    </div>
+                    <div class="feature">
+                        <InlineSvg
+                            path="/icons/medal-ribbon.svg"
+                            alt="Achievements"
+                        />
+                        <span>Unlock achievements</span>
+                    </div>
+                    <div class="feature">
+                        <InlineSvg
+                            path="/icons/chart-square.svg"
+                            alt="Statistics"
+                        />
+                        <span>Track your progress</span>
+                    </div>
+                </div>
+            </div>
+        {/if}
+    {/if}
 </div>
 
 <style>
-  .welcome-container {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 2rem;
-    text-align: center;
-  }
-
-  .welcome-header {
-    margin-bottom: 3rem;
-  }
-
-  .welcome-icon {
-    width: 64px;
-    height: 64px;
-    margin: 0 auto 1.5rem;
-    color: var(--color-primary);
-  }
-
-  .welcome-header h1 {
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: var(--color-text-primary);
-    margin: 0 0 0.5rem 0;
-  }
-
-  .welcome-subtitle {
-    font-size: 1.2rem;
-    color: var(--color-text-secondary);
-    margin: 0;
-  }
-
-  .stats-section {
-    background: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
-    border-radius: 12px;
-    padding: 2rem;
-    margin-bottom: 2rem;
-  }
-
-  .stats-section h2 {
-    margin: 0 0 1.5rem 0;
-    color: var(--color-text-primary);
-    font-size: 1.5rem;
-  }
-
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .stat-card {
-    background: var(--color-bg-primary);
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    padding: 1.5rem 1rem;
-    text-align: center;
-  }
-
-  .stat-icon {
-    width: 32px;
-    height: 32px;
-    margin: 0 auto 0.75rem;
-  }
-
-  .stat-icon.correct {
-    color: #22c55e;
-  }
-
-  .stat-icon.wrong {
-    color: #ef4444;
-  }
-
-  .stat-icon.skipped {
-    color: #6b7280;
-  }
-
-  .stat-value {
-    font-size: 1.75rem;
-    font-weight: bold;
-    color: var(--color-text-primary);
-    margin-bottom: 0.25rem;
-  }
-
-  .stat-label {
-    font-size: 0.9rem;
-    color: var(--color-text-secondary);
-  }
-
-  .progress-summary {
-    border-top: 1px solid var(--color-border);
-    padding-top: 1.5rem;
-  }
-
-  .progress-summary h3 {
-    margin: 0;
-    color: var(--color-text-primary);
-    font-size: 1.1rem;
-    font-weight: 600;
-    line-height: 1.4;
-  }
-
-  .grade-display {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-    margin-bottom: 2rem;
-    justify-content: center;
-  }
-
-  .grade-circle {
-    width: 80px;
-    height: 80px;
-    border: 4px solid;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 2rem;
-    font-weight: bold;
-    background: var(--color-bg-primary);
-  }
-
-  .accuracy-icon {
-    width: 80px;
-    height: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .accuracy-icon :global(.svg-wrapper) {
-    width: 64px;
-    height: 64px;
-  }
-
-  .grade-text {
-    text-align: left;
-  }
-
-  .percentage {
-    font-size: 2rem;
-    font-weight: bold;
-    color: var(--color-text-primary);
-    line-height: 1;
-  }
-
-  .description {
-    font-size: 1.1rem;
-    color: var(--color-text-secondary);
-    margin-top: 0.25rem;
-  }
-
-  .progress-bar {
-    width: 100%;
-    height: 8px;
-    background: var(--color-bg-tertiary);
-    border-radius: 4px;
-    overflow: hidden;
-    margin-bottom: 1.5rem;
-    border: 1px solid var(--color-border);
-  }
-
-  .progress-fill {
-    height: 100%;
-    transition: width 0.8s ease-out;
-    border-radius: 3px;
-  }
-
-  .action-buttons {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  .action-btn {
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    font-weight: 600;
-    font-size: 0.95rem;
-    transition: all 0.2s ease;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 120px;
-  }
-
-  .action-btn.primary {
-    background: var(--color-primary);
-    color: white;
-  }
-
-  .action-btn.primary:hover {
-    background: var(--color-primary-dark, #0056b3);
-    transform: translateY(-1px);
-  }
-
-  .action-btn.secondary {
-    background: var(--color-bg-tertiary);
-    color: var(--color-text-primary);
-    border: 2px solid var(--color-border);
-  }
-
-  .action-btn.secondary:hover {
-    background: var(--color-bg-hover);
-    border-color: var(--color-primary);
-    transform: translateY(-1px);
-  }
-
-  .welcome-message {
-    background: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
-    border-radius: 12px;
-    padding: 2rem;
-    margin-bottom: 2rem;
-  }
-
-  .welcome-message h2 {
-    margin: 0 0 1rem 0;
-    color: var(--color-text-primary);
-    font-size: 1.5rem;
-  }
-
-  .welcome-message p {
-    color: var(--color-text-secondary);
-    line-height: 1.6;
-    margin-bottom: 1.5rem;
-  }
-
-  .features {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: flex-start;
-    text-align: left;
-  }
-
-  .feature {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    color: var(--color-text-primary);
-  }
-
-  .feature :global(.svg-wrapper) {
-    width: 24px;
-    height: 24px;
-    color: var(--color-primary);
-    flex-shrink: 0;
-  }
-
-  .start-section {
-    margin-top: 2rem;
-  }
-
-  .start-quiz-btn {
-    background: var(--color-primary);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    padding: 1rem 2rem;
-    font-size: 1.1rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    margin-bottom: 0.75rem;
-  }
-
-  .start-quiz-btn:hover {
-    background: var(--color-primary-dark);
-    transform: translateY(-1px);
-  }
-
-  .session-info {
-    color: var(--color-text-secondary);
-    font-size: 0.9rem;
-    margin: 0;
-  }
-
-  @media (max-width: 480px) {
     .welcome-container {
-      padding: 1rem;
+        max-width: 600px;
+        margin: 0 auto;
+        padding: 2rem;
+        text-align: center;
+    }
+
+    .welcome-header {
+        margin-bottom: 3rem;
+    }
+
+    .welcome-icon {
+        width: 64px;
+        height: 64px;
+        margin: 0 auto 1.5rem;
+        color: var(--color-primary);
     }
 
     .welcome-header h1 {
-      font-size: 2rem;
+        font-size: 2.5rem;
+        font-weight: bold;
+        color: var(--color-text-primary);
+        margin: 0 0 0.5rem 0;
+    }
+
+    .welcome-subtitle {
+        font-size: 1.2rem;
+        color: var(--color-text-secondary);
+        margin: 0;
+    }
+
+    .stats-section {
+        background: var(--color-bg-secondary);
+        border: 1px solid var(--color-border);
+        border-radius: 12px;
+        padding: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    .stats-section h2 {
+        margin: 0 0 1.5rem 0;
+        color: var(--color-text-primary);
+        font-size: 1.5rem;
     }
 
     .stats-grid {
-      grid-template-columns: repeat(2, 1fr);
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+        gap: 1rem;
+        margin-bottom: 1.5rem;
     }
 
-    .features {
-      align-items: center;
-      text-align: center;
+    .stat-card {
+        background: var(--color-bg-primary);
+        border: 1px solid var(--color-border);
+        border-radius: 8px;
+        padding: 1.5rem 1rem;
+        text-align: center;
+    }
+
+    .stat-icon {
+        width: 32px;
+        height: 32px;
+        margin: 0 auto 0.75rem;
+    }
+
+    .stat-icon.correct {
+        color: #22c55e;
+    }
+
+    .stat-icon.wrong {
+        color: #ef4444;
+    }
+
+    .stat-icon.skipped {
+        color: #6b7280;
+    }
+
+    .stat-value {
+        font-size: 1.75rem;
+        font-weight: bold;
+        color: var(--color-text-primary);
+        margin-bottom: 0.25rem;
+    }
+
+    .stat-label {
+        font-size: 0.9rem;
+        color: var(--color-text-secondary);
+    }
+
+    .progress-summary h3 {
+        margin: 0;
+        color: var(--color-text-primary);
+        font-size: 1.1rem;
+        font-weight: 600;
+        line-height: 1.4;
     }
 
     .grade-display {
-      flex-direction: column;
-      text-align: center;
-      gap: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        margin-bottom: 2rem;
+        justify-content: center;
+    }
+
+    .grade-circle {
+        width: 80px;
+        height: 80px;
+        border: 4px solid;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+        font-weight: bold;
+        background: var(--color-bg-primary);
+    }
+
+    .accuracy-icon {
+        width: 80px;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .accuracy-icon :global(.svg-wrapper) {
+        width: 64px;
+        height: 64px;
     }
 
     .grade-text {
-      text-align: center;
+        text-align: left;
     }
 
-    .action-buttons {
-      flex-direction: column;
-      align-items: stretch;
+    .percentage {
+        font-size: 2rem;
+        font-weight: bold;
+        color: var(--color-text-primary);
+        line-height: 1;
     }
 
-    .action-btn {
-      min-width: auto;
+    .description {
+        font-size: 1.1rem;
+        color: var(--color-text-secondary);
+        margin-top: 0.25rem;
+    }
+
+    .progress-bar {
+        width: 100%;
+        height: 8px;
+        background: var(--color-bg-tertiary);
+        border-radius: 4px;
+        overflow: hidden;
+        margin-bottom: 1.5rem;
+        border: 1px solid var(--color-border);
+    }
+
+    .progress-fill {
+        height: 100%;
+        transition: width 0.8s ease-out;
+        border-radius: 3px;
+    }
+
+    .welcome-message {
+        background: var(--color-bg-secondary);
+        border: 1px solid var(--color-border);
+        border-radius: 12px;
+        padding: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    .welcome-message h2 {
+        margin: 0 0 1rem 0;
+        color: var(--color-text-primary);
+        font-size: 1.5rem;
+    }
+
+    .welcome-message p {
+        color: var(--color-text-secondary);
+        line-height: 1.6;
+        margin-bottom: 1.5rem;
+    }
+
+    .features {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        align-items: flex-start;
+        text-align: left;
+    }
+
+    .feature {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        color: var(--color-text-primary);
+    }
+
+    .feature :global(.svg-wrapper) {
+        width: 24px;
+        height: 24px;
+        color: var(--color-primary);
+        flex-shrink: 0;
+    }
+
+    @media (max-width: 480px) {
+        .welcome-container {
+            padding: 1rem;
+        }
+
+        .welcome-header h1 {
+            font-size: 2rem;
+        }
+
+        .stats-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .features {
+            align-items: center;
+            text-align: center;
+        }
+
+        .grade-display {
+            flex-direction: column;
+            text-align: center;
+            gap: 1rem;
+        }
+
+        .grade-text {
+            text-align: center;
+        }
     }
-  }
 </style>

src/pages/FlagQuiz.svelte

@@ -1,29 +1,30 @@
 <script>
-  import { onMount } from 'svelte';
-  import Header from '../components/Header.svelte';
-  import Footer from '../components/Footer.svelte';
-  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 { onMount } from "svelte";
+  import Header from "../components/Header.svelte";
+  import Footer from "../components/Footer.svelte";
+  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 ActionButtons from "../components/ActionButtons.svelte";
 
   // Game data
   let flags = [];
   let currentQuestion = null;
-  let questionType = 'flag-to-country'; // 'flag-to-country' or 'country-to-flag'
+  let questionType = "flag-to-country"; // 'flag-to-country' or 'country-to-flag'
 
   // Question and answer arrays
   let currentCountryOptions = [];
   let currentFlagOptions = [];
-  let correctAnswer = '';
+  let correctAnswer = "";
 
   // Game states
-  let gameState = 'welcome'; // 'welcome', 'loading', 'question', 'answered', 'session-complete'
-  let quizSubpage = 'welcome'; // 'welcome' or 'quiz'
+  let gameState = "welcome"; // 'welcome', 'loading', 'question', 'answered', 'session-complete'
+  let quizSubpage = "welcome"; // 'welcome' or 'quiz'
   let selectedAnswer = null;
   let answered = false;
   let isAnswered = false;
-  let resultMessage = '';
+  let resultMessage = "";
   let showResult = false;
   let timeoutId = null;
   let showCountryInfo = false;
@@ -62,17 +63,23 @@
 
   // Session management
   let currentSessionQuestions = 0;
-  let sessionStats = { correct: 0, wrong: 0, skipped: 0, total: 0, sessionLength: 10 };
+  let sessionStats = {
+    correct: 0,
+    wrong: 0,
+    skipped: 0,
+    total: 0,
+    sessionLength: 10,
+  };
   let showSessionResults = false;
   let sessionInProgress = false;
   let sessionStartTime = null;
   let sessionRestoredFromReload = false; // Track if session was restored from page reload
 
   // Theme
-  let theme = 'system';
+  let theme = "system";
 
   function setTheme(t) {
-    localStorage.setItem('theme', t);
+    localStorage.setItem("theme", t);
     applyTheme(t);
     theme = t;
   }
@@ -83,28 +90,37 @@
   }
 
   // Save settings when they change (after initial load)
-  $: if (settingsLoaded && typeof reduceCorrectAnswers !== 'undefined') {
-    localStorage.setItem('flagQuizSettings', JSON.stringify({ autoAdvance, focusWrongAnswers, reduceCorrectAnswers, soundEnabled, sessionLength }));
+  $: if (settingsLoaded && typeof reduceCorrectAnswers !== "undefined") {
+    localStorage.setItem(
+      "flagQuizSettings",
+      JSON.stringify({
+        autoAdvance,
+        focusWrongAnswers,
+        reduceCorrectAnswers,
+        soundEnabled,
+        sessionLength,
+      }),
+    );
   }
 
   // Load game stats from localStorage
   onMount(async () => {
-  // Initialize theme
-  theme = localStorage.getItem('theme') || 'system';
-  applyTheme(theme);
+    // Initialize theme
+    theme = localStorage.getItem("theme") || "system";
+    applyTheme(theme);
 
-  // Set window.appData for header compatibility
-    if (typeof window !== 'undefined') {
+    // Set window.appData for header compatibility
+    if (typeof window !== "undefined") {
       window.appData = {
         ...window.appData,
-        collection: 'flags',
+        collection: "flags",
         setCollection: () => {},
-    theme,
-    setTheme
+        theme,
+        setTheme,
       };
 
       // Load saved game stats
-      const savedStats = localStorage.getItem('flagQuizStats');
+      const savedStats = localStorage.getItem("flagQuizStats");
       if (savedStats) {
         try {
           const loadedStats = JSON.parse(savedStats);
@@ -113,77 +129,91 @@
             correct: loadedStats.correct || 0,
             wrong: loadedStats.wrong || 0,
             total: loadedStats.total || 0,
-            skipped: loadedStats.skipped || 0
+            skipped: loadedStats.skipped || 0,
           };
         } catch (e) {
-          console.error('Error loading game stats:', e);
+          console.error("Error loading game stats:", e);
         }
       }
 
       // Load wrong answers tracking
-      const savedWrongAnswers = localStorage.getItem('flagQuizWrongAnswers');
+      const savedWrongAnswers = localStorage.getItem("flagQuizWrongAnswers");
       if (savedWrongAnswers) {
         try {
           const loadedWrongAnswers = JSON.parse(savedWrongAnswers);
           wrongAnswers = new Map(Object.entries(loadedWrongAnswers));
         } catch (e) {
-          console.error('Error loading wrong answers:', e);
+          console.error("Error loading wrong answers:", e);
         }
       }
 
       // Load correct answers tracking
-      const savedCorrectAnswers = localStorage.getItem('flagQuizCorrectAnswers');
+      const savedCorrectAnswers = localStorage.getItem(
+        "flagQuizCorrectAnswers",
+      );
       if (savedCorrectAnswers) {
         try {
           const loadedCorrectAnswers = JSON.parse(savedCorrectAnswers);
           correctAnswers = new Map(Object.entries(loadedCorrectAnswers));
         } catch (e) {
-          console.error('Error loading correct answers:', e);
+          console.error("Error loading correct answers:", e);
         }
       }
 
       // Load settings
-      const savedSettings = localStorage.getItem('flagQuizSettings');
+      const savedSettings = localStorage.getItem("flagQuizSettings");
       if (savedSettings) {
         try {
           const settings = JSON.parse(savedSettings);
-          autoAdvance = settings.autoAdvance !== undefined ? settings.autoAdvance : true;
-          focusWrongAnswers = settings.focusWrongAnswers !== undefined ? settings.focusWrongAnswers : false;
-          reduceCorrectAnswers = settings.reduceCorrectAnswers !== undefined ? settings.reduceCorrectAnswers : false;
-          soundEnabled = settings.soundEnabled !== undefined ? settings.soundEnabled : true;
-          sessionLength = settings.sessionLength !== undefined ? settings.sessionLength : 10;
+          autoAdvance =
+            settings.autoAdvance !== undefined ? settings.autoAdvance : true;
+          focusWrongAnswers =
+            settings.focusWrongAnswers !== undefined
+              ? settings.focusWrongAnswers
+              : false;
+          reduceCorrectAnswers =
+            settings.reduceCorrectAnswers !== undefined
+              ? settings.reduceCorrectAnswers
+              : false;
+          soundEnabled =
+            settings.soundEnabled !== undefined ? settings.soundEnabled : true;
+          sessionLength =
+            settings.sessionLength !== undefined ? settings.sessionLength : 10;
         } catch (e) {
-          console.error('Error loading settings:', e);
+          console.error("Error loading settings:", e);
         }
       }
     }
 
-  await loadFlags();
-  settingsLoaded = true;
+    await loadFlags();
+    settingsLoaded = true;
 
-  // Load or initialize session
-  loadSessionState();
+    // Load or initialize session
+    loadSessionState();
   });
 
   function applyTheme(theme) {
     let effectiveTheme = theme;
-    if (theme === 'system') {
-      effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    if (theme === "system") {
+      effectiveTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
     }
-    document.documentElement.setAttribute('data-theme', effectiveTheme);
+    document.documentElement.setAttribute("data-theme", effectiveTheme);
     document.documentElement.className = effectiveTheme;
   }
 
   async function loadFlags() {
     try {
-      const response = await fetch('/data/flags.json');
+      const response = await fetch("/data/flags.json");
       const data = await response.json();
       // Filter for only country flags (has "Country" tag) and ensure we have country name
-      flags = data.filter(flag =>
-        !flag.disable &&
-        flag.meta?.country &&
-        flag.tags &&
-        flag.tags.includes('Country')
+      flags = data.filter(
+        (flag) =>
+          !flag.disable &&
+          flag.meta?.country &&
+          flag.tags &&
+          flag.tags.includes("Country"),
       );
 
       // Remove duplicates based on country name
@@ -201,7 +231,7 @@
       flags = uniqueFlags;
       console.log(`Loaded ${flags.length} unique country flags for quiz`);
     } catch (error) {
-      console.error('Error loading flags:', error);
+      console.error("Error loading flags:", error);
       flags = [];
     }
   }
@@ -218,13 +248,13 @@
       gameState,
       quizSubpage,
       sessionStartTime,
-      questionKey
+      questionKey,
     };
-    localStorage.setItem('flagQuizSessionState', JSON.stringify(sessionState));
+    localStorage.setItem("flagQuizSessionState", JSON.stringify(sessionState));
   }
 
   function loadSessionState() {
-    const savedState = localStorage.getItem('flagQuizSessionState');
+    const savedState = localStorage.getItem("flagQuizSessionState");
     if (savedState) {
       try {
         const state = JSON.parse(savedState);
@@ -232,13 +262,19 @@
           // Restore session
           sessionInProgress = state.sessionInProgress;
           currentSessionQuestions = state.currentSessionQuestions || 0;
-          sessionStats = state.sessionStats || { correct: 0, wrong: 0, skipped: 0, total: 0, sessionLength };
+          sessionStats = state.sessionStats || {
+            correct: 0,
+            wrong: 0,
+            skipped: 0,
+            total: 0,
+            sessionLength,
+          };
           score = state.score || { correct: 0, total: 0, skipped: 0 };
           currentQuestion = state.currentQuestion;
           selectedAnswer = state.selectedAnswer;
           showResult = state.showResult || false;
-          gameState = state.gameState || 'question';
-          quizSubpage = 'quiz';
+          gameState = state.gameState || "question";
+          quizSubpage = "quiz";
           sessionStartTime = state.sessionStartTime;
           questionKey = state.questionKey || 0;
 
@@ -251,38 +287,38 @@
           }
         } else {
           // No active session, show welcome page
-          quizSubpage = 'welcome';
-          gameState = 'welcome';
+          quizSubpage = "welcome";
+          gameState = "welcome";
         }
       } catch (e) {
-        console.error('Error loading session state:', e);
-        quizSubpage = 'welcome';
-        gameState = 'welcome';
+        console.error("Error loading session state:", e);
+        quizSubpage = "welcome";
+        gameState = "welcome";
       }
     } else {
       // No saved state, show welcome page
-      quizSubpage = 'welcome';
-      gameState = 'welcome';
+      quizSubpage = "welcome";
+      gameState = "welcome";
     }
   }
 
   function clearSessionState() {
-    localStorage.removeItem('flagQuizSessionState');
+    localStorage.removeItem("flagQuizSessionState");
   }
 
   function generateQuestion() {
     if (flags.length < 4) {
-      console.error('Not enough flags to generate question');
+      console.error("Not enough flags to generate question");
       return;
     }
 
-  gameState = 'question';
-  showResult = false;
-  selectedAnswer = null;
-  correctAnswer = null;
-  answered = false;
-  showCountryInfo = false;
-  showResultCountryInfo = false;
+    gameState = "question";
+    showResult = false;
+    selectedAnswer = null;
+    correctAnswer = null;
+    answered = false;
+    showCountryInfo = false;
+    showResultCountryInfo = false;
 
     // Cancel any active auto-advance timer
     cancelAutoAdvanceTimer();
@@ -291,30 +327,31 @@
     questionKey++;
 
     // Remove focus from any previously focused buttons and ensure clean state
-    if (typeof document !== 'undefined') {
+    if (typeof document !== "undefined") {
       // Use setTimeout to ensure DOM updates are complete
       setTimeout(() => {
         const activeElement = document.activeElement;
-        if (activeElement && activeElement.tagName === 'BUTTON') {
+        if (activeElement && activeElement.tagName === "BUTTON") {
           activeElement.blur();
         }
         // Force removal of any residual button states
-        const buttons = document.querySelectorAll('.option, .flag-option');
-        buttons.forEach(button => {
+        const buttons = document.querySelectorAll(".option, .flag-option");
+        buttons.forEach((button) => {
           button.blur();
-          button.classList.remove('selected', 'correct', 'wrong');
+          button.classList.remove("selected", "correct", "wrong");
         });
       }, 0);
     }
 
     // Randomly choose question type
-    questionType = Math.random() < 0.5 ? 'flag-to-country' : 'country-to-flag';
+    questionType = Math.random() < 0.5 ? "flag-to-country" : "country-to-flag";
 
     // Pick correct answer with adaptive learning settings
     let correctFlag;
 
     // Simple fallback to avoid uninitialized variable errors
-    if (settingsLoaded && (focusWrongAnswers || reduceCorrectAnswers)) { // Re-enable adaptive learning
+    if (settingsLoaded && (focusWrongAnswers || reduceCorrectAnswers)) {
+      // Re-enable adaptive learning
       // Create weighted array based on learning settings
       const weightedFlags = [];
       for (const flag of flags) {
@@ -342,7 +379,8 @@
       }
 
       if (weightedFlags.length > 0) {
-        correctFlag = weightedFlags[Math.floor(Math.random() * weightedFlags.length)];
+        correctFlag =
+          weightedFlags[Math.floor(Math.random() * weightedFlags.length)];
       } else {
         correctFlag = flags[Math.floor(Math.random() * flags.length)];
       }
@@ -376,25 +414,29 @@
     }
 
     // Combine correct and wrong answers
-    const allOptions = [correctFlag, ...wrongOptions].sort(() => Math.random() - 0.5);    currentQuestion = {
+    const allOptions = [correctFlag, ...wrongOptions].sort(
+      () => Math.random() - 0.5,
+    );
+    currentQuestion = {
       type: questionType,
       correct: correctFlag,
       options: allOptions,
-      correctIndex: allOptions.indexOf(correctFlag)
+      correctIndex: allOptions.indexOf(correctFlag),
     };
 
-    console.log('Generated question:', currentQuestion);
+    console.log("Generated question:", currentQuestion);
 
     // Save session state
     saveSessionState();
-  }  function selectAnswer(index) {
-    if (gameState !== 'question') return;
+  }
+  function selectAnswer(index) {
+    if (gameState !== "question") return;
 
     selectedAnswer = index;
     correctAnswer = currentQuestion.correctIndex;
-  showResult = true;
-  gameState = 'answered';
-  answered = true;
+    showResult = true;
+    gameState = "answered";
+    answered = true;
 
     // Update score
     score.total++;
@@ -416,13 +458,23 @@
         const flagName = currentQuestion.correct.name;
         correctAnswers.set(flagName, (correctAnswers.get(flagName) || 0) + 1);
         // Save correct answers to localStorage
-        localStorage.setItem('flagQuizCorrectAnswers', JSON.stringify(Object.fromEntries(correctAnswers)));
+        localStorage.setItem(
+          "flagQuizCorrectAnswers",
+          JSON.stringify(Object.fromEntries(correctAnswers)),
+        );
       }
 
       // Track continent progress for correct answers
       if (achievementsComponent && currentQuestion.correct?.tags) {
-        const continent = currentQuestion.correct.tags.find(tag =>
-          ['Europe', 'Asia', 'Africa', 'North America', 'South America', 'Oceania'].includes(tag)
+        const continent = currentQuestion.correct.tags.find((tag) =>
+          [
+            "Europe",
+            "Asia",
+            "Africa",
+            "North America",
+            "South America",
+            "Oceania",
+          ].includes(tag),
         );
         if (continent) {
           achievementsComponent.incrementContinentProgress(continent);
@@ -446,7 +498,10 @@
         const flagName = currentQuestion.correct.name;
         wrongAnswers.set(flagName, (wrongAnswers.get(flagName) || 0) + 1);
         // Save wrong answers to localStorage
-        localStorage.setItem('flagQuizWrongAnswers', JSON.stringify(Object.fromEntries(wrongAnswers)));
+        localStorage.setItem(
+          "flagQuizWrongAnswers",
+          JSON.stringify(Object.fromEntries(wrongAnswers)),
+        );
       }
 
       if (achievementsComponent) {
@@ -456,7 +511,7 @@
     gameStats.total++;
 
     // Save stats to localStorage
-    localStorage.setItem('flagQuizStats', JSON.stringify(gameStats));
+    localStorage.setItem("flagQuizStats", JSON.stringify(gameStats));
 
     // Check for new achievements
     if (achievementsComponent) {
@@ -469,7 +524,7 @@
     // Check if session is complete
     if (currentSessionQuestions >= sessionLength) {
       // Session complete - show results and return to welcome page
-      gameState = 'session-complete';
+      gameState = "session-complete";
       sessionStats.sessionLength = sessionLength;
 
       if (autoAdvance) {
@@ -489,8 +544,9 @@
       const delay = isCorrect ? 2000 : 4000; // Double delay for wrong answers
       startAutoAdvanceTimer(delay);
     }
-  }  function skipQuestion() {
-    if (gameState !== 'question') return;
+  }
+  function skipQuestion() {
+    if (gameState !== "question") return;
 
     // Update skip counters
     score.skipped++;
@@ -511,14 +567,14 @@
     }
 
     // Save stats to localStorage
-    localStorage.setItem('flagQuizStats', JSON.stringify(gameStats));
+    localStorage.setItem("flagQuizStats", JSON.stringify(gameStats));
 
     // Save session state
     saveSessionState();
 
     // Check if session is complete
     if (currentSessionQuestions >= sessionLength) {
-      gameState = 'session-complete';
+      gameState = "session-complete";
       sessionStats.sessionLength = sessionLength;
       endSession();
       return;
@@ -564,15 +620,21 @@
     // Reset session data
     score = { correct: 0, total: 0, skipped: 0 };
     currentSessionQuestions = 0;
-    sessionStats = { correct: 0, wrong: 0, skipped: 0, total: 0, sessionLength };
+    sessionStats = {
+      correct: 0,
+      wrong: 0,
+      skipped: 0,
+      total: 0,
+      sessionLength,
+    };
     sessionInProgress = true;
     sessionStartTime = Date.now();
     showSessionResults = false;
     sessionRestoredFromReload = false; // Reset reload flag for new sessions
 
     // Switch to quiz subpage
-    quizSubpage = 'quiz';
-    gameState = 'loading';
+    quizSubpage = "quiz";
+    gameState = "loading";
 
     // Generate first question
     generateQuestion();
@@ -584,8 +646,8 @@
     clearSessionState();
 
     // Switch to welcome/stats page
-    quizSubpage = 'welcome';
-    gameState = 'welcome';
+    quizSubpage = "welcome";
+    gameState = "welcome";
     showSessionResults = true; // Show results on welcome page
   }
 
@@ -595,12 +657,12 @@
 
   function resetStats() {
     gameStats = { correct: 0, wrong: 0, total: 0, skipped: 0 };
-    localStorage.setItem('flagQuizStats', JSON.stringify(gameStats));
+    localStorage.setItem("flagQuizStats", JSON.stringify(gameStats));
   }
 
   function saveSettings() {
     const settings = { autoAdvance };
-    localStorage.setItem('flagQuizSettings', JSON.stringify(settings));
+    localStorage.setItem("flagQuizSettings", JSON.stringify(settings));
   }
 
   function toggleSettings() {
@@ -608,7 +670,13 @@
   }
 
   function handleSettingsChange(event) {
-    const { autoAdvance: newAutoAdvance, focusWrongAnswers: newFocusWrong, reduceCorrectAnswers: newReduceCorrect, soundEnabled: newSoundEnabled, sessionLength: newSessionLength } = event.detail;
+    const {
+      autoAdvance: newAutoAdvance,
+      focusWrongAnswers: newFocusWrong,
+      reduceCorrectAnswers: newReduceCorrect,
+      soundEnabled: newSoundEnabled,
+      sessionLength: newSessionLength,
+    } = event.detail;
     autoAdvance = newAutoAdvance;
     focusWrongAnswers = newFocusWrong;
     reduceCorrectAnswers = newReduceCorrect;
@@ -633,16 +701,22 @@
     score = { correct: 0, total: 0, skipped: 0 };
     currentStreak = 0;
     currentSessionQuestions = 0;
-    sessionStats = { correct: 0, wrong: 0, skipped: 0, total: 0, sessionLength };
-    localStorage.setItem('flagQuizStats', JSON.stringify(gameStats));
+    sessionStats = {
+      correct: 0,
+      wrong: 0,
+      skipped: 0,
+      total: 0,
+      sessionLength,
+    };
+    localStorage.setItem("flagQuizStats", JSON.stringify(gameStats));
 
     // Reset wrong answers tracking
     wrongAnswers = new Map();
-    localStorage.removeItem('flagQuizWrongAnswers');
+    localStorage.removeItem("flagQuizWrongAnswers");
 
     // Reset correct answers tracking
     correctAnswers = new Map();
-    localStorage.removeItem('flagQuizCorrectAnswers');
+    localStorage.removeItem("flagQuizCorrectAnswers");
 
     // Reset achievements if component is available
     if (achievementsComponent) {
@@ -657,7 +731,7 @@
   }
 
   function handleSessionGoToGames() {
-    window.location.hash = '#/game';
+    window.location.hash = "#/game";
   }
 
   function handleSessionClose() {
@@ -673,8 +747,32 @@
     generateQuestion();
   }
 
+  function handleActionButtonClick(event) {
+    const { action } = event.detail;
+
+    switch (action) {
+      case "startQuiz":
+        startNewSession();
+        break;
+      case "playAgain":
+        startNewSession();
+        break;
+      case "goToGames":
+        window.location.hash = "#/game";
+        break;
+      case "openSettings":
+        showSettings = true;
+        break;
+      case "endSession":
+        endSession();
+        break;
+      default:
+        console.warn("Unknown action:", action);
+    }
+  }
+
   function getCountryName(flag) {
-    return flag.meta?.country || flag.name || 'Unknown';
+    return flag.meta?.country || flag.name || "Unknown";
   }
 
   function getFlagImage(flag) {
@@ -696,7 +794,8 @@
     if (!soundEnabled) return;
 
     try {
-      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      const audioContext = new (window.AudioContext ||
+        window.webkitAudioContext)();
       const oscillator = audioContext.createOscillator();
       const gainNode = audioContext.createGain();
 
@@ -705,16 +804,25 @@
 
       // Pleasant ascending tone for correct answer
       oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime); // C5
-      oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime + 0.1); // E5
-      oscillator.frequency.setValueAtTime(783.99, audioContext.currentTime + 0.2); // G5
+      oscillator.frequency.setValueAtTime(
+        659.25,
+        audioContext.currentTime + 0.1,
+      ); // E5
+      oscillator.frequency.setValueAtTime(
+        783.99,
+        audioContext.currentTime + 0.2,
+      ); // G5
 
       gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
-      gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.4);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.001,
+        audioContext.currentTime + 0.4,
+      );
 
       oscillator.start(audioContext.currentTime);
       oscillator.stop(audioContext.currentTime + 0.4);
     } catch (e) {
-      console.log('Audio not supported:', e);
+      console.log("Audio not supported:", e);
     }
   }
 
@@ -722,7 +830,8 @@
     if (!soundEnabled) return;
 
     try {
-      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      const audioContext = new (window.AudioContext ||
+        window.webkitAudioContext)();
       const oscillator = audioContext.createOscillator();
       const gainNode = audioContext.createGain();
 
@@ -734,12 +843,15 @@
       oscillator.frequency.setValueAtTime(300, audioContext.currentTime + 0.15);
 
       gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
-      gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.3);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.001,
+        audioContext.currentTime + 0.3,
+      );
 
       oscillator.start(audioContext.currentTime);
       oscillator.stop(audioContext.currentTime + 0.3);
     } catch (e) {
-      console.log('Audio not supported:', e);
+      console.log("Audio not supported:", e);
     }
   }
 </script>
@@ -753,9 +865,9 @@
   {setTheme}
   {gameStats}
   {achievementCount}
-  sessionStats={sessionStats}
-  isQuizActive={sessionInProgress && quizSubpage === 'quiz'}
-  onAchievementClick={() => showAchievements = true}
+  {sessionStats}
+  isQuizActive={sessionInProgress && quizSubpage === "quiz"}
+  onAchievementClick={() => (showAchievements = true)}
 />
 
 <main class="flag-quiz">
@@ -783,31 +895,44 @@
       {gameStats}
       {currentStreak}
       show={showAchievements}
-      on:close={() => showAchievements = false}
+      on:close={() => (showAchievements = false)}
       on:achievementsUnlocked={handleAchievementsUnlocked}
     />
 
-    {#if quizSubpage === 'welcome'}
+    {#if quizSubpage === "welcome"}
       <!-- Welcome/Stats Subpage -->
       <WelcomeStats
         {gameStats}
         {sessionStats}
         {sessionLength}
-        showSessionResults={showSessionResults}
+        {showSessionResults}
         on:startQuiz={startNewSession}
-        on:openSettings={() => showSettings = true}
-        on:closeResults={() => showSessionResults = false}
+        on:openSettings={() => (showSettings = true)}
+        on:closeResults={() => (showSessionResults = false)}
       />
-    {:else if quizSubpage === 'quiz'}
+
+      <ActionButtons
+        mode={showSessionResults ? "results" : "welcome"}
+        sessionInfo={showSessionResults
+          ? ""
+          : `${sessionLength} questions per quiz`}
+        hasPlayedBefore={gameStats.total > 0}
+        on:action={handleActionButtonClick}
+      />
+    {:else if quizSubpage === "quiz"}
       <!-- Quiz Subpage -->
-      {#if gameState === 'loading'}
+      {#if gameState === "loading"}
         <div class="loading">Loading flags...</div>
       {:else if currentQuestion}
         <div class="question-container">
           <div class="question-header">
-            <div class="question-number">Question {currentSessionQuestions + 1} from {sessionLength}</div>
+            <div class="question-number">
+              Question {currentSessionQuestions + 1} from {sessionLength}
+            </div>
             <div class="question-type">
-              {currentQuestion.type === 'flag-to-country' ? 'Which country does this flag belong to?' : 'Which flag belongs to this country?'}
+              {currentQuestion.type === "flag-to-country"
+                ? "Which country does this flag belong to?"
+                : "Which flag belongs to this country?"}
             </div>
           </div>
 
@@ -816,30 +941,58 @@
             {#if showResult}
               <div class="result">
                 {#if selectedAnswer === correctAnswer}
-                  <div class="correct-result"><span class="result-icon smile-icon"><InlineSvg path="/icons/smile-squre.svg" alt="Correct" /></span> Correct!</div>
+                  <div class="correct-result">
+                    <span class="result-icon smile-icon"
+                      ><InlineSvg
+                        path="/icons/smile-squre.svg"
+                        alt="Correct"
+                      /></span
+                    > Correct!
+                  </div>
                 {:else}
                   <div class="wrong-result">
-                    <span class="result-icon sad-icon"><InlineSvg path="/icons/sad-square.svg" alt="Wrong" /></span> Wrong!
-                    {#if currentQuestion.type === 'flag-to-country'}
+                    <span class="result-icon sad-icon"
+                      ><InlineSvg
+                        path="/icons/sad-square.svg"
+                        alt="Wrong"
+                      /></span
+                    >
+                    Wrong!
+                    {#if currentQuestion.type === "flag-to-country"}
                       <span class="result-country-info">
-                        The correct answer is: {getCountryName(currentQuestion.correct)}.
+                        The correct answer is: {getCountryName(
+                          currentQuestion.correct,
+                        )}.
                         <button
                           class="info-icon result-info-btn"
                           aria-label="Show country info"
                           aria-expanded={showResultCountryInfo}
-                          on:click={() => (showResultCountryInfo = !showResultCountryInfo)}
-                          on:keydown={(e) => { if (e.key === 'Escape') showResultCountryInfo = false; }}
+                          on:click={() =>
+                            (showResultCountryInfo = !showResultCountryInfo)}
+                          on:keydown={(e) => {
+                            if (e.key === "Escape")
+                              showResultCountryInfo = false;
+                          }}
                         >
-                          <InlineSvg path="/icons/info-square.svg" alt="Country info" />
+                          <InlineSvg
+                            path="/icons/info-square.svg"
+                            alt="Country info"
+                          />
                         </button>
                         {#if showResultCountryInfo}
-                          <div class="info-tooltip result-info-tooltip" role="dialog" aria-live="polite">
+                          <div
+                            class="info-tooltip result-info-tooltip"
+                            role="dialog"
+                            aria-live="polite"
+                          >
                             {currentQuestion.correct.meta.description}
                           </div>
                         {/if}
                       </span>
                     {:else}
-                      You selected the {getCountryName(currentQuestion.options[selectedAnswer])} flag.
+                      You selected the {getCountryName(
+                        currentQuestion.options[selectedAnswer],
+                      )} flag.
                     {/if}
                   </div>
                 {/if}
@@ -847,9 +1000,13 @@
             {/if}
           </div>
 
-          {#if currentQuestion.type === 'flag-to-country'}
+          {#if currentQuestion.type === "flag-to-country"}
             <div class="flag-display">
-              <img src={getFlagImage(currentQuestion.correct)} alt="Flag" class="quiz-flag" />
+              <img
+                src={getFlagImage(currentQuestion.correct)}
+                alt="Flag"
+                class="quiz-flag"
+              />
             </div>
 
             <div class="options" key={questionKey}>
@@ -858,9 +1015,11 @@
                   class="option"
                   class:selected={selectedAnswer === index}
                   class:correct={showResult && index === correctAnswer}
-                  class:wrong={showResult && selectedAnswer === index && index !== correctAnswer}
+                  class:wrong={showResult &&
+                    selectedAnswer === index &&
+                    index !== correctAnswer}
                   on:click={() => selectAnswer(index)}
-                  disabled={gameState === 'answered'}
+                  disabled={gameState === "answered"}
                 >
                   {getCountryName(option)}
                 </button>
@@ -876,9 +1035,14 @@
                     aria-label="Show country info"
                     aria-expanded={showCountryInfo}
                     on:click={() => (showCountryInfo = !showCountryInfo)}
-                    on:keydown={(e) => { if (e.key === 'Escape') showCountryInfo = false; }}
+                    on:keydown={(e) => {
+                      if (e.key === "Escape") showCountryInfo = false;
+                    }}
                   >
-                    <InlineSvg path="/icons/info-square.svg" alt="Country info" />
+                    <InlineSvg
+                      path="/icons/info-square.svg"
+                      alt="Country info"
+                    />
                   </button>
                   {#if showCountryInfo}
                     <div class="info-tooltip" role="dialog" aria-live="polite">
@@ -895,38 +1059,59 @@
                   class="flag-option"
                   class:selected={selectedAnswer === index}
                   class:correct={showResult && index === correctAnswer}
-                  class:wrong={showResult && selectedAnswer === index && index !== correctAnswer}
+                  class:wrong={showResult &&
+                    selectedAnswer === index &&
+                    index !== correctAnswer}
                   on:click={() => selectAnswer(index)}
-                  disabled={gameState === 'answered'}
+                  disabled={gameState === "answered"}
                 >
-                  <img src={getFlagImage(option)} alt={getCountryName(option)} class="option-flag" />
+                  <img
+                    src={getFlagImage(option)}
+                    alt={getCountryName(option)}
+                    class="option-flag"
+                  />
                 </button>
               {/each}
             </div>
           {/if}
 
-          {#if gameState === 'question'}
-            <button class="btn btn-skip btn-next-full" on:click={skipQuestion}>Skip Question</button>
-          {:else if (!autoAdvance && gameState === 'answered') || (autoAdvance && gameState === 'answered' && sessionRestoredFromReload)}
-            <button class="btn btn-primary btn-next-full" on:click={nextQuestion}>Next Question →</button>
+          {#if gameState === "question"}
+            <button class="btn btn-skip btn-next-full" on:click={skipQuestion}
+              >Skip Question</button
+            >
+          {:else if (!autoAdvance && gameState === "answered") || (autoAdvance && gameState === "answered" && sessionRestoredFromReload)}
+            <button
+              class="btn btn-primary btn-next-full"
+              on:click={nextQuestion}>Next Question →</button
+            >
           {/if}
 
           <!-- Auto-advance timer display -->
-          {#if autoAdvance && gameState === 'answered' && timerProgress > 0 && !sessionRestoredFromReload}
+          {#if autoAdvance && gameState === "answered" && timerProgress > 0 && !sessionRestoredFromReload}
             <div class="auto-advance-timer">
               <div class="timer-bar">
-                <div class="timer-progress" style="width: {timerProgress}%"></div>
+                <div
+                  class="timer-progress"
+                  style="width: {timerProgress}%"
+                ></div>
               </div>
-              <span class="timer-text">Next question in {Math.ceil((timerDuration - (timerProgress / 100 * timerDuration)) / 1000)}s</span>
+              <span class="timer-text"
+                >Next question in {Math.ceil(
+                  (timerDuration - (timerProgress / 100) * timerDuration) /
+                    1000,
+                )}s</span
+              >
             </div>
           {/if}
         </div>
       {/if}
 
-      <div class="controls">
-        <button class="btn btn-secondary" on:click={endSession}>End Quiz</button>
-        <button class="btn btn-secondary" on:click={toggleSettings} title="Settings">Settings</button>
-      </div>
+      <ActionButtons
+        mode="quiz"
+        sessionInfo="Question {currentSessionQuestions +
+          1} from {sessionLength}"
+        on:action={handleActionButtonClick}
+      />
     {/if}
   </div>
 </main>
@@ -1007,7 +1192,7 @@
   .country-display {
     text-align: center;
     margin-bottom: 2rem;
-  position: relative;
+    position: relative;
   }
 
   .country-name {
@@ -1057,7 +1242,7 @@
     width: min(90vw, 520px);
     max-height: 40vh;
     overflow: auto;
-    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     z-index: 5;
     text-align: left;
     font-size: 0.95rem;
@@ -1268,13 +1453,6 @@
     max-width: 300px;
   }
 
-  .controls {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    flex-wrap: wrap;
-  }
-
   .btn {
     padding: 0.75rem 1.5rem;
     border: none;
@@ -1302,16 +1480,6 @@
     text-align: center;
   }
 
-  .btn-secondary {
-    background: var(--color-bg-secondary);
-    color: var(--color-text-primary);
-    border: 1px solid var(--color-border);
-  }
-
-  .btn-secondary:hover {
-    background: var(--color-bg-hover);
-  }
-
   .btn-skip {
     background: var(--color-text-secondary);
     color: var(--color-bg-primary);
@@ -1377,13 +1545,5 @@
       left: 50%;
       transform: translateX(-50%);
     }
-
-    .controls {
-      flex-direction: row;
-      flex-wrap: nowrap;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-      justify-content: center;
-    }
   }
 </style>