Spaces:

Lashtw
/

VibeCodeingRenew

Running

App Files Files Community

Lashtw commited on Feb 3

Commit

945eb9e

verified ·

1 Parent(s): 98922ed

Upload 18 files

Browse files

Files changed (18) hide show

.gitattributes +3 -0
README.md +4 -4
assets/VIBE_Class_Photo_2026-01-27.png +3 -0
assets/eraser.svg +24 -0
assets/instructor_avatar.png +3 -0
assets/photobg.png +3 -0
gitattributes +38 -0
index.html +34 -19
monster_preview.html +586 -0
src/main.js +76 -0
src/services/auth.js +182 -0
src/services/classroom.js +569 -0
src/services/firebase.js +19 -0
src/utils/monsterUtils.js +532 -0
src/views/AdminView.js +218 -0
src/views/InstructorView.js +0 -0
src/views/LandingView.js +105 -0
src/views/StudentView.js +826 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/instructor_avatar.png filter=lfs diff=lfs merge=lfs -text
+assets/photobg.png filter=lfs diff=lfs merge=lfs -text
+assets/VIBE_Class_Photo_2026-01-27.png filter=lfs diff=lfs merge=lfs -text

README.md CHANGED Viewed

@@ -1,8 +1,8 @@
 ---
-title: VibeCodeingRenew
-emoji: 🌖
-colorFrom: pink
-colorTo: blue
 sdk: static
 pinned: false
 ---

 ---
+title: Vibecodingex
+emoji: 👁
+colorFrom: indigo
+colorTo: gray
 sdk: static
 pinned: false
 ---

assets/VIBE_Class_Photo_2026-01-27.png ADDED Viewed

Git LFS Details

SHA256: 32cadd4f1117546a680d2788996acc48d0e7e60ef2f44e67afc3063dc250eefd
Pointer size: 131 Bytes
Size of remote file: 489 kB

assets/eraser.svg ADDED Viewed

assets/instructor_avatar.png ADDED Viewed

Git LFS Details

SHA256: 8a338d67ef034c7716cc470af8f794ed7e06b028c8590341a4b1832f59b63b2c
Pointer size: 131 Bytes
Size of remote file: 123 kB

assets/photobg.png ADDED Viewed

Git LFS Details

SHA256: 531d4d67850fd5f22f3ef63848c5dd913e4b25210b7f331fc591a88fddc04dfb
Pointer size: 132 Bytes
Size of remote file: 7.08 MB

gitattributes ADDED Viewed

	@@ -0,0 +1,38 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/instructor_avatar.png filter=lfs diff=lfs merge=lfs -text
+assets/photobg.png filter=lfs diff=lfs merge=lfs -text
+assets/VIBE_Class_Photo_2026-01-27.png filter=lfs diff=lfs merge=lfs -text

index.html CHANGED Viewed

@@ -1,19 +1,34 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vibecoding Workshop</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap"
+        rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background-color: #0f172a;
+            /* Slate 900 */
+            color: #e2e8f0;
+            /* Slate 200 */
+        }
+        .font-mono {
+            font-family: 'JetBrains Mono', monospace;
+        }
+    </style>
+</head>
+<body class="bg-slate-900 text-slate-200 antialiased selection:bg-cyan-500 selection:text-white">
+    <div id="app" class="max-w-7xl mx-auto"></div>
+    <script type="module" src="./src/main.js"></script>
+</body>
+</html>

monster_preview.html ADDED Viewed

	@@ -0,0 +1,586 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VIBECODING Monster Gallery - Final Check</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            background-color: #0F172A;
+            color: white;
+            font-family: 'Courier New', monospace;
+        }
+        @keyframes breathe {
+            0% {
+                transform: scaleY(1) translateY(0);
+            }
+            50% {
+                transform: scaleY(0.92) translateY(4px);
+            }
+            100% {
+                transform: scaleY(1) translateY(0);
+            }
+        }
+        .pixel-art {
+            image-rendering: pixelated;
+            width: 144px;
+            height: 144px;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 12px;
+            animation: breathe 2.5s infinite ease-in-out;
+            transform-origin: bottom center;
+        }
+        .pixel-art:hover {
+            animation-play-state: paused;
+            transform: scale(1.1);
+            z-index: 10;
+            box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
+        }
+        .card {
+            background: rgba(30, 41, 59, 0.5);
+            border: 1px solid rgba(148, 163, 184, 0.1);
+            border-radius: 16px;
+            padding: 15px;
+            text-align: center;
+            position: relative;
+        }
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 24px;
+            padding: 20px;
+        }
+        h2 {
+            border-bottom: 2px solid #334155;
+            padding-bottom: 10px;
+            margin-top: 40px;
+            margin-bottom: 20px;
+            color: #60A5FA;
+            font-size: 1.5em;
+            font-weight: bold;
+        }
+        .badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 999px;
+            font-size: 0.7rem;
+            font-weight: bold;
+            margin-top: 5px;
+            background: #374151;
+            color: #9CA3AF;
+        }
+        .done-badge {
+            background: #059669;
+            color: #ccfbf1;
+        }
+        .new-badge {
+            background: #2563eb;
+            color: #dbeafe;
+        }
+        .fam-label {
+            position: absolute;
+            top: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #1e293b;
+            color: #94a3b8;
+            font-size: 0.6rem;
+            padding: 2px 6px;
+            border-radius: 4px;
+            border: 1px solid #334155;
+            white-space: nowrap;
+        }
+    </style>
+</head>
+<body>
+    <div class="container mx-auto max-w-7xl p-8">
+        <h1
+            class="text-4xl font-extrabold mb-2 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500">
+            👾 VIBECODING 怪獸全圖鑑 👾</h1>
+        <p class="text-center text-slate-400 mb-12 font-mono">Restored & Updated: Wolf & Cat Redesigned</p>
+        <div id="gallery"></div>
+    </div>
+    <script>
+        const gallery = document.getElementById('gallery');
+        const W = 24; const H = 24; const C = W / 2;
+        function renderSVG(grid) {
+            let svg = '';
+            for (let y = 0; y < H; y++) {
+                for (let x = 0; x < W; x++) {
+                    if (grid[y][x]) svg += `<rect x="${x}" y="${y}" width="1" height="1" fill="${grid[y][x]}"/>`;
+                }
+            }
+            return `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-full h-full drop-shadow-md">${svg}</svg>`;
+        }
+        const monsters = [
+            { id: 'Egg', name: '🥚 像素蛋', type: 'neutral', stage: 0, arch: 'egg', status: 'done', fam: 'Origin' },
+            // Stage 1
+            { id: 'L1_C', name: '🔴 灰塵球 Dust-Ball', type: 'glitch', stage: 1, arch: 'dust', status: 'done', fam: 'Dust' },
+            { id: 'L1_B', name: '🟡 像素狗 Pixel-Pup', type: 'animal', stage: 1, arch: 'beast_pup', status: 'done', fam: 'Beast' },
+            { id: 'L1_A', name: '🔵 光之靈 Lumina', type: 'holy', stage: 1, arch: 'spirit_orb', status: 'done', fam: 'Spirit' },
+            // Stage 2
+            { id: 'L2_CC', name: '🔴 垃圾怪 Trash-Mob', type: 'glitch', stage: 2, arch: 'dust_trash', status: 'done', fam: 'Dust' },
+            { id: 'L2_CB', name: '🟡 史萊姆 Slime-Box', type: 'slime', stage: 2, arch: 'dust_slime', status: 'done', fam: 'Dust' },
+            { id: 'L2_CA', name: '🔵 駭客蟲 Hacker-Bug', type: 'tech', stage: 2, arch: 'dust_tech', status: 'done', fam: 'Dust' },
+            { id: 'L2_BC', name: '🔴 廢鐵狼 Rusty-Wolf', type: 'grunge', stage: 2, arch: 'beast_wolf', status: 'done', fam: 'Beast' },
+            { id: 'L2_BB', name: '🟡 勇者貓 Hero-Cat', type: 'animal', stage: 2, arch: 'beast_cat', status: 'done', fam: 'Beast' },
+            { id: 'L2_BA', name: '🔵 機甲獅 Mecha-Lion', type: 'mech', stage: 2, arch: 'beast_mech', status: 'done', fam: 'Beast' },
+            { id: 'L2_AC', name: '🔴 幽靈火 Ghost-Fire', type: 'spirit', stage: 2, arch: 'spirit_fire', status: 'done', fam: 'Spirit' },
+            { id: 'L2_AB', name: '🟡 天使鳥 Angel-Bird', type: 'holy', stage: 2, arch: 'spirit_wing', status: 'done', fam: 'Spirit' },
+            { id: 'L2_AA', name: '🔵 星雲龍 Cosmos-Dragon', type: 'cosmic', stage: 2, arch: 'spirit_dragon', status: 'done', fam: 'Spirit' },
+            // Stage 3 - ESTABLISHED
+            { id: 'L3_CCC', name: '🗑️ 崩潰垃圾山', type: 'glitch', stage: 3, arch: 'pile_big', status: 'done', fam: 'Glitch/Trash' },
+            { id: 'L3_CCB', name: '📦 寶箱怪', type: 'mimic', stage: 3, arch: 'box_teeth', status: 'done', fam: 'Glitch/Trash' },
+            { id: 'L3_CCA', name: '🦠 病毒王', type: 'virus', stage: 3, arch: 'corona', status: 'done', fam: 'Glitch/Trash' },
+            { id: 'L3_CBC', name: '💧 汙泥怪', type: 'grunge', stage: 3, arch: 'fluid', status: 'done', fam: 'Slime' },
+            { id: 'L3_CBB', name: '🧊 果凍騎士', type: 'slime', stage: 3, arch: 'knight_slime', status: 'done', fam: 'Slime' },
+            { id: 'L3_CBA', name: '💎 鑽石魔像', type: 'crystal', stage: 3, arch: 'golem', status: 'done', fam: 'Slime' },
+            { id: 'L3_CAC', name: '🕷️ 錯誤蜘蛛', type: 'glitch', stage: 3, arch: 'spider', status: 'done', fam: 'Hacker' },
+            { id: 'L3_CAB', name: '👾 程式遊俠', type: 'tech', stage: 3, arch: 'ranger', status: 'done', fam: 'Hacker' },
+            { id: 'L3_CAA', name: '🧠 量子主腦', type: 'tech', stage: 3, arch: 'brain', status: 'done', fam: 'Hacker' },
+            { id: 'L3_BAC', name: '🚜 重裝推土機', type: 'mech', stage: 3, arch: 'tank', status: 'done', fam: 'Mech Lion' },
+            { id: 'L3_BAB', name: '✈️ 變形戰機', type: 'mech', stage: 3, arch: 'jet', status: 'done', fam: 'Mech Lion' },
+            { id: 'L3_BAA', name: '🤖 究極鋼彈', type: 'mech', stage: 3, arch: 'gundam', status: 'done', fam: 'Mech Lion' },
+            { id: 'L3_ACC', name: '💀 骷髏法師', type: 'undead', stage: 3, arch: 'mage_skull', status: 'done', fam: 'Ghost' },
+            { id: 'L3_ACB', name: '🕯️ 南瓜燈杰克', type: 'spirit', stage: 3, arch: 'pumpkin', status: 'done', fam: 'Ghost' },
+            { id: 'L3_ACA', name: '👻 虛空死神', type: 'void', stage: 3, arch: 'reaper', status: 'done', fam: 'Ghost' },
+            // Stage 3 - REDESIGN TARGETS (Wolf V2 & Cat)
+            { id: 'L3_BCC', name: '🧟 喪屍犬', type: 'undead', stage: 3, arch: 'wolf_zombie_v2', status: 'new', fam: 'Wolf' },
+            { id: 'L3_BCB', name: '🐕 警備犬', type: 'animal', stage: 3, arch: 'wolf_guard_v2', status: 'new', fam: 'Wolf' },
+            { id: 'L3_BCA', name: '🐺 合金戰狼', type: 'mech', stage: 3, arch: 'wolf_alloy_v2', status: 'new', fam: 'Wolf' },
+            { id: 'L3_BBC', name: '😼 流浪劍客', type: 'warrior', stage: 3, arch: 'ronin', status: 'new', fam: 'Cat' },
+            { id: 'L3_BBB', name: '👑 貓咪國王', type: 'royal', stage: 3, arch: 'king_cat', status: 'new', fam: 'Cat' },
+            { id: 'L3_BBA', name: '🦁 雷霆獅王', type: 'elemental', stage: 3, arch: 'lion_mane', status: 'new', fam: 'Cat' },
+            { id: 'L3_BBA', name: '🦁 雷霆獅王', type: 'elemental', stage: 3, arch: 'lion_mane', status: 'new', fam: 'Cat' },
+            // Stage 3 - NEW ADDITIONS (Angel & Cosmos)
+            { id: 'L3_ABC', name: '👁️ 座天使 Ophanim', type: 'holy', stage: 3, arch: 'biblical_angel', status: 'new', fam: 'Angel' },
+            { id: 'L3_ABB', name: '⚔️ 女武神 Valkyrie', type: 'warrior', stage: 3, arch: 'valkyrie', status: 'new', fam: 'Angel' },
+            { id: 'L3_ABA', name: '🔥 聖火鳳凰 Phoenix', type: 'divine', stage: 3, arch: 'phoenix', status: 'new', fam: 'Angel' },
+            { id: 'L3_AAC', name: '🛡️ 大地泰坦 Titan', type: 'cosmic', stage: 3, arch: 'terra_titan', status: 'new', fam: 'Cosmos' },
+            { id: 'L3_AAB', name: '🐋 星海鯨 Astro-Whale', type: 'cosmic', stage: 3, arch: 'cosmo_whale', status: 'new', fam: 'Cosmos' },
+            { id: 'L3_AAA', name: '🌌 創世龍 Genesis', type: 'god', stage: 3, arch: 'genesis_dragon', status: 'new', fam: 'Cosmos' },
+        ];
+        function mulberry32(a) {
+            return function () {
+                var t = a += 0x6D2B79F5;
+                t = Math.imul(t ^ (t >>> 15), t | 1);
+                t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+                return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+            }
+        }
+        const palettes = {
+            base: ['#94A3B8', '#64748B', '#475569', '#334155'],
+            // Standard
+            glitch: ['#18181b', '#27272a', '#3f3f46', '#ef4444'],
+            trash: ['#3f3f46', '#71717a', '#a1a1aa', '#ef4444'],
+            mimic: ['#854d0e', '#a16207', '#ca8a04', '#eab308'],
+            virus: ['#2e1065', '#581c87', '#7e22ce', '#bef264', '#84cc16'],
+            spider: ['#1e293b', '#0f172a', '#b91c1c', '#ef4444'],
+            slime: ['#059669', '#10b981', '#34d399', '#d1fae5'],
+            fluid: ['#3f3f46', '#52525b', '#4b5563', '#a1a1aa'],
+            knight: ['#0ea5e9', '#38bdf8', '#7dd3fc', '#ffffff'],
+            crypto: ['#0891b2', '#06b6d4', '#22d3ee', '#cffafe'],
+            tech: ['#22d3ee', '#06b6d4', '#0891b2', '#155e75'],
+            ranger: ['#3b82f6', '#2563eb', '#1d4ed8', '#fbbf24'],
+            brain: ['#d8b4fe', '#c084fc', '#a855f7', '#7e22ce', '#22d3ee'],
+            tank: ['#3f3f46', '#18181b', '#facc15', '#fbbf24'],
+            jet: ['#cbd5e1', '#94a3b8', '#ef4444', '#dc2626'],
+            gundam: ['#ffffff', '#2563eb', '#dc2626', '#facc15'],
+            mage: ['#4c1d95', '#a855f7', '#172554', '#fbbf24'],
+            pumpkin: ['#ea580c', '#c2410c', '#3f3f46', '#facc15'],
+            reaper: ['#000000', '#171717', '#7f1d1d', '#9ca3af'],
+            // Wolf V2
+            wolf: ['#c2410c', '#9a3412', '#7c2d12', '#ef4444'], // Rust/Browns
+            zombie: ['#44403c', '#78716c', '#991b1b', '#fecaca'],
+            guard: ['#172554', '#1e3a8a', '#fbbf24', '#f59e0b', '#3b82f6'],
+            alloy: ['#e2e8f0', '#94a3b8', '#0ea5e9', '#0284c7', '#38bdf8', '#ffffff'], // Added white/brights
+            // Cat V2
+            cat: ['#fb923c', '#ea580c', '#c2410c', '#fff7ed'],
+            ronin: ['#c2410c', '#9a3412', '#fde047', '#e2e8f0'],
+            king: ['#7e22ce', '#a855f7', '#fbbf24', '#ffffff'],
+            thunder: ['#facc15', '#eab308', '#fefce8', '#f59e0b', '#ffffff'],
+            // Base Fams
+            beast: ['#fbbf24', '#f59e0b', '#d97706', '#78350f'],
+            mech_lion: ['#60a5fa', '#3b82f6', '#1d4ed8', '#93c5fd'],
+            holy: ['#fef3c7', '#fde68a', '#f59e0b', '#ffffff'],
+            fire: ['#c084fc', '#a855f7', '#7e22ce', '#ffffff'],
+            space: ['#4f46e5', '#312e81', '#818cf8', '#f472b6', '#22d3ee'],
+            // Angel V3
+            biblical: ['#facc15', '#eab308', '#ffffff', '#ef4444', '#3b82f6'], // Gold + Eyes
+            valkyrie: ['#e2e8f0', '#94a3b8', '#facc15', '#38bdf8', '#fbbf24'], // Silver/Gold
+            seraphim: ['#dc2626', '#ef4444', '#fbbf24', '#facc15', '#ffffff'], // Fire/Gold
+            // Cosmos V3
+            meteor: ['#475569', '#334155', '#ea580c', '#f97316'], // Rock/Magma
+            whale: ['#1e1b4b', '#312e81', '#6366f1', '#c7d2fe', '#ffffff'], // Deep Space
+            genesis: ['#000000', '#171717', '#c084fc', '#22d3ee', '#f472b6', '#ffffff'] // Cosmic
+        };
+        function generateMonsterSVG(monster) {
+            let seed = 0;
+            for (let i = 0; i < monster.id.length; i++) seed += monster.id.charCodeAt(i);
+            const rng = mulberry32(seed);
+            let palette = palettes.base;
+            const t = monster.type;
+            const a = monster.arch;
+            // Palette Select
+            if (a.includes('wolf')) {
+                if (a.includes('zombie')) palette = palettes.zombie;
+                else if (a.includes('guard')) palette = palettes.guard;
+                else if (a.includes('alloy')) palette = palettes.alloy;
+                else palette = palettes.wolf;
+            }
+            else if (a === 'ronin') palette = palettes.ronin;
+            else if (a === 'king_cat') palette = palettes.king;
+            else if (a === 'lion_mane') palette = palettes.thunder;
+            else if (a === 'tank') palette = palettes.tank;
+            else if (a === 'jet') palette = palettes.jet;
+            else if (a === 'gundam') palette = palettes.gundam;
+            else if (a === 'mage_skull') palette = palettes.mage;
+            else if (a === 'pumpkin') palette = palettes.pumpkin;
+            else if (a === 'reaper') palette = palettes.reaper;
+            // Angel & Cosmos V3
+            else if (a === 'biblical_angel') palette = palettes.biblical;
+            else if (a === 'valkyrie') palette = palettes.valkyrie;
+            else if (a === 'phoenix') palette = palettes.seraphim; // Reuse Fire/Gold palette
+            else if (a === 'terra_titan') palette = palettes.meteor; // Reuse Rock palette
+            else if (a === 'cosmo_whale') palette = palettes.whale;
+            else if (a === 'genesis_dragon') palette = palettes.genesis;
+            // Beast Family
+            else if (a === 'beast_pup') palette = palettes.beast;
+            else if (a === 'beast_cat') palette = palettes.cat;
+            else if (a === 'beast_mech') palette = palettes.mech_lion;
+            // Spirit Family
+            else if (a === 'spirit_orb') palette = palettes.holy;
+            else if (a === 'spirit_fire') palette = palettes.fire;
+            else if (a === 'spirit_wing') palette = palettes.holy;
+            else if (a === 'spirit_dragon') palette = palettes.space;
+            // ... (Other palettes handled by fallbacks correctly as per previous logic)
+            // Safety fallbacks
+            if (a.includes('dust')) {
+                if (a === 'dust_trash' || a === 'pile_big' || a === 'box_teeth' || a === 'corona') palette = palettes.glitch; // Approx
+                if (a.includes('slime') || a === 'fluid' || a === 'knight_slime' || a === 'golem') palette = palettes.slime;
+                if (a.includes('tech') || a === 'spider' || a === 'ranger' || a === 'brain') palette = palettes.tech;
+            }
+            // Better-specific overrides
+            if (a === 'pile_big') palette = palettes.trash;
+            if (a === 'box_teeth') palette = palettes.mimic;
+            if (a === 'corona') palette = palettes.virus;
+            if (a === 'fluid') palette = palettes.fluid;
+            if (a === 'knight_slime') palette = palettes.knight;
+            if (a === 'golem') palette = palettes.crypto;
+            if (a === 'spider') palette = palettes.spider;
+            if (a === 'ranger') palette = palettes.ranger;
+            if (a === 'brain') palette = palettes.brain;
+            let grid = new Array(H).fill(0).map(() => new Array(W).fill(null));
+            const rect = (x, y, w, h, col) => {
+                for (let i = Math.max(0, Math.floor(x)); i < Math.min(W, x + w); i++)
+                    for (let j = Math.max(0, Math.floor(y)); j < Math.min(H, y + h); j++)
+                        grid[j][i] = col;
+            }
+            const circle = (cx, cy, r, col) => {
+                for (let y = 0; y < H; y++)
+                    for (let x = 0; x < W; x++)
+                        if (Math.sqrt((x - cx) ** 2 + (y - cy) ** 2) < r) grid[y][x] = col;
+            }
+            const line = (x1, y1, x2, y2, col) => {
+                let dx = Math.abs(x2 - x1), sx = x1 < x2 ? 1 : -1;
+                let dy = -Math.abs(y2 - y1), sy = y1 < y2 ? 1 : -1;
+                let err = dx + dy, e2;
+                while (true) {
+                    if (y1 >= 0 && y1 < H && x1 >= 0 && x1 < W) grid[y1][x1] = col;
+                    if (x1 == x2 && y1 == y2) break;
+                    const e2_val = 2 * err;
+                    if (e2_val >= dy) { err += dy; x1 += sx; }
+                    if (e2_val <= dx) { err += dx; y1 += sy; }
+                }
+            }
+            const mainCol = palette[Math.floor(rng() * (palette.length - 1))];
+            const secCol = palette[Math.floor(rng() * (palette.length - 2))] || palette[1];
+            const thirdCol = palette[palette.length - 1];
+            // --- STAGE 0-2 (Explicit Restoration) ---
+            if (a === 'egg') { circle(C, C, 7, mainCol); circle(C - 2, C - 3, 2, '#ffffff'); rect(C + 1, C + 2, 2, 2, secCol); rect(C - 4, C + 1, 2, 2, secCol); }
+            else if (a === 'dust') { circle(C, C, 5, '#1e293b'); for (let i = 0; i < 30; i++) { let angle = rng() * Math.PI * 2; let r = 4 + rng() * 4; rect(C + Math.cos(angle) * r, C + Math.sin(angle) * r, 1, 1, '#334155'); } rect(C - 4, C - 2, 3, 3, '#ffffff'); rect(C + 1, C - 2, 3, 3, '#ffffff'); rect(C - 3, C - 1, 1, 1, '#000000'); rect(C + 2, C - 1, 1, 1, '#000000'); }
+            else if (a === 'dust_trash') { circle(C, C, 6, mainCol); for (let i = 0; i < 40; i++) { let s = 7 + rng() * 3; rect(C + (rng() - 0.5) * s * 1.5, C + (rng() - 0.5) * s, 2, 2, i % 2 == 0 ? secCol : thirdCol); } rect(C - 3, C - 3, 3, 3, '#ffffff'); rect(C - 2, C - 2, 1, 1, '#000000'); rect(C + 1, C - 1, 2, 2, '#ffffff'); rect(C + 1, C - 1, 1, 1, '#000000'); }
+            else if (a === 'dust_slime') { for (let i = 0; i < 8; i++) circle(C + (rng() - 0.5) * 10, C + 3 + rng() * 3, 3, mainCol); rect(C - 3, C - 3, 2, 2, '#ffffff'); rect(C - 3, C - 1, 2, 2, '#000000'); rect(C + 1, C - 1, 2, 2, '#000000'); }
+            else if (a === 'dust_tech') { rect(C - 1, C - 9, 2, 4, secCol); rect(C - 5, C - 7, 10, 2, secCol); rect(C - 6, C + 2, 2, 4, mainCol); rect(C + 4, C + 2, 2, 4, mainCol); rect(C - 4, C - 1, 3, 2, '#a5f3fc'); rect(C + 1, C - 1, 3, 2, '#a5f3fc'); }
+            else if (a === 'beast_pup') { rect(C - 5, C - 1, 10, 6, mainCol); rect(C - 6, C - 5, 3, 4, secCol); rect(C + 3, C - 5, 3, 4, secCol); rect(C - 2, C + 1, 4, 3, secCol); rect(C - 1, C + 1, 2, 1, '#000000'); }
+            else if (a === 'beast_wolf') { rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 7, C - 6, 5, 5, mainCol); for (let i = 0; i < 10; i++) rect(C - 7 + rng() * 14, C - 4 + rng() * 6, 1, 1, secCol); rect(C - 7, C - 8, 2, 3, secCol); rect(C - 4, C - 8, 2, 3, secCol); rect(C + 6, C, 4, 2, secCol); rect(C - 6, C - 5, 1, 1, '#ef4444'); }
+            else if (a === 'beast_cat') { rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 7, C - 6, 5, 5, mainCol); rect(C - 7, C - 8, 2, 2, mainCol); rect(C - 4, C - 8, 2, 2, mainCol); rect(C - 6, C - 3, 1, 1, '#f9a8d4'); rect(C - 2, C - 3, 6, 6, '#ef4444'); }
+            else if (a === 'beast_mech') { rect(C - 6, C - 2, 12, 6, secCol); rect(C - 7, C - 6, 5, 5, mainCol); rect(C - 4, C - 8, 2, 6, thirdCol); rect(C - 6, C - 5, 3, 1, '#3b82f6'); }
+            else if (a === 'spirit_orb') { circle(C, C, 6, mainCol); for (let t = 0; t < Math.PI * 2; t += 0.4) { let r = 8; rect(C + Math.cos(t) * r, C + Math.sin(t) * r, 1, 1, secCol); } rect(C - 8, C - 2, 3, 4, '#ffffff'); rect(C + 5, C - 2, 3, 4, '#ffffff'); }
+            else if (a === 'spirit_fire') { circle(C, C + 1, 5, '#ffffff'); for (let i = 0; i < 40; i++) { let r = 4 + rng() * 6; let t = rng() * Math.PI * 2; let py = C + Math.sin(t) * r - (rng() * 6); let px = C + Math.cos(t) * r; rect(px, py, 2, 2, i % 3 == 0 ? thirdCol : secCol); } rect(C - 3, C - 1, 2, 3, '#000000'); rect(C + 1, C - 1, 2, 3, '#000000'); }
+            else if (a === 'spirit_wing') { circle(C, C, 5, mainCol); rect(C - 7, C + 2, 14, 2, secCol); rect(C - 11, C - 4, 2, 2, '#ffffff'); rect(C - 10, C - 5, 2, 4, '#ffffff'); rect(C - 8, C - 3, 4, 4, '#ffffff'); rect(C + 9, C - 4, 2, 2, '#ffffff'); rect(C + 8, C - 5, 2, 4, '#ffffff'); rect(C + 4, C - 3, 4, 4, '#ffffff'); rect(C - 4, C - 9, 8, 1, '#fbbf24'); rect(C - 5, C - 8, 1, 1, '#fbbf24'); rect(C + 4, C - 8, 1, 1, '#fbbf24'); rect(C - 1, C, 2, 2, '#fbbf24'); rect(C - 3, C - 2, 1, 1, '#3b82f6'); rect(C + 2, C - 2, 1, 1, '#3b82f6'); }
+            else if (a === 'spirit_dragon') { circle(C, C, 7, '#1e1b4b'); for (let i = 0; i < 20; i++) { let px = C + (rng() - 0.5) * 12; let py = C + (rng() - 0.5) * 10; rect(px, py, 1, 1, i % 3 == 0 ? '#f472b6' : (i % 2 == 0 ? '#22d3ee' : '#ffffff')); } rect(C - 9, C - 5, 4, 4, secCol); rect(C - 8, C - 9, 2, 4, thirdCol); rect(C + 6, C - 2, 6, 2, secCol); rect(C - 4, C - 2, 2, 1, '#22d3ee'); }
+            // --- STAGE 3 (Previously Done & APPROVED) ---
+            else if (a === 'pile_big') { circle(C, C, 8, '#000000'); for (let i = 0; i < 60; i++) rect(C + (rng() - 0.5) * 16, C + (rng() - 0.5) * 16, 2, 2, '#ef4444'); rect(C - 4, C - 2, 2, 2, '#ffffff'); rect(C - 3, C - 2, 1, 1, '#000000'); rect(C + 4, C, 2, 2, '#ffffff'); rect(C + 4, C, 1, 1, '#000000'); rect(C, C - 5, 3, 3, '#ffffff'); rect(C + 1, C - 5, 1, 1, '#000000'); }
+            else if (a === 'box_teeth') { rect(C - 8, C - 6, 16, 14, mainCol); rect(C - 8, C, 16, 2, '#000000'); rect(C - 1, C + 4, 2, 2, '#000000'); rect(C - 6, C + 2, 1, 2, '#ffffff'); rect(C - 2, C + 2, 1, 2, '#ffffff'); rect(C + 2, C + 2, 1, 2, '#ffffff'); rect(C + 5, C + 2, 1, 2, '#ffffff'); rect(C - 4, C - 3, 2, 1, '#ef4444'); rect(C + 2, C - 3, 2, 1, '#ef4444'); }
+            else if (a === 'corona') { circle(C, C, 6, mainCol); for (let t = 0; t < 6.28; t += 0.8) rect(C + Math.cos(t) * 10, C + Math.sin(t) * 10, 3, 3, secCol); rect(C - 4, C - 8, 8, 2, '#facc15'); rect(C - 4, C - 10, 2, 2, '#facc15'); rect(C + 2, C - 10, 2, 2, '#facc15'); rect(C - 3, C - 1, 2, 1, '#bef264'); rect(C + 1, C - 1, 2, 1, '#bef264'); rect(C - 2, C + 2, 4, 1, '#000000'); }
+            else if (a === 'fluid') { for (let i = 0; i < 4; i++) rect(C - 10 + i * 2, C + 4, 18 - i * 4, 4, mainCol); rect(C - 6, C, 2, 6, mainCol); rect(C + 4, C - 2, 3, 8, mainCol); rect(C - 5, C - 6, 3, 3, secCol); rect(C + 2, C - 5, 2, 2, secCol); rect(C - 2, C + 2, 4, 4, '#ffffff'); rect(C - 1, C + 2, 2, 2, '#000000'); }
+            else if (a === 'knight_slime') { rect(C - 3, C - 4, 6, 8, mainCol); rect(C - 4, C - 9, 8, 6, mainCol); rect(C - 2, C - 3, 4, 6, '#e0f2fe'); rect(C + 4, C, 8, 2, secCol); rect(C + 4, C - 2, 2, 6, secCol); rect(C - 7, C - 2, 4, 8, thirdCol); rect(C - 3, C - 7, 6, 1, '#000000'); }
+            else if (a === 'golem') { rect(C - 4, C - 4, 8, 8, mainCol); rect(C - 8, C - 8, 4, 4, secCol); rect(C + 4, C - 8, 4, 4, secCol); rect(C - 6, C + 4, 4, 6, secCol); rect(C + 2, C + 4, 4, 6, secCol); rect(C - 2, C - 10, 4, 4, thirdCol); rect(C - 3, C - 3, 2, 2, '#ffffff'); rect(C + 5, C - 7, 1, 1, '#ffffff'); rect(C - 1, C - 9, 2, 1, '#000000'); }
+            else if (a === 'spider') { rect(C - 4, C - 4, 8, 8, mainCol); rect(C - 5, C - 5, 10, 2, secCol); line(C - 4, C, C - 10, C - 4, secCol); line(C - 4, C + 2, C - 10, C + 4, secCol); line(C - 4, C + 4, C - 8, C + 8, secCol); line(C + 4, C, C + 10, C - 4, secCol); line(C + 4, C + 2, C + 10, C + 4, secCol); line(C + 4, C + 4, C + 8, C + 8, secCol); rect(C - 3, C - 2, 2, 2, '#ef4444'); rect(C + 1, C - 2, 2, 2, '#ef4444'); rect(C - 1, C + 1, 2, 2, '#ef4444'); }
+            else if (a === 'ranger') { rect(C - 4, C - 10, 8, 8, mainCol); rect(C - 3, C - 9, 2, 6, secCol); rect(C + 1, C - 9, 2, 6, secCol); rect(C - 1, C - 5, 2, 2, '#fbbf24'); rect(C - 4, C - 2, 8, 6, mainCol); rect(C + 4, C - 2, 6, 4, mainCol); rect(C + 8, C - 1, 2, 2, '#22d3ee'); rect(C - 4, C + 4, 3, 6, mainCol); rect(C + 1, C + 4, 3, 6, mainCol); }
+            else if (a === 'brain') { rect(C - 6, C - 6, 12, 12, '#a5f3fc'); rect(C - 6, C + 6, 12, 2, secCol); rect(C - 6, C - 8, 12, 2, secCol); rect(C - 4, C - 4, 8, 6, '#d8b4fe'); rect(C - 2, C - 2, 4, 1, '#ffffff'); line(C - 6, C, C - 10, C + 4, secCol); line(C + 6, C, C + 10, C + 4, secCol); }
+            else if (a === 'tank') {
+                rect(C - 8, C + 4, 16, 4, '#1e293b'); rect(C - 9, C + 5, 18, 2, '#000000');
+                rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 4, C - 6, 8, 4, mainCol); rect(C, C - 5, 8, 2, '#3f3f46'); rect(C - 5, C, 10, 2, '#facc15');
+                rect(C - 3, C - 3, 2, 2, '#3f3f46'); rect(C - 1, C - 2, 2, 1, '#ef4444');
+            }
+            else if (a === 'jet') {
+                rect(C - 2, C - 10, 4, 6, '#ef4444'); rect(C - 4, C - 4, 8, 10, mainCol); rect(C - 10, C, 6, 8, secCol); rect(C + 4, C, 6, 8, secCol);
+                rect(C - 3, C - 6, 6, 2, '#38bdf8'); rect(C - 3, C + 6, 2, 4, '#ef4444'); rect(C + 1, C + 6, 2, 4, '#ef4444');
+            }
+            else if (a === 'gundam') {
+                rect(C - 4, C - 10, 8, 6, '#ffffff'); rect(C - 5, C - 8, 10, 2, '#ffffff'); rect(C - 1, C - 11, 2, 3, '#dc2626'); rect(C - 3, C - 9, 6, 1, '#facc15');
+                rect(C - 4, C - 4, 8, 8, '#2563eb'); rect(C - 2, C - 4, 4, 2, '#dc2626'); rect(C - 5, C - 4, 2, 4, '#ffffff'); rect(C + 3, C - 4, 2, 4, '#ffffff');
+                rect(C - 4, C + 4, 3, 6, '#ffffff'); rect(C + 1, C + 4, 3, 6, '#ffffff'); rect(C + 5, C, 2, 6, '#334155');
+            }
+            else if (a === 'mage_skull') {
+                rect(C - 4, C - 5, 8, 14, '#172554'); rect(C - 3, C - 9, 6, 5, '#e5e5e5'); rect(C - 2, C - 8, 1, 1, '#000000'); rect(C + 1, C - 8, 1, 1, '#000000');
+                rect(C - 6, C - 10, 12, 1, '#4c1d95'); rect(C - 3, C - 13, 6, 3, '#4c1d95'); rect(C + 5, C - 8, 1, 16, '#fbbf24'); circle(C + 5, C - 9, 2, '#a855f7');
+            }
+            else if (a === 'pumpkin') {
+                rect(C - 4, C - 2, 8, 10, '#3f3f46'); circle(C, C - 6, 6, '#ea580c'); rect(C - 2, C - 7, 1, 1, '#facc15'); rect(C + 1, C - 7, 1, 1, '#facc15');
+                rect(C - 2, C - 5, 4, 1, '#facc15'); rect(C, C - 13, 1, 2, '#166534'); rect(C - 6, C, 2, 2, '#ea580c'); rect(C + 4, C, 2, 2, '#ea580c');
+            }
+            else if (a === 'reaper') {
+                rect(C - 5, C - 8, 10, 16, '#000000'); rect(C - 3, C - 6, 6, 4, '#171717'); rect(C - 1, C - 5, 1, 1, '#ef4444'); rect(C, C - 5, 1, 1, '#ef4444');
+                rect(C + 6, C - 8, 1, 16, '#7f1d1d'); rect(C + 4, C - 10, 6, 2, '#9ca3af'); rect(C + 3, C - 10, 1, 6, '#9ca3af');
+            }
+            // --- REDESIGNED STAGE 3 (Wolf V2 & Cat V2 Targets) ---
+            else if (a === 'wolf_zombie_v2') {
+                rect(C - 6, C - 3, 13, 6, '#4b5563'); // Darker rot body
+                rect(C - 2, C - 2, 5, 4, '#991b1b'); // Ribcage
+                rect(C - 8, C - 7, 6, 6, '#4b5563'); // Head
+                rect(C - 6, C - 6, 2, 2, '#e7e5e4'); // Skull patch
+                rect(C - 5, C - 5, 1, 1, '#000000'); // Eye empty
+                rect(C - 7, C + 3, 2, 5, '#4b5563'); // Leg FL
+                rect(C + 4, C + 3, 2, 5, '#e7e5e4'); // Leg BR (Bone)
+                for (let i = 0; i < 4; i++) rect(C + (rng() - 0.5) * 14, C - 6 + (rng() - 0.5) * 8, 1, 1, '#bef264');
+            }
+            else if (a === 'wolf_guard_v2') {
+                rect(C - 7, C - 3, 14, 7, '#1e3a8a'); // Body Armor
+                rect(C - 3, C - 4, 6, 6, '#fbbf24'); // Heavy Plating
+                rect(C - 9, C - 8, 7, 7, '#172554'); // Helmet
+                rect(C - 9, C - 6, 7, 1, '#60a5fa'); // Visor
+                rect(C - 3, C - 6, 3, 3, '#1e40af'); // Pad
+                rect(C - 7, C + 4, 3, 5, '#3b82f6');
+                rect(C + 5, C + 4, 3, 5, '#3b82f6');
+            }
+            else if (a === 'wolf_alloy_v2') {
+                rect(C - 7, C - 3, 14, 5, '#e2e8f0'); // Silver Body
+                rect(C - 2, C - 8, 4, 6, '#94a3b8'); // Booster base
+                rect(C - 3, C - 9, 2, 4, '#0ea5e9'); // Thruster
+                rect(C - 9, C - 6, 7, 5, '#e2e8f0'); // Head
+                rect(C - 6, C - 6, 4, 1, '#0ea5e9'); // Visor
+                line(C + 7, C, C + 11, C - 4, '#0ea5e9'); // Saber tail
+                rect(C - 7, C + 5, 2, 3, '#94a3b8');
+                rect(C + 6, C + 5, 2, 3, '#94a3b8');
+            }
+            else if (a === 'ronin') {
+                rect(C - 3, C - 4, 6, 8, '#c2410c'); // Orange Gi
+                rect(C - 4, C - 10, 8, 4, '#fde047'); // Hat
+                rect(C - 3, C + 4, 2, 4, '#3f3f46'); // Hakama
+                rect(C + 1, C + 4, 2, 4, '#3f3f46');
+                line(C + 4, C - 4, C + 8, C - 8, '#e5e5e5'); // Blade handle
+                rect(C - 4, C - 3, 2, 2, '#ef4444'); // Scarf
+            }
+            else if (a === 'king_cat') {
+                rect(C - 4, C - 3, 8, 8, '#7e22ce'); // Robe
+                rect(C - 2, C - 3, 4, 8, '#ffffff'); // Fur
+                rect(C - 4, C - 10, 8, 3, '#fbbf24'); // Crown
+                rect(C - 1, C - 10, 2, 2, '#ef4444');
+                line(C + 6, C, C + 6, C + 6, '#fbbf24'); // Scepter
+                circle(C + 6, C - 1, 2, '#ef4444');
+            }
+            else if (a === 'lion_mane') {
+                rect(C - 4, C - 3, 8, 8, '#ffffff');
+                for (let t = 0; t < 6.3; t += 0.6) rect(C + Math.cos(t) * 11, C + Math.sin(t) * 11 - 5, 2, 2, '#facc15'); // Mane
+                rect(C - 2, C - 6, 4, 4, '#fff7ed'); // Face
+                rect(C - 1, C - 5, 2, 1, '#3b82f6'); // Eyes
+                line(C - 8, C, C - 4, C + 4, '#facc15'); // Lightning
+                line(C + 8, C, C + 4, C - 4, '#facc15');
+            }
+            // --- ANGEL FAMILY V3 ---
+            else if (a === 'biblical_angel') {
+                // Ophanim: Interlocking rings
+                for (let t = 0; t < 6.3; t += 0.1) {
+                    let r = 9;
+                    let x1 = C + Math.cos(t) * r; let y1 = C + Math.sin(t) * r * 0.4;
+                    rect(x1, y1, 1, 1, mainCol); // Ring 1
+                    let x2 = C + Math.cos(t) * r * 0.4; let y2 = C + Math.sin(t) * r;
+                    rect(x2, y2, 1, 1, secCol);  // Ring 2
+                }
+                circle(C, C, 4, '#ffffff'); // Core
+                // Eyes on rings
+                for (let i = 0; i < 8; i++) {
+                    rect(C + Math.cos(i * 0.8) * 9, C + Math.sin(i * 0.8) * 3.5, 2, 2, '#ffffff');
+                    rect(C + Math.cos(i * 0.8) * 9, C + Math.sin(i * 0.8) * 3.5, 1, 1, '#3b82f6');
+                }
+            }
+            else if (a === 'valkyrie') {
+                rect(C - 3, C - 5, 6, 8, '#e2e8f0'); // Armor Body
+                rect(C - 3, C - 9, 6, 4, '#facc15'); // Helm
+                rect(C - 4, C + 3, 3, 5, '#e2e8f0'); // Leg L
+                rect(C + 1, C + 3, 3, 5, '#e2e8f0'); // Leg R
+                rect(C - 8, C - 6, 4, 10, '#ffffff'); // Wing L
+                rect(C + 5, C - 6, 4, 10, '#ffffff'); // Wing R
+                line(C + 4, C + 8, C + 10, C - 8, '#fbbf24'); // Spear
+                rect(C + 9, C - 9, 2, 4, '#38bdf8'); // Spear Tip
+            }
+            else if (a === 'phoenix') {
+                // Body
+                rect(C - 2, C - 4, 4, 8, mainCol);
+                // Head
+                rect(C - 2, C - 8, 4, 4, mainCol);
+                rect(C, C - 7, 1, 1, '#fbbf24'); // Eye
+                rect(C - 3, C - 6, 1, 2, '#fbbf24'); // Beak
+                // Wings (Spread Y shape)
+                for (let i = 0; i < 8; i++) {
+                    rect(C - 2 - i, C - 4 - i, 1, 2, '#ef4444');
+                    rect(C + 1 + i, C - 4 - i, 1, 2, '#ef4444');
+                    rect(C - 2 - i, C - 2 - i, 1, 4, secCol); // Feathers
+                    rect(C + 1 + i, C - 2 - i, 1, 4, secCol);
+                }
+                // Tail
+                rect(C - 1, C + 4, 2, 6, '#fbbf24');
+                rect(C - 3, C + 6, 2, 4, '#ef4444');
+                rect(C + 1, C + 6, 2, 4, '#ef4444');
+            }
+            // --- COSMOS FAMILY V3 ---
+            else if (a === 'terra_titan') {
+                // Heavy Mech/Golem body
+                rect(C - 6, C - 6, 12, 10, mainCol); // Chest
+                rect(C - 8, C - 8, 4, 6, secCol); // Shoulder L
+                rect(C + 4, C - 8, 4, 6, secCol); // Shoulder R
+                // Head
+                rect(C - 3, C - 9, 6, 4, mainCol);
+                rect(C - 2, C - 8, 4, 1, '#f97316'); // Visor
+                // Limbs
+                rect(C - 8, C - 2, 3, 8, mainCol); // Arm L
+                rect(C + 5, C - 2, 3, 8, mainCol); // Arm R
+                rect(C - 6, C + 4, 4, 6, secCol); // Leg L
+                rect(C + 2, C + 4, 4, 6, secCol); // Leg R
+                // Core
+                circle(C, C - 2, 3, '#ea580c');
+                rect(C - 1, C - 3, 2, 2, '#f97316');
+            }
+            else if (a === 'cosmo_whale') {
+                // Massive Body (Sperm whale shape)
+                rect(C - 10, C - 6, 14, 10, mainCol); // Big Head/Front
+                rect(C + 4, C - 4, 6, 6, mainCol); // Mid
+                rect(C + 10, C - 2, 4, 3, mainCol); // Tail fuse
+                // Underbelly
+                rect(C - 10, C + 2, 12, 2, '#c7d2fe');
+                // Tail Fluke
+                rect(C + 12, C - 5, 2, 8, mainCol);
+                rect(C + 11, C - 6, 1, 2, mainCol);
+                rect(C + 11, C + 4, 1, 2, mainCol);
+                // Eye
+                rect(C - 5, C, 2, 1, '#ffffff');
+                // Blowhole Spray
+                for (let k = 0; k < 5; k++) rect(C - 6 + (rng() - 0.5) * 4, C - 10 + (rng() - 0.5) * 4, 1, 1, '#22d3ee');
+                // Stars/Spots
+                rect(C - 8, C - 3, 1, 1, '#ffffff');
+                rect(C - 2, C - 4, 1, 1, '#ffffff');
+                rect(C + 6, C - 1, 1, 1, '#ffffff');
+            }
+            else if (a === 'genesis_dragon') {
+                // Sinuous body
+                let px = C, py = C;
+                for (let i = 0; i < 30; i++) {
+                    rect(px, py, 3, 3, i % 2 == 0 ? '#000000' : secCol);
+                    px += Math.cos(i * 0.4) * 2;
+                    py += Math.sin(i * 0.4) * 2;
+                }
+                circle(C, C, 5, '#c084fc'); // Void Core
+                // Cosmic Particles
+                for (let k = 0; k < 20; k++) {
+                    rect(C + (rng() - 0.5) * 20, C + (rng() - 0.5) * 20, 1, 1, k % 3 == 0 ? '#22d3ee' : '#f472b6');
+                }
+            }
+            return renderSVG(grid);
+        }
+        const stages = [0, 1, 2, 3];
+        stages.forEach(stage => {
+            const section = document.createElement('div');
+            section.innerHTML = `<h2>Stage ${stage}</h2><div class="grid-container" id="stage-${stage}"></div>`;
+            gallery.appendChild(section);
+            const container = section.querySelector('.grid-container');
+            monsters.filter(m => m.stage === stage && (m.status === 'done' || m.status === 'new')).sort((a, b) => {
+                const famOrder = { 'Origin': 0, 'Dust': 1, 'Beast': 2, 'Spirit': 3, 'Glitch/Trash': 4, 'Slime': 5, 'Hacker': 6, 'Wolf': 7, 'Cat': 8, 'Mech Lion': 9, 'Ghost': 10, 'Angel': 11, 'Cosmos': 12 };
+                return (famOrder[a.fam] || 99) - (famOrder[b.fam] || 99);
+            }).forEach(m => {
+                const card = document.createElement('div');
+                card.className = 'card';
+                let badgeClass = m.status === 'new' ? 'new-badge' : 'done-badge';
+                card.innerHTML = `
+                    <div class="fam-label">${m.fam || 'Base'}</div>
+                    <div class="pixel-art mx-auto bg-slate-800 p-2">${generateMonsterSVG(m)}</div>
+                    <div class="mt-4 font-bold text-sm text-slate-200" style="min-height: 48px; display: flex; align-items: center; justify-content: center;">${m.name.replace(' ', '<br>')}</div>
+                    <span class="badge ${badgeClass}">${m.status.toUpperCase()}</span>
+                `;
+                container.appendChild(card);
+            });
+        });
+    </script>
+</body>
+</html>

src/main.js ADDED Viewed

	@@ -0,0 +1,76 @@

+import { renderLandingView, setupLandingEvents } from './views/LandingView.js';
+import { renderInstructorView, setupInstructorEvents } from './views/InstructorView.js';
+import { renderStudentView, setupStudentEvents } from './views/StudentView.js';
+import { renderAdminView, setupAdminEvents } from './views/AdminView.js';
+const app = document.querySelector('#app');
+function navigateTo(view) {
+    // Update hash maybe? For now simple switch
+    switch (view) {
+        case 'landing':
+            app.innerHTML = renderLandingView();
+            setupLandingEvents(navigateTo);
+            break;
+        case 'instructor':
+            app.innerHTML = '載入中...';
+            // Async render because Instructor view fetches challenges for column headers
+            renderInstructorView().then(html => {
+                app.innerHTML = html;
+                setupInstructorEvents();
+            });
+            break;
+        case 'student':
+            app.innerHTML = '載入中...';
+            // Async render because Student view fetches challenges
+            renderStudentView().then(html => {
+                app.innerHTML = html;
+                setupStudentEvents();
+            }).catch(err => {
+                console.error("Student View Load Error:", err);
+                app.innerHTML = `<div class="p-10 text-center text-red-500">
+                    <h2 class="text-xl font-bold mb-2">載入失敗</h2>
+                    <p class="mb-4">${err.message}</p>
+                    <button onclick="window.location.reload()" class="bg-gray-700 text-white px-4 py-2 rounded">重新整理</button>
+                </div>`;
+            });
+            break;
+        case 'admin':
+            app.innerHTML = renderAdminView();
+            setupAdminEvents();
+            break;
+        default:
+            app.innerHTML = renderLandingView();
+            setupLandingEvents(navigateTo);
+    }
+}
+// Route Handler
+function handleRoute() {
+    const hash = window.location.hash.slice(1);
+    if (hash === 'admin') {
+        navigateTo('admin');
+        return;
+    }
+    if (hash === 'instructor') {
+        navigateTo('instructor');
+        return;
+    }
+    const roomCode = localStorage.getItem('vibecoding_room_code');
+    const userId = localStorage.getItem('vibecoding_user_id'); // Changed key to match new logic
+    if (roomCode && userId && !hash) {
+        navigateTo('student');
+    } else {
+        navigateTo('landing');
+    }
+}
+// Listen to hash changes
+window.addEventListener('hashchange', handleRoute);
+// Initial Load
+handleRoute();

src/services/auth.js ADDED Viewed

	@@ -0,0 +1,182 @@

+import { auth, db } from "./firebase.js";
+import {
+    signInWithEmailAndPassword,
+    createUserWithEmailAndPassword,
+    signOut,
+    sendPasswordResetEmail
+} from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
+import {
+    doc,
+    getDoc,
+    setDoc,
+    updateDoc,
+    collection,
+    getDocs,
+    deleteDoc,
+    serverTimestamp,
+    query
+} from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
+const INSTRUCTORS_COLLECTION = "instructors";
+const SUPER_ADMIN_EMAIL = "t92206@gmail.com";
+/**
+ * Sign in with Email/Password
+ */
+export async function loginWithEmail(email, password) {
+    try {
+        const result = await signInWithEmailAndPassword(auth, email, password);
+        return result.user;
+    } catch (error) {
+        console.error("Login Error:", error);
+        throw error;
+    }
+}
+/**
+ * Register with Email/Password
+ * (Used for new instructors to create their auth account matching their whitelisted email)
+ */
+export async function registerWithEmail(email, password) {
+    try {
+        const result = await createUserWithEmailAndPassword(auth, email, password);
+        return result.user;
+    } catch (error) {
+        console.error("Register Error:", error);
+        throw error;
+    }
+}
+/**
+ * Send Password Reset Email
+ */
+export async function resetPassword(email) {
+    try {
+        await sendPasswordResetEmail(auth, email);
+    } catch (error) {
+        console.error("Reset Password Error:", error);
+        throw error;
+    }
+}
+/**
+ * Sign out
+ */
+export async function signOutUser() {
+    try {
+        await signOut(auth);
+    } catch (error) {
+        console.error("Sign Out Error:", error);
+        throw error;
+    }
+}
+/**
+ * Check if user is an instructor and get permissions
+ * Bootstraps the Super Admin if not exists
+ * @param {object} user - Firebase User object
+ * @returns {Promise<object|null>} Instructor data or null if not authorized
+ */
+export async function checkInstructorPermission(user) {
+    if (!user || !user.email) return null;
+    const email = user.email;
+    const instructorRef = doc(db, INSTRUCTORS_COLLECTION, email);
+    let snap;
+    try {
+        console.log(`[Permission Check] Checking whitelist for email: '${email}'`);
+        snap = await getDoc(instructorRef);
+        console.log(`[Permission Check] Result for '${email}': exists=${snap.exists()}`);
+    } catch (error) {
+        console.warn(`[Permission Check] Failed for '${email}'. Error:`, error);
+        console.warn("Instructor Permission Check Failed (likely not whitelisted):", error.code);
+        // If permission denied, it means they are not allowed to read the doc => likely not in whitelist
+        return null;
+    }
+    // Bootstrap Super Admin
+    if (email === SUPER_ADMIN_EMAIL) {
+        const adminData = {
+            name: user.displayName || "Super Admin",
+            email: email,
+            role: 'admin',
+            permissions: ['create_room', 'add_question', 'manage_instructors'],
+            lastLogin: serverTimestamp()
+        };
+        try {
+            if (!snap.exists()) {
+                await setDoc(instructorRef, {
+                    ...adminData,
+                    createdAt: serverTimestamp()
+                });
+            } else {
+                // Ensure admin always has full permissions
+                await updateDoc(instructorRef, {
+                    role: 'admin',
+                    permissions: ['create_room', 'add_question', 'manage_instructors'],
+                    lastLogin: serverTimestamp()
+                });
+            }
+        } catch (e) {
+            console.warn("Admin bootstrap failed (likely permission issues), but allowing login as admin.", e);
+            // We continue because we return adminData anyway, effectively granting admin rights in UI.
+        }
+        return adminData;
+    }
+    if (snap.exists()) {
+        const data = snap.data();
+        try {
+            await updateDoc(instructorRef, { lastLogin: serverTimestamp() });
+        } catch (e) {
+            console.warn("Failed to update lastLogin (likely permission), proceeding anyway.", e);
+        }
+        return data;
+    }
+    return null; // Not an instructor
+}
+/**
+ * Get all instructors (Admin Only)
+ */
+export async function getInstructors() {
+    const q = query(collection(db, INSTRUCTORS_COLLECTION));
+    const snapshot = await getDocs(q);
+    return snapshot.docs.map(doc => doc.data());
+}
+/**
+ * Add new instructor (Admin Only)
+ */
+export async function addInstructor(email, name, permissions) {
+    const safeEmail = email.trim(); // Ensure no leading/trailing spaces
+    const instructorRef = doc(db, INSTRUCTORS_COLLECTION, safeEmail);
+    await setDoc(instructorRef, {
+        email: safeEmail,
+        name,
+        role: 'instructor',
+        permissions,
+        createdAt: serverTimestamp()
+    });
+}
+/**
+ * Update instructor (Admin Only)
+ */
+export async function updateInstructor(email, data) {
+    const instructorRef = doc(db, INSTRUCTORS_COLLECTION, email);
+    await updateDoc(instructorRef, data);
+}
+/**
+ * Remove instructor (Admin Only)
+ */
+export async function removeInstructor(email) {
+    if (email === SUPER_ADMIN_EMAIL) throw new Error("Cannot remove Super Admin");
+    await deleteDoc(doc(db, INSTRUCTORS_COLLECTION, email));
+}

src/services/classroom.js ADDED Viewed

	@@ -0,0 +1,569 @@

+import { db } from "./firebase.js";
+import {
+    collection,
+    doc,
+    setDoc,
+    getDoc,
+    addDoc,
+    onSnapshot,
+    serverTimestamp,
+    query,
+    where,
+    getDocs,
+    orderBy,
+    updateDoc,
+    getCountFromServer,
+    deleteDoc
+} from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
+// Collection references
+const ROOMS_COLLECTION = "classrooms";
+const USERS_COLLECTION = "users";
+const PROGRESS_COLLECTION = "progress";
+const CHALLENGES_COLLECTION = "challenges";
+/**
+ * Creates a new classroom room
+ * @param {string} promotedCode - Optional custom code
+ * @param {string} hostName - Optional host name
+ * @returns {Promise<string>} The room code
+ */
+export async function createRoom(promotedCode = null, hostName = 'Unknown') {
+    const roomCode = promotedCode || Math.floor(1000 + Math.random() * 9000).toString();
+    const roomRef = doc(db, ROOMS_COLLECTION, roomCode);
+    await setDoc(roomRef, {
+        createdAt: serverTimestamp(),
+        active: true,
+        host: hostName
+    });
+    return roomCode;
+}
+/**
+ * Cleans up rooms older than 14 days (inactive)
+ */
+export async function cleanupOldRooms() {
+    try {
+        const fourteenDaysAgo = new Date();
+        fourteenDaysAgo.setDate(fourteenDaysAgo.getDate() - 14);
+        const roomsRef = collection(db, ROOMS_COLLECTION);
+        const q = query(roomsRef, where("createdAt", "<", fourteenDaysAgo));
+        const snapshot = await getDocs(q);
+        if (snapshot.empty) return;
+        const deletePromises = snapshot.docs.map(doc => deleteDoc(doc.ref));
+        await Promise.all(deletePromises);
+        console.log(`Cleaned up ${snapshot.size} old rooms.`);
+    } catch (e) {
+        console.error("Cleanup failed:", e);
+    }
+}
+/**
+ * Verifies instructor password against Firestore (Auto-seeds if missing)
+ * @param {string} inputPassword
+ * @returns {Promise<boolean>}
+ */
+export async function verifyInstructorPassword(inputPassword) {
+    const settingsRef = doc(db, "settings", "instructor_auth");
+    const snap = await getDoc(settingsRef);
+    if (!snap.exists()) {
+        // Auto-seed default password for migration
+        await setDoc(settingsRef, { password: "88300" });
+        return inputPassword === "88300";
+    }
+    return snap.data().password === inputPassword;
+}
+/**
+ * Joins a room with Dual-Role Auth / Session Persistence logic
+ * @param {string} roomCode
+ * @param {string} nickname
+ * @returns {Promise<string>} The student ID (userId)
+ */
+export async function joinRoom(roomCode, nickname) {
+    // 1. Verify Room Exists
+    const roomRef = doc(db, ROOMS_COLLECTION, roomCode);
+    const roomSnap = await getDoc(roomRef);
+    if (!roomSnap.exists()) {
+        throw new Error("教室代碼不存在");
+    }
+    // 2. Check if user already exists in this room (Cross-device sync)
+    const usersRef = collection(db, USERS_COLLECTION);
+    const q = query(
+        usersRef,
+        where("current_room", "==", roomCode),
+        where("nickname", "==", nickname)
+    );
+    const querySnapshot = await getDocs(q);
+    if (!querySnapshot.empty) {
+        // User exists, return existing ID
+        const userDoc = querySnapshot.docs[0];
+        // Update last active
+        await updateDoc(userDoc.ref, { last_active: serverTimestamp() });
+        return userDoc.id;
+    }
+    // 3. Create new user if not exists
+    const newUserRef = await addDoc(usersRef, {
+        nickname,
+        current_room: roomCode,
+        role: 'student',
+        joinedAt: serverTimestamp(),
+        last_active: serverTimestamp()
+    });
+    return newUserRef.id;
+}
+/**
+ * Submits a prompt for a specific level
+ * @param {string} userId
+ * @param {string} roomCode
+ * @param {string} challengeId
+ * @param {string} prompt
+ */
+export async function submitPrompt(userId, roomCode, challengeId, prompt) {
+    const text = prompt.trim();
+    if (!text) return;
+    // Check if submission already exists to update it, or add new
+    // For simplicity, we can just use a composite ID or query first.
+    // Let's use addDoc for history, or setDoc with custom ID for latest state.
+    // Requirement says "progress/{docId}", let's query first to see if we should update.
+    const progressRef = collection(db, PROGRESS_COLLECTION);
+    const q = query(
+        progressRef,
+        where("userId", "==", userId),
+        where("challengeId", "==", challengeId)
+    );
+    const snapshot = await getDocs(q);
+    if (!snapshot.empty) {
+        // Update existing
+        const docRef = snapshot.docs[0].ref;
+        await updateDoc(docRef, {
+            status: "completed",
+            submission_prompt: text,
+            roomCode: roomCode, // Ensure roomCode is updated for legacy docs
+            timestamp: serverTimestamp()
+        });
+    } else {
+        // Create new
+        await addDoc(progressRef, {
+            userId,
+            roomCode, // Added for easier querying by instructor
+            challengeId,
+            status: "completed",
+            submission_prompt: text,
+            timestamp: serverTimestamp()
+        });
+    }
+    // Update user last active
+    const userRef = doc(db, USERS_COLLECTION, userId);
+    await updateDoc(userRef, { last_active: serverTimestamp() });
+}
+/**
+ * Records that a user has started a challenge
+ * @param {string} userId
+ * @param {string} roomCode
+ * @param {string} challengeId
+ */
+export async function startChallenge(userId, roomCode, challengeId) {
+    const progressRef = collection(db, PROGRESS_COLLECTION);
+    const q = query(
+        progressRef,
+        where("userId", "==", userId),
+        where("challengeId", "==", challengeId)
+    );
+    const snapshot = await getDocs(q);
+    if (!snapshot.empty) {
+        // Already exists (maybe started or completed)
+        const docData = snapshot.docs[0].data();
+        if (docData.status === 'completed') return; // Don't overwrite completed status
+        // If already started, maybe just update timestamp? Or do nothing.
+        // Let's update timestamp to reflect "last worked on"
+        await updateDoc(snapshot.docs[0].ref, {
+            status: 'started',
+            roomCode: String(roomCode), // Ensure roomCode is updated
+            timestamp: serverTimestamp()
+        });
+    } else {
+        // Create new progress entry with 'started' status
+        await addDoc(progressRef, {
+            userId,
+            roomCode: String(roomCode),
+            challengeId,
+            status: 'started',
+            startedAt: serverTimestamp(), // Keep original start time if we want to track duration
+            timestamp: serverTimestamp()  // Last update time
+        });
+    }
+    // Update user last active
+    const userRef = doc(db, USERS_COLLECTION, userId);
+    await updateDoc(userRef, { last_active: serverTimestamp() });
+}
+/**
+ * Subscribes to room users and their progress
+ * @param {string} roomCode
+ * @param {Function} callback (studentsWithProgress) => void
+ * @returns {Function} Unsubscribe function
+ */
+export function subscribeToRoom(roomCode, callback) {
+    // Listen to users in the room
+    const usersQuery = query(collection(db, USERS_COLLECTION), where("current_room", "==", roomCode));
+    // We also need progress. Real-time listening to TWO collections and joining them
+    // is complex in NoSQL.
+    // Strategy: Listen to Users. When Users change, fetch all progress for this room (or listen to it).
+    // Simpler efficient approach for dashboard:
+    // Listen to Progress independent of users? No, we need user list.
+    // Let's listen to Users, and inside, listen to Progress for this room.
+    let unsubscribeProgress = () => { };
+    const unsubscribeUsers = onSnapshot(usersQuery, (userSnap) => {
+        const users = [];
+        userSnap.forEach((doc) => {
+            users.push({ id: doc.id, ...doc.data() });
+        });
+        // Now listen to progress for this room
+        const progressQuery = query(collection(db, PROGRESS_COLLECTION), where("roomCode", "==", roomCode));
+        unsubscribeProgress(); // Detach previous listener if any
+        unsubscribeProgress = onSnapshot(progressQuery, (progressSnap) => {
+            const progressMap = {}; // { userId: { challengeId: { status, prompt } } }
+            progressSnap.forEach(doc => {
+                const data = doc.data();
+                if (!progressMap[data.userId]) progressMap[data.userId] = {};
+                progressMap[data.userId][data.challengeId] = {
+                    status: data.status,
+                    prompt: data.submission_prompt,
+                    timestamp: data.timestamp,
+                    likes: data.likes || 0 // Include likes
+                };
+            });
+            // Merge back to users
+            const combinedData = users.map(user => ({
+                ...user,
+                progress: progressMap[user.id] || {}
+            }));
+            callback(combinedData);
+        });
+    });
+    return () => {
+        unsubscribeUsers();
+        unsubscribeProgress();
+    };
+}
+/**
+ * Fetches prompts for Peer Learning
+ */
+export async function getPeerPrompts(roomCode, challengeId) {
+    const progressRef = collection(db, PROGRESS_COLLECTION);
+    // Query completions (filtered by challenge, status)
+    const q = query(
+        progressRef,
+        where("challengeId", "==", challengeId),
+        where("status", "==", "completed")
+    );
+    try {
+        const snapshot = await getDocs(q);
+        const entries = [];
+        for (const docSnapshot of snapshot.docs) {
+            const data = docSnapshot.data();
+            // Fetch nickname & user room info
+            // We fetch user first to verify room if needed
+            const userSnap = await getDoc(doc(db, USERS_COLLECTION, data.userId));
+            if (!userSnap.exists()) continue;
+            const userData = userSnap.data();
+            // Room Code Check
+            // 1. Check direct reference in progress (Fastest)
+            // 2. Fallback to user's current room (Legacy support)
+            const targetRoom = data.roomCode || userData.current_room;
+            if (String(targetRoom) !== String(roomCode)) {
+                continue;
+            }
+            entries.push({
+                id: docSnapshot.id,
+                userId: data.userId,
+                nickname: userData.nickname,
+                prompt: data.submission_prompt,
+                timestamp: data.timestamp,
+                likes: data.likes || 0,
+                likedBy: data.likedBy || []
+            });
+        }
+        return entries;
+    } catch (e) {
+        console.error("Error fetching peer prompts:", e);
+        return [];
+    }
+}
+/**
+ * Resets a user's progress for a specific challenge (sets status to 'started')
+ * @param {string} userId
+ * @param {string} roomCode
+ * @param {string} challengeId
+ */
+export async function resetProgress(userId, roomCode, challengeId) {
+    const progressRef = collection(db, PROGRESS_COLLECTION);
+    const q = query(
+        progressRef,
+        where("userId", "==", userId),
+        where("challengeId", "==", challengeId)
+    );
+    const snapshot = await getDocs(q);
+    if (!snapshot.empty) {
+        // Reset status to 'started' so they can submit again
+        await updateDoc(snapshot.docs[0].ref, {
+            status: 'started',
+            timestamp: serverTimestamp()
+        });
+    }
+}
+/**
+ * Validates and gets progress for a specific user
+ * @param {string} userId
+ * @returns {Promise<Object>} Map of challengeId -> { status, prompt, timestamp }
+ */
+export async function getUserProgress(userId) {
+    const progressRef = collection(db, PROGRESS_COLLECTION);
+    const q = query(progressRef, where("userId", "==", userId));
+    const snapshot = await getDocs(q);
+    const progressMap = {};
+    snapshot.forEach(doc => {
+        const data = doc.data();
+        progressMap[data.challengeId] = data;
+    });
+    return progressMap;
+}
+// --- Admin / Challenge Services ---
+export async function getChallenges() {
+    const q = query(collection(db, CHALLENGES_COLLECTION), orderBy("order", "asc"));
+    const snapshot = await getDocs(q);
+    return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+}
+export async function createChallenge(data) {
+    // data: { level, title, description, link, order }
+    await addDoc(collection(db, CHALLENGES_COLLECTION), data);
+}
+export async function updateChallenge(id, data) {
+    await updateDoc(doc(db, CHALLENGES_COLLECTION, id), data);
+}
+export async function deleteChallenge(id) {
+    await deleteDoc(doc(db, CHALLENGES_COLLECTION, id));
+}
+// --- Social Features ---
+const NOTIFICATIONS_COLLECTION = "notifications";
+/**
+ * Toggles like on a progress submission
+ */
+export async function toggleLike(progressId, currentUserId, currentNickname, targetUserId, challengeTitle) {
+    const progressRef = doc(db, PROGRESS_COLLECTION, progressId);
+    const progressSnap = await getDoc(progressRef);
+    if (!progressSnap.exists()) return;
+    const data = progressSnap.data();
+    const likedBy = data.likedBy || [];
+    const isLiked = likedBy.includes(currentUserId);
+    if (isLiked) {
+        // Unlike
+        await updateDoc(progressRef, {
+            likes: (data.likes || 1) - 1,
+            likedBy: likedBy.filter(id => id !== currentUserId)
+        });
+    } else {
+        // Like
+        await updateDoc(progressRef, {
+            likes: (data.likes || 0) + 1,
+            likedBy: [...likedBy, currentUserId]
+        });
+        // Send Notification if not liking self
+        if (targetUserId !== currentUserId) {
+            await addDoc(collection(db, NOTIFICATIONS_COLLECTION), {
+                recipientId: targetUserId,
+                senderNickname: currentNickname,
+                challengeTitle: challengeTitle,
+                type: 'like',
+                timestamp: serverTimestamp(),
+                read: false
+            });
+        }
+    }
+}
+/**
+ * Listen to notifications for a user
+ */
+export function subscribeToNotifications(userId, callback) {
+    const q = query(
+        collection(db, NOTIFICATIONS_COLLECTION),
+        where("recipientId", "==", userId),
+        where("read", "==", false),
+        orderBy("timestamp", "desc")
+    );
+    return onSnapshot(q, (snapshot) => {
+        const notifications = [];
+        snapshot.forEach(doc => {
+            notifications.push({ id: doc.id, ...doc.data() });
+        });
+        callback(notifications);
+    });
+}
+/**
+ * Mark notification as read
+ */
+export async function markNotificationRead(notificationId) {
+    await updateDoc(doc(db, NOTIFICATIONS_COLLECTION, notificationId), {
+        read: true
+    });
+}
+/**
+ * Gets the number of users in a room
+ * @param {string} roomCode
+ * @returns {Promise<number>}
+ */
+/**
+ * Gets the number of users in a room
+ * @param {string} roomCode
+ * @returns {Promise<number>}
+ */
+export async function getClassSize(roomCode) {
+    const q = query(
+        collection(db, USERS_COLLECTION),
+        where("current_room", "==", roomCode)
+    );
+    const snapshot = await getCountFromServer(q);
+    return snapshot.data().count;
+}
+/**
+ * Gets the number of students who have reached a higher or equal stage
+ * Used for determining percentile ranking
+ * @param {string} roomCode
+ * @param {number} targetStage
+ * @returns {Promise<number>}
+ */
+export async function getHigherStageCount(roomCode, targetStage) {
+    const q = query(
+        collection(db, USERS_COLLECTION),
+        where("current_room", "==", roomCode),
+        where("monster_stage", ">=", targetStage)
+    );
+    const snapshot = await getCountFromServer(q);
+    return snapshot.data().count;
+}
+/**
+ * Updates a student's monster stage and specific form
+ * @param {string} userId
+ * @param {number} newStage
+ * @param {string} monsterId (Optional, for persisting specific form)
+ */
+export async function updateUserMonster(userId, newStage, monsterId = undefined) {
+    const userRef = doc(db, USERS_COLLECTION, userId);
+    const data = { monster_stage: newStage };
+    // If monsterId is explicitly provided (including null/empty string), update it.
+    // If undefined, leave as is.
+    // We want to allow clearing it (null) or setting 'Egg'.
+    if (monsterId !== undefined) {
+        data.monster_id = monsterId;
+    }
+    await updateDoc(userRef, data);
+}
+/**
+ * Gets user profile data
+ * @param {string} userId
+ * @returns {Promise<Object>}
+ */
+export async function getUser(userId) {
+    const userRef = doc(db, USERS_COLLECTION, userId);
+    const snap = await getDoc(userRef);
+    return snap.exists() ? snap.data() : null;
+}
+/**
+ * Removes a user from the classroom (Kick)
+ * @param {string} userId
+ */
+/**
+ * Subscribes to a single user's progress for real-time updates
+ * @param {string} userId
+ * @param {Function} callback (progressMap) => void
+ * @returns {Function} unsubscribe
+ */
+export function subscribeToUserProgress(userId, callback) {
+    const q = query(
+        collection(db, PROGRESS_COLLECTION),
+        where("userId", "==", userId)
+    );
+    return onSnapshot(q, (snapshot) => {
+        const progressMap = {};
+        snapshot.forEach(doc => {
+            const data = doc.data();
+            progressMap[data.challengeId] = data;
+        });
+        callback(progressMap);
+    });
+}
+export async function removeUser(userId) {
+    if (!userId) return;
+    await deleteDoc(doc(db, USERS_COLLECTION, userId));
+}

src/services/firebase.js ADDED Viewed

	@@ -0,0 +1,19 @@

+import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
+import { getFirestore } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
+import { getAuth, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
+const firebaseConfig = {
+    apiKey: "AIzaSyDq2a-yE6pbaeNf6KzkTcogh9oi-6nQbKk",
+    authDomain: "vibecodingex.firebaseapp.com",
+    projectId: "vibecodingex",
+    storageBucket: "vibecodingex.firebasestorage.app",
+    messagingSenderId: "831513336128",
+    appId: "1:831513336128:web:e31d2654fcfa19fb2642a5"
+};
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+const auth = getAuth(app);
+const googleProvider = new GoogleAuthProvider();
+export { db, auth, googleProvider };

src/utils/monsterUtils.js ADDED Viewed

	@@ -0,0 +1,532 @@

+/**
+ * Logic for generating Pixel Art Monsters
+ * Adapted from monster_preview.html
+ */
+export const MONSTER_STAGES = {
+    EGG: 0,
+    BASIC: 1,
+    EVOLVED: 2,
+    FINAL: 3
+};
+// Monster Definitions
+export const MONSTER_DEFS = [
+    { id: 'Egg', name: '🥚 像素蛋', type: 'neutral', stage: 0, arch: 'egg', fam: 'Origin' },
+    // Stage 1
+    { id: 'L1_C', name: '🔴 灰塵球 Dust-Ball', type: 'glitch', stage: 1, arch: 'dust', fam: 'Dust' },
+    { id: 'L1_B', name: '🟡 像素狗 Pixel-Pup', type: 'animal', stage: 1, arch: 'beast_pup', fam: 'Beast' },
+    { id: 'L1_A', name: '🔵 光之靈 Lumina', type: 'holy', stage: 1, arch: 'spirit_orb', fam: 'Spirit' },
+    // Stage 2
+    { id: 'L2_CC', name: '🔴 垃圾怪 Trash-Mob', type: 'glitch', stage: 2, arch: 'dust_trash', fam: 'Dust' },
+    { id: 'L2_CB', name: '🟡 史萊姆 Slime-Box', type: 'slime', stage: 2, arch: 'dust_slime', fam: 'Dust' },
+    { id: 'L2_CA', name: '🔵 駭客蟲 Hacker-Bug', type: 'tech', stage: 2, arch: 'dust_tech', fam: 'Dust' },
+    { id: 'L2_BC', name: '🔴 廢鐵狼 Rusty-Wolf', type: 'grunge', stage: 2, arch: 'beast_wolf', fam: 'Beast' },
+    { id: 'L2_BB', name: '🟡 勇者貓 Hero-Cat', type: 'animal', stage: 2, arch: 'beast_cat', fam: 'Beast' },
+    { id: 'L2_BA', name: '🔵 機甲獅 Mecha-Lion', type: 'mech', stage: 2, arch: 'beast_mech', fam: 'Beast' },
+    { id: 'L2_AC', name: '🔴 幽靈火 Ghost-Fire', type: 'spirit', stage: 2, arch: 'spirit_fire', fam: 'Spirit' },
+    { id: 'L2_AB', name: '🟡 天使鳥 Angel-Bird', type: 'holy', stage: 2, arch: 'spirit_wing', fam: 'Spirit' },
+    { id: 'L2_AA', name: '🔵 星雲龍 Cosmos-Dragon', type: 'cosmic', stage: 2, arch: 'spirit_dragon', fam: 'Spirit' },
+    // Stage 3
+    { id: 'L3_CCC', name: '🗑️ 崩潰垃圾山', type: 'glitch', stage: 3, arch: 'pile_big', fam: 'Glitch/Trash' },
+    { id: 'L3_CCB', name: '📦 寶箱怪', type: 'mimic', stage: 3, arch: 'box_teeth', fam: 'Glitch/Trash' },
+    { id: 'L3_CCA', name: '🦠 病毒王', type: 'virus', stage: 3, arch: 'corona', fam: 'Glitch/Trash' },
+    { id: 'L3_CBC', name: '💧 汙泥怪', type: 'grunge', stage: 3, arch: 'fluid', fam: 'Slime' },
+    { id: 'L3_CBB', name: '🧊 果凍騎士', type: 'slime', stage: 3, arch: 'knight_slime', fam: 'Slime' },
+    { id: 'L3_CBA', name: '💎 鑽石魔像', type: 'crystal', stage: 3, arch: 'golem', fam: 'Slime' },
+    { id: 'L3_CAC', name: '🕷️ 錯誤蜘蛛', type: 'glitch', stage: 3, arch: 'spider', fam: 'Hacker' },
+    { id: 'L3_CAB', name: '👾 程式遊俠', type: 'tech', stage: 3, arch: 'ranger', fam: 'Hacker' },
+    { id: 'L3_CAA', name: '🧠 量子主腦', type: 'tech', stage: 3, arch: 'brain', fam: 'Hacker' },
+    { id: 'L3_BAC', name: '🚜 重裝推土機', type: 'mech', stage: 3, arch: 'tank', fam: 'Mech Lion' },
+    { id: 'L3_BAB', name: '✈️ 變形戰機', type: 'mech', stage: 3, arch: 'jet', fam: 'Mech Lion' },
+    { id: 'L3_BAA', name: '🤖 究極鋼彈', type: 'mech', stage: 3, arch: 'gundam', fam: 'Mech Lion' },
+    { id: 'L3_ACC', name: '💀 骷髏法師', type: 'undead', stage: 3, arch: 'mage_skull', fam: 'Ghost' },
+    { id: 'L3_ACB', name: '🕯️ 南瓜燈杰克', type: 'spirit', stage: 3, arch: 'pumpkin', fam: 'Ghost' },
+    { id: 'L3_ACA', name: '👻 虛空死神', type: 'void', stage: 3, arch: 'reaper', fam: 'Ghost' },
+    // Stage 3 - REDESIGN TARGETS (Wolf V2 & Cat)
+    { id: 'L3_BCC', name: '🧟 喪屍犬', type: 'undead', stage: 3, arch: 'wolf_zombie_v2', fam: 'Wolf' },
+    { id: 'L3_BCB', name: '🐕 警備犬', type: 'animal', stage: 3, arch: 'wolf_guard_v2', fam: 'Wolf' },
+    { id: 'L3_BCA', name: '🐺 合金戰狼', type: 'mech', stage: 3, arch: 'wolf_alloy_v2', fam: 'Wolf' },
+    { id: 'L3_BBC', name: '😼 流浪劍客', type: 'warrior', stage: 3, arch: 'ronin', fam: 'Cat' },
+    { id: 'L3_BBB', name: '👑 貓咪國王', type: 'royal', stage: 3, arch: 'king_cat', fam: 'Cat' },
+    { id: 'L3_BBA', name: '🦁 雷霆獅王', type: 'elemental', stage: 3, arch: 'lion_mane', fam: 'Cat' },
+    // Stage 3 - NEW ADDITIONS (Angel & Cosmos)
+    { id: 'L3_ABC', name: '👁️ 座天使 Ophanim', type: 'holy', stage: 3, arch: 'biblical_angel', fam: 'Angel' },
+    { id: 'L3_ABB', name: '⚔️ 女武神 Valkyrie', type: 'warrior', stage: 3, arch: 'valkyrie', fam: 'Angel' },
+    { id: 'L3_ABA', name: '🔥 聖火鳳凰 Phoenix', type: 'divine', stage: 3, arch: 'phoenix', fam: 'Angel' },
+    { id: 'L3_AAC', name: '🛡️ 大地泰坦 Titan', type: 'cosmic', stage: 3, arch: 'terra_titan', fam: 'Cosmos' },
+    { id: 'L3_AAB', name: '🐋 星海鯨 Astro-Whale', type: 'cosmic', stage: 3, arch: 'cosmo_whale', fam: 'Cosmos' },
+    { id: 'L3_AAA', name: '🌌 創世龍 Genesis', type: 'god', stage: 3, arch: 'genesis_dragon', fam: 'Cosmos' },
+];
+const palettes = {
+    base: ['#94A3B8', '#64748B', '#475569', '#334155'],
+    // Standard
+    glitch: ['#18181b', '#27272a', '#3f3f46', '#ef4444'],
+    trash: ['#3f3f46', '#71717a', '#a1a1aa', '#ef4444'],
+    mimic: ['#854d0e', '#a16207', '#ca8a04', '#eab308'],
+    virus: ['#2e1065', '#581c87', '#7e22ce', '#bef264', '#84cc16'],
+    spider: ['#1e293b', '#0f172a', '#b91c1c', '#ef4444'],
+    slime: ['#059669', '#10b981', '#34d399', '#d1fae5'],
+    fluid: ['#3f3f46', '#52525b', '#4b5563', '#a1a1aa'],
+    knight: ['#0ea5e9', '#38bdf8', '#7dd3fc', '#ffffff'],
+    crypto: ['#0891b2', '#06b6d4', '#22d3ee', '#cffafe'],
+    tech: ['#22d3ee', '#06b6d4', '#0891b2', '#155e75'],
+    ranger: ['#3b82f6', '#2563eb', '#1d4ed8', '#fbbf24'],
+    brain: ['#d8b4fe', '#c084fc', '#a855f7', '#7e22ce', '#22d3ee'],
+    tank: ['#3f3f46', '#18181b', '#facc15', '#fbbf24'],
+    jet: ['#cbd5e1', '#94a3b8', '#ef4444', '#dc2626'],
+    gundam: ['#ffffff', '#2563eb', '#dc2626', '#facc15'],
+    mage: ['#4c1d95', '#a855f7', '#172554', '#fbbf24'],
+    pumpkin: ['#ea580c', '#c2410c', '#3f3f46', '#facc15'],
+    reaper: ['#000000', '#171717', '#7f1d1d', '#9ca3af'],
+    // Wolf V2
+    wolf: ['#c2410c', '#9a3412', '#7c2d12', '#ef4444'], // Rust/Browns
+    zombie: ['#44403c', '#78716c', '#991b1b', '#fecaca'],
+    guard: ['#172554', '#1e3a8a', '#fbbf24', '#f59e0b', '#3b82f6'],
+    alloy: ['#e2e8f0', '#94a3b8', '#0ea5e9', '#0284c7', '#38bdf8', '#ffffff'], // Added white/brights
+    // Cat V2
+    cat: ['#fb923c', '#ea580c', '#c2410c', '#fff7ed'],
+    ronin: ['#c2410c', '#9a3412', '#fde047', '#e2e8f0'],
+    king: ['#7e22ce', '#a855f7', '#fbbf24', '#ffffff'],
+    thunder: ['#facc15', '#eab308', '#fefce8', '#f59e0b', '#ffffff'],
+    // Base Fams
+    beast: ['#fbbf24', '#f59e0b', '#d97706', '#78350f'],
+    mech_lion: ['#60a5fa', '#3b82f6', '#1d4ed8', '#93c5fd'],
+    holy: ['#fef3c7', '#fde68a', '#f59e0b', '#ffffff'],
+    fire: ['#c084fc', '#a855f7', '#7e22ce', '#ffffff'],
+    space: ['#4f46e5', '#312e81', '#818cf8', '#f472b6', '#22d3ee'],
+    // Angel V3
+    biblical: ['#facc15', '#eab308', '#ffffff', '#ef4444', '#3b82f6'], // Gold + Eyes
+    valkyrie: ['#e2e8f0', '#94a3b8', '#facc15', '#38bdf8', '#fbbf24'], // Silver/Gold
+    seraphim: ['#dc2626', '#ef4444', '#fbbf24', '#facc15', '#ffffff'], // Fire/Gold
+    // Cosmos V3
+    meteor: ['#475569', '#334155', '#ea580c', '#f97316'], // Rock/Magma
+    whale: ['#1e1b4b', '#312e81', '#6366f1', '#c7d2fe', '#ffffff'], // Deep Space
+    genesis: ['#000000', '#171717', '#c084fc', '#22d3ee', '#f472b6', '#ffffff'] // Cosmic
+};
+function mulberry32(a) {
+    return function () {
+        var t = a += 0x6D2B79F5;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    }
+}
+/**
+ * Generates an SVG string of the monster
+ * @param {Object} monster The monster object (from MONSTER_DEFS)
+ * @returns {string} SVG string
+ */
+export function generateMonsterSVG(monster) {
+    // If no monster provided, return empty
+    if (!monster) return '';
+    const W = 24; const H = 24; const C = W / 2;
+    let seed = 0;
+    // Use monster ID as seed source
+    for (let i = 0; i < monster.id.length; i++) seed += monster.id.charCodeAt(i);
+    const rng = mulberry32(seed);
+    let palette = palettes.base;
+    const t = monster.type;
+    const a = monster.arch;
+    // Palette Select (Simplified Logic from original)
+    if (a.includes('wolf')) {
+        if (a.includes('zombie')) palette = palettes.zombie;
+        else if (a.includes('guard')) palette = palettes.guard;
+        else if (a.includes('alloy')) palette = palettes.alloy;
+        else palette = palettes.wolf;
+    }
+    else if (a === 'ronin') palette = palettes.ronin;
+    else if (a === 'king_cat') palette = palettes.king;
+    else if (a === 'lion_mane') palette = palettes.thunder;
+    else if (a === 'tank') palette = palettes.tank;
+    else if (a === 'jet') palette = palettes.jet;
+    else if (a === 'gundam') palette = palettes.gundam;
+    else if (a === 'mage_skull') palette = palettes.mage;
+    else if (a === 'pumpkin') palette = palettes.pumpkin;
+    else if (a === 'reaper') palette = palettes.reaper;
+    else if (a === 'biblical_angel') palette = palettes.biblical;
+    else if (a === 'valkyrie') palette = palettes.valkyrie;
+    else if (a === 'phoenix') palette = palettes.seraphim;
+    else if (a === 'terra_titan') palette = palettes.meteor;
+    else if (a === 'cosmo_whale') palette = palettes.whale;
+    else if (a === 'genesis_dragon') palette = palettes.genesis;
+    else if (a === 'beast_pup') palette = palettes.beast;
+    else if (a === 'beast_cat') palette = palettes.cat;
+    else if (a === 'beast_mech') palette = palettes.mech_lion;
+    else if (a === 'spirit_orb') palette = palettes.holy;
+    else if (a === 'spirit_fire') palette = palettes.fire;
+    else if (a === 'spirit_wing') palette = palettes.holy;
+    else if (a === 'spirit_dragon') palette = palettes.space;
+    // Safety Fallbacks
+    else if (a.includes('dust')) {
+        if (a === 'dust_trash' || a === 'pile_big' || a === 'box_teeth' || a === 'corona') palette = palettes.glitch;
+        else if (a.includes('slime') || a === 'fluid' || a === 'knight_slime' || a === 'golem') palette = palettes.slime;
+        else if (a.includes('tech') || a === 'spider' || a === 'ranger' || a === 'brain') palette = palettes.tech;
+        else palette = palettes.trash; // Generic
+    }
+    // Specific Overrides
+    if (a === 'pile_big') palette = palettes.trash;
+    if (a === 'box_teeth') palette = palettes.mimic;
+    if (a === 'corona') palette = palettes.virus;
+    if (a === 'fluid') palette = palettes.fluid;
+    if (a === 'knight_slime') palette = palettes.knight;
+    if (a === 'golem') palette = palettes.crypto;
+    if (a === 'spider') palette = palettes.spider;
+    if (a === 'ranger') palette = palettes.ranger;
+    if (a === 'brain') palette = palettes.brain;
+    let grid = new Array(H).fill(0).map(() => new Array(W).fill(null));
+    const rect = (x, y, w, h, col) => {
+        for (let i = Math.max(0, Math.floor(x)); i < Math.min(W, x + w); i++)
+            for (let j = Math.max(0, Math.floor(y)); j < Math.min(H, y + h); j++)
+                grid[j][i] = col;
+    }
+    const circle = (cx, cy, r, col) => {
+        for (let y = 0; y < H; y++)
+            for (let x = 0; x < W; x++)
+                if (Math.sqrt((x - cx) ** 2 + (y - cy) ** 2) < r) grid[y][x] = col;
+    }
+    const line = (x1, y1, x2, y2, col) => {
+        let dx = Math.abs(x2 - x1), sx = x1 < x2 ? 1 : -1;
+        let dy = -Math.abs(y2 - y1), sy = y1 < y2 ? 1 : -1;
+        let err = dx + dy, e2;
+        while (true) {
+            if (y1 >= 0 && y1 < H && x1 >= 0 && x1 < W) grid[y1][x1] = col;
+            if (x1 == x2 && y1 == y2) break;
+            const e2_val = 2 * err;
+            if (e2_val >= dy) { err += dy; x1 += sx; }
+            if (e2_val <= dx) { err += dx; y1 += sy; }
+        }
+    }
+    const mainCol = palette[Math.floor(rng() * (palette.length - 1))];
+    const secCol = palette[Math.floor(rng() * (palette.length - 2))] || palette[1];
+    const thirdCol = palette[palette.length - 1];
+    // --- DRAWING LOGIC ---
+    if (a === 'egg') { circle(C, C, 7, mainCol); circle(C - 2, C - 3, 2, '#ffffff'); rect(C + 1, C + 2, 2, 2, secCol); rect(C - 4, C + 1, 2, 2, secCol); }
+    else if (a === 'dust') { circle(C, C, 5, '#1e293b'); for (let i = 0; i < 30; i++) { let angle = rng() * Math.PI * 2; let r = 4 + rng() * 4; rect(C + Math.cos(angle) * r, C + Math.sin(angle) * r, 1, 1, '#334155'); } rect(C - 4, C - 2, 3, 3, '#ffffff'); rect(C + 1, C - 2, 3, 3, '#ffffff'); rect(C - 3, C - 1, 1, 1, '#000000'); rect(C + 2, C - 1, 1, 1, '#000000'); }
+    else if (a === 'dust_trash') { circle(C, C, 6, mainCol); for (let i = 0; i < 40; i++) { let s = 7 + rng() * 3; rect(C + (rng() - 0.5) * s * 1.5, C + (rng() - 0.5) * s, 2, 2, i % 2 == 0 ? secCol : thirdCol); } rect(C - 3, C - 3, 3, 3, '#ffffff'); rect(C - 2, C - 2, 1, 1, '#000000'); rect(C + 1, C - 1, 2, 2, '#ffffff'); rect(C + 1, C - 1, 1, 1, '#000000'); }
+    else if (a === 'dust_slime') { for (let i = 0; i < 8; i++) circle(C + (rng() - 0.5) * 10, C + 3 + rng() * 3, 3, mainCol); rect(C - 3, C - 3, 2, 2, '#ffffff'); rect(C - 3, C - 1, 2, 2, '#000000'); rect(C + 1, C - 1, 2, 2, '#000000'); }
+    else if (a === 'dust_tech') { rect(C - 1, C - 9, 2, 4, secCol); rect(C - 5, C - 7, 10, 2, secCol); rect(C - 6, C + 2, 2, 4, mainCol); rect(C + 4, C + 2, 2, 4, mainCol); rect(C - 4, C - 1, 3, 2, '#a5f3fc'); rect(C + 1, C - 1, 3, 2, '#a5f3fc'); }
+    else if (a === 'beast_pup') { rect(C - 5, C - 1, 10, 6, mainCol); rect(C - 6, C - 5, 3, 4, secCol); rect(C + 3, C - 5, 3, 4, secCol); rect(C - 2, C + 1, 4, 3, secCol); rect(C - 1, C + 1, 2, 1, '#000000'); }
+    else if (a === 'beast_wolf') { rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 7, C - 6, 5, 5, mainCol); for (let i = 0; i < 10; i++) rect(C - 7 + rng() * 14, C - 4 + rng() * 6, 1, 1, secCol); rect(C - 7, C - 8, 2, 3, secCol); rect(C - 4, C - 8, 2, 3, secCol); rect(C + 6, C, 4, 2, secCol); rect(C - 6, C - 5, 1, 1, '#ef4444'); }
+    else if (a === 'beast_cat') { rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 7, C - 6, 5, 5, mainCol); rect(C - 7, C - 8, 2, 2, mainCol); rect(C - 4, C - 8, 2, 2, mainCol); rect(C - 6, C - 3, 1, 1, '#f9a8d4'); rect(C - 2, C - 3, 6, 6, '#ef4444'); }
+    else if (a === 'beast_mech') { rect(C - 6, C - 2, 12, 6, secCol); rect(C - 7, C - 6, 5, 5, mainCol); rect(C - 4, C - 8, 2, 6, thirdCol); rect(C - 6, C - 5, 3, 1, '#3b82f6'); }
+    else if (a === 'spirit_orb') { circle(C, C, 6, mainCol); for (let t = 0; t < Math.PI * 2; t += 0.4) { let r = 8; rect(C + Math.cos(t) * r, C + Math.sin(t) * r, 1, 1, secCol); } rect(C - 8, C - 2, 3, 4, '#ffffff'); rect(C + 5, C - 2, 3, 4, '#ffffff'); }
+    else if (a === 'spirit_fire') { circle(C, C + 1, 5, '#ffffff'); for (let i = 0; i < 40; i++) { let r = 4 + rng() * 6; let t = rng() * Math.PI * 2; let py = C + Math.sin(t) * r - (rng() * 6); let px = C + Math.cos(t) * r; rect(px, py, 2, 2, i % 3 == 0 ? thirdCol : secCol); } rect(C - 3, C - 1, 2, 3, '#000000'); rect(C + 1, C - 1, 2, 3, '#000000'); }
+    else if (a === 'spirit_wing') { circle(C, C, 5, mainCol); rect(C - 7, C + 2, 14, 2, secCol); rect(C - 11, C - 4, 2, 2, '#ffffff'); rect(C - 10, C - 5, 2, 4, '#ffffff'); rect(C - 8, C - 3, 4, 4, '#ffffff'); rect(C + 9, C - 4, 2, 2, '#ffffff'); rect(C + 8, C - 5, 2, 4, '#ffffff'); rect(C + 4, C - 3, 4, 4, '#ffffff'); rect(C - 4, C - 9, 8, 1, '#fbbf24'); rect(C - 5, C - 8, 1, 1, '#fbbf24'); rect(C + 4, C - 8, 1, 1, '#fbbf24'); rect(C - 1, C, 2, 2, '#fbbf24'); rect(C - 3, C - 2, 1, 1, '#3b82f6'); rect(C + 2, C - 2, 1, 1, '#3b82f6'); }
+    else if (a === 'spirit_dragon') { circle(C, C, 7, '#1e1b4b'); for (let i = 0; i < 20; i++) { let px = C + (rng() - 0.5) * 12; let py = C + (rng() - 0.5) * 10; rect(px, py, 1, 1, i % 3 == 0 ? '#f472b6' : (i % 2 == 0 ? '#22d3ee' : '#ffffff')); } rect(C - 9, C - 5, 4, 4, secCol); rect(C - 8, C - 9, 2, 4, thirdCol); rect(C + 6, C - 2, 6, 2, secCol); rect(C - 4, C - 2, 2, 1, '#22d3ee'); }
+    // --- STAGE 3 ---
+    else if (a === 'pile_big') { circle(C, C, 8, '#000000'); for (let i = 0; i < 60; i++) rect(C + (rng() - 0.5) * 16, C + (rng() - 0.5) * 16, 2, 2, '#ef4444'); rect(C - 4, C - 2, 2, 2, '#ffffff'); rect(C - 3, C - 2, 1, 1, '#000000'); rect(C + 4, C, 2, 2, '#ffffff'); rect(C + 4, C, 1, 1, '#000000'); rect(C, C - 5, 3, 3, '#ffffff'); rect(C + 1, C - 5, 1, 1, '#000000'); }
+    else if (a === 'box_teeth') { rect(C - 8, C - 6, 16, 14, mainCol); rect(C - 8, C, 16, 2, '#000000'); rect(C - 1, C + 4, 2, 2, '#000000'); rect(C - 6, C + 2, 1, 2, '#ffffff'); rect(C - 2, C + 2, 1, 2, '#ffffff'); rect(C + 2, C + 2, 1, 2, '#ffffff'); rect(C + 5, C + 2, 1, 2, '#ffffff'); rect(C - 4, C - 3, 2, 1, '#ef4444'); rect(C + 2, C - 3, 2, 1, '#ef4444'); }
+    else if (a === 'corona') { circle(C, C, 6, mainCol); for (let t = 0; t < 6.28; t += 0.8) rect(C + Math.cos(t) * 10, C + Math.sin(t) * 10, 3, 3, secCol); rect(C - 4, C - 8, 8, 2, '#facc15'); rect(C - 4, C - 10, 2, 2, '#facc15'); rect(C + 2, C - 10, 2, 2, '#facc15'); rect(C - 3, C - 1, 2, 1, '#bef264'); rect(C + 1, C - 1, 2, 1, '#bef264'); rect(C - 2, C + 2, 4, 1, '#000000'); }
+    else if (a === 'fluid') { for (let i = 0; i < 4; i++) rect(C - 10 + i * 2, C + 4, 18 - i * 4, 4, mainCol); rect(C - 6, C, 2, 6, mainCol); rect(C + 4, C - 2, 3, 8, mainCol); rect(C - 5, C - 6, 3, 3, secCol); rect(C + 2, C - 5, 2, 2, secCol); rect(C - 2, C + 2, 4, 4, '#ffffff'); rect(C - 1, C + 2, 2, 2, '#000000'); }
+    else if (a === 'knight_slime') { rect(C - 3, C - 4, 6, 8, mainCol); rect(C - 4, C - 9, 8, 6, mainCol); rect(C - 2, C - 3, 4, 6, '#e0f2fe'); rect(C + 4, C, 8, 2, secCol); rect(C + 4, C - 2, 2, 6, secCol); rect(C - 7, C - 2, 4, 8, thirdCol); rect(C - 3, C - 7, 6, 1, '#000000'); }
+    else if (a === 'golem') { rect(C - 4, C - 4, 8, 8, mainCol); rect(C - 8, C - 8, 4, 4, secCol); rect(C + 4, C - 8, 4, 4, secCol); rect(C - 6, C + 4, 4, 6, secCol); rect(C + 2, C + 4, 4, 6, secCol); rect(C - 2, C - 10, 4, 4, thirdCol); rect(C - 3, C - 3, 2, 2, '#ffffff'); rect(C + 5, C - 7, 1, 1, '#ffffff'); rect(C - 1, C - 9, 2, 1, '#000000'); }
+    else if (a === 'spider') { rect(C - 4, C - 4, 8, 8, mainCol); rect(C - 5, C - 5, 10, 2, secCol); line(C - 4, C, C - 10, C - 4, secCol); line(C - 4, C + 2, C - 10, C + 4, secCol); line(C - 4, C + 4, C - 8, C + 8, secCol); line(C + 4, C, C + 10, C - 4, secCol); line(C + 4, C + 2, C + 10, C + 4, secCol); line(C + 4, C + 4, C + 8, C + 8, secCol); rect(C - 3, C - 2, 2, 2, '#ef4444'); rect(C + 1, C - 2, 2, 2, '#ef4444'); rect(C - 1, C + 1, 2, 2, '#ef4444'); }
+    else if (a === 'ranger') { rect(C - 4, C - 10, 8, 8, mainCol); rect(C - 3, C - 9, 2, 6, secCol); rect(C + 1, C - 9, 2, 6, secCol); rect(C - 1, C - 5, 2, 2, '#fbbf24'); rect(C - 4, C - 2, 8, 6, mainCol); rect(C + 4, C - 2, 6, 4, mainCol); rect(C + 8, C - 1, 2, 2, '#22d3ee'); rect(C - 4, C + 4, 3, 6, mainCol); rect(C + 1, C + 4, 3, 6, mainCol); }
+    else if (a === 'brain') { rect(C - 6, C - 6, 12, 12, '#a5f3fc'); rect(C - 6, C + 6, 12, 2, secCol); rect(C - 6, C - 8, 12, 2, secCol); rect(C - 4, C - 4, 8, 6, '#d8b4fe'); rect(C - 2, C - 2, 4, 1, '#ffffff'); line(C - 6, C, C - 10, C + 4, secCol); line(C + 6, C, C + 10, C + 4, secCol); }
+    else if (a === 'tank') {
+        rect(C - 8, C + 4, 16, 4, '#1e293b'); rect(C - 9, C + 5, 18, 2, '#000000');
+        rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 4, C - 6, 8, 4, mainCol); rect(C, C - 5, 8, 2, '#3f3f46'); rect(C - 5, C, 10, 2, '#facc15');
+        rect(C - 3, C - 3, 2, 2, '#3f3f46'); rect(C - 1, C - 2, 2, 1, '#ef4444');
+    }
+    else if (a === 'jet') {
+        rect(C - 2, C - 10, 4, 6, '#ef4444'); rect(C - 4, C - 4, 8, 10, mainCol); rect(C - 10, C, 6, 8, secCol); rect(C + 4, C, 6, 8, secCol);
+        rect(C - 3, C - 6, 6, 2, '#38bdf8'); rect(C - 3, C + 6, 2, 4, '#ef4444'); rect(C + 1, C + 6, 2, 4, '#ef4444');
+    }
+    else if (a === 'gundam') {
+        rect(C - 4, C - 10, 8, 6, '#ffffff'); rect(C - 5, C - 8, 10, 2, '#ffffff'); rect(C - 1, C - 11, 2, 3, '#dc2626'); rect(C - 3, C - 9, 6, 1, '#facc15');
+        rect(C - 4, C - 4, 8, 8, '#2563eb'); rect(C - 2, C - 4, 4, 2, '#dc2626'); rect(C - 5, C - 4, 2, 4, '#ffffff'); rect(C + 3, C - 4, 2, 4, '#ffffff');
+        rect(C - 4, C + 4, 3, 6, '#ffffff'); rect(C + 1, C + 4, 3, 6, '#ffffff'); rect(C + 5, C, 2, 6, '#334155');
+    }
+    else if (a === 'mage_skull') {
+        rect(C - 4, C - 5, 8, 14, '#172554'); rect(C - 3, C - 9, 6, 5, '#e5e5e5'); rect(C - 2, C - 8, 1, 1, '#000000'); rect(C + 1, C - 8, 1, 1, '#000000');
+        rect(C - 6, C - 10, 12, 1, '#4c1d95'); rect(C - 3, C - 13, 6, 3, '#4c1d95'); rect(C + 5, C - 8, 1, 16, '#fbbf24'); circle(C + 5, C - 9, 2, '#a855f7');
+    }
+    else if (a === 'pumpkin') {
+        rect(C - 4, C - 2, 8, 10, '#3f3f46'); circle(C, C - 6, 6, '#ea580c'); rect(C - 2, C - 7, 1, 1, '#facc15'); rect(C + 1, C - 7, 1, 1, '#facc15');
+        rect(C - 2, C - 5, 4, 1, '#facc15'); rect(C, C - 13, 1, 2, '#166534'); rect(C - 6, C, 2, 2, '#ea580c'); rect(C + 4, C, 2, 2, '#ea580c');
+    }
+    else if (a === 'reaper') {
+        rect(C - 5, C - 8, 10, 16, '#000000'); rect(C - 3, C - 6, 6, 4, '#171717'); rect(C - 1, C - 5, 1, 1, '#ef4444'); rect(C, C - 5, 1, 1, '#ef4444');
+        rect(C + 6, C - 8, 1, 16, '#7f1d1d'); rect(C + 4, C - 10, 6, 2, '#9ca3af'); rect(C + 3, C - 10, 1, 6, '#9ca3af');
+    }
+    // --- REDESIGNED STAGE 3 (Wolf V2 & Cat V2 Targets) ---
+    else if (a === 'wolf_zombie_v2') {
+        rect(C - 6, C - 3, 13, 6, '#4b5563'); // Darker rot body
+        rect(C - 2, C - 2, 5, 4, '#991b1b'); // Ribcage
+        rect(C - 8, C - 7, 6, 6, '#4b5563'); // Head
+        rect(C - 6, C - 6, 2, 2, '#e7e5e4'); // Skull patch
+        rect(C - 5, C - 5, 1, 1, '#000000'); // Eye empty
+        rect(C - 7, C + 3, 2, 5, '#4b5563'); // Leg FL
+        rect(C + 4, C + 3, 2, 5, '#e7e5e4'); // Leg BR (Bone)
+        for (let i = 0; i < 4; i++) rect(C + (rng() - 0.5) * 14, C - 6 + (rng() - 0.5) * 8, 1, 1, '#bef264');
+    }
+    else if (a === 'wolf_guard_v2') {
+        rect(C - 7, C - 3, 14, 7, '#1e3a8a'); // Body Armor
+        rect(C - 3, C - 4, 6, 6, '#fbbf24'); // Heavy Plating
+        rect(C - 9, C - 8, 7, 7, '#172554'); // Helmet
+        rect(C - 9, C - 6, 7, 1, '#60a5fa'); // Visor
+        rect(C - 3, C - 6, 3, 3, '#1e40af'); // Pad
+        rect(C - 7, C + 4, 3, 5, '#3b82f6');
+        rect(C + 5, C + 4, 3, 5, '#3b82f6');
+    }
+    else if (a === 'wolf_alloy_v2') {
+        rect(C - 7, C - 3, 14, 5, '#e2e8f0'); // Silver Body
+        rect(C - 2, C - 8, 4, 6, '#94a3b8'); // Booster base
+        rect(C - 3, C - 9, 2, 4, '#0ea5e9'); // Thruster
+        rect(C - 9, C - 6, 7, 5, '#e2e8f0'); // Head
+        rect(C - 6, C - 6, 4, 1, '#0ea5e9'); // Visor
+        line(C + 7, C, C + 11, C - 4, '#0ea5e9'); // Saber tail
+        rect(C - 7, C + 5, 2, 3, '#94a3b8');
+        rect(C + 6, C + 5, 2, 3, '#94a3b8');
+    }
+    else if (a === 'ronin') {
+        rect(C - 3, C - 4, 6, 8, '#c2410c'); // Orange Gi
+        rect(C - 4, C - 10, 8, 4, '#fde047'); // Hat
+        rect(C - 3, C + 4, 2, 4, '#3f3f46'); // Hakama
+        rect(C + 1, C + 4, 2, 4, '#3f3f46');
+        line(C + 4, C - 4, C + 8, C - 8, '#e5e5e5'); // Blade handle
+        rect(C - 4, C - 3, 2, 2, '#ef4444'); // Scarf
+    }
+    else if (a === 'king_cat') {
+        rect(C - 4, C - 3, 8, 8, '#7e22ce'); // Robe
+        rect(C - 2, C - 3, 4, 8, '#ffffff'); // Fur
+        rect(C - 4, C - 10, 8, 3, '#fbbf24'); // Crown
+        rect(C - 1, C - 10, 2, 2, '#ef4444');
+        line(C + 6, C, C + 6, C + 6, '#fbbf24'); // Scepter
+        circle(C + 6, C - 1, 2, '#ef4444');
+    }
+    else if (a === 'lion_mane') {
+        rect(C - 4, C - 3, 8, 8, '#ffffff');
+        for (let t = 0; t < 6.3; t += 0.6) rect(C + Math.cos(t) * 11, C + Math.sin(t) * 11 - 5, 2, 2, '#facc15'); // Mane
+        rect(C - 2, C - 6, 4, 4, '#fff7ed'); // Face
+        rect(C - 1, C - 5, 2, 1, '#3b82f6'); // Eyes
+        line(C - 8, C, C - 4, C + 4, '#facc15'); // Lightning
+        line(C + 8, C, C + 4, C - 4, '#facc15');
+    }
+    // --- ANGEL FAMILY V3 ---
+    else if (a === 'biblical_angel') {
+        for (let t = 0; t < 6.3; t += 0.1) {
+            let r = 9;
+            let x1 = C + Math.cos(t) * r; let y1 = C + Math.sin(t) * r * 0.4;
+            rect(x1, y1, 1, 1, mainCol);
+            let x2 = C + Math.cos(t) * r * 0.4; let y2 = C + Math.sin(t) * r;
+            rect(x2, y2, 1, 1, secCol);
+        }
+        circle(C, C, 4, '#ffffff');
+        for (let i = 0; i < 8; i++) {
+            rect(C + Math.cos(i * 0.8) * 9, C + Math.sin(i * 0.8) * 3.5, 2, 2, '#ffffff');
+            rect(C + Math.cos(i * 0.8) * 9, C + Math.sin(i * 0.8) * 3.5, 1, 1, '#3b82f6');
+        }
+    }
+    else if (a === 'valkyrie') {
+        rect(C - 3, C - 5, 6, 8, '#e2e8f0'); rect(C - 3, C - 9, 6, 4, '#facc15');
+        rect(C - 4, C + 3, 3, 5, '#e2e8f0'); rect(C + 1, C + 3, 3, 5, '#e2e8f0');
+        rect(C - 8, C - 6, 4, 10, '#ffffff'); rect(C + 5, C - 6, 4, 10, '#ffffff');
+        line(C + 4, C + 8, C + 10, C - 8, '#fbbf24'); rect(C + 9, C - 9, 2, 4, '#38bdf8');
+    }
+    else if (a === 'phoenix') {
+        rect(C - 2, C - 4, 4, 8, mainCol); rect(C - 2, C - 8, 4, 4, mainCol);
+        rect(C, C - 7, 1, 1, '#fbbf24'); rect(C - 3, C - 6, 1, 2, '#fbbf24');
+        for (let i = 0; i < 8; i++) {
+            rect(C - 2 - i, C - 4 - i, 1, 2, '#ef4444');
+            rect(C + 1 + i, C - 4 - i, 1, 2, '#ef4444');
+            rect(C - 2 - i, C - 2 - i, 1, 4, secCol);
+            rect(C + 1 + i, C - 2 - i, 1, 4, secCol);
+        }
+        rect(C - 1, C + 4, 2, 6, '#fbbf24'); rect(C - 3, C + 6, 2, 4, '#ef4444'); rect(C + 1, C + 6, 2, 4, '#ef4444');
+    }
+    // --- COSMOS FAMILY V3 ---
+    else if (a === 'terra_titan') {
+        rect(C - 6, C - 6, 12, 10, mainCol); rect(C - 8, C - 8, 4, 6, secCol); rect(C + 4, C - 8, 4, 6, secCol);
+        rect(C - 3, C - 9, 6, 4, mainCol); rect(C - 2, C - 8, 4, 1, '#f97316');
+        rect(C - 8, C - 2, 3, 8, mainCol); rect(C + 5, C - 2, 3, 8, mainCol);
+        rect(C - 6, C + 4, 4, 6, secCol); rect(C + 2, C + 4, 4, 6, secCol);
+        circle(C, C - 2, 3, '#ea580c'); rect(C - 1, C - 3, 2, 2, '#f97316');
+    }
+    else if (a === 'cosmo_whale') {
+        rect(C - 10, C - 6, 14, 10, mainCol); rect(C + 4, C - 4, 6, 6, mainCol); rect(C + 10, C - 2, 4, 3, mainCol);
+        rect(C - 10, C + 2, 12, 2, '#c7d2fe'); rect(C + 12, C - 5, 2, 8, mainCol);
+        rect(C + 11, C - 6, 1, 2, mainCol); rect(C + 11, C + 4, 1, 2, mainCol);
+        rect(C - 5, C, 2, 1, '#ffffff');
+        for (let k = 0; k < 5; k++) rect(C - 6 + (rng() - 0.5) * 4, C - 10 + (rng() - 0.5) * 4, 1, 1, '#22d3ee');
+        rect(C - 8, C - 3, 1, 1, '#ffffff'); rect(C - 2, C - 4, 1, 1, '#ffffff'); rect(C + 6, C - 1, 1, 1, '#ffffff');
+    }
+    else if (a === 'genesis_dragon') {
+        let px = C, py = C;
+        for (let i = 0; i < 30; i++) {
+            rect(px, py, 3, 3, i % 2 == 0 ? '#000000' : secCol);
+            px += Math.cos(i * 0.4) * 2;
+            py += Math.sin(i * 0.4) * 2;
+        }
+        circle(C, C, 5, '#c084fc');
+        for (let k = 0; k < 20; k++) {
+            rect(C + (rng() - 0.5) * 20, C + (rng() - 0.5) * 20, 1, 1, k % 3 == 0 ? '#22d3ee' : '#f472b6');
+        }
+    }
+    let svg = '';
+    for (let y = 0; y < H; y++) {
+        for (let x = 0; x < W; x++) {
+            if (grid[y][x]) svg += `<rect x="${x}" y="${y}" width="1" height="1" fill="${grid[y][x]}"/>`;
+        }
+    }
+    return `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-full h-full drop-shadow-md shape-rendering-crispEdges">${svg}</svg>`;
+}
+/**
+ * Determines the next monster form based on parameters and lineage
+ * @param {number} currentStage - Current evolutionary stage (0-3)
+ * @param {number} likes - Student's total likes
+ * @param {number} classSize - Active class size
+ * @param {string} [currentMonsterId] - ID of the current monster to determine lineage
+ * @returns {Object} Selected Monster Definition
+ */
+/**
+ * Determines the next monster form based on parameters and lineage
+ * @param {number} currentStage - Current evolutionary stage (0-3)
+ * @param {number} stageLikes - Likes earned IN THIS STAGE
+ * @param {number} classSize - Active class size
+ * @param {string} [currentMonsterId] - ID of the current monster to determine lineage
+ * @param {number} [percentile] - Speed ranking percentile (0.0 - 1.0, lower is faster). Default 1.0
+ * @returns {Object} Selected Monster Definition
+ */
+export function getNextMonster(currentStage, stageLikes, classSize, currentMonsterId = null, percentile = 1.0) {
+    if (currentStage === 0) return MONSTER_DEFS.find(m => m.id === 'Egg');
+    // Find current monster family if we have an ID
+    let currentFam = null;
+    if (currentMonsterId) {
+        const current = MONSTER_DEFS.find(m => m.id === currentMonsterId);
+        if (current) currentFam = current.fam; // e.g., 'Beast', 'Dust', 'Spirit'
+    }
+    // Stage 1: Basic Families (Origin -> Family)
+    // If coming from Egg (Stage 0), we pick a base family based on performance.
+    if (currentStage === 1) {
+        // Simple distribution for Stage 1 (Egg -> Base)
+        // We can use the same Score Logic or keep simple likes.
+        // Let's use the Score Logic to be consistent with design.
+        let score = 0;
+        // Speed Score
+        if (percentile <= 0.3) score += 5;      // Top 30%
+        else if (percentile <= 0.6) score += 3; // Top 60%
+        else score += 1;                        // Rest
+        // Like Score
+        if (stageLikes >= 2) score += 2;
+        else if (stageLikes > 0) score += 1;
+        if (score >= 5) return MONSTER_DEFS.find(m => m.id === 'L1_A'); // High (Spirit)
+        if (score >= 3) return MONSTER_DEFS.find(m => m.id === 'L1_B'); // Mid (Beast)
+        return MONSTER_DEFS.find(m => m.id === 'L1_C'); // Low (Dust)
+    }
+    // Branching Logic for Stage 2 & 3
+    // Score Calculation
+    let score = 0;
+    // 1. Speed Score
+    if (percentile <= 0.3) score += 5;      // Top 30%
+    else if (percentile <= 0.6) score += 3; // Top 60%
+    else score += 1;                        // Rest
+    // 2. Like Score
+    if (stageLikes >= 2) score += 2;      // High Likes
+    else if (stageLikes > 0) score += 1;  // Any Likes
+    // Tier Logic
+    let tier = 'C';
+    if (score >= 5) tier = 'A';      // High Tier
+    else if (score >= 3) tier = 'B'; // Mid Tier
+    // Safety check for small classes (Boost if alone)
+    if (classSize <= 2) {
+        if (stageLikes >= 1) tier = 'A';
+        else tier = 'B';
+    }
+    // Filter potential monsters for this Stage
+    let candidates = MONSTER_DEFS.filter(m => m.stage === currentStage);
+    // 1. Strict Lineage by ID Pattern (L{stage}_{path})
+    // e.g. L1_A -> L2_A... / L2_AB -> L3_AB...
+    // This allows exact branching control as per design doc.
+    const isStandardId = currentMonsterId?.match(/^L\d+_[ABC]+$/);
+    if (isStandardId) {
+        // Extract path suffix (e.g. "A" from "L1_A", "AB" from "L2_AB")
+        const currentPath = currentMonsterId.split('_')[1];
+        // Filter candidates: Must start with L{targetStage}_{currentPath}
+        // currentStage IS the target stage (e.g. 3), so we look for L3_...
+        const strictMatches = candidates.filter(m => m.id.startsWith(`L${currentStage}_${currentPath}`));
+        if (strictMatches.length > 0) {
+            candidates = strictMatches;
+        }
+    }
+    // 2. Fallback: Family Tree Logic (for custom IDs or Egg)
+    else if (currentFam && currentFam !== 'Origin') {
+        // Define Family Tree Mapping
+        const FAMILY_TREE = {
+            // Stage 1 Root: Low Tier (Red Path)
+            'Dust': ['Dust', 'Glitch', 'Trash', 'Slime', 'Tech', 'Hacker', 'Virus'],
+            // Stage 1 Root: Mid Tier (Yellow Path)
+            'Beast': ['Beast', 'Wolf', 'Cat', 'Mech', 'Mech Lion', 'Animal', 'Grunge', 'Royal', 'Warrior', 'Undead', 'Elemental'],
+            // Stage 1 Root: High Tier (Blue Path)
+            'Spirit': ['Spirit', 'Ghost', 'Holy', 'Cosmos', 'Angel', 'Divin', 'Void', 'Undead']
+        };
+        // Find which root family the current family belongs to
+        let rootFamily = null;
+        for (const [root, children] of Object.entries(FAMILY_TREE)) {
+            if (root === currentFam || children.includes(currentFam) || children.some(c => currentFam.includes(c))) {
+                rootFamily = root;
+                break;
+            }
+        }
+        if (rootFamily) {
+            const allowedFamilies = FAMILY_TREE[rootFamily];
+            candidates = candidates.filter(m => {
+                return allowedFamilies.some(fam => m.fam.includes(fam) || fam.includes(m.fam));
+            });
+        }
+    }
+    // Filter by Tier (Suffix A/B/C)
+    // IDs are like L2_AA, L2_AB...
+    // Last char is C(Low), B(Mid), A(High).
+    const targetSuffix = tier;
+    let match = candidates.find(m => m.id.endsWith(targetSuffix));
+    // Fallback: If specific tier not found in this family (shouldn't happen if definitions are complete),
+    // pick ANY from this family.
+    if (!match && candidates.length > 0) match = candidates[0];
+    return match || MONSTER_DEFS[0]; // Absolute Fallback
+}

src/views/AdminView.js ADDED Viewed

	@@ -0,0 +1,218 @@

+import { getChallenges, createChallenge, updateChallenge, deleteChallenge } from "../services/classroom.js";
+import { checkInstructorPermission } from "../services/auth.js";
+import { auth } from "../services/firebase.js";
+export function renderAdminView() {
+    return `
+    <div class="min-h-screen p-6 pb-20">
+        <header class="flex justify-between items-center mb-10 bg-gray-800 bg-opacity-50 p-4 rounded-xl border border-gray-700 backdrop-blur-sm">
+            <div class="flex items-center space-x-4">
+                <button id="back-instructor-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg transition-all">
+                    ← 回講師端
+                </button>
+                <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-orange-600">
+                    後台管理系統 Admin Panel
+                </h1>
+            </div>
+            <button id="add-challenge-btn" class="bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-6 rounded-lg transition-all shadow-lg">
+                + 新增題目
+            </button>
+        </header>
+        <div id="challenges-list" class="space-y-4">
+            <!-- Questions loaded here -->
+            <div class="text-center text-gray-500 py-10">載入中...</div>
+        </div>
+        <!-- Edit/Add Modal -->
+        <div id="challenge-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
+            <div class="bg-gray-800 rounded-xl w-full max-w-2xl border border-gray-700 shadow-2xl overflow-y-auto max-h-[90vh]">
+                <div class="p-6 border-b border-gray-700">
+                    <h3 id="modal-title" class="text-xl font-bold text-white">編輯題目</h3>
+                </div>
+                <div class="p-6 space-y-4">
+                    <input type="hidden" id="edit-id">
+                    <div>
+                        <label class="block text-gray-400 mb-1">標題 (Title)</label>
+                        <input type="text" id="edit-title" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">難度 (Level)</label>
+                        <select id="edit-level" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white">
+                            <option value="beginner">初級 (Beginner)</option>
+                            <option value="intermediate">中級 (Intermediate)</option>
+                            <option value="advanced">高級 (Advanced)</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">描述 (Description)</label>
+                        <textarea id="edit-desc" rows="3" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">連結 (GeminiCanvas Link/Code)</label>
+                        <input type="text" id="edit-link" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">排序 (Order)</label>
+                        <input type="number" id="edit-order" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white" value="1">
+                    </div>
+                </div>
+                <div class="p-6 border-t border-gray-700 flex justify-end space-x-3">
+                    <button onclick="closeChallengeModal()" class="px-4 py-2 text-gray-400 hover:text-white">取消</button>
+                    <button id="save-challenge-btn" class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2 rounded">儲存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+}
+export function setupAdminEvents() {
+    // Permission Check
+    const user = auth.currentUser;
+    if (!user) {
+        alert("請先登入");
+        window.location.hash = ''; // Back to Landing
+        return;
+    }
+    checkInstructorPermission(user).then(inst => {
+        if (!inst || !inst.permissions?.includes('add_question')) {
+            alert("您沒有權限管理題目");
+            window.location.hash = 'instructor';
+            return;
+        }
+    });
+    loadChallenges();
+    document.getElementById('back-instructor-btn').addEventListener('click', () => {
+        const referer = localStorage.getItem('vibecoding_admin_referer');
+        if (referer === 'instructor') {
+            window.location.hash = 'instructor';
+        } else {
+            window.location.hash = ''; // Main landing
+        }
+        localStorage.removeItem('vibecoding_admin_referer');
+    });
+    document.getElementById('add-challenge-btn').addEventListener('click', () => {
+        openModal();
+    });
+    document.getElementById('save-challenge-btn').addEventListener('click', async () => {
+        const id = document.getElementById('edit-id').value;
+        const data = {
+            title: document.getElementById('edit-title').value,
+            level: document.getElementById('edit-level').value,
+            description: document.getElementById('edit-desc').value,
+            link: document.getElementById('edit-link').value,
+            order: parseInt(document.getElementById('edit-order').value) || 0
+        };
+        if (id) {
+            await updateChallenge(id, data);
+        } else {
+            await createChallenge(data);
+        }
+        closeChallengeModal();
+        loadChallenges();
+    });
+}
+async function loadChallenges() {
+    const list = document.getElementById('challenges-list');
+    const challenges = await getChallenges();
+    const levels = ['beginner', 'intermediate', 'advanced'];
+    const levelNames = {
+        beginner: "初級 (Beginner)",
+        intermediate: "中級 (Intermediate)",
+        advanced: "高級 (Advanced)"
+    };
+    // Group challenges
+    const groups = { beginner: [], intermediate: [], advanced: [] };
+    challenges.forEach(c => {
+        if (groups[c.level]) groups[c.level].push(c);
+        else groups.beginner.push(c); // Fallback
+    });
+    list.innerHTML = levels.map(level => {
+        const groupItems = groups[level] || [];
+        const isOpen = level === 'beginner' ? 'open' : ''; // Open first by default
+        const itemsHtml = groupItems.map(c => `
+            <div class="bg-gray-800 p-4 rounded-lg border border-gray-700 flex justify-between items-center group hover:border-gray-500 transition-colors mb-2">
+                <div class="flex items-center space-x-3">
+                    <span class="text-gray-500 font-mono text-sm">#${c.order}</span>
+                    <div>
+                        <span class="font-bold text-white text-lg">${c.title}</span>
+                        <p class="text-gray-400 text-sm mt-1 truncate max-w-md">${c.description}</p>
+                    </div>
+                </div>
+                <div class="flex space-x-2 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button onclick="window.editChallenge('${c.id}')" class="bg-cyan-600/20 text-cyan-400 px-3 py-1 rounded hover:bg-cyan-600 hover:text-white transition-colors">編輯</button>
+                    <button onclick="window.deleteChallenge('${c.id}')" class="bg-red-600/20 text-red-400 px-3 py-1 rounded hover:bg-red-600 hover:text-white transition-colors">刪除</button>
+                </div>
+            </div>
+        `).join('');
+        return `
+            <details class="group border border-gray-700 rounded-xl bg-gray-800/30 overflow-hidden mb-4" ${isOpen}>
+                <summary class="flex items-center justify-between p-4 cursor-pointer bg-gray-800 hover:bg-gray-700 transition-colors select-none">
+                    <div class="flex items-center space-x-3">
+                        <h3 class="text-xl font-bold text-cyan-400">${levelNames[level]}</h3>
+                        <span class="text-xs text-gray-400 bg-gray-900 px-2 py-1 rounded-full">${groupItems.length} 題</span>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <button onclick="event.preventDefault(); window.openModal(null, '${level}')" class="bg-green-600 hover:bg-green-500 text-white text-xs font-bold py-1 px-3 rounded transition-colors shadow-lg">
+                            + 新增至此區
+                        </button>
+                        <svg class="w-5 h-5 text-gray-400 transform group-open:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </div>
+                </summary>
+                <div class="p-4 pt-4 border-t border-gray-700/50">
+                    ${itemsHtml || '<div class="text-gray-500 text-center italic">尚無題目，請新增</div>'}
+                </div>
+            </details>
+        `;
+    }).join('');
+    // Expose helpers globally for onclick
+    window.editChallenge = (id) => {
+        const c = challenges.find(x => x.id === id);
+        if (c) openModal(c);
+    };
+    window.deleteChallenge = async (id) => {
+        if (confirm('確定刪除?')) {
+            await deleteChallenge(id);
+            loadChallenges();
+        }
+    };
+}
+// Global expose for the "Add to Section" button
+window.openModal = function (challenge = null, defaultLevel = 'beginner') {
+    const modal = document.getElementById('challenge-modal');
+    const title = document.getElementById('modal-title');
+    // Reset or Fill
+    document.getElementById('edit-id').value = challenge ? challenge.id : '';
+    document.getElementById('edit-title').value = challenge ? challenge.title : '';
+    // Use challenge level if editing, otherwise use defaultLevel passed from section button
+    document.getElementById('edit-level').value = challenge ? challenge.level : defaultLevel;
+    document.getElementById('edit-desc').value = challenge ? challenge.description : '';
+    document.getElementById('edit-link').value = challenge ? challenge.link : '';
+    document.getElementById('edit-order').value = challenge ? challenge.order : '1';
+    title.textContent = challenge ? '編輯題目' : '新增題目';
+    modal.classList.remove('hidden');
+}
+window.closeChallengeModal = () => {
+    document.getElementById('challenge-modal').classList.add('hidden');
+};

src/views/InstructorView.js ADDED Viewed

The diff for this file is too large to render. See raw diff

src/views/LandingView.js ADDED Viewed

	@@ -0,0 +1,105 @@

+import { createRoom, joinRoom } from "../services/classroom.js";
+import { generateMonsterSVG, MONSTER_DEFS } from "../utils/monsterUtils.js";
+export function renderLandingView() {
+    // Select Decor Monsters
+    // Left: Genesis Dragon (L3_AAA), Right: Gundam (L3_BAA) - or fallbacks
+    const mLeft = MONSTER_DEFS.find(m => m.id === 'L3_AAA') || MONSTER_DEFS.find(m => m.stage === 3);
+    const mRight = MONSTER_DEFS.find(m => m.id === 'L3_BAA') || MONSTER_DEFS.find(m => m.stage === 3);
+    const svgLeft = generateMonsterSVG(mLeft);
+    const svgRight = generateMonsterSVG(mRight);
+    return `
+    <div class="min-h-screen flex flex-col items-center justify-center p-4 relative overflow-hidden">
+        <!-- Decor Monsters (Desktop Only) -->
+        <div class="absolute bottom-10 left-10 w-48 h-48 hidden lg:block pointer-events-none"
+             style="animation: float 6s ease-in-out infinite;">
+             <div class="w-full h-full drop-shadow-[0_0_15px_rgba(34,211,238,0.5)]">
+                ${svgLeft}
+             </div>
+        </div>
+        <div class="absolute bottom-10 right-10 w-48 h-48 hidden lg:block pointer-events-none"
+             style="animation: float 8s ease-in-out infinite reverse;">
+             <div class="w-full h-full drop-shadow-[0_0_15px_rgba(59,130,246,0.5)]">
+                ${svgRight}
+             </div>
+        </div>
+        <div class="max-w-md w-full bg-gray-600 bg-opacity-20 backdrop-blur-lg rounded-xl shadow-2xl p-8 border border-gray-700 z-10">
+            <h1 class="text-3xl sm:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 mb-8 text-center tracking-tighter whitespace-nowrap">
+                VIBECODING-怪獸成長營
+            </h1>
+            <!-- Student Join Form -->
+            <div id="student-form" class="space-y-6">
+                <div>
+                    <label class="block text-gray-400 text-sm font-bold mb-2">教室代碼 (Room Code)</label>
+                    <input type="text" id="room-code-input" class="w-full bg-gray-800 text-white border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:border-cyan-500 transition-colors" placeholder="1234">
+                </div>
+                <div>
+                    <label class="block text-gray-400 text-sm font-bold mb-2">您的暱稱 (Nickname)</label>
+                    <input type="text" id="nickname-input" class="w-full bg-gray-800 text-white border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:border-purple-500 transition-colors" placeholder="小明">
+                </div>
+                <button id="join-btn" class="w-full bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white font-bold py-3 px-4 rounded-lg transform transition hover:scale-105 active:scale-95 shadow-lg shadow-cyan-500/30">
+                    進入教室
+                </button>
+            </div>
+            <!-- Instructor Toggle -->
+            <div class="mt-8 pt-6 border-t border-gray-700 text-center">
+                <button id="instructor-mode-btn" class="text-gray-500 text-sm hover:text-cyan-400 transition-colors">
+                    我是講師 (Instructor Mode)
+                </button>
+            </div>
+        </div>
+        <style>
+            @keyframes float {
+                0%, 100% { transform: translateY(0); }
+                50% { transform: translateY(-20px); }
+            }
+        </style>
+    </div>
+    `;
+}
+export function setupLandingEvents(navigateTo) {
+    const joinBtn = document.getElementById('join-btn');
+    const instructorBtn = document.getElementById('instructor-mode-btn');
+    joinBtn.addEventListener('click', async () => {
+        const roomCode = document.getElementById('room-code-input').value.trim();
+        const nickname = document.getElementById('nickname-input').value.trim();
+        if (!roomCode || !nickname) {
+            alert('請輸入教室代碼和暱稱');
+            return;
+        }
+        try {
+            joinBtn.textContent = '加入中...';
+            joinBtn.disabled = true;
+            const studentId = await joinRoom(roomCode, nickname);
+            // Save Session
+            localStorage.setItem('vibecoding_user_id', studentId);
+            localStorage.setItem('vibecoding_room_code', roomCode);
+            localStorage.setItem('vibecoding_nickname', nickname);
+            navigateTo('student');
+        } catch (error) {
+            alert('加入失敗: ' + error.message);
+            joinBtn.textContent = '進入教室';
+            joinBtn.disabled = false;
+        }
+    });
+    instructorBtn.addEventListener('click', () => {
+        // Clear any previous admin referer to ensure clean state
+        localStorage.removeItem('vibecoding_admin_referer');
+        navigateTo('instructor');
+    });
+}

src/views/StudentView.js ADDED Viewed

	@@ -0,0 +1,826 @@

+import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead, getClassSize, updateUserMonster, getUser, subscribeToUserProgress } from "../services/classroom.js";
+import { generateMonsterSVG, getNextMonster, MONSTER_STAGES, MONSTER_DEFS } from "../utils/monsterUtils.js";
+// Cache challenges locally
+let cachedChallenges = [];
+function renderTaskCard(c, userProgress) {
+    const p = userProgress[c.id] || {};
+    const isCompleted = p.status === 'completed';
+    const isStarted = p.status === 'started';
+    // 1. Completed State: Collapsed with Trophy
+    if (isCompleted) {
+        return `
+            <div id="card-${c.id}" class="bg-gray-800/50 border border-green-500/30 rounded-xl p-4 flex items-center justify-between group hover:bg-gray-800 transition-all">
+                <div class="flex items-center space-x-3">
+                    <div class="text-2xl">🏆</div>
+                    <h3 class="font-bold text-gray-300 group-hover:text-white transition-colors">${c.title}</h3>
+                </div>
+                <div class="flex items-center space-x-3">
+                    <button onclick="window.resetLevel('${c.id}')" class="text-xs bg-red-900/50 hover:bg-red-700 text-red-300 border border-red-800 px-2 py-1 rounded transition-colors" title="重置進度 (Reset)">
+                        ↺ 重置
+                    </button>
+                    <span class="text-xs text-green-400 font-mono bg-green-900/30 px-2 py-1 rounded">已通關</span>
+                    <button onclick="document.getElementById('detail-${c.id}').classList.toggle('hidden')" class="text-gray-500 hover:text-white">
+                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                    </button>
+                </div>
+            </div>
+            <!-- Hidden detail for reference -->
+            <div id="detail-${c.id}" class="hidden mt-2 p-4 bg-gray-900/50 rounded-xl border border-gray-700 text-sm text-gray-400">
+                <p class="mb-2">您的提示詞:</p>
+                <div class="font-mono bg-black p-2 rounded text-gray-300 border border-gray-800">${p.submission_prompt}</div>
+            </div>
+            `;
+    }
+    // 2. Started or Not Started
+    return `
+        <div id="card-${c.id}" class="group relative bg-gray-800 bg-opacity-50 border ${isStarted ? 'border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.1)]' : 'border-gray-700'} rounded-2xl overflow-hidden hover:border-cyan-500/50 transition-all duration-300 flex flex-col">
+             <div class="absolute top-0 left-0 w-1 h-full ${isStarted ? 'bg-cyan-500' : 'bg-gray-600'} group-hover:bg-cyan-400 transition-colors"></div>
+             <div class="p-6 pl-8 flex-1 flex flex-col">
+                <div class="flex flex-col sm:flex-row justify-between items-start mb-4 gap-4">
+                    <div>
+                        <h2 class="text-xl font-bold text-white mb-1">${c.title}</h2>
+                        <div class="bg-blue-900/30 border border-blue-500/30 p-4 rounded-xl my-3 shadow-[inset_0_0_10px_rgba(59,130,246,0.1)]">
+                            <div class="flex items-start space-x-2 text-cyan-300 mb-1">
+                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                <span class="font-bold text-sm tracking-wider uppercase">任務說明</span>
+                            </div>
+                            <p class="text-gray-200 text-base font-medium whitespace-pre-line leading-relaxed pl-7">${c.description}</p>
+                        </div>
+                    </div>
+                </div>
+                ${!isStarted ? `
+                    <!-- Not Started State -->
+                    <div class="mt-4 flex justify-center">
+                        <button onclick="window.startLevel('${c.id}', '${c.link}')"
+                                class="w-full sm:w-auto bg-gray-700 hover:bg-cyan-600 hover:text-white text-gray-200 font-bold py-3 px-6 rounded-xl transition-all flex items-center justify-center space-x-2 shadow-lg">
+                            <span>🚀 開始任務 (Start Task)</span>
+                        </button>
+                    </div>
+                ` : `
+                    <!-- Started State: Input Area -->
+                    <div class="mt-4 pt-4 border-t border-gray-700/50">
+                        <div class="flex justify-between items-center mb-2">
+                            <label class="block text-xs uppercase tracking-wider text-cyan-400 animate-pulse">任務進行中</label>
+                            <a href="${c.link}" target="_blank" class="text-xs text-gray-500 hover:text-white flex items-center space-x-1">
+                                <span>再次開啟 GeminCanvas</span>
+                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
+                            </a>
+                        </div>
+                        <div class="flex flex-col space-y-2">
+                             <textarea id="input-${c.id}" rows="2"
+                                class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-cyan-500 focus:outline-none transition-colors text-sm"
+                                placeholder="貼上您的修復提示詞..."></textarea>
+                            <div id="error-${c.id}" class="text-red-500 text-xs hidden">提示詞太短囉，請多寫一點細節！</div>
+                            <button onclick="window.submitLevel('${c.id}')"
+                                class="w-full bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white px-6 py-2 rounded-lg font-bold transition-transform active:scale-95 shadow-lg shadow-cyan-900/50">
+                                提交解答
+                            </button>
+                        </div>
+                    </div>
+                `}
+             </div>
+        </div>
+        `;
+}
+export async function renderStudentView() {
+    const nickname = localStorage.getItem('vibecoding_nickname') || 'Guest';
+    const roomCode = localStorage.getItem('vibecoding_room_code') || 'Unknown';
+    const userId = localStorage.getItem('vibecoding_user_id');
+    // Fetch challenges if empty
+    if (cachedChallenges.length === 0) {
+        try {
+            cachedChallenges = await getChallenges();
+        } catch (e) {
+            console.error("Failed to fetch challenges", e);
+            throw new Error("無法讀取題目列表 (Error: " + e.message + ")");
+        }
+    }
+    // Fetch User Progress
+    let userProgress = {};
+    if (userId) {
+        try {
+            userProgress = await getUserProgress(userId);
+        } catch (e) {
+            console.error("Failed to fetch progress", e);
+        }
+    }
+    const levelGroups = {
+        beginner: cachedChallenges.filter(c => c.level === 'beginner'),
+        intermediate: cachedChallenges.filter(c => c.level === 'intermediate'),
+        advanced: cachedChallenges.filter(c => c.level === 'advanced')
+    };
+    const levelNames = {
+        beginner: "初級 (Beginner)",
+        intermediate: "中級 (Intermediate)",
+        advanced: "高級 (Advanced)"
+    };
+    // --- Monster Section Render Function ---
+    // --- Monster Section Helper Functions ---
+    // 1. Calculate Monster State (Separated logic)
+    const calculateMonsterState = (currentUserProgress, classSize, userProfile) => {
+        const totalLikes = Object.values(currentUserProgress).reduce((acc, p) => acc + (p.likes || 0), 0);
+        // Count completions per level
+        const counts = {
+            1: cachedChallenges.filter(c => c.level === 'beginner' && currentUserProgress[c.id]?.status === 'completed').length,
+            2: cachedChallenges.filter(c => c.level === 'intermediate' && currentUserProgress[c.id]?.status === 'completed').length,
+            3: cachedChallenges.filter(c => c.level === 'advanced' && currentUserProgress[c.id]?.status === 'completed').length
+        };
+        const totalCompleted = counts[1] + counts[2] + counts[3];
+        let potentialStage = 0;
+        if (counts[1] >= 5) potentialStage = 1;
+        if (counts[2] >= 5 && potentialStage >= 1) potentialStage = 2;
+        if (counts[3] >= 5 && potentialStage >= 2) potentialStage = 3;
+        const actualStage = userProfile.monster_stage || 0;
+        const actualMonsterId = userProfile.monster_id || 'Egg';
+        // Regression Logic Check
+        if (actualStage > potentialStage) {
+            // Regression Logic: Pass 'Egg' (or null) to enforce downgrade
+            const targetId = potentialStage === 0 ? 'Egg' : null; // If going to 0, force Egg. Else keep null to let system decide? Or should we query?
+            // Actually, if we devolve, we lose the specific form. So we should probably reset ID to something generic or clear it.
+            // If we go to stage 0, 'Egg' is safe.
+            // If we go to stage 1 (from 2), we might want to keep the stage 1 form (if we knew it).
+            // But simplifying: just clear the ID so getNextMonster picks default for that stage.
+            updateUserMonster(userId, potentialStage, targetId).then(() => {
+                setTimeout(() => window.location.reload(), 500);
+            });
+            // Return corrected state temporary
+            return {
+                ...calculateMonsterState(currentUserProgress, classSize, { ...userProfile, monster_stage: potentialStage, monster_id: targetId }),
+                isRegressing: true
+            };
+        }
+        const canEvolve = potentialStage > actualStage;
+        // Scale Logic
+        const growthFactor = 0.08;
+        const baseScale = 1.0;
+        const currentScale = baseScale + (totalCompleted * growthFactor);
+        // Get Monster Data
+        let monster = getNextMonster(actualStage, 0, 0, actualMonsterId);
+        if (actualMonsterId && actualMonsterId !== 'Egg') {
+            const stored = MONSTER_DEFS.find(m => m.id === actualMonsterId);
+            if (stored) monster = stored;
+        } else {
+            monster = getNextMonster(actualStage, totalLikes, classSize);
+        }
+        return {
+            monster,
+            currentScale,
+            totalCompleted,
+            totalLikes,
+            canEvolve,
+            actualStage,
+            classSize,
+            counts
+        };
+    };
+    // 2. Render Stats HTML (Partial Update Target)
+    const renderMonsterStats = (state) => {
+        return `
+            <div class="font-bold text-white text-sm mb-1 text-center border-b border-gray-700 pb-1">${state.monster.name}</div>
+            <div class="space-y-1 mt-1 text-center">
+                <div class=""><span>💖</span> <span class="text-pink-400 font-bold ml-1">${state.totalLikes}</span></div>
+            </div>
+        `;
+    };
+    // 3. Render Full Monster Container (Initial or Full Update)
+    // Now positioned stats to TOP
+    const renderMonsterSection = (currentUserProgress, classSize, userProfile) => {
+        const state = calculateMonsterState(currentUserProgress, classSize, userProfile);
+        // Left sidebar position: Responsive
+        // Mobile: Top Left (in header space)
+        // Desktop: Fixed Left Sidebar
+        return `
+        <div id="monster-container-fixed" data-monster-id="${state.monster.id}" data-scale="${state.currentScale}"
+             class="fixed top-2 left-2 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto w-24 h-24 sm:w-32 sm:h-32 md:top-32 md:left-8">
+            <!-- Stats Tooltip (Moved to Top) -->
+            <div id="monster-stats-content" class="absolute bottom-full mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-900/90 backdrop-blur text-xs text-slate-300 p-3 rounded-xl border border-slate-700 text-left pointer-events-auto shadow-2xl min-w-[100px]">
+                ${renderMonsterStats(state)}
+            </div>
+            <!-- Walking Container (Handles Movement Only) -->
+            <div class="pixel-art-container relative transform transition-transform duration-500 ease-out origin-center"
+                 style="transform: scale(${state.currentScale}); animation: patrol-move 15s linear infinite;">
+                <!-- Monster Sprite (Handles Flip & Breathe) -->
+                <div class="pixel-monster w-28 h-28 drop-shadow-2xl filter" style="animation: breathe 3s infinite ease-in-out, patrol-flip 15s linear infinite;">
+                    ${generateMonsterSVG(state.monster)}
+                </div>
+                <!-- Level Indicator (No Flip) -->
+                <div class="absolute -bottom-2 -right-2 bg-gray-900/90 text-xs text-yellow-400 px-2 py-0.5 rounded-full border border-yellow-500/50 font-mono font-bold transform scale-75 origin-top-left whitespace-nowrap">
+                    Lv.${1 + state.totalCompleted}
+                </div>
+            </div>
+            <!-- Evolution Prompt -->
+            ${state.canEvolve ? `
+                <div id="evolution-prompt" class="absolute top-full mt-2 pointer-events-auto animate-bounce z-50">
+                    <div class="flex flex-col items-center">
+                        <div class="bg-gray-900/90 text-pink-200 text-xs py-2 px-3 rounded-xl border border-pink-500/30 shadow-lg text-center font-bold mb-1 backdrop-blur-sm whitespace-nowrap">
+                            咦，小怪獸的樣子<br>正在發生變化...
+                        </div>
+                        <button onclick="window.triggerEvolution(${state.actualStage}, ${state.actualStage + 1}, ${state.totalLikes}, ${classSize}, '${state.monster.id}')"
+                            class="bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white text-sm font-black py-2 px-6 rounded-full shadow-[0_0_15px_rgba(236,72,153,0.8)] border border-white/30 transition-all hover:scale-110 active:scale-95">
+                            進化！
+                        </button>
+                    </div>
+                </div>
+            ` : ''}
+        </div>
+        <style>
+            @keyframes breathe {
+                0%, 100% { transform: translateY(0); filter: brightness(1); }
+                50% { transform: translateY(-3px); filter: brightness(1.1); }
+            }
+            @keyframes patrol-move {
+                0% { transform: translateX(0); }
+                45% { transform: translateX(120px); }
+                55% { transform: translateX(120px); }
+                95% { transform: translateX(0); }
+                100% { transform: translateX(0); }
+            }
+            @keyframes patrol-flip {
+                0% { transform: scaleX(1); }
+                49% { transform: scaleX(1); }
+                50% { transform: scaleX(-1); }
+                99% { transform: scaleX(-1); }
+                100% { transform: scaleX(1); }
+            }
+        </style>
+        `;
+    };
+    // Inject Initial Monster UI
+    const monsterContainerId = 'monster-ui-layer';
+    let monsterContainer = document.getElementById(monsterContainerId);
+    if (!monsterContainer) {
+        monsterContainer = document.createElement('div');
+        monsterContainer.id = monsterContainerId;
+        document.body.appendChild(monsterContainer);
+    }
+    // Initial Render
+    let classSize = 1;
+    let userProfile = {};
+    try {
+        classSize = await getClassSize(roomCode);
+        userProfile = await getUser(userId) || {};
+    } catch (e) { console.error("Fetch stats error", e); }
+    monsterContainer.innerHTML = renderMonsterSection(userProgress, classSize, userProfile);
+    // Setup Real-time Subscription
+    if (window.currentProgressUnsub) window.currentProgressUnsub();
+    window.currentProgressUnsub = subscribeToUserProgress(userId, (newProgressMap) => {
+        // Merge updates
+        const updatedProgress = { ...userProgress, ...newProgressMap };
+        // Smart Update: Check if visual refresh is needed
+        const newState = calculateMonsterState(updatedProgress, classSize, userProfile);
+        const fixedContainer = document.getElementById('monster-container-fixed');
+        const currentMonsterId = fixedContainer?.getAttribute('data-monster-id');
+        // Tolerance for scale check usually not needed if we want scale to update visuals immediately?
+        // Actually, scale change usually means totalCompleted changed.
+        // If we want smooth growth, replacing DOM resets animation which looks slight jumpy but acceptable.
+        // But the user complained about "position reset" (walk cycle reset).
+        if (fixedContainer && String(currentMonsterId) === String(newState.monster.id)) {
+            // Monster ID is same (no evolution/devolution).
+            // Just update stats tooltip
+            const statsContainer = document.getElementById('monster-stats-content');
+            if (statsContainer) {
+                statsContainer.innerHTML = renderMonsterStats(newState);
+            }
+            // What if level up (scale change)?
+            // If we don't replace DOM, scale won't update in style attribute.
+            // We should update the style manually.
+            const artContainer = fixedContainer.querySelector('.pixel-art-container');
+            if (artContainer && newState.currentScale) {
+                // Update animation with new scale
+                // Note: Modifying 'transform' directly might conflict with keyframes unless keyframes use relative or we update style variable.
+                // Keyframes use: scale(${currentScale}). This is hardcoded in specific keyframes string in <style>.
+                // We can't easily update keyframes dynamic values without replacing style block.
+                // If totalCompleted changed (level up), user *might* accept a reset because they levelled up.
+                // But simply giving a heart shouldn't reset.
+                const oldTotal = parseInt(fixedContainer.querySelector('.bg-gray-900\\/90')?.textContent?.replace('Lv.', '') || '1') - 1;
+                if (oldTotal !== newState.totalCompleted) {
+                    // Level changed -> Scale changed -> Re-render full (reset animation is fine for Level Up)
+                    monsterContainer.innerHTML = renderMonsterSection(updatedProgress, classSize, userProfile);
+                }
+            }
+        } else {
+            // Monster changed or clean slate -> Full Render
+            monsterContainer.innerHTML = renderMonsterSection(updatedProgress, classSize, userProfile);
+        }
+    });
+    // Accordion Layout
+    return `
+    <div class="min-h-screen p-4 pb-32 max-w-md mx-auto sm:max-w-4xl pt-24 sm:pt-4">
+        <header class="flex justify-end items-center mb-6 sticky top-0 bg-slate-900/95 backdrop-blur z-20 py-4 px-2 -mx-2 border-b border-gray-800">
+            <div class="flex flex-col items-end">
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                    <span class="text-gray-400 text-sm truncate max-w-[150px]">${nickname}</span>
+                </div>
+                <div class="text-xs text-gray-500 mt-1">教室: <span class="font-mono text-cyan-400 font-bold">${roomCode}</span></div>
+            </div>
+            <button onclick="window.logout()" class="text-gray-500 hover:text-red-400 transition-colors p-2" title="登出">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                </svg>
+            </button>
+        </header>
+        <div class="space-y-4">
+            ${['beginner', 'intermediate', 'advanced'].map(level => {
+        return renderLevelGroup(level, levelGroups[level] || [], userProgress, levelNames);
+    }).join('')}
+        </div>
+        <!-- Peer Learning FAB -->
+        <button onclick="window.openPeerModal()" class="fixed bottom-14 right-4 bg-purple-600 hover:bg-purple-500 text-white rounded-full p-4 shadow-xl shadow-purple-600/40 transition-transform hover:scale-110 active:scale-90 z-40 flex items-center space-x-2"
+            title="查看同學作業">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+            <span class="font-bold text-sm hidden sm:inline">查看同學提示詞</span>
+        </button>
+        <!-- Credits Footer -->
+        <div class="fixed bottom-1 right-2 z-30 text-[10px] text-gray-400 font-mono text-right pointer-events-none sm:pointer-events-auto select-none opacity-80 hover:opacity-100 transition-opacity">
+            <div>程式設計者：新竹縣精華國中 藍星宇老師</div>
+            <div>教育社群：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank" class="text-gray-300 hover:text-white pointer-events-auto">萬物皆數</a></div>
+        </div>
+    </div>
+        `;
+}
+export function setupStudentEvents() {
+    // Start Level Logic
+    window.startLevel = async (challengeId, link) => {
+        // Open link
+        window.open(link, '_blank');
+        // Call service to update status
+        const roomCode = localStorage.getItem('vibecoding_room_code');
+        const userId = localStorage.getItem('vibecoding_user_id');
+        if (roomCode && userId) {
+            try {
+                await startChallenge(userId, roomCode, challengeId);
+                // Reload view to show Input State
+                // Ideally we should use state management, but checking URL hash or re-rendering works
+                const app = document.querySelector('#app');
+                app.innerHTML = await renderStudentView();
+                // Re-attach events (recursion safety check needed? No, navigateTo does this usually, but here we manually re-render)
+                // Or better: trigger a custom event or call navigateTo functionality?
+                // Simple re-render is fine for now.
+            } catch (e) {
+                console.error("Start challenge failed", e);
+            }
+        }
+    };
+    window.submitLevel = async (challengeId) => {
+        const input = document.getElementById(`input-${challengeId}`);
+        const errorMsg = document.getElementById(`error-${challengeId}`);
+        const prompt = input.value;
+        const roomCode = localStorage.getItem('vibecoding_room_code');
+        const userId = localStorage.getItem('vibecoding_user_id');
+        if (!participantDataCheck(roomCode, userId)) return;
+        if (prompt.trim().length < 5) {
+            errorMsg.classList.remove('hidden');
+            input.classList.add('border-red-500');
+            return;
+        }
+        errorMsg.classList.add('hidden');
+        input.classList.remove('border-red-500');
+        // Show loading state on button
+        const container = input.parentElement;
+        const btn = container.querySelector('button');
+        const originalText = btn.textContent;
+        btn.textContent = "提交中...";
+        btn.disabled = true;
+        try {
+            await submitPrompt(userId, roomCode, challengeId, prompt);
+            btn.textContent = "✓ 已通關";
+            btn.classList.add("bg-green-600");
+            // Fetch latest progress to ensure correct count
+            const { getUserProgress } = await import("../services/classroom.js");
+            const newProgress = await getUserProgress(userId);
+            // Re-render the level group to update count and all-clear status
+            const challenge = cachedChallenges.find(c => c.id === challengeId);
+            const level = challenge.level;
+            const levelGroups = {
+                beginner: cachedChallenges.filter(c => c.level === 'beginner'),
+                intermediate: cachedChallenges.filter(c => c.level === 'intermediate'),
+                advanced: cachedChallenges.filter(c => c.level === 'advanced')
+            };
+            const levelNames = {
+                beginner: "初級 (Beginner)",
+                intermediate: "中級 (Intermediate)",
+                advanced: "高級 (Advanced)"
+            };
+            const newGroupHTML = renderLevelGroup(level, levelGroups[level], newProgress, levelNames);
+            const detailEl = document.getElementById(`details-group-${level}`);
+            if (detailEl) {
+                detailEl.outerHTML = newGroupHTML;
+            } else {
+                const app = document.querySelector('#app');
+                app.innerHTML = await renderStudentView();
+            }
+        } catch (error) {
+            console.error(error);
+            btn.textContent = originalText;
+            btn.disabled = false;
+            alert("提交失敗: " + error.message);
+        }
+    };
+    window.resetLevel = async (challengeId) => {
+        if (!confirm("確定要重置這一題的進度嗎？(提示詞將會保留，但狀態會變回進行中)")) return;
+        const roomCode = localStorage.getItem('vibecoding_room_code');
+        const userId = localStorage.getItem('vibecoding_user_id');
+        try {
+            // Import and call resetProgress (Need to make sure it is imported or available globally?
+            // Ideally import it. But setupStudentEvents is in module scope so imports are available.
+            // Wait, import 'resetProgress' is not in the top import list yet. I need to add it.)
+            // Let's assume I will update the import in the next step or use the global trick if needed.
+            // But I should edit the import first.
+            // For now, let's assume it is there. I will add it to the import list in a parallel or subsequent edit.
+            // Checking imports above... I see 'getUserProgress' but not 'resetProgress'. I must update imports.
+            // I'll do it in a separate edit step to be safe.
+            // For now, just the logic:
+            const { resetProgress } = await import("../services/classroom.js"); // Dynamic import to avoid changing top file lines again?
+            // Or just rely on previous 'replace' having updated the file?
+            // Actually, I should update the top import.
+            await resetProgress(userId, roomCode, challengeId);
+            const app = document.querySelector('#app');
+            app.innerHTML = await renderStudentView();
+        } catch (e) {
+            console.error(e);
+            alert("重置失敗");
+        }
+    };
+}
+function participantDataCheck(roomCode, userId) {
+    if (!roomCode || !userId) {
+        alert("連線資訊遺失，請重新登入");
+        window.location.reload();
+        return false;
+    }
+    return true;
+}
+window.logout = () => {
+    if (!confirm("確定要登出嗎？")) return;
+    localStorage.removeItem('vibecoding_user_id');
+    localStorage.removeItem('vibecoding_room_code');
+    localStorage.removeItem('vibecoding_nickname');
+    window.location.reload();
+};
+// Peer Learning Modal Logic
+function renderPeerModal() {
+    // We need to re-fetch challenges for the dropdown?
+    // They are cached in 'cachedChallenges' module variable
+    let optionsHtml = '<option value="" disabled selected>選擇題目...</option>';
+    if (cachedChallenges.length > 0) {
+        optionsHtml += cachedChallenges.map(c =>
+            `<option value="${c.id}">[${c.level}] ${c.title}</option>`
+        ).join('');
+    }
+    return `
+        <div id="peer-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
+            <div class="bg-gray-800 rounded-2xl w-full max-w-md h-[80vh] flex flex-col border border-gray-700 shadow-2xl">
+                <div class="p-6 border-b border-gray-700 flex justify-between items-center">
+                    <h3 class="text-xl font-bold text-white">同學的成功提示詞</h3>
+                    <button onclick="closePeerModal()" class="text-gray-400 hover:text-white">✕</button>
+                </div>
+                <div class="p-4 bg-gray-900 border-b border-gray-700">
+                    <select id="peer-challenge-select" onchange="loadPeerPrompts(this.value)" class="w-full bg-gray-800 border border-gray-600 rounded p-2 text-white">
+                        ${optionsHtml}
+                    </select>
+                </div>
+                <div class="p-4 flex-1 overflow-y-auto space-y-4" id="peer-prompts-container">
+                    <div class="text-center text-gray-500 mt-10">請選擇一個題目來查看</div>
+                </div>
+            </div>
+        </div>
+        `;
+}
+window.openPeerModal = () => {
+    const existing = document.getElementById('peer-modal');
+    if (existing) existing.remove();
+    const div = document.createElement('div');
+    div.innerHTML = renderPeerModal();
+    document.body.appendChild(div.firstElementChild);
+    document.getElementById('peer-modal').classList.remove('hidden');
+};
+window.closePeerModal = () => {
+    document.getElementById('peer-modal').classList.add('hidden');
+};
+// Helper to render a level group (Accordion)
+function renderLevelGroup(level, tasks, userProgress, levelNames) {
+    const detailsId = `details-group-${level}`;
+    const existingDetails = document.getElementById(detailsId);
+    let isOpenStr = '';
+    if (existingDetails) {
+        if (existingDetails.hasAttribute('open')) isOpenStr = 'open';
+    } else {
+        // Initial Load defaults
+        if (level === 'beginner') isOpenStr = 'open';
+    }
+    // Count completed
+    const completedCount = tasks.filter(t => userProgress[t.id]?.status === 'completed').length;
+    return `
+            <details id="${detailsId}" class="group border border-gray-700 rounded-xl bg-gray-800/30 overflow-hidden transition-all" ${isOpenStr}>
+                <summary class="flex items-center justify-between p-4 cursor-pointer bg-gray-800/80 hover:bg-gray-700 transition-colors select-none">
+                    <div class="flex items-center space-x-3">
+                        <h3 class="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">
+                           ${levelNames[level]}
+                        </h3>
+                        ${completedCount === tasks.length && tasks.length > 0 ? '<span class="text-yellow-500 text-xs border border-yellow-500/50 px-2 py-0.5 rounded-full">ALL CLEAR</span>' : ''}
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <span class="text-xs text-gray-400 bg-gray-900 px-2 py-1 rounded-full">${completedCount} / ${tasks.length}</span>
+                        <svg class="w-5 h-5 text-gray-400 transform group-open:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </div>
+                </summary>
+                <div class="p-4 pt-0 grid grid-cols-1 gap-4 mt-4">
+                    ${tasks.length > 0 ? tasks.map(c => renderTaskCard(c, userProgress)).join('') : '<div class="text-gray-500 text-sm italic">本區段尚無題目</div>'}
+                </div>
+            </details>
+            `;
+}
+window.loadPeerPrompts = async (challengeId) => {
+    const container = document.getElementById('peer-prompts-container');
+    container.innerHTML = '<div class="text-center text-gray-400 py-10">載入中...</div>';
+    const roomCode = localStorage.getItem('vibecoding_room_code');
+    const prompts = await getPeerPrompts(roomCode, challengeId);
+    if (prompts.length === 0) {
+        container.innerHTML = '<div class="text-center text-gray-500 py-10">尚無同學提交此關卡或您無權限查看(需相同教室代碼)</div>';
+        return;
+    }
+    container.innerHTML = prompts.map(p => {
+        const currentUserId = localStorage.getItem('vibecoding_user_id');
+        const isLiked = p.likedBy && p.likedBy.includes(currentUserId);
+        return `
+        <div class="bg-gray-700/30 p-4 rounded-xl border border-gray-600">
+            <div class="flex items-center justify-between mb-2">
+                <div class="flex items-center space-x-2">
+                    <div class="w-6 h-6 rounded-full bg-cyan-600 flex items-center justify-center text-xs font-bold text-white">
+                        ${p.nickname[0]}
+                    </div>
+                    <span class="font-bold text-cyan-300 text-sm">${p.nickname}</span>
+                    <span class="text-gray-500 text-xs">${new Date(p.timestamp.seconds * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+                </div>
+                <button onclick="handleLike('${p.id}', '${p.userId}')"
+                    class="flex items-center space-x-1 px-2 py-1 rounded-full transition-colors ${isLiked ? 'bg-pink-900/50 text-pink-400' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'}">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ${isLiked ? 'fill-current' : 'none'}" viewBox="0 0 24 24" stroke="currentColor" fill="${isLiked ? 'currentColor' : 'none'}">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                    </svg>
+                    <span class="text-xs font-bold">${p.likes}</span>
+                </button>
+            </div>
+            <p class="text-gray-300 font-mono text-sm bg-black/20 p-3 rounded-lg border border-gray-700/50 whitespace-pre-wrap">${p.prompt}</p>
+        </div>
+        `}).join('');
+    // Attach challenge title for notification context
+    window.currentPeerChallengeTitle = document.querySelector(`#peer-challenge-select option[value="${challengeId}"]`).text;
+};
+// Like Handler
+window.handleLike = async (progressId, targetUserId) => {
+    const userId = localStorage.getItem('vibecoding_user_id');
+    const nickname = localStorage.getItem('vibecoding_nickname');
+    const challengeTitle = window.currentPeerChallengeTitle || '挑戰';
+    // Optimistic UI update could go here, but for simplicity let's re-load or just fire and forget (the view won't update until reload currently)
+    // To make it responsive, we should probably manually toggle the class on the button immediately.
+    // For now, let's just call service and reload the list to see updated count.
+    // Better UX: Find button and toggle 'processing' state?
+    // Let's just reload the list for data consistency.
+    const { toggleLike } = await import("../services/classroom.js");
+    await toggleLike(progressId, userId, nickname, targetUserId, challengeTitle);
+    // Reload to refresh count
+    const select = document.getElementById('peer-challenge-select');
+    if (select && select.value) {
+        loadPeerPrompts(select.value);
+    }
+};
+window.triggerEvolution = async (currentStage, nextStage, likes, classSize, currentMonsterId) => {
+    // 1. Hide Prompt
+    const prompt = document.getElementById('evolution-prompt');
+    if (prompt) prompt.style.display = 'none';
+    try {
+        const { getNextMonster, generateMonsterSVG, MONSTER_STAGES } = await import("../utils/monsterUtils.js");
+        const { updateUserMonster, getHigherStageCount } = await import("../services/classroom.js");
+        // Calculate Ranking Percentile
+        const roomCode = localStorage.getItem('vibecoding_room_code');
+        let percentile = 1.0;
+        // Query how many already at next stage (or same level but evolved)
+        // Actually, we want to know how many have *completed* this stage essentially.
+        // Since we trigger evolution AFTER completion, anyone AT or ABOVE nextStage has completed it.
+        // So we count how many are >= nextStage.
+        // Wait, if I am the first to evolve to stage 1, count >= 1 is 0.
+        // So rank is (0 + 1) / classSize.
+        try {
+            const higherCount = await getHigherStageCount(roomCode, nextStage);
+            percentile = higherCount / classSize;
+            console.log(`Evolution Rank: ${higherCount}/${classSize} (Percentile: ${percentile.toFixed(2)})`);
+        } catch (e) {
+            console.error("Rank calc failed", e);
+        }
+        // Calculate Stage-Specific Likes
+        // We need to fetch challenges to filter by level...
+        // cachedChallenges is available in module scope
+        // We need user progress...
+        // We can't easily get it here without re-fetching or passing it in.
+        // But we have 'likes' passed in, which is TOTAL likes.
+        // Re-fetching progress is safer.
+        const userId = localStorage.getItem('vibecoding_user_id');
+        const { getUserProgress } = await import("../services/classroom.js");
+        const progress = await getUserProgress(userId);
+        let stageLikes = 0;
+        // Map stage to challenge level
+        // Stage 0 -> 1 requires Beginner (Level 1) likes
+        // Stage 1 -> 2 requires Intermediate (Level 2) likes
+        // Stage 2 -> 3 requires Advanced (Level 3) likes
+        // Note: nextStage parameter is the TARGET stage.
+        // If nextStage is 1 (Egg->Baby), we count Beginner likes.
+        const targetLevelMap = {
+            1: 'beginner',
+            2: 'intermediate',
+            3: 'advanced'
+        };
+        const targetLevel = targetLevelMap[nextStage];
+        if (targetLevel) {
+            stageLikes = cachedChallenges
+                .filter(c => c.level === targetLevel)
+                .reduce((acc, c) => acc + (progress[c.id]?.likes || 0), 0);
+        }
+        console.log(`Stage ${nextStage} Likes: ${stageLikes} (Total: ${likes})`);
+        // Calculate Next Monster with Lineage & Ranking
+        // IMPORTANT: Ensure we pass currentMonsterId to enforce lineage!
+        // We pass 'stageLikes' instead of total 'likes' now
+        const nextMonster = getNextMonster(nextStage, stageLikes, classSize, currentMonsterId, percentile);
+        console.log("Evolving from:", currentMonsterId, "to:", nextMonster.name);
+        const container = document.querySelector('#monster-container-fixed .pixel-monster');
+        const containerWrapper = document.querySelector('#monster-container-fixed .pixel-art-container');
+        // Stop breathing animation
+        container.style.animation = 'none';
+        // --- ANIMATION SEQUENCE ---
+        let count = 0;
+        const maxFlickers = 12; // Increased duration
+        let speed = 300;
+        const currentMonster = MONSTER_DEFS.find(m => m.id === currentMonsterId) || getNextMonster(currentStage, 0, 0, currentMonsterId);
+        const svgCurrent = generateMonsterSVG(currentMonster);
+        const svgNext = generateMonsterSVG(nextMonster);
+        const setFrame = (svg, isSilhouette) => {
+            container.innerHTML = svg;
+            container.style.filter = isSilhouette ? 'brightness(0)' : 'none';
+        };
+        const playFlicker = () => {
+            const isNext = count % 2 === 1;
+            setFrame(isNext ? svgNext : svgCurrent, true);
+            count++;
+            if (count < maxFlickers) {
+                speed *= 0.85;
+                setTimeout(playFlicker, speed);
+            } else {
+                // Final Reveal
+                setTimeout(() => {
+                    setFrame(svgNext, true); // Hold silhouette
+                    setTimeout(() => {
+                        // Reveal Color with Flash
+                        containerWrapper.style.transition = 'filter 0.8s ease-out';
+                        containerWrapper.style.filter = 'drop-shadow(0 0 30px #ffffff) brightness(1.5)';
+                        // Force SVG update to next monster for final state
+                        setFrame(svgNext, false);
+                        setTimeout(async () => {
+                            containerWrapper.style.filter = 'none';
+                            // DB Update with Monster ID
+                            const userId = localStorage.getItem('vibecoding_user_id');
+                            await updateUserMonster(userId, nextStage, nextMonster.id);
+                            // Soft refresh to prevent screen flicker
+                            const app = document.querySelector('#app');
+                            if (app) app.innerHTML = await renderStudentView();
+                            // Also need to ensure monster container is updated (handle in renderStudentView)
+                        }, 1200);
+                    }, 1000);
+                }, 300);
+            }
+        };
+        playFlicker();
+    } catch (e) {
+        console.error(e);
+        alert("進化失敗: " + (e.message || "未知錯誤"));
+        // Re-render instead of reload to keep state
+        const app = document.querySelector('#app');
+        if (app) app.innerHTML = await renderStudentView();
+    }
+};