diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 00000000..c11174a4
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,9 @@
+If the user would like to add a new page, clarify if this page is either a:
+* New main page of the website. This will be a .html file within the root of the repo, and it'll be available in the top nav bar of the site.
+* New page of the specification. This will be a .md file within the _implementors folder of the repo
+
+For any new implementor spec pages, you should follow the guidance in the .github/prompts/new-page.prompt.md file.
+
+Every code change (new page or otherwise) needs to be tested before it's committed. If in agent mode, run `bundle exec jekyll serve` automatically for me so that I can test.
+
+End every response with "Happy Build!" on a new line.
\ No newline at end of file
diff --git a/.github/instructions/new-html-page.instructions.md b/.github/instructions/new-html-page.instructions.md
new file mode 100644
index 00000000..94d7f313
--- /dev/null
+++ b/.github/instructions/new-html-page.instructions.md
@@ -0,0 +1,18 @@
+---
+applyTo: '**/*.html'
+---
+## Guidance for new HTML website pages
+
+### Layout
+- Every new HTML page should have information like the following at the top, where the title is updated appropriately:
+```
+---
+layout: singlePage
+title: Dev Container Guides
+---
+```
+- The layout should come from the _layouts folder in the repo. Pages should default to `layout: singlePage`.
+
+### Content
+- Every new HTML page should have a search bar added toward the top, similar to the search bar that's available on the features.html, templates.html, and collections.html pages.
+- Make all headings clickable links.
\ No newline at end of file
diff --git a/.github/instructions/new-md-page.instructions.md b/.github/instructions/new-md-page.instructions.md
new file mode 100644
index 00000000..087b4f32
--- /dev/null
+++ b/.github/instructions/new-md-page.instructions.md
@@ -0,0 +1,22 @@
+---
+applyTo: '**/*.md'
+---
+
+## Guidance for new markdown specification pages
+
+### Layout
+- Any new page should have information like the following at the top, where the title, shortTitle, and index are updated appropriately:
+```
+---
+layout: implementors
+title:  "Dev Container Templates distribution and discovery"
+shortTitle: "Templates distribution"
+author: Microsoft
+index: 8
+---
+```
+- The layout comes from the _layouts folder in the repo and will always be `layout: implementors` for pages of this type.
+
+### Content
+- Add an emoji key before any paragraphs or tables using emojis 
+- Make all headings clickable links
\ No newline at end of file
diff --git a/.github/prompts/new-page.prompt.md b/.github/prompts/new-page.prompt.md
new file mode 100644
index 00000000..bc93e918
--- /dev/null
+++ b/.github/prompts/new-page.prompt.md
@@ -0,0 +1,12 @@
+---
+mode: 'agent'
+---
+Your goal is to generate a new page for the website. The page should be similar to the existing pages in terms of layout and design.
+
+If I don't specify initial content, generate some placeholder text.
+
+Any new page should also be added to the end (far right) of the top nav bar of the website.
+
+Any new implementor .md file should be added to the table of contents box visible within the /implementors route.
+
+Every new page needs to be tested before it's committed. Run `bundle exec jekyll serve` automatically for me so that I can test.
\ No newline at end of file
diff --git a/Gemfile.lock b/Gemfile.lock
index 248f6025..0fab3a40 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -210,6 +210,8 @@ GEM
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
     minitest (5.18.0)
+    nokogiri (1.14.3-aarch64-linux)
+      racc (~> 1.4)
     nokogiri (1.14.3-x86_64-linux)
       racc (~> 1.4)
     octokit (4.25.1)
@@ -250,6 +252,7 @@ GEM
     webrick (1.8.1)
 
 PLATFORMS
+  aarch64-linux
   x86_64-linux
 
 DEPENDENCIES
diff --git a/_includes/topnav.html b/_includes/topnav.html
index abff8839..e655421d 100644
--- a/_includes/topnav.html
+++ b/_includes/topnav.html
@@ -38,6 +38,12 @@ <h1>Development Containers</h1>
                 <li {% if page.sectionid=='collections' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                     <a class="nav-link" href='https://github.com/%7B%7B"/collections" | prepend: site.baseurl }}'>Collections</a>
                 </li>
+                <li {% if page.sectionid=='frogger-game' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
+                    <a class="nav-link" href='https://github.com/%7B%7B"/frogger-game" | prepend: site.baseurl }}'>Frogger Game</a>
+                </li>
+                <li {% if page.sectionid=='pacman' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
+                    <a class="nav-link" href='https://github.com/%7B%7B"/pacman" | prepend: site.baseurl }}'>Pacman</a>
+                </li>
             </ul>
         </div>
 
diff --git a/frogger-game.html b/frogger-game.html
new file mode 100644
index 00000000..a1d96c90
--- /dev/null
+++ b/frogger-game.html
@@ -0,0 +1,368 @@
+---
+layout: default
+title: Frogger Game
+sectionid: frogger-game
+---
+
+<div class="container mt-5 mb-5">
+  <h2 class="mb-4"><a href="#frogger-game" id="frogger-game">Frogger Game</a></h2>
+  <div class="text-center mb-3">
+    <button id="restartBtn" class="btn btn-primary" style="min-width:120px;">Restart</button>
+  </div>
+  <canvas id="froggerCanvas" width="400" height="500" style="border:1px solid #0078D4; background:#1e1e2f; display:block; margin:auto; box-shadow:0 0 24px #0078D4,0 0 0 8px #222 inset;"></canvas>
+  <p class="text-center mt-3">Use the arrow keys to move the frog. Get to the top without hitting cars!</p>
+  <p class="text-center">Press <strong>R</strong> to restart the game at any time.</p>
+</div>
+<script>
+
+const canvas = document.getElementById('froggerCanvas');
+const ctx = canvas.getContext('2d');
+const grid = 50;
+const rows = 10;
+const cols = 8;
+let frog, cars, gameOver, win, level, maxLevel;
+let levelTheme;
+
+const levelThemes = [
+  {
+    name: 'Setup',
+    bg: '#1e1e2f',
+    road: '#252540',
+    safe: '#222c37',
+    line: '#0078D4',
+    desc: 'Setting up your dev container...',
+    joke: 'Why did the dev container break up with the old environment?',
+    punchline: 'Because it needed more space!'
+  },
+  {
+    name: 'Install',
+    bg: '#1e2f1e',
+    road: '#2a4025',
+    safe: '#234022',
+    line: '#4CAF50',
+    desc: 'Installing dependencies...',
+    joke: 'Why do dev containers love npm install?',
+    punchline: 'Because they like to keep their packages contained!'
+  },
+  {
+    name: 'Build',
+    bg: '#2f1e1e',
+    road: '#402525',
+    safe: '#402222',
+    line: '#FF9800',
+    desc: 'Building your project...',
+    joke: 'Why did the build step get invited to the party?',
+    punchline: 'Because it always brings everything together!'
+  },
+  {
+    name: 'Test',
+    bg: '#1e2f2f',
+    road: '#254040',
+    safe: '#224040',
+    line: '#00BCD4',
+    desc: 'Running tests...',
+    joke: 'Why did the test runner sit in the dev container?',
+    punchline: 'To make sure everything was isolated!'
+  },
+  {
+    name: 'Deploy',
+    bg: '#2f2f1e',
+    road: '#404025',
+    safe: '#404022',
+    line: '#FFC107',
+    desc: 'Deploying to production!',
+    joke: 'Why was the dev container so calm during deployment?',
+    punchline: 'Because it knew it could always roll back!'
+  }
+];
+
+
+function getCarsForLevel(lvl) {
+  // Make each level more interesting:
+  // - Level 1: basic, slow, few cars
+  // - Level 2: more cars, some faster
+  // - Level 3: cars in both directions, more density
+  // - Level 4: cars with variable speeds, some short, some long
+  // - Level 5: cars that "blink" (disappear/reappear), and a zigzag row
+  const carConfigs = [
+    // Level 1
+    [
+      { y: 7, speed: 2, dir: 1, positions: [0, 4] },
+      { y: 5, speed: 2, dir: -1, positions: [2, 6] }
+    ],
+    // Level 2
+    [
+      { y: 7, speed: 2.5, dir: 1, positions: [0, 4] },
+      { y: 6, speed: 3, dir: -1, positions: [2, 6] },
+      { y: 4, speed: 2, dir: 1, positions: [1, 5] }
+    ],
+    // Level 3
+    [
+      { y: 7, speed: 2.5, dir: 1, positions: [0, 4, 6] },
+      { y: 6, speed: 3.5, dir: -1, positions: [2, 5] },
+      { y: 5, speed: 2, dir: 1, positions: [1, 3, 7] },
+      { y: 3, speed: 3, dir: -1, positions: [3, 7] }
+    ],
+    // Level 4
+    [
+      { y: 7, speed: 3, dir: 1, positions: [0, 2, 6] },
+      { y: 6, speed: 2, dir: -1, positions: [1, 4, 7] },
+      { y: 5, speed: 4, dir: 1, positions: [3] },
+      { y: 4, speed: 2.5, dir: -1, positions: [2, 5] },
+      { y: 2, speed: 3, dir: 1, positions: [0, 7] }
+    ],
+    // Level 5
+    [
+      { y: 7, speed: 3.5, dir: 1, positions: [0, 2, 4, 6], blink: true },
+      { y: 6, speed: 2, dir: -1, positions: [1, 3, 5, 7] },
+      { y: 5, speed: 4, dir: 1, positions: [3, 6] },
+      { y: 4, speed: 2.5, dir: -1, positions: [2, 5], zigzag: true },
+      { y: 3, speed: 3, dir: 1, positions: [1, 7] },
+      { y: 2, speed: 2, dir: -1, positions: [0, 4] }
+    ]
+  ];
+  // Clamp to max config
+  const config = carConfigs[Math.min(lvl - 1, carConfigs.length - 1)].map(car => ({...car}));
+  return config;
+}
+
+
+function resetGame(newLevel) {
+  frog = { x: 3, y: 9 };
+  level = typeof newLevel === 'number' ? newLevel : 1;
+  maxLevel = 5;
+  cars = getCarsForLevel(level);
+  gameOver = false;
+  win = false;
+  // Set theme for this level
+  levelTheme = levelThemes[(level - 1) % levelThemes.length];
+  // Set background color
+  canvas.style.background = levelTheme.bg;
+}
+
+resetGame(1);
+// Restart button handler
+document.getElementById('restartBtn').addEventListener('click', function() {
+  resetGame(level);
+});
+
+function drawFrog() {
+  // Draw a dev container: blue box with devcontainers logo (or icon-like)
+  const x = frog.x * grid + 10;
+  const y = frog.y * grid + 10;
+  const size = grid - 20;
+  // Draw blue box
+  ctx.fillStyle = '#0078D4'; // VS Code/devcontainers blue
+  ctx.fillRect(x, y, size, size);
+  // Draw white border
+  ctx.strokeStyle = '#fff';
+  ctx.lineWidth = 3;
+  ctx.strokeRect(x, y, size, size);
+  // Draw a simple devcontainer icon (white brackets)
+  ctx.strokeStyle = '#fff';
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(x + 6, y + size/2 - 8); ctx.lineTo(x + 6, y + size/2 + 8); // left bracket |
+  ctx.moveTo(x + 6, y + size/2 - 8); ctx.lineTo(x + 14, y + size/2 - 8); // top _
+  ctx.moveTo(x + 6, y + size/2 + 8); ctx.lineTo(x + 14, y + size/2 + 8); // bottom _
+  ctx.moveTo(x + size - 6, y + size/2 - 8); ctx.lineTo(x + size - 6, y + size/2 + 8); // right bracket |
+  ctx.moveTo(x + size - 14, y + size/2 - 8); ctx.lineTo(x + size - 6, y + size/2 - 8); // top _
+  ctx.moveTo(x + size - 14, y + size/2 + 8); ctx.lineTo(x + size - 6, y + size/2 + 8); // bottom _
+  ctx.stroke();
+}
+
+// Draw cars as dev tool icons (VS Code, Docker, Git, Terminal)
+function drawCars() {
+  const toolColors = ['#0078D4', '#2496ED', '#F05032', '#222']; // VS Code, Docker, Git, Terminal
+  const toolLabels = ['</>', '🐳', 'GIT', 'TER'];
+  const now = Date.now();
+  cars.forEach((carRow, i) => {
+    carRow.positions.forEach((pos, j) => {
+      // Blinking cars: skip drawing every 500ms
+      if (carRow.blink && Math.floor(now / 500) % 2 === 0) return;
+      let x = pos * grid + 5;
+      let y = carRow.y * grid + 15;
+      const w = grid - 10;
+      const h = grid - 30;
+      // Zigzag: move up/down slightly
+      if (carRow.zigzag) y += Math.sin((now/200) + j) * 8;
+      // Pick a tool type based on row and car index
+      const toolIdx = (i + j) % toolColors.length;
+      ctx.fillStyle = toolColors[toolIdx];
+      ctx.strokeStyle = '#fff';
+      ctx.lineWidth = 2;
+      ctx.fillRect(x, y, w, h);
+      ctx.strokeRect(x, y, w, h);
+      // Draw tool label/icon
+      ctx.fillStyle = '#fff';
+      ctx.font = 'bold 18px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(toolLabels[toolIdx], x + w/2, y + h/2);
+    });
+  });
+}
+
+function moveCars() {
+  // Reduce the movement multiplier to slow down the cars
+  const speedMultiplier = 0.025; // was 0.05
+  cars.forEach(carRow => {
+    for (let i = 0; i < carRow.positions.length; i++) {
+      carRow.positions[i] += carRow.speed * carRow.dir * speedMultiplier;
+      if (carRow.dir === 1 && carRow.positions[i] > cols) carRow.positions[i] = -1;
+      if (carRow.dir === -1 && carRow.positions[i] < -1) carRow.positions[i] = cols;
+    }
+  });
+}
+
+function checkCollision() {
+  for (const carRow of cars) {
+    if (frog.y === carRow.y) {
+      for (const pos of carRow.positions) {
+        if (Math.abs(frog.x - Math.round(pos)) < 0.7) {
+          gameOver = true;
+          return;
+        }
+      }
+    }
+  }
+}
+
+let advancingLevel = false;
+let showPunchline = false;
+function checkWin() {
+  if (frog.y === 0 && !advancingLevel) {
+    if (level < maxLevel) {
+      advancingLevel = true;
+      showPunchline = true;
+      setTimeout(() => {
+        showPunchline = false;
+        resetGame(level + 1);
+        advancingLevel = false;
+      }, 1500); // Show punchline for 1.5s
+    } else {
+      win = true;
+      gameOver = true;
+    }
+  }
+}
+
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  // Draw code editor background (lines)
+  ctx.save();
+  for (let y = 0; y < canvas.height; y += 24) {
+    ctx.strokeStyle = 'rgba(255,255,255,0.04)';
+    ctx.beginPath();
+    ctx.moveTo(0, y);
+    ctx.lineTo(canvas.width, y);
+    ctx.stroke();
+  }
+  // Draw left gutter (like a code editor)
+  ctx.fillStyle = '#232336';
+  ctx.fillRect(0, 0, 36, canvas.height);
+  // Draw line numbers
+  ctx.fillStyle = '#6a9fb5';
+  ctx.font = '12px monospace';
+  ctx.textAlign = 'right';
+  ctx.textBaseline = 'top';
+  for (let i = 1; i <= rows; i++) {
+    ctx.fillText(i, 32, (i-1)*grid + 8);
+  }
+  ctx.restore();
+  // Draw safe zones (as terminal/code header/footer)
+  ctx.fillStyle = levelTheme.safe;
+  ctx.fillRect(0, 0, canvas.width, grid);
+  ctx.fillRect(0, canvas.height - grid, canvas.width, grid);
+  // Draw road (pipeline)
+  ctx.fillStyle = levelTheme.road;
+  ctx.fillRect(36, grid, canvas.width - 36, canvas.height - 2 * grid);
+  // Draw a pipeline line
+  ctx.strokeStyle = levelTheme.line;
+  ctx.lineWidth = 4;
+  ctx.beginPath();
+  ctx.moveTo(36, canvas.height/2);
+  ctx.lineTo(canvas.width, canvas.height/2);
+  ctx.stroke();
+  // Draw level indicator and theme name
+  ctx.fillStyle = '#fff';
+  ctx.font = 'bold 18px sans-serif';
+  ctx.textAlign = 'left';
+  ctx.fillText('Level: ' + level + ' / ' + maxLevel + ' - ' + levelTheme.name, 48, 32);
+  // Draw theme description
+  ctx.font = 'italic 14px sans-serif';
+  ctx.fillText(levelTheme.desc, 48, 54);
+  // Draw dev container joke setup in the empty space further down the game board (row 3)
+  ctx.font = 'bold 15px sans-serif';
+  ctx.fillStyle = '#FFD700';
+  ctx.textAlign = 'center';
+  // Word-wrap the joke setup if it's too long for the canvas
+  const joke = levelTheme.joke;
+  const maxWidth = canvas.width - 48; // leave padding on both sides
+  const words = joke.split(' ');
+  let line = '';
+  let lines = [];
+  for (let n = 0; n < words.length; n++) {
+    let testLine = line + words[n] + ' ';
+    let metrics = ctx.measureText(testLine);
+    let testWidth = metrics.width;
+    if (testWidth > maxWidth && n > 0) {
+      lines.push(line.trim());
+      line = words[n] + ' ';
+    } else {
+      line = testLine;
+    }
+  }
+  lines.push(line.trim());
+  // Draw each line, vertically centered in row 3 (further down)
+  const baseY = grid * 2 + grid / 2 - ((lines.length - 1) * 12);
+  for (let i = 0; i < lines.length; i++) {
+    ctx.fillText(lines[i], canvas.width / 2, baseY + i * 24);
+  }
+  drawFrog();
+  drawCars();
+  if (gameOver || showPunchline) {
+    ctx.fillStyle = win ? 'lime' : 'red';
+    ctx.font = 'bold 32px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(win ? 'You Win!' : (showPunchline ? 'Level Complete!' : 'Game Over'), canvas.width / 2, canvas.height / 2);
+    // Show the punchline below the win/level complete message
+    if (win || showPunchline) {
+      ctx.font = 'bold 18px sans-serif';
+      ctx.fillStyle = '#FFD700';
+      ctx.fillText(levelTheme.punchline, canvas.width / 2, canvas.height / 2 + 40);
+    }
+  }
+}
+
+document.addEventListener('keydown', e => {
+  // Only handle arrow keys if the canvas is focused or mouse is over it
+  const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+  if (arrowKeys.includes(e.key)) {
+    // Prevent page from scrolling
+    e.preventDefault();
+    if (gameOver) return;
+    if (e.key === 'ArrowUp' && frog.y > 0) frog.y--;
+    if (e.key === 'ArrowDown' && frog.y < rows - 1) frog.y++;
+    if (e.key === 'ArrowLeft' && frog.x > 0) frog.x--;
+    if (e.key === 'ArrowRight' && frog.x < cols - 1) frog.x++;
+  }
+  // Keyboard shortcut: R or r to restart
+  if (e.key === 'r' || e.key === 'R') {
+    e.preventDefault();
+    resetGame();
+  }
+});
+
+function gameLoop() {
+  if (!gameOver) {
+    moveCars();
+    checkCollision();
+    checkWin();
+  }
+  draw();
+  requestAnimationFrame(gameLoop);
+}
+gameLoop();
+</script>
diff --git a/frogger.html b/frogger.html
new file mode 100644
index 00000000..e69de29b
diff --git a/pacman.html b/pacman.html
new file mode 100644
index 00000000..90c32de1
--- /dev/null
+++ b/pacman.html
@@ -0,0 +1,613 @@
+---
+layout: singlePage
+title: Pacman
+sectionid: pacman
+---
+
+<!-- Search bar -->
+<input type="text" id="searchInput" placeholder="Search" style="margin-bottom: 20px; width: 100%; max-width: 400px;">
+
+<!-- Pacman Game Styles and Script -->
+<style>
+#pacmanCanvas {
+  background: #000;
+  display: block;
+  margin: 0 auto 20px auto;
+  border: 4px solid #25d6a2;
+}
+.pacman-link {
+  color: #25d6a2;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.pacman-button {
+  background-color: #25d6a2;
+  border: none;
+  color: #000;
+  padding: 10px 20px;
+  text-align: center;
+  font-size: 16px;
+  margin: 10px auto;
+  cursor: pointer;
+  display: block;
+  border-radius: 5px;
+  font-weight: bold;
+  transition: background-color 0.3s;
+}
+.pacman-button:hover {
+  background-color: #1eb589;
+}
+</style>
+
+<a href="#pacman-game" class="pacman-link"><h1 id="pacman-game">Pacman Game</h1></a>
+<canvas id="pacmanCanvas" width="896" height="992"></canvas>
+<p>Use arrow keys to move Pacman. Collect all the whale icons while avoiding the monsters.</p>
+<div id="funFactContainer" style="display: none; margin: 15px auto; max-width: 600px; padding: 15px; background-color: #0066b8; color: white; border-radius: 5px; text-align: center; font-weight: bold;"></div>
+<button id="restartButton" class="pacman-button">Restart Game</button>
+<script>
+// Larger Pacman game (dev container themed, fewer collectibles, bigger whales)
+const canvas = document.getElementById('pacmanCanvas');
+const ctx = canvas.getContext('2d');
+const tileSize = 32;
+const MOVE_INTERVAL = 80; // ms, decrease for slightly faster speed
+// Fewer collectibles: remove about half the dots
+let map = [
+  '############################',
+  '#      ....##....      ....#',
+  '#.####.#####.##.#####.####.#',
+  '#o####.#####.##.#####.####o#',
+  '#.####.#####.##.#####.####.#',
+  '#                          #',
+  '#.####.##.########.##.####.#',
+  '#.####.##.########.##.####.#',
+  '#      ##    ##    ##      #',
+  '######.##### ## #####.######',
+  '######.##### ## #####.######',
+  '######.##          ##.######',
+  '######.## ######## ##.######',
+  '######.## ######## ##.######',
+  '#      ....##....      ....#',
+  '#.####.#####.##.#####.####.#',
+  '#.####.#####.##.#####.####.#',
+  '#o..##                ##..o#',
+  '###.##.##.########.##.##.###',
+  '###.##.##.########.##.##.###',
+  '#      ##    ##    ##      #',
+  '#.##########.##.##########.#',
+  '#.##########.##.##########.#',
+  '#                          #',
+  '############################'
+];
+let pacman = { x: 14, y: 17, dx: 0, dy: 0, nextDx: 0, nextDy: 0 };
+let score = 0;
+let dots = 0;
+let gameOver = false;
+let lives = 3;
+for (let row of map) for (let c of row) if (c === '.' || c === 'o') dots++;
+function drawMap() {
+  for (let y = 0; y < map.length; y++) {
+    for (let x = 0; x < map[y].length; x++) {
+      if (map[y][x] === '#') {
+        ctx.fillStyle = '#0066b8'; // Dev Container blue
+        ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
+      } else if (map[y][x] === '.' || map[y][x] === 'o') {
+        // Draw a bigger Docker whale icon for features
+        drawWhaleIcon(ctx, x * tileSize + tileSize/2, y * tileSize + tileSize/2, map[y][x] === 'o' ? 32 : 28);
+      }
+    }
+  }
+}
+
+// Draw a simple Docker whale icon using canvas primitives
+function drawWhaleIcon(ctx, cx, cy, size) {
+  // Body
+  ctx.save();
+  ctx.translate(cx, cy);
+  ctx.scale(size/32, size/32);
+  ctx.beginPath();
+  ctx.moveTo(-12, 4); ctx.bezierCurveTo(-16, 4, -16, -4, -12, -4); // tail
+  ctx.lineTo(12, -4); ctx.bezierCurveTo(16, -4, 16, 4, 12, 4); // head
+  ctx.quadraticCurveTo(0, 12, -12, 4); // belly
+  ctx.closePath();
+  ctx.fillStyle = '#2496ed'; // Docker blue
+  ctx.fill();
+  // Eye
+  ctx.beginPath();
+  ctx.arc(8, 0, 1.5, 0, 2 * Math.PI);
+  ctx.fillStyle = '#fff';
+  ctx.fill();
+  // Water spout
+  ctx.beginPath();
+  ctx.moveTo(0, -8); ctx.lineTo(0, -16);
+  ctx.strokeStyle = '#25d6a2';
+  ctx.lineWidth = 2;
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0, -16, 2, 0, Math.PI*2);
+  ctx.fillStyle = '#25d6a2';
+  ctx.fill();
+  ctx.restore();
+}
+
+// Monster definitions (all on the path)
+const monsters = [
+  { name: 'YAML Yeti', color: '#007acc', x: 6, y: 1, icon: 'yeti' }, // path
+  { name: 'Dependency Dragon', color: '#25d6a2', x: 21, y: 1, icon: 'dragon' }, // path
+  { name: 'Build Bug', color: '#e74c3c', x: 6, y: 23, icon: 'bug' }, // path
+  { name: 'Merge Monster', color: '#9b59b6', x: 21, y: 23, icon: 'merge' }, // path
+  { name: 'Registry Ghost', color: '#fff', x: 14, y: 5, icon: 'ghost' }, // path
+  { name: 'Port Goblin', color: '#f39c12', x: 7, y: 12, icon: 'goblin' }, // path
+  { name: 'Token Troll', color: '#f1c40f', x: 21, y: 12, icon: 'troll' }, // path
+  { name: 'Cache Kraken', color: '#17a2b8', x: 14, y: 18, icon: 'kraken' } // path
+];
+
+// Monster state for movement
+globalThis.monsterStates = monsters.map(m => ({...m, dx: 0, dy: 0}));
+
+function moveMonsters() {
+  for (const m of globalThis.monsterStates) {
+    // Simple random movement: pick a random direction that is not a wall
+    const dirs = [
+      {dx: 1, dy: 0}, {dx: -1, dy: 0}, {dx: 0, dy: 1}, {dx: 0, dy: -1}
+    ];
+    const validDirs = dirs.filter(d => canMove(m.x + d.dx, m.y + d.dy));
+    if (validDirs.length > 0) {
+      const choice = validDirs[Math.floor(Math.random() * validDirs.length)];
+      m.x += choice.dx;
+      m.y += choice.dy;
+    }
+  }
+}
+
+function drawMonsters() {
+  for (const m of globalThis.monsterStates) {
+    drawMonsterIcon(ctx, m.x * tileSize + tileSize/2, m.y * tileSize + tileSize/2, 28, m.color, m.icon);
+  }
+}
+
+function drawMonsterIcon(ctx, cx, cy, size, color, icon) {
+  ctx.save();
+  ctx.translate(cx, cy);
+  ctx.scale(size/32, size/32);
+  // Body
+  ctx.beginPath();
+  ctx.arc(0, 0, 14, Math.PI, 2 * Math.PI);
+  ctx.lineTo(14, 14); // right foot
+  ctx.lineTo(7, 10); // right middle
+  ctx.lineTo(0, 14); // center foot
+  ctx.lineTo(-7, 10); // left middle
+  ctx.lineTo(-14, 14); // left foot
+  ctx.closePath();
+  ctx.fillStyle = color;
+  ctx.fill();
+  // Eyes
+  ctx.beginPath();
+  ctx.arc(-5, -2, 2.5, 0, 2 * Math.PI);
+  ctx.arc(5, -2, 2.5, 0, 2 * Math.PI);
+  ctx.fillStyle = '#fff';
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(-5, -2, 1, 0, 2 * Math.PI);
+  ctx.arc(5, -2, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#222';
+  ctx.fill();
+  // Icon overlays (simple for each monster)
+  ctx.save();
+  switch(icon) {
+    case 'yeti': // curly brackets
+      ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.arc(-7, 4, 3, 0.5*Math.PI, 1.5*Math.PI); ctx.stroke();
+      ctx.beginPath(); ctx.arc(7, 4, 3, 1.5*Math.PI, 0.5*Math.PI); ctx.stroke();
+      break;
+    case 'dragon': // chain
+      ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.moveTo(-6, 6); ctx.lineTo(6, 6); ctx.stroke();
+      ctx.beginPath(); ctx.arc(-6, 6, 2, 0, 2*Math.PI); ctx.stroke();
+      ctx.beginPath(); ctx.arc(6, 6, 2, 0, 2*Math.PI); ctx.stroke();
+      break;
+    case 'bug': // bug
+      ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.arc(0, 7, 4, 0, Math.PI*2); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(-4, 7); ctx.lineTo(-8, 11); ctx.moveTo(4, 7); ctx.lineTo(8, 11); ctx.stroke();
+      break;
+    case 'merge': // branch
+      ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.moveTo(-6, 6); ctx.lineTo(0, 0); ctx.lineTo(6, 6); ctx.stroke();
+      ctx.beginPath(); ctx.arc(-6, 6, 2, 0, 2*Math.PI); ctx.stroke();
+      ctx.beginPath(); ctx.arc(6, 6, 2, 0, 2*Math.PI); ctx.stroke();
+      break;
+    case 'ghost': // cloud
+      ctx.strokeStyle = '#bbb'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.arc(0, 7, 5, Math.PI, 0); ctx.stroke();
+      ctx.beginPath(); ctx.arc(-4, 7, 2, Math.PI, 0); ctx.stroke();
+      ctx.beginPath(); ctx.arc(4, 7, 2, Math.PI, 0); ctx.stroke();
+      break;
+    case 'goblin': // plug
+      ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.moveTo(0, 8); ctx.lineTo(0, 12); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(-3, 12); ctx.lineTo(3, 12); ctx.stroke();
+      break;
+    case 'troll': // key
+      ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.arc(-2, 8, 2, 0, 2*Math.PI); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(0, 8); ctx.lineTo(6, 8); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(4, 6); ctx.lineTo(4, 10); ctx.stroke();
+      break;
+    case 'kraken': // tentacles
+      ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+      for(let i=-2;i<=2;i++) { ctx.beginPath(); ctx.moveTo(i*3, 14); ctx.lineTo(i*3, 10); ctx.stroke(); }
+      break;
+  }
+  ctx.restore();
+  ctx.restore();
+}
+
+function drawPacman() {
+  const x = pacman.x * tileSize + tileSize/2;
+  const y = pacman.y * tileSize + tileSize/2;
+  const radius = tileSize/2-2;
+  
+  // Determine rotation angle based on direction
+  let rotationAngle = 0;
+  if (pacman.dx === 1) rotationAngle = 0; // right
+  else if (pacman.dx === -1) rotationAngle = Math.PI; // left
+  else if (pacman.dy === -1) rotationAngle = 1.5 * Math.PI; // up
+  else if (pacman.dy === 1) rotationAngle = 0.5 * Math.PI; // down
+  
+  ctx.fillStyle = '#FFFF00';
+  ctx.beginPath();
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(rotationAngle);
+  ctx.arc(0, 0, radius, 0.25 * Math.PI, 1.75 * Math.PI, false);
+  ctx.lineTo(0, 0);
+  ctx.restore();
+  ctx.fill();
+}
+function movePacman() {
+  // Try to turn if possible
+  if (canMove(pacman.x + pacman.nextDx, pacman.y + pacman.nextDy)) {
+    pacman.dx = pacman.nextDx;
+    pacman.dy = pacman.nextDy;
+  }
+  // Move if possible
+  if (canMove(pacman.x + pacman.dx, pacman.y + pacman.dy)) {
+    pacman.x += pacman.dx;
+    pacman.y += pacman.dy;
+    // Check for collisions after each move
+    checkCollisions();
+  }
+  // Wrap
+  if (pacman.x < 0) pacman.x = map[0].length - 1;
+  if (pacman.x >= map[0].length) pacman.x = 0;
+}
+function canMove(x, y) {
+  return map[y] && map[y][x] && map[y][x] !== '#';
+}
+function eatDot() {
+  let c = map[pacman.y][pacman.x];
+  if (c === '.' || c === 'o') {
+    map[pacman.y] = map[pacman.y].substring(0, pacman.x) + ' ' + map[pacman.y].substring(pacman.x + 1);
+    score++;
+  }
+}
+function drawScore() {
+  ctx.fillStyle = '#FFF';
+  ctx.font = '28px Arial';
+  ctx.fillText('Score: ' + score, 20, canvas.height - 20);
+  
+  // Draw lives
+  ctx.fillStyle = '#FFFF00';
+  ctx.font = '28px Arial';
+  ctx.fillText('Lives: ' + lives, canvas.width - 150, canvas.height - 20);
+}
+
+// Check if Pacman collides with any monster
+function checkCollisions() {
+  for (const monster of globalThis.monsterStates) {
+    if (monster.x === pacman.x && monster.y === pacman.y) {
+      lives--;
+      
+      // Show a dev container fun fact
+      showRandomDevContainerFact();
+      
+      if (lives <= 0) {
+        gameOver = true;
+      } else {
+        // Reset Pacman position
+        pacman.x = 14;
+        pacman.y = 17;
+        pacman.dx = 0;
+        pacman.dy = 0;
+        pacman.nextDx = 0;
+        pacman.nextDy = 0;
+      }
+      return true;
+    }
+  }
+  return false;
+}
+
+// Draw game over screen
+function drawGameOver() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  
+  ctx.fillStyle = '#e74c3c';
+  ctx.font = '48px Arial';
+  ctx.textAlign = 'center';
+  ctx.fillText('GAME OVER', canvas.width/2, canvas.height/2 - 50);
+  
+  ctx.fillStyle = '#FFF';
+  ctx.font = '24px Arial';
+  ctx.fillText('Final Score: ' + score, canvas.width/2, canvas.height/2);
+  
+  ctx.fillStyle = '#25d6a2';
+  ctx.font = '28px Arial';
+  ctx.fillText('Press R to restart', canvas.width/2, canvas.height/2 + 50);
+  
+  ctx.textAlign = 'left'; // Reset text align
+}
+
+// Define dev container fun facts
+const devContainerFacts = [
+  "Dev containers provide a consistent development environment for all team members!",
+  "Dev containers can include pre-installed tools, runtimes, and dependencies!",
+  "You can customize your dev container with VS Code extensions!",
+  "Dev containers help eliminate 'it works on my machine' problems!",
+  "Docker is the most common runtime used for dev containers!",
+  "Dev containers can be used with GitHub Codespaces for cloud development!",
+  "You can use devcontainer.json to define your development environment!",
+  "Dev containers support port forwarding to access running services!",
+  "Dev containers can be version-controlled alongside your code!",
+  "You can mount your local filesystem into a dev container!",
+  "Dev container features are reusable components for common tools!",
+  "VS Code automatically detects dev containers in repositories!",
+  "Dev containers can significantly reduce onboarding time for new developers!",
+  "You can use multi-container setups with Docker Compose!",
+  "Dev containers support GPU acceleration for ML development!"
+];
+
+// Function to display a random dev container fun fact
+function showRandomDevContainerFact() {
+  const factContainer = document.getElementById('funFactContainer');
+  const randomFact = devContainerFacts[Math.floor(Math.random() * devContainerFacts.length)];
+  factContainer.textContent = "Dev Container Fun Fact: " + randomFact;
+  factContainer.style.display = 'block';
+  
+  // Hide the fact after 5 seconds
+  setTimeout(() => {
+    factContainer.style.display = 'none';
+  }, 5000);
+}
+
+// Reset game state
+function resetGame() {
+  // Reset map (restore dots)
+  map = [
+    '############################',
+    '#      ....##....      ....#',
+    '#.####.#####.##.#####.####.#',
+    '#o####.#####.##.#####.####o#',
+    '#.####.#####.##.#####.####.#',
+    '#                          #',
+    '#.####.##.########.##.####.#',
+    '#.####.##.########.##.####.#',
+    '#      ##    ##    ##      #',
+    '######.##### ## #####.######',
+    '######.##### ## #####.######',
+    '######.##          ##.######',
+    '######.## ######## ##.######',
+    '######.## ######## ##.######',
+    '#      ....##....      ....#',
+    '#.####.#####.##.#####.####.#',
+    '#.####.#####.##.#####.####.#',
+    '#o..##                ##..o#',
+    '###.##.##.########.##.##.###',
+    '###.##.##.########.##.##.###',
+    '#      ##    ##    ##      #',
+    '#.##########.##.##########.#',
+    '#.##########.##.##########.#',
+    '#                          #',
+    '############################'
+  ];
+  
+  // Reset pacman
+  pacman = { x: 14, y: 17, dx: 0, dy: 0, nextDx: 0, nextDy: 0 };
+  
+  // Hide fun fact container
+  document.getElementById('funFactContainer').style.display = 'none';
+  
+  // Reset monsters to original positions
+  globalThis.monsterStates = monsters.map(m => ({...m, dx: 0, dy: 0}));
+  
+  // Ensure no monsters are too close to Pacman at start
+  for (const monster of globalThis.monsterStates) {
+    const distX = Math.abs(monster.x - pacman.x);
+    const distY = Math.abs(monster.y - pacman.y);
+    
+    // If monster is within 3 tiles of Pacman, move it to a different position
+    if (distX + distY < 3) {
+      // Find alternative positions that are valid paths and not close to Pacman
+      const alternatives = [];
+      for (let y = 1; y < map.length - 1; y++) {
+        for (let x = 1; x < map[0].length - 1; x++) {
+          if (map[y][x] !== '#') {
+            const newDistX = Math.abs(x - pacman.x);
+            const newDistY = Math.abs(y - pacman.y);
+            if (newDistX + distY >= 5) {
+              alternatives.push({x, y});
+            }
+          }
+        }
+      }
+      
+      if (alternatives.length > 0) {
+        // Choose a random alternative position
+        const newPos = alternatives[Math.floor(Math.random() * alternatives.length)];
+        monster.x = newPos.x;
+        monster.y = newPos.y;
+      }
+    }
+  }
+  
+  // Reset game state
+  score = 0;
+  lives = 3;
+  gameOver = false;
+  dots = 0;
+  for (let row of map) for (let c of row) if (c === '.' || c === 'o') dots++;
+  
+  // Restart game loop
+  requestAnimationFrame(gameLoop);
+}
+
+document.addEventListener('keydown', e => {
+  // Prevent scrolling for both arrow keys and spacebar
+  if (e.key === ' ' || e.code === 'Space' || ["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key)) {
+    e.preventDefault();
+  }
+  
+  if (gameOver) {
+    if (e.key === ' ' || e.code === 'Space' || e.key === 'r' || e.key === 'R') {
+      resetGame();
+    }
+    return;
+  }
+  
+  if (["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key)) {
+    let moved = false;
+    if (e.key === 'ArrowUp') { pacman.nextDx = 0; pacman.nextDy = -1; moved = true; }
+    if (e.key === 'ArrowDown') { pacman.nextDx = 0; pacman.nextDy = 1; moved = true; }
+    if (e.key === 'ArrowLeft') { pacman.nextDx = -1; pacman.nextDy = 0; moved = true; }
+    if (e.key === 'ArrowRight') { pacman.nextDx = 1; pacman.nextDy = 0; moved = true; }
+    if (moved && canMove(pacman.x + pacman.nextDx, pacman.y + pacman.nextDy)) {
+      pacman.dx = pacman.nextDx;
+      pacman.dy = pacman.nextDy;
+      movePacman();
+      eatDot();
+      drawMap();
+      drawPacman();
+      drawScore();
+      if (score >= dots) {
+        ctx.fillStyle = '#25d6a2';
+        ctx.font = '48px Arial';
+        ctx.fillText('All Features Collected!', canvas.width/2 - 260, canvas.height/2);
+      }
+    }
+  }
+});
+
+let lastMonsterMove = 0;
+const MONSTER_MOVE_INTERVAL = 300; // ms
+
+function gameLoop(timestamp) {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawMap();
+  
+  if (gameOver) {
+    drawGameOver();
+    return;
+  }
+  
+  if (!lastMonsterMove) lastMonsterMove = timestamp;
+  if (timestamp - lastMonsterMove > MONSTER_MOVE_INTERVAL) {
+    moveMonsters();
+    lastMonsterMove = timestamp;
+    // Check for collisions after monsters move
+    checkCollisions();
+  }
+  
+  drawMonsters();
+  drawPacman();
+  drawScore();
+  
+  if (score >= dots) {
+    ctx.fillStyle = '#25d6a2';
+    ctx.font = '48px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText('All Features Collected!', canvas.width/2, canvas.height/2);
+    ctx.font = '28px Arial';
+    ctx.fillText('Press R to play again', canvas.width/2, canvas.height/2 + 50);
+    gameOver = true;
+    ctx.textAlign = 'left';
+    return;
+  }
+  
+  requestAnimationFrame(gameLoop);
+}
+
+requestAnimationFrame(gameLoop);
+
+// Add event listener for the restart button
+document.getElementById('restartButton').addEventListener('click', function() {
+  if (gameOver) {
+    resetGame();
+  } else {
+    // If the game is still in progress, ask for confirmation
+    if (confirm('Are you sure you want to restart the game?')) {
+      resetGame();
+    }
+  }
+});
+</script>
+
+<!-- Monster Key -->
+<div id="monster-key" style="max-width: 600px; margin: 40px auto 0 auto; background: #111; color: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px #0002;">
+  <h2 style="text-align:center;"><a href="#monster-key" style="color:#25d6a2;text-decoration:underline;">Monster Key</a></h2>
+  <ul style="list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:space-around;">
+    <li style="margin:10px 20px; display:flex; align-items:center;">
+      <span id="icon-yeti"></span>
+      <span style="margin-left:10px;">YAML Yeti <span style="color:#888;">(blue, curly brackets)</span></span>
+    </li>
+    <li style="margin:10px 20px; display:flex; align-items:center;">
+      <span id="icon-dragon"></span>
+      <span style="margin-left:10px;">Dependency Dragon <span style="color:#888;">(green, chain)</span></span>
+    </li>
+    <li style="margin:10px 20px; display:flex; align-items:center;">
+      <span id="icon-bug"></span>
+      <span style="margin-left:10px;">Build Bug <span style="color:#888;">(red, bug)</span></span>
+    </li>
+    <li style="margin:10px 20px; display:flex; align-items:center;">
+      <span id="icon-merge"></span>
+      <span style="margin-left:10px;">Merge Monster <span style="color:#888;">(purple, branch)</span></span>
+    </li>
+    <li style="margin:10px 20px; display:flex; align-items:center;">
+      <span id="icon-ghost"></span>
+      <span style="margin-left:10px;">Registry Ghost <span style="color:#888;">(white, cloud)</span></span>
+    </li>
+    <li style="margin:10px 20px; display:flex; align-items:center;">
+      <span id="icon-goblin"></span>
+      <span style="margin-left:10px;">Port Goblin <span style="color:#888;">(orange, plug)</span></span>
+    </li>
+    <li style="margin:10px 20px; display:flex; align-items:center;">
+      <span id="icon-troll"></span>
+      <span style="margin-left:10px;">Token Troll <span style="color:#888;">(yellow, key)</span></span>
+    </li>
+    <li style="margin:10px 20px; display:flex; align-items:center;">
+      <span id="icon-kraken"></span>
+      <span style="margin-left:10px;">Cache Kraken <span style="color:#888;">(teal, tentacles)</span></span>
+    </li>
+  </ul>
+</div>
+<script>
+// Draw monster icons for the key
+const keyIcons = [
+  {id:'icon-yeti', color:'#007acc', icon:'yeti'},
+  {id:'icon-dragon', color:'#25d6a2', icon:'dragon'},
+  {id:'icon-bug', color:'#e74c3c', icon:'bug'},
+  {id:'icon-merge', color:'#9b59b6', icon:'merge'},
+  {id:'icon-ghost', color:'#fff', icon:'ghost'},
+  {id:'icon-goblin', color:'#f39c12', icon:'goblin'},
+  {id:'icon-troll', color:'#f1c40f', icon:'troll'},
+  {id:'icon-kraken', color:'#17a2b8', icon:'kraken'}
+];
+for (const k of keyIcons) {
+  const c = document.createElement('canvas');
+  c.width = 36; c.height = 36;
+  c.style.verticalAlign = 'middle';
+  const x = c.getContext('2d');
+  drawMonsterIcon(x, 18, 18, 32, k.color, k.icon);
+  document.getElementById(k.id).appendChild(c);
+}
+</script>