From 3dbb3753197833a5074d888c8149a65bda1ed39a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 10 Jan 2026 09:38:47 +0000
Subject: [PATCH 1/3] Initial plan


From 2d0bcee1b5cfaaf1ba8221d44d8eafa1540970e7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 10 Jan 2026 09:43:06 +0000
Subject: [PATCH 2/3] Add Pokemon Identification Game with full functionality

Co-authored-by: LFDave <36726874+LFDave@users.noreply.github.com>
---
 README.md         |   20 +
 data/pokemon.json |  153 +++++++
 pokemon-game.html | 1030 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 1203 insertions(+)
 create mode 100644 data/pokemon.json
 create mode 100644 pokemon-game.html

diff --git a/README.md b/README.md
index 2d59ba5..2895c27 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,22 @@
 # small-apps
 small apps for various use cases
+
+## Apps Available
+
+### 🎮 Pokémon Identification Game
+A fun, kid-friendly browser game where players identify Pokémon from images and earn coins and medals!
+
+**Features:**
+- 151 Generation 1 Pokémon to identify
+- Earn coins for correct answers
+- Unlock achievements and medals
+- Track your streak and progress
+- Dark mode with high contrast accessibility
+- Fully keyboard accessible
+- Mobile-friendly design
+- Progress saved locally (no sign-up required)
+
+**Play:** [pokemon-game.html](pokemon-game.html)
+
+### ➕➖ Math Trainer Apps
+Simple math practice games for addition and subtraction.
diff --git a/data/pokemon.json b/data/pokemon.json
new file mode 100644
index 0000000..2cf9af2
--- /dev/null
+++ b/data/pokemon.json
@@ -0,0 +1,153 @@
+[
+  {"id": 1, "name": "Bulbasaur", "imageUrl": "https://img.pokemondb.net/artwork/large/bulbasaur.jpg"},
+  {"id": 2, "name": "Ivysaur", "imageUrl": "https://img.pokemondb.net/artwork/large/ivysaur.jpg"},
+  {"id": 3, "name": "Venusaur", "imageUrl": "https://img.pokemondb.net/artwork/large/venusaur.jpg"},
+  {"id": 4, "name": "Charmander", "imageUrl": "https://img.pokemondb.net/artwork/large/charmander.jpg"},
+  {"id": 5, "name": "Charmeleon", "imageUrl": "https://img.pokemondb.net/artwork/large/charmeleon.jpg"},
+  {"id": 6, "name": "Charizard", "imageUrl": "https://img.pokemondb.net/artwork/large/charizard.jpg"},
+  {"id": 7, "name": "Squirtle", "imageUrl": "https://img.pokemondb.net/artwork/large/squirtle.jpg"},
+  {"id": 8, "name": "Wartortle", "imageUrl": "https://img.pokemondb.net/artwork/large/wartortle.jpg"},
+  {"id": 9, "name": "Blastoise", "imageUrl": "https://img.pokemondb.net/artwork/large/blastoise.jpg"},
+  {"id": 10, "name": "Caterpie", "imageUrl": "https://img.pokemondb.net/artwork/large/caterpie.jpg"},
+  {"id": 11, "name": "Metapod", "imageUrl": "https://img.pokemondb.net/artwork/large/metapod.jpg"},
+  {"id": 12, "name": "Butterfree", "imageUrl": "https://img.pokemondb.net/artwork/large/butterfree.jpg"},
+  {"id": 13, "name": "Weedle", "imageUrl": "https://img.pokemondb.net/artwork/large/weedle.jpg"},
+  {"id": 14, "name": "Kakuna", "imageUrl": "https://img.pokemondb.net/artwork/large/kakuna.jpg"},
+  {"id": 15, "name": "Beedrill", "imageUrl": "https://img.pokemondb.net/artwork/large/beedrill.jpg"},
+  {"id": 16, "name": "Pidgey", "imageUrl": "https://img.pokemondb.net/artwork/large/pidgey.jpg"},
+  {"id": 17, "name": "Pidgeotto", "imageUrl": "https://img.pokemondb.net/artwork/large/pidgeotto.jpg"},
+  {"id": 18, "name": "Pidgeot", "imageUrl": "https://img.pokemondb.net/artwork/large/pidgeot.jpg"},
+  {"id": 19, "name": "Rattata", "imageUrl": "https://img.pokemondb.net/artwork/large/rattata.jpg"},
+  {"id": 20, "name": "Raticate", "imageUrl": "https://img.pokemondb.net/artwork/large/raticate.jpg"},
+  {"id": 21, "name": "Spearow", "imageUrl": "https://img.pokemondb.net/artwork/large/spearow.jpg"},
+  {"id": 22, "name": "Fearow", "imageUrl": "https://img.pokemondb.net/artwork/large/fearow.jpg"},
+  {"id": 23, "name": "Ekans", "imageUrl": "https://img.pokemondb.net/artwork/large/ekans.jpg"},
+  {"id": 24, "name": "Arbok", "imageUrl": "https://img.pokemondb.net/artwork/large/arbok.jpg"},
+  {"id": 25, "name": "Pikachu", "imageUrl": "https://img.pokemondb.net/artwork/large/pikachu.jpg"},
+  {"id": 26, "name": "Raichu", "imageUrl": "https://img.pokemondb.net/artwork/large/raichu.jpg"},
+  {"id": 27, "name": "Sandshrew", "imageUrl": "https://img.pokemondb.net/artwork/large/sandshrew.jpg"},
+  {"id": 28, "name": "Sandslash", "imageUrl": "https://img.pokemondb.net/artwork/large/sandslash.jpg"},
+  {"id": 29, "name": "Nidoran-f", "imageUrl": "https://img.pokemondb.net/artwork/large/nidoran-f.jpg"},
+  {"id": 30, "name": "Nidorina", "imageUrl": "https://img.pokemondb.net/artwork/large/nidorina.jpg"},
+  {"id": 31, "name": "Nidoqueen", "imageUrl": "https://img.pokemondb.net/artwork/large/nidoqueen.jpg"},
+  {"id": 32, "name": "Nidoran-m", "imageUrl": "https://img.pokemondb.net/artwork/large/nidoran-m.jpg"},
+  {"id": 33, "name": "Nidorino", "imageUrl": "https://img.pokemondb.net/artwork/large/nidorino.jpg"},
+  {"id": 34, "name": "Nidoking", "imageUrl": "https://img.pokemondb.net/artwork/large/nidoking.jpg"},
+  {"id": 35, "name": "Clefairy", "imageUrl": "https://img.pokemondb.net/artwork/large/clefairy.jpg"},
+  {"id": 36, "name": "Clefable", "imageUrl": "https://img.pokemondb.net/artwork/large/clefable.jpg"},
+  {"id": 37, "name": "Vulpix", "imageUrl": "https://img.pokemondb.net/artwork/large/vulpix.jpg"},
+  {"id": 38, "name": "Ninetales", "imageUrl": "https://img.pokemondb.net/artwork/large/ninetales.jpg"},
+  {"id": 39, "name": "Jigglypuff", "imageUrl": "https://img.pokemondb.net/artwork/large/jigglypuff.jpg"},
+  {"id": 40, "name": "Wigglytuff", "imageUrl": "https://img.pokemondb.net/artwork/large/wigglytuff.jpg"},
+  {"id": 41, "name": "Zubat", "imageUrl": "https://img.pokemondb.net/artwork/large/zubat.jpg"},
+  {"id": 42, "name": "Golbat", "imageUrl": "https://img.pokemondb.net/artwork/large/golbat.jpg"},
+  {"id": 43, "name": "Oddish", "imageUrl": "https://img.pokemondb.net/artwork/large/oddish.jpg"},
+  {"id": 44, "name": "Gloom", "imageUrl": "https://img.pokemondb.net/artwork/large/gloom.jpg"},
+  {"id": 45, "name": "Vileplume", "imageUrl": "https://img.pokemondb.net/artwork/large/vileplume.jpg"},
+  {"id": 46, "name": "Paras", "imageUrl": "https://img.pokemondb.net/artwork/large/paras.jpg"},
+  {"id": 47, "name": "Parasect", "imageUrl": "https://img.pokemondb.net/artwork/large/parasect.jpg"},
+  {"id": 48, "name": "Venonat", "imageUrl": "https://img.pokemondb.net/artwork/large/venonat.jpg"},
+  {"id": 49, "name": "Venomoth", "imageUrl": "https://img.pokemondb.net/artwork/large/venomoth.jpg"},
+  {"id": 50, "name": "Diglett", "imageUrl": "https://img.pokemondb.net/artwork/large/diglett.jpg"},
+  {"id": 51, "name": "Dugtrio", "imageUrl": "https://img.pokemondb.net/artwork/large/dugtrio.jpg"},
+  {"id": 52, "name": "Meowth", "imageUrl": "https://img.pokemondb.net/artwork/large/meowth.jpg"},
+  {"id": 53, "name": "Persian", "imageUrl": "https://img.pokemondb.net/artwork/large/persian.jpg"},
+  {"id": 54, "name": "Psyduck", "imageUrl": "https://img.pokemondb.net/artwork/large/psyduck.jpg"},
+  {"id": 55, "name": "Golduck", "imageUrl": "https://img.pokemondb.net/artwork/large/golduck.jpg"},
+  {"id": 56, "name": "Mankey", "imageUrl": "https://img.pokemondb.net/artwork/large/mankey.jpg"},
+  {"id": 57, "name": "Primeape", "imageUrl": "https://img.pokemondb.net/artwork/large/primeape.jpg"},
+  {"id": 58, "name": "Growlithe", "imageUrl": "https://img.pokemondb.net/artwork/large/growlithe.jpg"},
+  {"id": 59, "name": "Arcanine", "imageUrl": "https://img.pokemondb.net/artwork/large/arcanine.jpg"},
+  {"id": 60, "name": "Poliwag", "imageUrl": "https://img.pokemondb.net/artwork/large/poliwag.jpg"},
+  {"id": 61, "name": "Poliwhirl", "imageUrl": "https://img.pokemondb.net/artwork/large/poliwhirl.jpg"},
+  {"id": 62, "name": "Poliwrath", "imageUrl": "https://img.pokemondb.net/artwork/large/poliwrath.jpg"},
+  {"id": 63, "name": "Abra", "imageUrl": "https://img.pokemondb.net/artwork/large/abra.jpg"},
+  {"id": 64, "name": "Kadabra", "imageUrl": "https://img.pokemondb.net/artwork/large/kadabra.jpg"},
+  {"id": 65, "name": "Alakazam", "imageUrl": "https://img.pokemondb.net/artwork/large/alakazam.jpg"},
+  {"id": 66, "name": "Machop", "imageUrl": "https://img.pokemondb.net/artwork/large/machop.jpg"},
+  {"id": 67, "name": "Machoke", "imageUrl": "https://img.pokemondb.net/artwork/large/machoke.jpg"},
+  {"id": 68, "name": "Machamp", "imageUrl": "https://img.pokemondb.net/artwork/large/machamp.jpg"},
+  {"id": 69, "name": "Bellsprout", "imageUrl": "https://img.pokemondb.net/artwork/large/bellsprout.jpg"},
+  {"id": 70, "name": "Weepinbell", "imageUrl": "https://img.pokemondb.net/artwork/large/weepinbell.jpg"},
+  {"id": 71, "name": "Victreebel", "imageUrl": "https://img.pokemondb.net/artwork/large/victreebel.jpg"},
+  {"id": 72, "name": "Tentacool", "imageUrl": "https://img.pokemondb.net/artwork/large/tentacool.jpg"},
+  {"id": 73, "name": "Tentacruel", "imageUrl": "https://img.pokemondb.net/artwork/large/tentacruel.jpg"},
+  {"id": 74, "name": "Geodude", "imageUrl": "https://img.pokemondb.net/artwork/large/geodude.jpg"},
+  {"id": 75, "name": "Graveler", "imageUrl": "https://img.pokemondb.net/artwork/large/graveler.jpg"},
+  {"id": 76, "name": "Golem", "imageUrl": "https://img.pokemondb.net/artwork/large/golem.jpg"},
+  {"id": 77, "name": "Ponyta", "imageUrl": "https://img.pokemondb.net/artwork/large/ponyta.jpg"},
+  {"id": 78, "name": "Rapidash", "imageUrl": "https://img.pokemondb.net/artwork/large/rapidash.jpg"},
+  {"id": 79, "name": "Slowpoke", "imageUrl": "https://img.pokemondb.net/artwork/large/slowpoke.jpg"},
+  {"id": 80, "name": "Slowbro", "imageUrl": "https://img.pokemondb.net/artwork/large/slowbro.jpg"},
+  {"id": 81, "name": "Magnemite", "imageUrl": "https://img.pokemondb.net/artwork/large/magnemite.jpg"},
+  {"id": 82, "name": "Magneton", "imageUrl": "https://img.pokemondb.net/artwork/large/magneton.jpg"},
+  {"id": 83, "name": "Farfetchd", "imageUrl": "https://img.pokemondb.net/artwork/large/farfetchd.jpg"},
+  {"id": 84, "name": "Doduo", "imageUrl": "https://img.pokemondb.net/artwork/large/doduo.jpg"},
+  {"id": 85, "name": "Dodrio", "imageUrl": "https://img.pokemondb.net/artwork/large/dodrio.jpg"},
+  {"id": 86, "name": "Seel", "imageUrl": "https://img.pokemondb.net/artwork/large/seel.jpg"},
+  {"id": 87, "name": "Dewgong", "imageUrl": "https://img.pokemondb.net/artwork/large/dewgong.jpg"},
+  {"id": 88, "name": "Grimer", "imageUrl": "https://img.pokemondb.net/artwork/large/grimer.jpg"},
+  {"id": 89, "name": "Muk", "imageUrl": "https://img.pokemondb.net/artwork/large/muk.jpg"},
+  {"id": 90, "name": "Shellder", "imageUrl": "https://img.pokemondb.net/artwork/large/shellder.jpg"},
+  {"id": 91, "name": "Cloyster", "imageUrl": "https://img.pokemondb.net/artwork/large/cloyster.jpg"},
+  {"id": 92, "name": "Gastly", "imageUrl": "https://img.pokemondb.net/artwork/large/gastly.jpg"},
+  {"id": 93, "name": "Haunter", "imageUrl": "https://img.pokemondb.net/artwork/large/haunter.jpg"},
+  {"id": 94, "name": "Gengar", "imageUrl": "https://img.pokemondb.net/artwork/large/gengar.jpg"},
+  {"id": 95, "name": "Onix", "imageUrl": "https://img.pokemondb.net/artwork/large/onix.jpg"},
+  {"id": 96, "name": "Drowzee", "imageUrl": "https://img.pokemondb.net/artwork/large/drowzee.jpg"},
+  {"id": 97, "name": "Hypno", "imageUrl": "https://img.pokemondb.net/artwork/large/hypno.jpg"},
+  {"id": 98, "name": "Krabby", "imageUrl": "https://img.pokemondb.net/artwork/large/krabby.jpg"},
+  {"id": 99, "name": "Kingler", "imageUrl": "https://img.pokemondb.net/artwork/large/kingler.jpg"},
+  {"id": 100, "name": "Voltorb", "imageUrl": "https://img.pokemondb.net/artwork/large/voltorb.jpg"},
+  {"id": 101, "name": "Electrode", "imageUrl": "https://img.pokemondb.net/artwork/large/electrode.jpg"},
+  {"id": 102, "name": "Exeggcute", "imageUrl": "https://img.pokemondb.net/artwork/large/exeggcute.jpg"},
+  {"id": 103, "name": "Exeggutor", "imageUrl": "https://img.pokemondb.net/artwork/large/exeggutor.jpg"},
+  {"id": 104, "name": "Cubone", "imageUrl": "https://img.pokemondb.net/artwork/large/cubone.jpg"},
+  {"id": 105, "name": "Marowak", "imageUrl": "https://img.pokemondb.net/artwork/large/marowak.jpg"},
+  {"id": 106, "name": "Hitmonlee", "imageUrl": "https://img.pokemondb.net/artwork/large/hitmonlee.jpg"},
+  {"id": 107, "name": "Hitmonchan", "imageUrl": "https://img.pokemondb.net/artwork/large/hitmonchan.jpg"},
+  {"id": 108, "name": "Lickitung", "imageUrl": "https://img.pokemondb.net/artwork/large/lickitung.jpg"},
+  {"id": 109, "name": "Koffing", "imageUrl": "https://img.pokemondb.net/artwork/large/koffing.jpg"},
+  {"id": 110, "name": "Weezing", "imageUrl": "https://img.pokemondb.net/artwork/large/weezing.jpg"},
+  {"id": 111, "name": "Rhyhorn", "imageUrl": "https://img.pokemondb.net/artwork/large/rhyhorn.jpg"},
+  {"id": 112, "name": "Rhydon", "imageUrl": "https://img.pokemondb.net/artwork/large/rhydon.jpg"},
+  {"id": 113, "name": "Chansey", "imageUrl": "https://img.pokemondb.net/artwork/large/chansey.jpg"},
+  {"id": 114, "name": "Tangela", "imageUrl": "https://img.pokemondb.net/artwork/large/tangela.jpg"},
+  {"id": 115, "name": "Kangaskhan", "imageUrl": "https://img.pokemondb.net/artwork/large/kangaskhan.jpg"},
+  {"id": 116, "name": "Horsea", "imageUrl": "https://img.pokemondb.net/artwork/large/horsea.jpg"},
+  {"id": 117, "name": "Seadra", "imageUrl": "https://img.pokemondb.net/artwork/large/seadra.jpg"},
+  {"id": 118, "name": "Goldeen", "imageUrl": "https://img.pokemondb.net/artwork/large/goldeen.jpg"},
+  {"id": 119, "name": "Seaking", "imageUrl": "https://img.pokemondb.net/artwork/large/seaking.jpg"},
+  {"id": 120, "name": "Staryu", "imageUrl": "https://img.pokemondb.net/artwork/large/staryu.jpg"},
+  {"id": 121, "name": "Starmie", "imageUrl": "https://img.pokemondb.net/artwork/large/starmie.jpg"},
+  {"id": 122, "name": "Mr-mime", "imageUrl": "https://img.pokemondb.net/artwork/large/mr-mime.jpg"},
+  {"id": 123, "name": "Scyther", "imageUrl": "https://img.pokemondb.net/artwork/large/scyther.jpg"},
+  {"id": 124, "name": "Jynx", "imageUrl": "https://img.pokemondb.net/artwork/large/jynx.jpg"},
+  {"id": 125, "name": "Electabuzz", "imageUrl": "https://img.pokemondb.net/artwork/large/electabuzz.jpg"},
+  {"id": 126, "name": "Magmar", "imageUrl": "https://img.pokemondb.net/artwork/large/magmar.jpg"},
+  {"id": 127, "name": "Pinsir", "imageUrl": "https://img.pokemondb.net/artwork/large/pinsir.jpg"},
+  {"id": 128, "name": "Tauros", "imageUrl": "https://img.pokemondb.net/artwork/large/tauros.jpg"},
+  {"id": 129, "name": "Magikarp", "imageUrl": "https://img.pokemondb.net/artwork/large/magikarp.jpg"},
+  {"id": 130, "name": "Gyarados", "imageUrl": "https://img.pokemondb.net/artwork/large/gyarados.jpg"},
+  {"id": 131, "name": "Lapras", "imageUrl": "https://img.pokemondb.net/artwork/large/lapras.jpg"},
+  {"id": 132, "name": "Ditto", "imageUrl": "https://img.pokemondb.net/artwork/large/ditto.jpg"},
+  {"id": 133, "name": "Eevee", "imageUrl": "https://img.pokemondb.net/artwork/large/eevee.jpg"},
+  {"id": 134, "name": "Vaporeon", "imageUrl": "https://img.pokemondb.net/artwork/large/vaporeon.jpg"},
+  {"id": 135, "name": "Jolteon", "imageUrl": "https://img.pokemondb.net/artwork/large/jolteon.jpg"},
+  {"id": 136, "name": "Flareon", "imageUrl": "https://img.pokemondb.net/artwork/large/flareon.jpg"},
+  {"id": 137, "name": "Porygon", "imageUrl": "https://img.pokemondb.net/artwork/large/porygon.jpg"},
+  {"id": 138, "name": "Omanyte", "imageUrl": "https://img.pokemondb.net/artwork/large/omanyte.jpg"},
+  {"id": 139, "name": "Omastar", "imageUrl": "https://img.pokemondb.net/artwork/large/omastar.jpg"},
+  {"id": 140, "name": "Kabuto", "imageUrl": "https://img.pokemondb.net/artwork/large/kabuto.jpg"},
+  {"id": 141, "name": "Kabutops", "imageUrl": "https://img.pokemondb.net/artwork/large/kabutops.jpg"},
+  {"id": 142, "name": "Aerodactyl", "imageUrl": "https://img.pokemondb.net/artwork/large/aerodactyl.jpg"},
+  {"id": 143, "name": "Snorlax", "imageUrl": "https://img.pokemondb.net/artwork/large/snorlax.jpg"},
+  {"id": 144, "name": "Articuno", "imageUrl": "https://img.pokemondb.net/artwork/large/articuno.jpg"},
+  {"id": 145, "name": "Zapdos", "imageUrl": "https://img.pokemondb.net/artwork/large/zapdos.jpg"},
+  {"id": 146, "name": "Moltres", "imageUrl": "https://img.pokemondb.net/artwork/large/moltres.jpg"},
+  {"id": 147, "name": "Dratini", "imageUrl": "https://img.pokemondb.net/artwork/large/dratini.jpg"},
+  {"id": 148, "name": "Dragonair", "imageUrl": "https://img.pokemondb.net/artwork/large/dragonair.jpg"},
+  {"id": 149, "name": "Dragonite", "imageUrl": "https://img.pokemondb.net/artwork/large/dragonite.jpg"},
+  {"id": 150, "name": "Mewtwo", "imageUrl": "https://img.pokemondb.net/artwork/large/mewtwo.jpg"},
+  {"id": 151, "name": "Mew", "imageUrl": "https://img.pokemondb.net/artwork/large/mew.jpg"}
+]
diff --git a/pokemon-game.html b/pokemon-game.html
new file mode 100644
index 0000000..c56a064
--- /dev/null
+++ b/pokemon-game.html
@@ -0,0 +1,1030 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pokémon Identification Game</title>
+    <style>
+        :root {
+            --bg-primary: #1a1a2e;
+            --bg-secondary: #16213e;
+            --bg-tertiary: #0f1419;
+            --accent-primary: #ffd700;
+            --accent-secondary: #ff6b6b;
+            --text-primary: #ffffff;
+            --text-secondary: #b8b8b8;
+            --correct: #4caf50;
+            --incorrect: #f44336;
+            --button-hover: #2d3561;
+            --border-radius: 12px;
+            --spacing-unit: 8px;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Accessibility */
+        *:focus-visible {
+            outline: 3px solid var(--accent-primary);
+            outline-offset: 2px;
+        }
+
+        button:focus-visible,
+        .option-btn:focus-visible {
+            outline: 3px solid var(--accent-primary);
+            outline-offset: 2px;
+        }
+
+        /* Header */
+        header {
+            background: var(--bg-secondary);
+            padding: calc(var(--spacing-unit) * 2);
+            text-align: center;
+            border-bottom: 2px solid var(--accent-primary);
+        }
+
+        h1 {
+            font-size: 1.8rem;
+            color: var(--accent-primary);
+            margin-bottom: calc(var(--spacing-unit) / 2);
+        }
+
+        .subtitle {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+        }
+
+        /* Main Container */
+        main {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            max-width: 800px;
+            width: 100%;
+            margin: 0 auto;
+            padding: calc(var(--spacing-unit) * 2);
+        }
+
+        /* Screen Management */
+        .screen {
+            display: none;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        .screen.active {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        /* Home Screen */
+        .home-screen {
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            gap: calc(var(--spacing-unit) * 3);
+        }
+
+        .logo {
+            font-size: 4rem;
+            margin-bottom: calc(var(--spacing-unit) * 2);
+        }
+
+        .button-group {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing-unit) * 2);
+            width: 100%;
+            max-width: 300px;
+        }
+
+        /* Buttons */
+        button, .btn {
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            border: 2px solid var(--accent-primary);
+            padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
+            font-size: 1.1rem;
+            font-weight: 600;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            transition: all 0.2s ease;
+            min-height: 48px;
+        }
+
+        button:hover:not(:disabled), .btn:hover:not(:disabled) {
+            background: var(--button-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
+        }
+
+        button:active:not(:disabled), .btn:active:not(:disabled) {
+            transform: translateY(0);
+        }
+
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        button.primary {
+            background: var(--accent-primary);
+            color: var(--bg-primary);
+            border-color: var(--accent-primary);
+        }
+
+        button.primary:hover:not(:disabled) {
+            background: #ffed4e;
+        }
+
+        /* Game Screen */
+        .game-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: calc(var(--spacing-unit) * 3);
+            flex-wrap: wrap;
+            gap: calc(var(--spacing-unit) * 2);
+        }
+
+        .stats {
+            display: flex;
+            gap: calc(var(--spacing-unit) * 3);
+            flex-wrap: wrap;
+        }
+
+        .stat-item {
+            display: flex;
+            align-items: center;
+            gap: calc(var(--spacing-unit));
+            background: var(--bg-secondary);
+            padding: calc(var(--spacing-unit)) calc(var(--spacing-unit) * 2);
+            border-radius: calc(var(--border-radius) / 2);
+        }
+
+        .stat-icon {
+            font-size: 1.5rem;
+        }
+
+        .stat-value {
+            font-weight: 700;
+            color: var(--accent-primary);
+        }
+
+        /* Pokemon Display */
+        .pokemon-display {
+            background: var(--bg-secondary);
+            border-radius: var(--border-radius);
+            padding: calc(var(--spacing-unit) * 3);
+            margin-bottom: calc(var(--spacing-unit) * 3);
+            text-align: center;
+        }
+
+        .pokemon-image-container {
+            position: relative;
+            width: 100%;
+            max-width: 400px;
+            margin: 0 auto calc(var(--spacing-unit) * 2);
+            aspect-ratio: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .pokemon-image {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            border-radius: var(--border-radius);
+        }
+
+        .loading-skeleton {
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
+            background-size: 200% 100%;
+            animation: loading 1.5s ease-in-out infinite;
+            border-radius: var(--border-radius);
+        }
+
+        @keyframes loading {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+
+        /* Options */
+        .options-container {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing-unit) * 2);
+            margin-bottom: calc(var(--spacing-unit) * 2);
+        }
+
+        .option-btn {
+            background: var(--bg-secondary);
+            border: 2px solid var(--accent-primary);
+            color: var(--text-primary);
+            padding: calc(var(--spacing-unit) * 2);
+            font-size: 1.2rem;
+            font-weight: 600;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            transition: all 0.2s ease;
+            min-height: 56px;
+            text-align: center;
+        }
+
+        .option-btn:hover:not(:disabled) {
+            background: var(--button-hover);
+            transform: scale(1.02);
+        }
+
+        .option-btn:disabled {
+            cursor: not-allowed;
+        }
+
+        .option-btn.correct {
+            background: var(--correct);
+            border-color: var(--correct);
+            animation: celebrate 0.5s ease;
+        }
+
+        .option-btn.incorrect {
+            background: var(--incorrect);
+            border-color: var(--incorrect);
+            animation: shake 0.5s ease;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .option-btn.correct,
+            .option-btn.incorrect {
+                animation: none;
+            }
+        }
+
+        @keyframes celebrate {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-10px); }
+            75% { transform: translateX(10px); }
+        }
+
+        /* Feedback Area */
+        .feedback-area {
+            min-height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+
+        .feedback-message {
+            padding: calc(var(--spacing-unit) * 2);
+            border-radius: var(--border-radius);
+            text-align: center;
+        }
+
+        .feedback-message.correct {
+            background: rgba(76, 175, 80, 0.2);
+            color: var(--correct);
+        }
+
+        .feedback-message.incorrect {
+            background: rgba(244, 67, 54, 0.2);
+            color: var(--incorrect);
+        }
+
+        /* Medals Screen */
+        .medals-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: calc(var(--spacing-unit) * 2);
+            margin-top: calc(var(--spacing-unit) * 2);
+        }
+
+        .medal-card {
+            background: var(--bg-secondary);
+            border: 2px solid var(--accent-primary);
+            border-radius: var(--border-radius);
+            padding: calc(var(--spacing-unit) * 2);
+            text-align: center;
+            transition: transform 0.2s ease;
+        }
+
+        .medal-card:hover {
+            transform: translateY(-4px);
+        }
+
+        .medal-card.locked {
+            opacity: 0.5;
+            border-color: var(--text-secondary);
+        }
+
+        .medal-icon {
+            font-size: 3rem;
+            margin-bottom: calc(var(--spacing-unit));
+        }
+
+        .medal-name {
+            font-weight: 700;
+            margin-bottom: calc(var(--spacing-unit) / 2);
+            color: var(--accent-primary);
+        }
+
+        .medal-card.locked .medal-name {
+            color: var(--text-secondary);
+        }
+
+        .medal-description {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+
+        /* Settings Screen */
+        .settings-list {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing-unit) * 2);
+            margin: calc(var(--spacing-unit) * 3) 0;
+        }
+
+        .setting-item {
+            background: var(--bg-secondary);
+            border: 2px solid var(--accent-primary);
+            border-radius: var(--border-radius);
+            padding: calc(var(--spacing-unit) * 2);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .setting-label {
+            font-weight: 600;
+        }
+
+        .toggle-switch {
+            position: relative;
+            width: 60px;
+            height: 30px;
+        }
+
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: var(--bg-tertiary);
+            transition: 0.3s;
+            border-radius: 30px;
+        }
+
+        .toggle-slider:before {
+            position: absolute;
+            content: "";
+            height: 22px;
+            width: 22px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        input:checked + .toggle-slider {
+            background-color: var(--accent-primary);
+        }
+
+        input:checked + .toggle-slider:before {
+            transform: translateX(30px);
+        }
+
+        /* Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            justify-content: center;
+            align-items: center;
+            animation: fadeIn 0.3s ease;
+        }
+
+        .modal.active {
+            display: flex;
+        }
+
+        .modal-content {
+            background: var(--bg-secondary);
+            border: 3px solid var(--accent-primary);
+            border-radius: var(--border-radius);
+            padding: calc(var(--spacing-unit) * 4);
+            max-width: 500px;
+            width: 90%;
+            text-align: center;
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateY(-50px);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+
+        .modal-icon {
+            font-size: 4rem;
+            margin-bottom: calc(var(--spacing-unit) * 2);
+        }
+
+        .modal-title {
+            font-size: 1.8rem;
+            margin-bottom: calc(var(--spacing-unit) * 2);
+            color: var(--accent-primary);
+        }
+
+        .modal-message {
+            font-size: 1.1rem;
+            margin-bottom: calc(var(--spacing-unit) * 3);
+            color: var(--text-secondary);
+        }
+
+        .modal-buttons {
+            display: flex;
+            gap: calc(var(--spacing-unit) * 2);
+            justify-content: center;
+        }
+
+        /* Footer */
+        footer {
+            background: var(--bg-secondary);
+            padding: calc(var(--spacing-unit) * 2);
+            text-align: center;
+            border-top: 2px solid var(--accent-primary);
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            line-height: 1.5;
+        }
+
+        footer a {
+            color: var(--accent-primary);
+            text-decoration: none;
+        }
+
+        footer a:hover {
+            text-decoration: underline;
+        }
+
+        .footer-privacy {
+            margin-top: calc(var(--spacing-unit));
+            font-style: italic;
+        }
+
+        /* Responsive */
+        @media (max-width: 600px) {
+            h1 {
+                font-size: 1.5rem;
+            }
+
+            .stats {
+                gap: calc(var(--spacing-unit) * 1.5);
+            }
+
+            .option-btn {
+                font-size: 1.1rem;
+                padding: calc(var(--spacing-unit) * 1.5);
+            }
+
+            .medals-grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+        }
+
+        /* Screen reader only */
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border-width: 0;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>⚡ Pokémon Identification Game ⚡</h1>
+        <p class="subtitle">Can you name them all?</p>
+    </header>
+
+    <main>
+        <!-- Home Screen -->
+        <div id="homeScreen" class="screen active">
+            <div class="home-screen">
+                <div class="logo">🎮</div>
+                <h2>Welcome, Trainer!</h2>
+                <p>Test your Pokémon knowledge and earn coins!</p>
+                <div class="button-group">
+                    <button class="primary" onclick="startGame()">Play Game</button>
+                    <button onclick="showScreen('medalsScreen')">View Medals</button>
+                    <button onclick="showScreen('settingsScreen')">Settings</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Game Screen -->
+        <div id="gameScreen" class="screen">
+            <div class="game-header">
+                <div class="stats">
+                    <div class="stat-item">
+                        <span class="stat-icon">🪙</span>
+                        <span class="stat-value" id="coinsDisplay">0</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-icon">🔥</span>
+                        <span class="stat-value" id="streakDisplay">0</span>
+                    </div>
+                </div>
+                <button onclick="showScreen('medalsScreen')">🏅 Medals</button>
+            </div>
+
+            <div class="pokemon-display">
+                <div class="pokemon-image-container">
+                    <img id="pokemonImage" class="pokemon-image" alt="Mystery Pokémon" style="display: none;">
+                    <div id="imageLoading" class="loading-skeleton"></div>
+                </div>
+            </div>
+
+            <div class="options-container" id="optionsContainer">
+                <!-- Options will be dynamically inserted -->
+            </div>
+
+            <div class="feedback-area">
+                <div id="feedbackMessage" role="status" aria-live="polite"></div>
+            </div>
+
+            <button id="nextButton" onclick="nextQuestion()" style="display: none;">Next Pokémon →</button>
+            <button onclick="showScreen('homeScreen')">← Back to Home</button>
+        </div>
+
+        <!-- Medals Screen -->
+        <div id="medalsScreen" class="screen">
+            <h2>🏅 Your Medals</h2>
+            <div class="medals-grid" id="medalsGrid">
+                <!-- Medals will be dynamically inserted -->
+            </div>
+            <button onclick="showScreen('homeScreen')" style="margin-top: calc(var(--spacing-unit) * 3);">← Back to Home</button>
+        </div>
+
+        <!-- Settings Screen -->
+        <div id="settingsScreen" class="screen">
+            <h2>⚙️ Settings</h2>
+            <div class="settings-list">
+                <div class="setting-item">
+                    <div class="setting-label">Sound Effects</div>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="soundToggle" onchange="toggleSound()">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="setting-item">
+                    <div class="setting-label">Reduced Motion</div>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="motionToggle" onchange="toggleReducedMotion()">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+            </div>
+            <button onclick="confirmReset()" class="primary" style="margin-top: calc(var(--spacing-unit) * 3);">Reset Progress</button>
+            <button onclick="showScreen('homeScreen')" style="margin-top: calc(var(--spacing-unit) * 2);">← Back to Home</button>
+        </div>
+    </main>
+
+    <!-- Medal Unlock Modal -->
+    <div id="medalModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-icon" id="modalIcon">🏅</div>
+            <h2 class="modal-title" id="modalTitle">Medal Unlocked!</h2>
+            <p class="modal-message" id="modalMessage">You've earned a new medal!</p>
+            <div class="modal-buttons">
+                <button class="primary" onclick="closeMedalModal()">Awesome!</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Confirmation Modal -->
+    <div id="confirmModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-icon">⚠️</div>
+            <h2 class="modal-title">Reset Progress?</h2>
+            <p class="modal-message">This will delete all your coins, streaks, and medal progress. This cannot be undone.</p>
+            <div class="modal-buttons">
+                <button onclick="resetProgress()">Yes, Reset</button>
+                <button class="primary" onclick="closeConfirmModal()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <footer>
+        <p>Pokémon and Pokémon character names are trademarks of Nintendo / Game Freak / The Pokémon Company.</p>
+        <p>This is a fan-made educational project, non-commercial. Images from <a href="https://pokemondb.net" target="_blank" rel="noopener">Pokémon Database</a>.</p>
+        <p class="footer-privacy">🔒 No sign-up. No tracking. Progress saved on this device.</p>
+    </footer>
+
+    <script>
+        // Game State
+        let gameState = {
+            coins: 0,
+            totalAnswered: 0,
+            totalCorrect: 0,
+            currentStreak: 0,
+            bestStreak: 0,
+            medalsUnlocked: [],
+            correctlyIdentified: [],
+            recentPokemon: [],
+            soundEnabled: true,
+            reducedMotion: false
+        };
+
+        let pokemonData = [];
+        let currentPokemon = null;
+        let currentOptions = [];
+        let answeredCurrentQuestion = false;
+
+        // Medal Definitions
+        const medals = [
+            {id: 'coins_5', name: '5 Coins!', icon: '🪙', description: 'Earn 5 coins', check: () => gameState.coins >= 5},
+            {id: 'coins_10', name: '10 Coins!', icon: '💰', description: 'Earn 10 coins', check: () => gameState.coins >= 10},
+            {id: 'coins_20', name: '20 Coins!', icon: '🏆', description: 'Earn 20 coins', check: () => gameState.coins >= 20},
+            {id: 'streak_3', name: 'On a Roll', icon: '🔥', description: 'Get 3 correct in a row', check: () => gameState.currentStreak >= 3},
+            {id: 'answered_10', name: 'Explorer', icon: '🗺️', description: 'Answer 10 questions', check: () => gameState.totalAnswered >= 10},
+            {id: 'pikachu', name: 'Pikachu Spotted!', icon: '⚡', description: 'Correctly identify Pikachu', check: () => gameState.correctlyIdentified.includes(25)}
+        ];
+
+        // Initialize
+        async function init() {
+            loadProgress();
+            await loadPokemonData();
+            updateUI();
+            checkSystemPreferences();
+        }
+
+        // Load Pokemon Data
+        async function loadPokemonData() {
+            try {
+                const response = await fetch('data/pokemon.json');
+                pokemonData = await response.json();
+            } catch (error) {
+                console.error('Error loading Pokemon data:', error);
+                alert('Error loading game data. Please refresh the page.');
+            }
+        }
+
+        // Load Progress from localStorage
+        function loadProgress() {
+            const saved = localStorage.getItem('pokemonGame.progress.v1');
+            if (saved) {
+                try {
+                    const parsed = JSON.parse(saved);
+                    gameState = { ...gameState, ...parsed };
+                } catch (error) {
+                    console.error('Error loading progress:', error);
+                }
+            }
+        }
+
+        // Save Progress to localStorage
+        function saveProgress() {
+            try {
+                localStorage.setItem('pokemonGame.progress.v1', JSON.stringify(gameState));
+            } catch (error) {
+                console.error('Error saving progress:', error);
+            }
+        }
+
+        // Check system preferences
+        function checkSystemPreferences() {
+            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                gameState.reducedMotion = true;
+                document.getElementById('motionToggle').checked = true;
+            }
+        }
+
+        // Screen Management
+        function showScreen(screenId) {
+            document.querySelectorAll('.screen').forEach(screen => {
+                screen.classList.remove('active');
+            });
+            document.getElementById(screenId).classList.add('active');
+            
+            if (screenId === 'medalsScreen') {
+                renderMedals();
+            } else if (screenId === 'settingsScreen') {
+                document.getElementById('soundToggle').checked = gameState.soundEnabled;
+                document.getElementById('motionToggle').checked = gameState.reducedMotion;
+            }
+        }
+
+        // Start Game
+        function startGame() {
+            showScreen('gameScreen');
+            nextQuestion();
+        }
+
+        // Select Random Pokemon
+        function selectRandomPokemon() {
+            const availablePokemon = pokemonData.filter(p => 
+                !gameState.recentPokemon.includes(p.id)
+            );
+            
+            const pool = availablePokemon.length > 0 ? availablePokemon : pokemonData;
+            const pokemon = pool[Math.floor(Math.random() * pool.length)];
+            
+            // Update recent queue
+            gameState.recentPokemon.push(pokemon.id);
+            if (gameState.recentPokemon.length > 10) {
+                gameState.recentPokemon.shift();
+            }
+            
+            return pokemon;
+        }
+
+        // Generate Decoy Options
+        function generateDecoys(correctPokemon) {
+            const decoys = [];
+            const available = pokemonData.filter(p => p.id !== correctPokemon.id);
+            
+            while (decoys.length < 2 && available.length > 0) {
+                const index = Math.floor(Math.random() * available.length);
+                decoys.push(available[index]);
+                available.splice(index, 1);
+            }
+            
+            return decoys;
+        }
+
+        // Next Question
+        async function nextQuestion() {
+            answeredCurrentQuestion = false;
+            currentPokemon = selectRandomPokemon();
+            const decoys = generateDecoys(currentPokemon);
+            
+            // Shuffle options
+            currentOptions = [currentPokemon, ...decoys].sort(() => Math.random() - 0.5);
+            
+            // Reset UI
+            document.getElementById('feedbackMessage').innerHTML = '';
+            document.getElementById('nextButton').style.display = 'none';
+            
+            // Show loading skeleton
+            document.getElementById('pokemonImage').style.display = 'none';
+            document.getElementById('imageLoading').style.display = 'block';
+            
+            // Preload image
+            const img = new Image();
+            img.onload = () => {
+                document.getElementById('pokemonImage').src = currentPokemon.imageUrl;
+                document.getElementById('pokemonImage').alt = 'Mystery Pokémon';
+                document.getElementById('pokemonImage').style.display = 'block';
+                document.getElementById('imageLoading').style.display = 'none';
+            };
+            img.onerror = () => {
+                document.getElementById('imageLoading').innerHTML = '<p style="color: var(--text-secondary);">Image failed to load</p>';
+            };
+            img.src = currentPokemon.imageUrl;
+            
+            // Render options
+            renderOptions();
+        }
+
+        // Render Options
+        function renderOptions() {
+            const container = document.getElementById('optionsContainer');
+            container.innerHTML = '';
+            
+            currentOptions.forEach((pokemon, index) => {
+                const button = document.createElement('button');
+                button.className = 'option-btn';
+                button.textContent = pokemon.name;
+                button.onclick = () => selectAnswer(pokemon, button);
+                button.setAttribute('aria-label', `Option: ${pokemon.name}`);
+                container.appendChild(button);
+            });
+        }
+
+        // Select Answer
+        function selectAnswer(selectedPokemon, button) {
+            if (answeredCurrentQuestion) return;
+            
+            answeredCurrentQuestion = true;
+            gameState.totalAnswered++;
+            
+            // Disable all buttons
+            document.querySelectorAll('.option-btn').forEach(btn => {
+                btn.disabled = true;
+            });
+            
+            const isCorrect = selectedPokemon.id === currentPokemon.id;
+            const feedbackEl = document.getElementById('feedbackMessage');
+            
+            if (isCorrect) {
+                // Correct answer
+                button.classList.add('correct');
+                gameState.coins++;
+                gameState.totalCorrect++;
+                gameState.currentStreak++;
+                
+                if (gameState.currentStreak > gameState.bestStreak) {
+                    gameState.bestStreak = gameState.currentStreak;
+                }
+                
+                // Track correctly identified Pokemon
+                if (!gameState.correctlyIdentified.includes(currentPokemon.id)) {
+                    gameState.correctlyIdentified.push(currentPokemon.id);
+                }
+                
+                feedbackEl.innerHTML = `<div class="feedback-message correct">✅ Correct! It's ${currentPokemon.name}!</div>`;
+                
+                // Check for new medals
+                checkMedals();
+            } else {
+                // Incorrect answer
+                button.classList.add('incorrect');
+                gameState.currentStreak = 0;
+                
+                // Highlight correct answer
+                document.querySelectorAll('.option-btn').forEach(btn => {
+                    if (btn.textContent === currentPokemon.name) {
+                        btn.classList.add('correct');
+                    }
+                });
+                
+                feedbackEl.innerHTML = `<div class="feedback-message incorrect">❌ Not quite! It's ${currentPokemon.name}. Try again next time!</div>`;
+            }
+            
+            // Update image alt text now that answer is revealed
+            document.getElementById('pokemonImage').alt = `Pokémon: ${currentPokemon.name}`;
+            
+            updateUI();
+            saveProgress();
+            
+            // Show next button after delay
+            setTimeout(() => {
+                document.getElementById('nextButton').style.display = 'block';
+            }, 1000);
+        }
+
+        // Check for new medals
+        function checkMedals() {
+            medals.forEach(medal => {
+                if (!gameState.medalsUnlocked.includes(medal.id) && medal.check()) {
+                    gameState.medalsUnlocked.push(medal.id);
+                    showMedalUnlock(medal);
+                }
+            });
+        }
+
+        // Show Medal Unlock
+        function showMedalUnlock(medal) {
+            document.getElementById('modalIcon').textContent = medal.icon;
+            document.getElementById('modalTitle').textContent = medal.name;
+            document.getElementById('modalMessage').textContent = medal.description;
+            document.getElementById('medalModal').classList.add('active');
+        }
+
+        // Close Medal Modal
+        function closeMedalModal() {
+            document.getElementById('medalModal').classList.remove('active');
+        }
+
+        // Render Medals
+        function renderMedals() {
+            const container = document.getElementById('medalsGrid');
+            container.innerHTML = '';
+            
+            medals.forEach(medal => {
+                const isUnlocked = gameState.medalsUnlocked.includes(medal.id);
+                const card = document.createElement('div');
+                card.className = `medal-card ${isUnlocked ? '' : 'locked'}`;
+                card.innerHTML = `
+                    <div class="medal-icon">${isUnlocked ? medal.icon : '🔒'}</div>
+                    <div class="medal-name">${medal.name}</div>
+                    <div class="medal-description">${medal.description}</div>
+                `;
+                container.appendChild(card);
+            });
+        }
+
+        // Update UI
+        function updateUI() {
+            document.getElementById('coinsDisplay').textContent = gameState.coins;
+            document.getElementById('streakDisplay').textContent = gameState.currentStreak;
+        }
+
+        // Settings
+        function toggleSound() {
+            gameState.soundEnabled = document.getElementById('soundToggle').checked;
+            saveProgress();
+        }
+
+        function toggleReducedMotion() {
+            gameState.reducedMotion = document.getElementById('motionToggle').checked;
+            saveProgress();
+        }
+
+        // Confirm Reset
+        function confirmReset() {
+            document.getElementById('confirmModal').classList.add('active');
+        }
+
+        // Close Confirm Modal
+        function closeConfirmModal() {
+            document.getElementById('confirmModal').classList.remove('active');
+        }
+
+        // Reset Progress
+        function resetProgress() {
+            if (confirm('Are you absolutely sure? This cannot be undone.')) {
+                gameState = {
+                    coins: 0,
+                    totalAnswered: 0,
+                    totalCorrect: 0,
+                    currentStreak: 0,
+                    bestStreak: 0,
+                    medalsUnlocked: [],
+                    correctlyIdentified: [],
+                    recentPokemon: [],
+                    soundEnabled: true,
+                    reducedMotion: false
+                };
+                saveProgress();
+                updateUI();
+                closeConfirmModal();
+                showScreen('homeScreen');
+            }
+        }
+
+        // Keyboard Navigation
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                closeMedalModal();
+                closeConfirmModal();
+            }
+            
+            // Number keys for selecting options
+            if (document.getElementById('gameScreen').classList.contains('active') && !answeredCurrentQuestion) {
+                const num = parseInt(e.key);
+                if (num >= 1 && num <= 3) {
+                    const buttons = document.querySelectorAll('.option-btn');
+                    if (buttons[num - 1]) {
+                        buttons[num - 1].click();
+                    }
+                }
+            }
+        });
+
+        // Initialize on load
+        window.addEventListener('load', init);
+    </script>
+</body>
+</html>

From 479eccc57c8ef5373fd46074e889ff49c0e57e22 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 10 Jan 2026 13:49:16 +0000
Subject: [PATCH 3/3] Remove Back to Home button from game screen and fix Next
 button layout shift

Co-authored-by: LFDave <36726874+LFDave@users.noreply.github.com>
---
 pokemon-game.html | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/pokemon-game.html b/pokemon-game.html
index c56a064..6627ee0 100644
--- a/pokemon-game.html
+++ b/pokemon-game.html
@@ -603,8 +603,7 @@ <h2>Welcome, Trainer!</h2>
                 <div id="feedbackMessage" role="status" aria-live="polite"></div>
             </div>
 
-            <button id="nextButton" onclick="nextQuestion()" style="display: none;">Next Pokémon →</button>
-            <button onclick="showScreen('homeScreen')">← Back to Home</button>
+            <button id="nextButton" class="primary" onclick="nextQuestion()" disabled>Next Pokémon →</button>
         </div>
 
         <!-- Medals Screen -->
@@ -814,7 +813,7 @@ <h2 class="modal-title">Reset Progress?</h2>
             
             // Reset UI
             document.getElementById('feedbackMessage').innerHTML = '';
-            document.getElementById('nextButton').style.display = 'none';
+            document.getElementById('nextButton').disabled = true;
             
             // Show loading skeleton
             document.getElementById('pokemonImage').style.display = 'none';
@@ -910,7 +909,7 @@ <h2 class="modal-title">Reset Progress?</h2>
             
             // Show next button after delay
             setTimeout(() => {
-                document.getElementById('nextButton').style.display = 'block';
+                document.getElementById('nextButton').disabled = false;
             }, 1000);
         }