WIP but saving this anyways

7 months ago · 7ea8d41976
12 changed files with 3382 additions and 569 deletions
--- a/internal/design/design.go
+++ b/internal/design/design.go
@ -99,6 +99,21 @@ type WebServer struct {
				@@ -99,6 +99,21 @@ type WebServer struct {
 	MonthlyCostUsd int `json:"monthlyCostUsd"`
 }

+type Request struct {
+	ID        string
+	Timestamp int
+	LatencyMS int
+	Origin    string
+	Type      string
+	Path      []string
+}
+
+type TickSnapshot struct {
+	TickMs     int
+	QueueSizes map[string]int
+	NodeHealth map[string]string
+}
+
 func (n *Node) UnmarshalJSON(data []byte) error {
 	type Alias Node // avoid infinite recursion
 	aux := &struct {
--- a/internal/simulation/engine.go
+++ b/internal/simulation/engine.go
@ -0,0 +1,52 @@
				@@ -0,0 +1,52 @@
+package simulation
+
+import (
+	"systemdesigngame/internal/design"
+)
+
+type Request struct {
+	ID        string
+	Timestamp int
+	LatencyMS int
+	Origin    string
+	Type      string
+	Path      []string
+}
+
+type SimulationNode interface {
+	ID() string
+	Type() string
+	Tick(tick int)
+	Receive(req *Request)
+	Emit() []*Request
+	IsAlive() bool
+}
+
+type Engine struct {
+	Nodes    map[string]SimulationNode
+	Timeline []TickSnapshot
+	Duration int
+	TickMs   int
+}
+
+type TickSnapshot struct {
+	TickMs     int
+	QueueSizes map[string]int
+	NodeHealth map[string]string
+}
+
+func NewEngineFromDesign(design simulation.Design, duration int, tickMs int) *Engine {
+	nodes := design.ToSimulationNode()
+	nodeMap := make(make[string]SimulatSimulationNode)
+	for _, n := range nodes {
+		nodeMap[n.ID] = n
+	}
+
+	return &Engine{
+		Nodes: nodeMap,
+		Duration: duration,
+		TickMs: tickMs,
+	}
+}
+
+
--- a/internal/simulation/loadbalancer.go
+++ b/internal/simulation/loadbalancer.go
@ -0,0 +1,53 @@
				@@ -0,0 +1,53 @@
+package simulation
+
+type LoadBalancerNode struct {
+	ID        string
+	Queue     []*Request
+	Targets   []string
+	Counter   int
+	Alive     bool
+	Processed []*Request
+}
+
+func (lb *LoadBalancerNode) GetID() string {
+	return lb.ID
+}
+
+func (lb *LoadBalancerNode) Type() string {
+	return "loadBalancer"
+}
+
+func (lb *LoadBalancerNode) IsAlive() bool {
+	return lb.Alive
+}
+
+func (lb *LoadBalancerNode) Receive(req *Request) {
+	lb.Queue = append(lb.Queue)
+}
+
+func (lb *LoadBalancerNode) Tick(tick int) {
+	lb.Processed = nil
+
+	for _, req := range lb.Queue {
+		if len(lb.Targets) == 0 {
+			continue
+		}
+
+		target := lb.Targets[lb.Counter%len(lb.Targets)]
+		lb.Counter++
+
+		req.Path = append([]string{target}, req.Path...)
+
+		req.LatencyMS += 10
+
+		lb.Processed = append(lb.Processed, req)
+	}
+
+	lb.Queue = lb.Queue[:0]
+}
+
+func (lb *LoadBalancerNode) Emit() []*Request {
+	out := lb.Processed
+	lb.Processed = nil
+	return out
+}
--- a/internal/simulation/webservernode.go
+++ b/internal/simulation/webservernode.go
@ -0,0 +1,60 @@
				@@ -0,0 +1,60 @@
+package simulation
+
+type WebServerNode struct {
+	ID            string
+	Queue         []*Request
+	CapacityRPS   int
+	BaseLatencyMs int
+	PenaltyPerRPS float64
+	Processed     []*Request
+	Alive         bool
+}
+
+func (ws *WebServerNode) GetID() string {
+	return ws.ID
+}
+
+func (ws *WebServerNode) Type() string {
+	return "webserver"
+}
+
+func (ws *WebServerNode) IsAlive() bool {
+	return ws.Alive
+}
+
+func (ws *WebServerNode) Tick(tick int) {
+	toProcess := min(ws.CapacityRPS, len(ws.Queue))
+	for i := 0; i < toProcess; i++ {
+		req := ws.Queue[0]
+		req.LatencyMS += ws.BaseLatencyMs
+		ws.Processed = append(ws.Processed, req)
+
+		ws.Queue[i] = nil
+	}
+
+	ws.Queue = ws.Queue[toProcess:]
+
+	if len(ws.Queue) > ws.CapacityRPS {
+		overload := len(ws.Queue) - ws.CapacityRPS
+		for _, req := range ws.Queue {
+			req.LatencyMS += int(ws.PenaltyPerRPS * float64(overload))
+		}
+	}
+}
+
+func (ws *WebServerNode) Receive(req *Request) {
+	ws.Queue = append(ws.Queue, req)
+}
+
+func (ws *WebServerNode) Emit() []*Request {
+	out := ws.Processed
+	ws.Processed = nil
+	return out
+}
+
+func min(a, b int) int {
+	if a < b {
+		return a
+	}
+	return b
+}
--- a/router/handlers/results.go
+++ b/router/handlers/results.go
@ -0,0 +1,22 @@
				@@ -0,0 +1,22 @@
+package handlers
+
+import (
+	"html/template"
+	"net/http"
+)
+
+type ResultHandler struct {
+	Tmpl *template.Template
+}
+
+func (r *ResultHandler) ServeHTTP(w http.ResponseWriter, req *http.Request) {
+	data := struct {
+		Title string
+	}{
+		Title: "Title",
+	}
+
+	if err := r.Tmpl.ExecuteTemplate(w, "success.html", data); err != nil {
+		http.Error(w, "Template Error", http.StatusInternalServerError)
+	}
+}
--- a/router/handlers/simulate.go
+++ b/router/handlers/simulate.go
--- a/static/difficulty-select.html
+++ b/static/difficulty-select.html
@ -0,0 +1,625 @@
				@@ -0,0 +1,625 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>System Design Game - Select Difficulty</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
+
+        /* === CSS VARIABLES === */
+        :root {
+            /* Colors */
+            --color-bg-body: #161b22;
+            --color-bg-dark: #121212;
+            --color-bg-sidebar: #111;
+            --color-bg-component: #1e1e1e;
+            --color-bg-hover: #2a2a2a;
+            --color-bg-accent: #005f87;
+            --color-bg-tab-active: #1a3d2a;
+            --color-border: #444;
+            --color-border-accent: #00ff88;
+            --color-border-panel: #30363d;
+            --color-text-primary: #ccc;
+            --color-text-muted: #888;
+            --color-text-accent: #00ff88;
+            --color-text-white: #fff;
+            --color-text-dark: #333;
+            --color-button: #238636;
+            --color-button-disabled: #555;
+            --color-connection: #333;
+            --color-connection-selected: #007bff;
+            --color-tooltip-bg: #333;
+            --color-tooltip-text: #fff;
+
+            /* Sizes */
+            --radius-small: 4px;
+            --radius-medium: 6px;
+            --radius-large: 8px;
+            --font-family-mono: 'JetBrains Mono', monospace;
+            --font-family-code: 'Fira Code', monospace;
+            --component-padding: 8px;
+            --component-gap: 12px;
+
+            /* Difficulty-specific colors using existing palette */
+            --color-easy: var(--color-text-accent);
+            --color-medium: #d29922;
+            --color-hard: #f85149;
+        }
+
+        /* === RESET === */
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: var(--font-family-mono);
+            background-color: var(--color-bg-body);
+            color: var(--color-text-primary);
+            min-height: 100vh;
+            background: 
+                radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%),
+                radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%),
+                var(--color-bg-body);
+        }
+
+        /* === HEADER === */
+        .header {
+            width: 100%;
+            background: transparent;
+            padding: 12px 24px;
+            border-bottom: 1px solid var(--color-border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .header-text {
+            font-size: 24px;
+            margin: 0;
+            color: var(--color-text-accent);
+            font-weight: bold;
+        }
+
+        .back-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 14px;
+            background: transparent;
+            color: var(--color-text-primary);
+            text-decoration: none;
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-medium);
+            font-weight: 500;
+            font-family: var(--font-family-mono);
+            font-size: 12px;
+            transition: all 0.2s ease;
+        }
+
+        .back-button:hover {
+            background-color: var(--color-bg-hover);
+            border-color: var(--color-border-accent);
+        }
+
+        /* === MAIN CONTENT === */
+        .main-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 60px 24px;
+        }
+
+        .title-section {
+            text-align: center;
+            margin-bottom: 60px;
+        }
+
+        .main-title {
+            font-size: 48px;
+            font-weight: 700;
+            margin: 0 0 20px 0;
+            background: linear-gradient(135deg, var(--color-text-accent), var(--color-connection-selected));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .subtitle {
+            font-size: 18px;
+            color: var(--color-text-muted);
+            max-width: 600px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+
+        /* === DIFFICULTY CARDS === */
+        .difficulty-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+
+        .difficulty-card {
+            background: var(--color-bg-component);
+            border: 2px solid var(--color-border);
+            border-radius: var(--radius-large);
+            padding: 24px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .difficulty-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05));
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .difficulty-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            background-color: var(--color-bg-hover);
+        }
+
+        .difficulty-card:hover::before {
+            opacity: 1;
+        }
+
+        .difficulty-card.easy {
+            border-color: var(--color-easy);
+        }
+
+        .difficulty-card.easy:hover {
+            border-color: var(--color-easy);
+            box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3);
+        }
+
+        .difficulty-card.medium {
+            border-color: var(--color-medium);
+        }
+
+        .difficulty-card.medium:hover {
+            border-color: var(--color-medium);
+            box-shadow: 0 10px 30px rgba(210, 153, 34, 0.3);
+        }
+
+        .difficulty-card.hard {
+            border-color: var(--color-hard);
+        }
+
+        .difficulty-card.hard:hover {
+            border-color: var(--color-hard);
+            box-shadow: 0 10px 30px rgba(248, 81, 73, 0.3);
+        }
+
+        .difficulty-header {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+
+        .difficulty-icon {
+            width: 50px;
+            height: 50px;
+            border-radius: var(--radius-medium);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            font-weight: bold;
+            background: var(--color-bg-dark);
+            border: 1px solid var(--color-border-panel);
+        }
+
+        .difficulty-card.easy .difficulty-icon {
+            color: var(--color-easy);
+            border-color: var(--color-easy);
+        }
+
+        .difficulty-card.medium .difficulty-icon {
+            color: var(--color-medium);
+            border-color: var(--color-medium);
+        }
+
+        .difficulty-card.hard .difficulty-icon {
+            color: var(--color-hard);
+            border-color: var(--color-hard);
+        }
+
+        .difficulty-title {
+            font-size: 28px;
+            font-weight: 700;
+            margin: 0;
+            color: var(--color-text-white);
+        }
+
+        .difficulty-description {
+            font-size: 16px;
+            color: var(--color-text-muted);
+            margin-bottom: 25px;
+            line-height: 1.5;
+        }
+
+        .difficulty-features {
+            list-style: none;
+            padding: 0;
+            margin: 0 0 25px 0;
+        }
+
+        .difficulty-features li {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 12px;
+            font-size: 14px;
+            color: var(--color-text-primary);
+        }
+
+        .difficulty-features li::before {
+            content: '✓';
+            font-weight: bold;
+            width: 16px;
+            height: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            font-size: 12px;
+            background: var(--color-bg-dark);
+            border: 1px solid var(--color-border);
+        }
+
+        .difficulty-card.easy .difficulty-features li::before {
+            color: var(--color-easy);
+            border-color: var(--color-easy);
+        }
+
+        .difficulty-card.medium .difficulty-features li::before {
+            color: var(--color-medium);
+            border-color: var(--color-medium);
+        }
+
+        .difficulty-card.hard .difficulty-features li::before {
+            color: var(--color-hard);
+            border-color: var(--color-hard);
+        }
+
+        .difficulty-stats {
+            background: var(--color-bg-dark);
+            border: 1px solid var(--color-border-panel);
+            border-radius: var(--radius-medium);
+            padding: 16px;
+            margin-bottom: 25px;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+        }
+
+        .stat-item {
+            text-align: center;
+        }
+
+        .stat-label {
+            font-size: 12px;
+            color: var(--color-text-muted);
+            margin-bottom: 5px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .stat-value {
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--color-text-white);
+        }
+
+        .select-button {
+            width: 100%;
+            padding: 15px;
+            border: none;
+            border-radius: var(--radius-medium);
+            font-size: 16px;
+            font-weight: 600;
+            font-family: var(--font-family-mono);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            background: var(--color-button);
+            color: var(--color-text-white);
+        }
+
+        .select-button:hover {
+            background: var(--color-bg-accent);
+            transform: translateY(-2px);
+        }
+
+        .select-button:disabled {
+            background: var(--color-button-disabled);
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .difficulty-card.easy .select-button {
+            border: 1px solid var(--color-easy);
+        }
+
+        .difficulty-card.easy .select-button:hover {
+            border-color: var(--color-easy);
+            box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
+        }
+
+        .difficulty-card.medium .select-button {
+            border: 1px solid var(--color-medium);
+        }
+
+        .difficulty-card.medium .select-button:hover {
+            border-color: var(--color-medium);
+            box-shadow: 0 0 10px rgba(210, 153, 34, 0.3);
+        }
+
+        .difficulty-card.hard .select-button {
+            border: 1px solid var(--color-hard);
+        }
+
+        .difficulty-card.hard .select-button:hover {
+            border-color: var(--color-hard);
+            box-shadow: 0 0 10px rgba(248, 81, 73, 0.3);
+        }
+
+        /* === RESPONSIVE === */
+        @media (max-width: 1024px) {
+            .difficulty-grid {
+                grid-template-columns: 1fr;
+                gap: 20px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .main-title {
+                font-size: 36px;
+            }
+
+            .difficulty-card {
+                padding: 20px;
+            }
+
+            .main-container {
+                padding: 40px 16px;
+            }
+        }
+
+        /* === ANIMATIONS === */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .difficulty-card {
+            animation: fadeInUp 0.6s ease forwards;
+        }
+
+        .difficulty-card:nth-child(1) {
+            animation-delay: 0.1s;
+        }
+
+        .difficulty-card:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .difficulty-card:nth-child(3) {
+            animation-delay: 0.3s;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1 class="header-text">System Design Game</h1>
+    </div>
+
+    <div class="main-container">
+        <div class="title-section">
+            <h1 class="main-title">Select Difficulty</h1>
+            <p class="subtitle">
+                Choose your challenge level. Each difficulty offers unique constraints and learning opportunities 
+                to help you master system design at your own pace.
+            </p>
+        </div>
+
+        <div class="difficulty-grid">
+            <!-- Easy Difficulty -->
+            <div class="difficulty-card easy" onclick="selectDifficulty('easy')">
+                <div class="difficulty-header">
+                    <div class="difficulty-icon">🌱</div>
+                    <h2 class="difficulty-title">Easy</h2>
+                </div>
+                
+                <p class="difficulty-description">
+                    Perfect for beginners. Learn the fundamentals with guided tutorials and forgiving constraints.
+                </p>
+
+                <ul class="difficulty-features">
+                    <li>Extended time limits</li>
+                    <li>Helpful hints and tips</li>
+                    <li>Relaxed performance requirements</li>
+                    <li>Step-by-step guidance</li>
+                    <li>Basic component set</li>
+                </ul>
+
+                <div class="difficulty-stats">
+                    <div class="stats-grid">
+                        <div class="stat-item">
+                            <div class="stat-label">Time Limit</div>
+                            <div class="stat-value">45 min</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Max RPS</div>
+                            <div class="stat-value">1K</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Budget</div>
+                            <div class="stat-value">$500</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Availability</div>
+                            <div class="stat-value">99%</div>
+                        </div>
+                    </div>
+                </div>
+
+                <button class="select-button">Start Easy Mode</button>
+            </div>
+
+            <!-- Medium Difficulty -->
+            <div class="difficulty-card medium" onclick="selectDifficulty('medium')">
+                <div class="difficulty-header">
+                    <div class="difficulty-icon">⚡</div>
+                    <h2 class="difficulty-title">Medium</h2>
+                </div>
+                
+                <p class="difficulty-description">
+                    Balanced challenge for intermediate learners. Real-world constraints with moderate complexity.
+                </p>
+
+                <ul class="difficulty-features">
+                    <li>Standard time constraints</li>
+                    <li>Realistic performance targets</li>
+                    <li>Full component library</li>
+                    <li>Trade-off decisions required</li>
+                    <li>Cost optimization needed</li>
+                </ul>
+
+                <div class="difficulty-stats">
+                    <div class="stats-grid">
+                        <div class="stat-item">
+                            <div class="stat-label">Time Limit</div>
+                            <div class="stat-value">30 min</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Max RPS</div>
+                            <div class="stat-value">10K</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Budget</div>
+                            <div class="stat-value">$2K</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Availability</div>
+                            <div class="stat-value">99.9%</div>
+                        </div>
+                    </div>
+                </div>
+
+                <button class="select-button">Start Medium Mode</button>
+            </div>
+
+            <!-- Hard Difficulty -->
+            <div class="difficulty-card hard" onclick="selectDifficulty('hard')">
+                <div class="difficulty-header">
+                    <div class="difficulty-icon">🔥</div>
+                    <h2 class="difficulty-title">Hard</h2>
+                </div>
+                
+                <p class="difficulty-description">
+                    Expert-level challenges. Tight constraints and complex requirements that mirror real FAANG interviews.
+                </p>
+
+                <ul class="difficulty-features">
+                    <li>Strict time pressure</li>
+                    <li>High-scale requirements</li>
+                    <li>Complex failure scenarios</li>
+                    <li>Advanced optimization needed</li>
+                    <li>Multiple constraint conflicts</li>
+                </ul>
+
+                <div class="difficulty-stats">
+                    <div class="stats-grid">
+                        <div class="stat-item">
+                            <div class="stat-label">Time Limit</div>
+                            <div class="stat-value">20 min</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Max RPS</div>
+                            <div class="stat-value">100K</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Budget</div>
+                            <div class="stat-value">$5K</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-label">Availability</div>
+                            <div class="stat-value">99.99%</div>
+                        </div>
+                    </div>
+                </div>
+
+                <button class="select-button">Start Hard Mode</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function selectDifficulty(difficulty) {
+            // Add loading state to the selected button
+            const selectedCard = document.querySelector(`.difficulty-card.${difficulty}`);
+            const button = selectedCard.querySelector('.select-button');
+            const originalText = button.textContent;
+            
+            button.textContent = 'Loading...';
+            button.disabled = true;
+            
+            // Simulate loading and redirect
+            setTimeout(() => {
+                // In a real app, you'd pass the difficulty as a parameter
+                window.location.href = `/game?difficulty=${difficulty}`;
+            }, 1000);
+        }
+
+        // Add keyboard navigation
+        document.addEventListener('keydown', function(e) {
+            if (e.key === '1') {
+                selectDifficulty('easy');
+            } else if (e.key === '2') {
+                selectDifficulty('medium');
+            } else if (e.key === '3') {
+                selectDifficulty('hard');
+            } else if (e.key === 'Escape') {
+                window.location.href = '/game-modes';
+            }
+        });
+
+        // Add hover sound effects (you'd need actual audio files)
+        document.querySelectorAll('.difficulty-card').forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                // Play hover sound
+                console.log('🔊 Hover sound effect');
+            });
+            
+            card.addEventListener('click', () => {
+                // Play click sound
+                console.log('🔊 Click sound effect');
+            });
+        });
+    </script>
+</body>
+</html>
--- a/static/failure.html
+++ b/static/failure.html
@ -0,0 +1,739 @@
				@@ -0,0 +1,739 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>System Design Game - System Failed</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
+
+        /* === CSS VARIABLES === */
+        :root {
+            /* Failure Colors - Red Theme */
+            --color-bg-body: #1a0a0a;
+            --color-bg-dark: #0f0505;
+            --color-bg-card: #2a1010;
+            --color-bg-hover: #3a1515;
+            --color-bg-accent: #8b0000;
+            
+            --color-border: #660000;
+            --color-border-accent: #ff4444;
+            --color-border-panel: #4a1515;
+            
+            --color-text-primary: #ffcccc;
+            --color-text-muted: #cc8888;
+            --color-text-accent: #ff4444;
+            --color-text-white: #fff;
+            --color-text-danger: #ff0000;
+            
+            --color-button: #cc0000;
+            --color-button-hover: #ff0000;
+            --color-button-disabled: #660000;
+            
+            /* Normal Colors - Original Theme (for recovery) */
+            --color-bg-body-normal: #161b22;
+            --color-bg-dark-normal: #121212;
+            --color-bg-card-normal: #1e1e1e;
+            --color-bg-hover-normal: #2a2a2a;
+            --color-bg-accent-normal: #005f87;
+            
+            --color-border-normal: #444;
+            --color-border-accent-normal: #00ff88;
+            --color-border-panel-normal: #30363d;
+            
+            --color-text-primary-normal: #ccc;
+            --color-text-muted-normal: #888;
+            --color-text-accent-normal: #00ff88;
+            --color-text-white-normal: #fff;
+            
+            --color-button-normal: #238636;
+            --color-button-hover-normal: #2ea043;
+            
+            /* Sizes */
+            --radius-small: 4px;
+            --radius-medium: 6px;
+            --radius-large: 8px;
+            
+            --font-family-mono: 'JetBrains Mono', monospace;
+        }
+
+        /* === RESET === */
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: var(--font-family-mono);
+            background-color: var(--color-bg-body);
+            color: var(--color-text-primary);
+            min-height: 100vh;
+            overflow: hidden;
+            background-image: 
+                radial-gradient(circle at 20% 30%, rgba(255, 0, 0, 0.3), transparent 40%),
+                radial-gradient(circle at 80% 70%, rgba(139, 0, 0, 0.2), transparent 50%),
+                radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.1), transparent 60%);
+            animation: backgroundPulse 3s ease-in-out infinite alternate;
+            transition: all 3s ease-in-out;
+        }
+
+        /* Recovery state - transitions to normal colors */
+        body.recovering {
+            background-color: var(--color-bg-body-normal);
+            color: var(--color-text-primary-normal);
+            background-image: 
+                radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%),
+                radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%);
+            animation: none;
+        }
+
+        @keyframes backgroundPulse {
+            0% {
+                background-size: 100% 100%, 100% 100%, 100% 100%;
+            }
+            100% {
+                background-size: 110% 110%, 110% 110%, 110% 110%;
+            }
+        }
+
+        /* === HEADER === */
+        .header {
+            width: 100%;
+            background: linear-gradient(90deg, var(--color-bg-dark), var(--color-bg-accent), var(--color-bg-dark));
+            padding: 12px 24px;
+            font-weight: bold;
+            color: var(--color-text-danger);
+            border-bottom: 1px solid var(--color-border-accent);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3);
+            animation: headerFlicker 2s ease-in-out infinite;
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .header {
+            background: none;
+            color: var(--color-text-accent-normal);
+            border-bottom: 1px solid var(--color-border-normal);
+            box-shadow: none;
+            animation: none;
+        }
+
+        @keyframes headerFlicker {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.8; }
+        }
+
+        .header-text {
+            font-size: 24px;
+            margin: 0;
+            text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .header-text {
+            text-shadow: 0 0 10px rgba(0, 255, 136, 0.8)
+        }
+
+        .status-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 14px;
+            background-color: var(--color-bg-accent);
+            color: var(--color-text-white);
+            border-radius: var(--radius-medium);
+            font-weight: 500;
+            font-size: 12px;
+            border: 1px solid var(--color-border-accent);
+            animation: statusBlink 1s ease-in-out infinite;
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .status-indicator {
+            background-color: var(--color-bg-accent-normal);
+            border-color: var(--color-border-accent-normal);
+            animation: none;
+        }
+
+        @keyframes statusBlink {
+            0%, 50% { background-color: var(--color-bg-accent); }
+            51%, 100% { background-color: var(--color-button-hover); }
+        }
+
+        /* === MAIN FAILURE SCREEN === */
+        .failure-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: calc(100vh - 80px);
+            padding: 40px 20px;
+            position: relative;
+        }
+
+        /* Doom-style skull/warning icon */
+        .failure-icon {
+            font-size: 120px;
+            color: var(--color-text-danger);
+            margin-bottom: 30px;
+            animation: skullPulse 2s ease-in-out infinite;
+            text-shadow: 
+                0 0 20px rgba(255, 0, 0, 0.8),
+                0 0 40px rgba(255, 0, 0, 0.6),
+                0 0 60px rgba(255, 0, 0, 0.4);
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .failure-icon {
+            color: var(--color-text-accent-normal);
+            animation: none;
+            text-shadow: 
+                0 0 20px rgba(0, 255, 136, 0.8),
+                0 0 40px rgba(0, 255, 136, 0.6),
+                0 0 60px rgba(0, 255, 136, 0.4);
+        }
+
+        @keyframes skullPulse {
+            0%, 100% { 
+                transform: scale(1);
+                filter: brightness(1);
+            }
+            50% { 
+                transform: scale(1.1);
+                filter: brightness(1.3);
+            }
+        }
+
+        .failure-title {
+            font-size: 64px;
+            font-weight: 700;
+            color: var(--color-text-danger);
+            margin: 0 0 20px 0;
+            text-align: center;
+            text-shadow: 
+                0 0 10px rgba(255, 0, 0, 0.8),
+                0 0 20px rgba(255, 0, 0, 0.6),
+                0 0 30px rgba(255, 0, 0, 0.4);
+            animation: titleGlitch 3s ease-in-out infinite;
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .failure-title {
+            color: var(--color-text-accent-normal);
+            text-shadow: 
+                0 0 10px rgba(0, 255, 136, 0.8),
+                0 0 20px rgba(0, 255, 136, 0.6),
+                0 0 30px rgba(0, 255, 136, 0.4);
+            animation: none;
+        }
+
+        @keyframes titleGlitch {
+            0%, 90%, 100% { 
+                transform: translateX(0);
+                filter: hue-rotate(0deg);
+            }
+            92% { 
+                transform: translateX(-2px);
+                filter: hue-rotate(90deg);
+            }
+            94% { 
+                transform: translateX(2px);
+                filter: hue-rotate(-90deg);
+            }
+            96% { 
+                transform: translateX(-1px);
+                filter: hue-rotate(45deg);
+            }
+        }
+
+        .failure-subtitle {
+            font-size: 24px;
+            color: var(--color-text-accent);
+            margin: 0 0 40px 0;
+            text-align: center;
+            opacity: 0.9;
+            animation: subtitleFade 2s ease-in-out infinite alternate;
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .failure-subtitle {
+            color: var(--color-text-muted-normal);
+            animation: none;
+            opacity: 1;
+        }
+
+        @keyframes subtitleFade {
+            0% { opacity: 0.7; }
+            100% { opacity: 1; }
+        }
+
+        /* === FAILURE DETAILS === */
+        .failure-details {
+            background: var(--color-bg-card);
+            border: 2px solid var(--color-border-accent);
+            border-radius: var(--radius-large);
+            padding: 30px;
+            margin-bottom: 40px;
+            max-width: 600px;
+            width: 100%;
+            box-shadow: 
+                0 0 20px rgba(255, 0, 0, 0.3),
+                inset 0 0 20px rgba(255, 0, 0, 0.1);
+            animation: detailsPulse 4s ease-in-out infinite;
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .failure-details {
+            background: var(--color-bg-card-normal);
+            border-color: var(--color-border-accent-normal);
+            box-shadow: 
+                0 0 20px rgba(0, 255, 136, 0.3),
+                inset 0 0 20px rgba(0, 255, 136, 0.1);
+            animation: none;
+        }
+
+        @keyframes detailsPulse {
+            0%, 100% { 
+                border-color: var(--color-border-accent);
+                box-shadow: 
+                    0 0 20px rgba(255, 0, 0, 0.3),
+                    inset 0 0 20px rgba(255, 0, 0, 0.1);
+            }
+            50% { 
+                border-color: var(--color-text-danger);
+                box-shadow: 
+                    0 0 30px rgba(255, 0, 0, 0.5),
+                    inset 0 0 30px rgba(255, 0, 0, 0.2);
+            }
+        }
+
+        .failure-reason {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--color-text-white);
+            margin-bottom: 20px;
+            text-align: center;
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .failure-reason {
+            color: var(--color-text-white-normal);
+        }
+
+        .failure-metrics {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .metric-item {
+            background: var(--color-bg-dark);
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-medium);
+            padding: 15px;
+            text-align: center;
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .metric-item {
+            background: var(--color-bg-dark-normal);
+            border-color: var(--color-border-normal);
+        }
+
+        .metric-label {
+            font-size: 14px;
+            color: var(--color-text-muted);
+            margin-bottom: 5px;
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .metric-label {
+            color: var(--color-text-muted-normal);
+        }
+
+        .metric-value {
+            font-size: 20px;
+            font-weight: 700;
+            color: var(--color-text-danger);
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .metric-value {
+            color: var(--color-text-accent-normal);
+        }
+
+        .metric-value.exceeded {
+            animation: valueFlash 1s ease-in-out infinite;
+        }
+
+        .recovering .metric-value.exceeded {
+            animation: none;
+        }
+
+        @keyframes valueFlash {
+            0%, 50% { color: var(--color-text-danger); }
+            51%, 100% { color: var(--color-text-white); }
+        }
+
+        /* === ERROR LOG === */
+        .error-log {
+            background: var(--color-bg-dark);
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-medium);
+            padding: 15px;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            color: var(--color-text-accent);
+            max-height: 150px;
+            overflow-y: auto;
+            margin-bottom: 20px;
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .error-log {
+            background: var(--color-bg-dark-normal);
+            border-color: var(--color-border-normal);
+            color: var(--color-text-accent-normal);
+        }
+
+        .error-line {
+            margin-bottom: 5px;
+            opacity: 0;
+            animation: errorAppear 0.5s ease-out forwards;
+            transition: all 3s ease-in-out;
+        }
+
+        .error-line:nth-child(1) { animation-delay: 0.5s; }
+        .error-line:nth-child(2) { animation-delay: 1s; }
+        .error-line:nth-child(3) { animation-delay: 1.5s; }
+        .error-line:nth-child(4) { animation-delay: 2s; }
+
+        @keyframes errorAppear {
+            0% { 
+                opacity: 0;
+                transform: translateX(-10px);
+            }
+            100% { 
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+
+        /* === ACTION BUTTONS === */
+        .action-buttons {
+            display: flex;
+            gap: 20px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .action-button {
+            padding: 15px 30px;
+            border: 2px solid var(--color-border-accent);
+            border-radius: var(--radius-medium);
+            font-size: 16px;
+            font-weight: 600;
+            font-family: var(--font-family-mono);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            min-width: 160px;
+            justify-content: center;
+        }
+
+        .retry-button {
+            background: var(--color-button);
+            color: var(--color-text-white);
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .retry-button {
+            background: var(--color-button-normal);
+            border-color: var(--color-border-accent-normal);
+        }
+
+        .retry-button:hover {
+            background: var(--color-button-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4);
+        }
+
+        .recovering .retry-button:hover {
+            background: var(--color-button-hover-normal);
+            box-shadow: 0 5px 15px rgba(0, 255, 136, 0.4);
+        }
+
+        .menu-button {
+            background: transparent;
+            color: var(--color-text-accent);
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .menu-button {
+            color: var(--color-text-accent-normal);
+            border-color: var(--color-border-accent-normal);
+        }
+
+        .menu-button:hover {
+            background: var(--color-bg-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(255, 68, 68, 0.3);
+        }
+
+        .recovering .menu-button:hover {
+            background: var(--color-bg-hover-normal);
+            box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3);
+        }
+
+        /* === SCREEN EFFECTS === */
+        .screen-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 1000;
+            background: 
+                repeating-linear-gradient(
+                    0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(255, 0, 0, 0.03) 2px,
+                    rgba(255, 0, 0, 0.03) 4px
+                );
+            animation: scanlines 0.1s linear infinite;
+            transition: all 3s ease-in-out;
+        }
+
+        .recovering .screen-overlay {
+            background: 
+                repeating-linear-gradient(
+                    0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 255, 136, 0.02) 2px,
+                    rgba(0, 255, 136, 0.02) 4px
+                );
+        }
+
+        @keyframes scanlines {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(4px); }
+        }
+
+        /* === RECOVERY MESSAGE === */
+        .recovery-message {
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--color-bg-accent-normal);
+            color: var(--color-text-white-normal);
+            padding: 10px 20px;
+            border-radius: var(--radius-medium);
+            font-size: 14px;
+            font-weight: 600;
+            opacity: 0;
+            transition: opacity 1s ease-in-out;
+            z-index: 100;
+        }
+
+        .recovery-message.show {
+            opacity: 1;
+        }
+
+        /* === RESPONSIVE === */
+        @media (max-width: 768px) {
+            .failure-title {
+                font-size: 48px;
+            }
+            
+            .failure-subtitle {
+                font-size: 18px;
+            }
+            
+            .failure-icon {
+                font-size: 80px;
+            }
+            
+            .failure-metrics {
+                grid-template-columns: 1fr;
+            }
+            
+            .action-buttons {
+                flex-direction: column;
+                align-items: center;
+            }
+            
+            .action-button {
+                width: 100%;
+                max-width: 300px;
+            }
+        }
+
+        /* === DOOM-STYLE GLITCH EFFECTS === */
+        .glitch {
+            position: relative;
+        }
+
+        .glitch::before,
+        .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transition: opacity 3s ease-in-out;
+        }
+
+        .glitch::before {
+            animation: glitch-1 2s infinite;
+            color: #ff0000;
+            z-index: -1;
+        }
+
+        .glitch::after {
+            animation: glitch-2 2s infinite;
+            color: #00ff00;
+            z-index: -2;
+        }
+
+        /* Hide glitch effects during recovery */
+        .recovering .glitch::before,
+        .recovering .glitch::after {
+            opacity: 0;
+            animation: none;
+        }
+
+        @keyframes glitch-1 {
+            0%, 14%, 15%, 49%, 50%, 99%, 100% {
+                transform: translate(0);
+            }
+            15%, 49% {
+                transform: translate(-2px, 0);
+            }
+        }
+
+        @keyframes glitch-2 {
+            0%, 20%, 21%, 62%, 63%, 99%, 100% {
+                transform: translate(0);
+            }
+            21%, 62% {
+                transform: translate(2px, 0);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="screen-overlay"></div>
+    
+    <div class="header">
+        <h1 class="header-text">System Design Game</h1>
+    </div>
+
+    <div class="failure-container">
+        <h1 class="failure-title glitch" data-text="SYSTEM OVERLOAD" id="failureTitle">SYSTEM OVERLOAD</h1>
+        <p class="failure-subtitle" id="failureSubtitle">Your architecture couldn't handle the load</p>
+
+        <div class="failure-details">
+            <div class="failure-reason" id="failureReason">
+                Critical system failure detected. Your design exceeded operational limits.
+            </div>
+
+            <div class="failure-metrics">
+                <div class="metric-item">
+                    <div class="metric-label">Target RPS</div>
+                    <div class="metric-value">10,000</div>
+                </div>
+                <div class="metric-item">
+                    <div class="metric-label">Achieved RPS</div>
+                    <div class="metric-value exceeded">2,847</div>
+                </div>
+                <div class="metric-item">
+                    <div class="metric-label">Max Latency</div>
+                    <div class="metric-value">200ms</div>
+                </div>
+                <div class="metric-item">
+                    <div class="metric-label">Actual Latency</div>
+                    <div class="metric-value exceeded">1,247ms</div>
+                </div>
+            </div>
+
+            <div class="error-log" id="errorLog">
+                <div class="error-line">[ERROR] Database connection pool exhausted</div>
+                <div class="error-line">[ERROR] Load balancer timeout after 30s</div>
+                <div class="error-line">[ERROR] Cache miss ratio: 89%</div>
+                <div class="error-line">[FATAL] System unresponsive - shutting down</div>
+            </div>
+        </div>
+
+        <div class="action-buttons">
+            <button class="action-button retry-button" onclick="retryLevel()">
+                Try Again
+            </button>
+            <a href="/game-modes" class="action-button menu-button">
+                Main Menu
+            </a>
+        </div>
+    </div>
+
+    <script>
+        // Recovery transition after 15 seconds
+        setTimeout(() => {
+            // Start recovery transition after message appears
+            setTimeout(() => {
+                document.body.classList.add('recovering');
+                
+                // Update text content during recovery
+                setTimeout(() => {
+                    document.getElementById('failureTitle').textContent = 'SYSTEM RECOVERED';
+                    document.getElementById('failureSubtitle').textContent = 'Diagnostics complete - Ready to try again';
+                    document.getElementById('failureReason').textContent = 'System has been stabilized. Analysis complete. Ready for next attempt.';
+                    
+                    // Update error log to show recovery
+                    const errorLog = document.getElementById('errorLog');
+                    errorLog.innerHTML = `
+                        <div class="error-line">[INFO] Running system diagnostics...</div>
+                        <div class="error-line">[INFO] Database connections restored</div>
+                        <div class="error-line">[INFO] Load balancer optimized</div>
+                        <div class="error-line">[SUCCESS] All systems operational</div>
+                    `;
+                }, 1500);
+                
+                // Hide recovery message after transition
+                setTimeout(() => {
+                    recoveryMessage.classList.remove('show');
+                }, 3000);
+            }, 1000);
+        }, 15000);
+
+        // Add some random glitch effects (only during failure state)
+        function addRandomGlitch() {
+            if (!document.body.classList.contains('recovering')) {
+                const title = document.querySelector('.failure-title');
+                title.style.animation = 'none';
+                setTimeout(() => {
+                    title.style.animation = 'titleGlitch 3s ease-in-out infinite';
+                }, 100);
+            }
+        }
+
+        // Trigger random glitches only during failure state
+        const glitchInterval = setInterval(() => {
+            if (document.body.classList.contains('recovering')) {
+                clearInterval(glitchInterval);
+            } else {
+                addRandomGlitch();
+            }
+        }, 8000);
+    </script>
+</body>
+</html>
--- a/static/game-mode.html
+++ b/static/game-mode.html
@ -0,0 +1,590 @@
				@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>System Design Game - Choose Your Path</title>
+    <style>
+        /* Reusing the existing CSS from the game */
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
+
+        /* === CSS VARIABLES === */
+        :root {
+            /* Colors */
+            --color-bg-body: #161b22;
+            --color-bg-dark: #121212;
+            --color-bg-sidebar: #111;
+            --color-bg-component: #1e1e1e;
+            --color-bg-hover: #2a2a2a;
+            --color-bg-accent: #005f87;
+            --color-bg-tab-active: #1a3d2a;
+            --color-border: #444;
+            --color-border-accent: #00ff88;
+            --color-border-panel: #30363d;
+            --color-text-primary: #ccc;
+            --color-text-muted: #888;
+            --color-text-accent: #00ff88;
+            --color-text-white: #fff;
+            --color-text-dark: #333;
+            --color-button: #238636;
+            --color-button-disabled: #555;
+            --color-connection: #333;
+            --color-connection-selected: #007bff;
+            --color-tooltip-bg: #333;
+            --color-tooltip-text: #fff;
+
+            /* Sizes */
+            --radius-small: 4px;
+            --radius-medium: 6px;
+            --radius-large: 8px;
+            --font-family-mono: 'JetBrains Mono', monospace;
+            --font-family-code: 'Fira Code', monospace;
+            --component-padding: 8px;
+            --component-gap: 12px;
+        }
+
+        /* === RESET & BASE STYLES === */
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: var(--font-family-mono);
+            background-color: var(--color-bg-body);
+            color: var(--color-text-primary);
+            min-height: 100vh;
+        }
+
+        /* === LAYOUT === */
+        #page-container {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            min-height: 100vh;
+        }
+
+        #sd-header {
+            width: 100%;
+            background: none;
+            padding: 12px 24px;
+            font-weight: bold;
+            color: var(--color-text-accent);
+            border-bottom: 1px solid var(--color-text-dark);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .header-text {
+            font-size: 24px;
+            margin: 0;
+        }
+
+        #main-content {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            padding: 60px 24px;
+            align-items: center;
+            background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%),
+                radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%);
+        }
+
+        /* === REUSED EXISTING CLASSES === */
+        .requirements-section {
+            background: #161b22;
+            border: 1px solid #30363d;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .requirements-list {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .requirement-item {
+            position: relative;
+            padding: 8px 0 8px 25px;
+            margin: 0;
+            border-bottom: 1px solid #30363d;
+        }
+
+        .requirement-item:before {
+            content: "✓";
+            color: #00ff88;
+            position: absolute;
+            left: 0;
+        }
+
+        .panel-title {
+            font-weight: bold;
+            color: var(--color-text-white);
+            font-size: 15px;
+            margin-bottom: 0.5rem;
+        }
+
+        .panel-metric {
+            margin-bottom: 0.4rem;
+        }
+
+        .panel-metric .label {
+            display: inline-block;
+            width: 140px;
+            color: var(--color-text-muted);
+        }
+
+        #github-login-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 14px;
+            background-color: #fff;
+            color: #000000;
+            text-decoration: none;
+            border-radius: var(--radius-medium);
+            font-weight: 500;
+            font-family: var(--font-family-mono);
+            font-size: 12px;
+            border: 1px solid #2ea043;
+            transition: background-color 0.2s ease;
+        }
+
+        #github-login-btn:hover {
+            background-color: #ccc;
+        }
+
+        /* === CUSTOM STYLES FOR GAME MODE SELECTION === */
+        .hero-section {
+            text-align: center;
+            margin-bottom: 60px;
+        }
+
+        .hero-section h1 {
+            font-size: 48px;
+            font-weight: 700;
+            margin: 0 0 20px 0;
+            background: linear-gradient(135deg, var(--color-text-accent), var(--color-connection-selected));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .hero-section p {
+            font-size: 18px;
+            color: var(--color-text-muted);
+            max-width: 600px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+
+        .game-mode-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 30px;
+            max-width: 1000px;
+            width: 100%;
+            margin-bottom: 60px;
+        }
+
+        .game-mode-card {
+            background: var(--color-bg-component);
+            border: 2px solid var(--color-border);
+            border-radius: var(--radius-large);
+            padding: 30px;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .game-mode-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05));
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .game-mode-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            background-color: var(--color-bg-hover);
+        }
+
+        .game-mode-card:hover::before {
+            opacity: 1;
+        }
+
+        .game-mode-card.campaign {
+            border-color: var(--color-border-accent);
+        }
+
+        .game-mode-card.campaign:hover {
+            border-color: var(--color-border-accent);
+            box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3);
+        }
+
+        .game-mode-card.practice {
+            border-color: #ff6b35;
+        }
+
+        .game-mode-card.practice:hover {
+            border-color: #ff6b35;
+            box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
+        }
+
+        .mode-header {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 25px;
+        }
+
+        .mode-icon {
+            width: 60px;
+            height: 60px;
+            border-radius: var(--radius-medium);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 28px;
+            font-weight: bold;
+            background: var(--color-bg-dark);
+            border: 1px solid var(--color-border-panel);
+        }
+
+        .game-mode-card.campaign .mode-icon {
+            color: var(--color-text-accent);
+            border-color: var(--color-border-accent);
+        }
+
+        .game-mode-card.practice .mode-icon {
+            color: #ff6b35;
+            border-color: #ff6b35;
+        }
+
+        .mode-title {
+            font-size: 28px;
+            font-weight: 700;
+            margin: 0 0 5px 0;
+            color: var(--color-text-white);
+        }
+
+        .mode-subtitle {
+            font-size: 16px;
+            color: var(--color-text-muted);
+            margin: 0;
+        }
+
+        .mode-features {
+            margin-bottom: 25px;
+        }
+
+        .mode-features .requirements-list .requirement-item {
+            border-bottom: 1px solid var(--color-border-panel);
+        }
+
+        .game-mode-card.campaign .mode-features .requirement-item:before {
+            color: var(--color-text-accent);
+        }
+
+        .game-mode-card.practice .mode-features .requirement-item:before {
+            color: #ff6b35;
+        }
+
+        .mode-progress {
+            background: var(--color-bg-dark);
+            border: 1px solid var(--color-border-panel);
+            border-radius: var(--radius-medium);
+            padding: 16px;
+            margin-bottom: 25px;
+        }
+
+        .progress-bar {
+            background: var(--color-border);
+            height: 8px;
+            border-radius: var(--radius-small);
+            overflow: hidden;
+            margin-top: 8px;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--color-text-accent), var(--color-connection-selected));
+            width: 33%;
+            border-radius: var(--radius-small);
+        }
+
+        .recent-activity {
+            font-size: 14px;
+        }
+
+        .recent-activity .activity-item {
+            margin-bottom: 4px;
+        }
+
+        .recent-activity .activity-item.active {
+            color: #ff6b35;
+        }
+
+        .recent-activity .activity-item.inactive {
+            color: var(--color-text-muted);
+        }
+
+        .mode-button {
+            width: 100%;
+            padding: 15px;
+            border: none;
+            border-radius: var(--radius-medium);
+            font-size: 16px;
+            font-weight: 600;
+            font-family: var(--font-family-mono);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .game-mode-card.campaign .mode-button {
+            background: linear-gradient(90deg, var(--color-text-accent), var(--color-connection-selected));
+            color: var(--color-bg-body);
+        }
+
+        .game-mode-card.practice .mode-button {
+            background: linear-gradient(90deg, #ff6b35, #f7931e);
+            color: var(--color-text-white);
+        }
+
+        .mode-button:hover {
+            opacity: 0.9;
+            transform: translateY(-2px);
+        }
+
+        /* === STATS GRID === */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 20px;
+            max-width: 800px;
+            width: 100%;
+        }
+
+        .stat-card {
+            background: var(--color-bg-component);
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-large);
+            padding: 20px;
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 28px;
+            font-weight: 700;
+            margin-bottom: 8px;
+        }
+
+        .stat-card:nth-child(1) .stat-value {
+            color: var(--color-text-accent);
+        }
+
+        .stat-card:nth-child(2) .stat-value {
+            color: var(--color-connection-selected);
+        }
+
+        .stat-card:nth-child(3) .stat-value {
+            color: #ff6b35;
+        }
+
+        .stat-card:nth-child(4) .stat-value {
+            color: #f7931e;
+        }
+
+        .stat-label {
+            font-size: 14px;
+            color: var(--color-text-muted);
+        }
+
+        /* === RESPONSIVE === */
+        @media (max-width: 1024px) {
+            .game-mode-grid {
+                grid-template-columns: 1fr;
+                gap: 20px;
+            }
+
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media (max-width: 768px) {
+            .hero-section h1 {
+                font-size: 36px;
+            }
+
+            .game-mode-card {
+                padding: 20px;
+            }
+
+            #main-content {
+                padding: 40px 16px;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="page-container">
+        <div id="sd-header">
+            <h1 class="header-text">System Design Game</h1>
+            <a href="/login" id="github-login-btn">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                </svg>
+                Login with GitHub
+            </a>
+        </div>
+
+        <div id="main-content">
+            <div class="hero-section">
+                <h1>Choose Your Path</h1>
+                <p>Master system design through structured challenges or practice with unlimited creativity</p>
+            </div>
+
+            <div class="game-mode-grid">
+                <!-- Campaign Mode -->
+                <div class="game-mode-card campaign" onclick="selectMode('campaign')">
+                    <div class="mode-header">
+                        <div class="mode-icon">🏆</div>
+                        <div>
+                            <div class="mode-title">Campaign Mode</div>
+                            <div class="mode-subtitle">Structured learning path</div>
+                        </div>
+                    </div>
+                    
+                    <div class="mode-features">
+                        <ul class="requirements-list">
+                            <li class="requirement-item">Progressive difficulty levels</li>
+                            <li class="requirement-item">Guided tutorials and hints</li>
+                            <li class="requirement-item">Unlock achievements</li>
+                            <li class="requirement-item">Track your progress</li>
+                        </ul>
+                    </div>
+
+                    <div class="mode-progress">
+                        <div class="panel-title">Current Progress</div>
+                        <div class="panel-metric">
+                            <span class="label">Level:</span>
+                            <span style="color: var(--color-text-accent);">3/12</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill"></div>
+                        </div>
+                    </div>
+
+                    <a href="/difficulty" class="mode-button">
+                        ▶ Continue Campaign
+                    </a>
+                </div>
+
+                <!-- Practice Mode -->
+                <div class="game-mode-card practice" onclick="selectMode('practice')">
+                    <div class="mode-header">
+                        <div class="mode-icon">🎯</div>
+                        <div>
+                            <div class="mode-title">Practice Mode</div>
+                            <div class="mode-subtitle">Free-form exploration</div>
+                        </div>
+                    </div>
+                    
+                    <div class="mode-features">
+                        <ul class="requirements-list">
+                            <li class="requirement-item">Unlimited sandbox access</li>
+                            <li class="requirement-item">Custom challenge creation</li>
+                            <li class="requirement-item">No time constraints</li>
+                            <li class="requirement-item">Experiment freely</li>
+                        </ul>
+                    </div>
+
+                    <div class="mode-progress">
+                        <div class="panel-title">Recent Activity</div>
+                        <div class="recent-activity">
+                            <div class="activity-item active">• E-commerce Platform Design</div>
+                            <div class="activity-item inactive">• Chat Application Architecture</div>
+                            <div class="activity-item inactive">• Video Streaming Service</div>
+                        </div>
+                    </div>
+
+                    <a href="/game?mode=practice" class="mode-button">
+                        🎯 Start Practicing
+                    </a>
+                </div>
+            </div>
+
+            <!-- Quick Stats -->
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="stat-value">12</div>
+                    <div class="stat-label">Campaign Levels</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">∞</div>
+                    <div class="stat-label">Practice Scenarios</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">11</div>
+                    <div class="stat-label">Component Types</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">24/7</div>
+                    <div class="stat-label">Available</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function selectMode(mode) {
+            if (mode === 'campaign') {
+                window.location.href = '/difficulty';
+            } else if (mode === 'practice') {
+                window.location.href = '/game?mode=practice';
+            }
+        }
+
+        // Add keyboard navigation
+        document.addEventListener('keydown', function(e) {
+            if (e.key === '1') {
+                selectMode('campaign');
+            } else if (e.key === '2') {
+                selectMode('practice');
+            }
+        });
+
+        // Add hover sound effects
+        document.querySelectorAll('.game-mode-card').forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                console.log('🔊 Hover sound effect');
+            });
+            
+            card.addEventListener('click', () => {
+                console.log('🔊 Click sound effect');
+            });
+        });
+    </script>
+</body>
+</html>
--- a/static/game.html
+++ b/static/game.html
@ -4,574 +4,8 @@
				@@ -4,574 +4,8 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Design Game</title>
-    <style>
-    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
-
-    /* === CSS VARIABLES === */
-    :root {
-      /* Colors */
-      --color-bg-body: #161b22;
-      --color-bg-dark: #121212;
-      --color-bg-sidebar: #111;
-      --color-bg-component: #1e1e1e;
-      --color-bg-hover: #2a2a2a;
-      --color-bg-accent: #005f87;
-      --color-bg-tab-active: #1a3d2a;
-      --color-border: #444;
-      --color-border-accent: #00ff88;
-      --color-border-panel: #30363d;
-      --color-text-primary: #ccc;
-      --color-text-muted: #888;
-      --color-text-accent: #00ff88;
-      --color-text-white: #fff;
-      --color-text-dark: #333;
-      --color-button: #238636;
-      --color-button-disabled: #555;
-      --color-connection: #333;
-      --color-connection-selected: #007bff;
-      --color-tooltip-bg: #333;
-      --color-tooltip-text: #fff;
-
-      /* Sizes */
-      --radius-small: 4px;
-      --radius-medium: 6px;
-      --radius-large: 8px;
-      --font-family-mono: 'JetBrains Mono', monospace;
-      --font-family-code: 'Fira Code', monospace;
-      --component-padding: 8px;
-      --component-gap: 12px;
-    }
-
-    /* === RESET & BASE STYLES === */
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      font-family: var(--font-family-mono);
-      background-color: var(--color-bg-body);
-      color: var(--color-text-primary);
-      display: flex;
-      flex-direction: row;
-      height: 100vh;
-    }
-
-    /* === LAYOUT === */
-    #page-container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-
-    #sd-header {
-      width: 100%;
-      background: none;
-      padding: 12px 24px;
-      font-weight: bold;
-      color: var(--color-text-accent);
-      border-bottom: 1px solid var(--color-text-dark);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .header-text {
-      font-size: 24px;
-      margin: 0;
-    }
-
-    #main-content {
-      display: flex;
-      flex-direction: row;
-      height: 100%;
-      background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%),
-        radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%);
-    }
-
-    /* === SIDEBAR === */
-    #sidebar {
-      width: 100%;
-      background-color: var(--color-bg-sidebar);
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: row;
-      gap: var(--component-gap);
-    }
-
-    .sidebar-title {
-      color: #8b949e;
-      font-size: 14px;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      margin-bottom: 15px;
-      padding-bottom: 8px;
-      padding-left: 8px;
-      border-bottom: 1px solid #303638;
-    }
-
-    /* === COMPONENT ICONS === */
-    .component-icon,
-    #arrow-tool {
-      position: relative;
-      padding: var(--component-padding) 12px;
-      background-color: var(--color-bg-component);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-medium);
-      text-align: center;
-      cursor: grab;
-      user-select: none;
-      font-size: 16px;
-      color: var(--color-text-primary);
-      transition: background-color 0.1s ease;
-    }
-
-    .component-icon:hover,
-    #arrow-tool:hover {
-      background-color: var(--color-bg-hover);
-      border-color: var(--color-border-accent);
-    }
-
-    .component-icon:active,
-    #arrow-tool:active {
-      cursor: grabbing;
-    }
-
-    #arrow-tool.active {
-      background-color: var(--color-bg-accent);
-      color: var(--color-text-white);
-      border-color: var(--color-button);
-    }
-
-    /* === TOOLTIP === */
-    .tooltip {
-      visibility: hidden;
-      opacity: 0;
-      position: absolute;
-      top: 100%;
-      left: 0;
-      z-index: 10;
-      background: var(--color-tooltip-bg);
-      color: var(--color-tooltip-text);
-      padding: 6px 8px;
-      border-radius: var(--radius-small);
-      white-space: nowrap;
-      font-size: 14px;
-      line-height: 1.4;
-      margin-top: 4px;
-      transition: opacity 0.2s;
-    }
-
-    .component-icon:hover .tooltip {
-      visibility: visible;
-      opacity: 1;
-      z-index: 1000;
-    }
-
-    .component-icon.dragging .tooltip {
-      display: none;
-    }
-
-    /* === CANVAS === */
-    #canvas-wrapper {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      border-radius: var(--radius-large);
-      border: 2px solid var(--color-border-panel);
-      overflow: hidden;
-      background: var(--color-bg-dark);
-      margin: 12px 12px 12px 0;
-      padding: 16px;
-    }
-
-    #canvas-container {
-      flex: 1;
-      position: relative;
-      background: var(--color-bg-dark);
-      height: 100%;
-      margin-top: 16px;
-    }
-
-    #canvas {
-      width: 100%;
-      height: 90%;
-      background: var(--color-bg-dark);
-      border: 2px dashed var(--color-border-panel);
-      border-radius: var(--radius-large);
-    }
-
-    .dropped {
-      cursor: move;
-    }
-
-    .dropped.selected rect {
-      stroke: #00bcd4;
-      stroke-width: 2;
-    }
-
-    /* === TOOLBAR === */
-    #canvas-toolbar {
-      position: absolute;
-      top: 12px;
-      left: 12px;
-      z-index: 20;
-      display: flex;
-      gap: 8px;
-      background: var(--color-bg-component);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-small);
-      padding: 6px;
-      box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
-    }
-
-    .toolbar-btn {
-      background: none;
-      border: 1px solid var(--color-border);
-      color: var(--color-text-primary);
-      padding: 6px 10px;
-      border-radius: var(--radius-small);
-      font-size: 14px;
-      cursor: pointer;
-      font-family: var(--font-family-mono);
-    }
-
-    .toolbar-btn:hover {
-      background-color: var(--color-bg-hover);
-      border-color: var(--color-border-accent);
-    }
-
-    .toolbar-btn.active {
-      background-color: var(--color-bg-accent);
-      color: var(--color-text-white);
-      border-color: var(--color-button);
-    }
-
-    /* === PANELS === */
-    #info-panel {
-      position: absolute;
-      top: 12px;
-      right: 12px;
-      background: var(--color-bg-dark);
-      color: var(--color-text-primary);
-      padding: 1rem;
-      border-radius: var(--radius-large);
-      font-family: monospace;
-      font-size: 14px;
-      min-width: 220px;
-      z-index: 10;
-      border: 1px solid var(--color-text-dark);
-      box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-    }
-
-    #node-props-panel {
-      position: absolute;
-      width: 220px;
-      background-color: var(--color-bg-sidebar);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-small);
-      padding: 12px;
-      color: var(--color-text-white);
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
-      display: none;
-      z-index: 10;
-    }
-
-    #node-props-panel h3 {
-      margin-top: 0;
-      font-size: 15px;
-      color: var(--color-text-primary);
-    }
-
-    #node-props-panel .form-group {
-      margin-bottom: 10px;
-    }
-
-    #node-props-panel label {
-      display: block;
-      font-weight: bold;
-      margin-bottom: 4px;
-    }
-
-    #node-props-panel select {
-      width: 100%;
-      padding: 4px;
-      font-size: 14px;
-    }
-
-    .prop-group {
-      display: none;
-      margin-bottom: 12px;
-    }
-
-    .prop-group label,
-    .prop-group input {
-      display: block;
-      width: 100%;
-      margin-top: 6px;
-      font-size: 13px;
-    }
-
-    .panel-title {
-      font-weight: bold;
-      color: var(--color-text-white);
-      font-size: 15px;
-      margin-bottom: 0.5rem;
-    }
-
-    .panel-metric {
-      margin-bottom: 0.4rem;
-    }
-
-    .panel-metric .label {
-      display: inline-block;
-      width: 140px;
-      color: var(--color-text-muted);
-    }
-
-    /* === INPUTS & BUTTONS === */
-    input[type="text"],
-    input[type="number"] {
-      padding: 6px;
-      background-color: #222;
-      border: 1px solid var(--color-border);
-      color: var(--color-text-white);
-      border-radius: var(--radius-small);
-      font-family: var(--font-family-code);
-    }
-
-    #node-props-save,
-    #run-button {
-      margin-top: 8px;
-      padding: 10px;
-      background-color: var(--color-button);
-      color: var(--color-text-white);
-      border: none;
-      border-radius: var(--radius-small);
-      cursor: pointer;
-      font-size: 14px;
-    }
-
-    #run-button:disabled,
-    #node-props-panel button:disabled {
-      background-color: var(--color-button-disabled);
-      cursor: not-allowed;
-    }
-
-    #github-login-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 14px;
-      background-color: #fff;
-      color: #000000;
-      text-decoration: none;
-      border-radius: var(--radius-medium);
-      font-weight: 500;
-      font-family: var(--font-family-mono);
-      font-size: 12px;
-      border: 1px solid #2ea043;
-      transition: background-color 0.2s ease;
-      float: right;
-    }
-
-    #github-login-btn:hover {
-      background-color: #ccc;
-    }
-
-    #github-login-btn img {
-      width: 18px;
-      height: 18px;
-    }
-
-    /* === TABS === */
-    .tabs {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      overflow: hidden;
-    }
-
-    .tab-labels {
-      display: flex;
-      cursor: pointer;
-    }
-
-    .tab-labels label {
-      padding: 10px 20px;
-      background: var(--color-bg-body);
-      margin-right: 4px;
-      margin-bottom: 20px;
-      border-radius: var(--radius-small);
-    }
-
-    .tab-content {
-      border-top: 1px solid var(--color-border-panel);
-      padding: 20px 0 0;
-      display: none;
-      height: 100%;
-    }
-
-    input[name="tab"] {
-      display: none;
-    }
-
-    #tab1:checked ~ .tabs .tab-labels label[for="tab1"],
-    #tab2:checked ~ .tabs .tab-labels label[for="tab2"],
-    #tab3:checked ~ .tabs .tab-labels label[for="tab3"] {
-      background: var(--color-bg-tab-active);
-      font-weight: bold;
-      color: var(--color-text-accent);
-    }
-
-    #tab1:checked ~ .tabs #content1,
-    #tab2:checked ~ .tabs #content2,
-    #tab3:checked ~ .tabs #content3 {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      overflow: hidden;
-    }
-
-    /* === CHALLENGE PANEL === */
-    #challenge-container {
-      width: 15%;
-      background: var(--color-bg-dark);
-      margin: 12px 12px;
-      border: 2px solid var(--color-border-panel);
-      border-radius: var(--radius-large);
-      padding: 0 12px;
-    }
-
-    .challenge-list {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    .challenge-item {
-      padding: 10px;
-      margin: 5px 0;
-      background: #21262d;
-      border-radius: 6px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      border-left: 3px solid transparent;
-      list-style: none;
-    }
-
-    .challenge-item:hover {
-      background: #30363d;
-    }
-
-    .challenge-item.active {
-      background: #1a3d2a;
-      border-left-color: #00ff88;
-    }
-
-    .challenge-name {
-      font-weight: 500;
-      margin-bottom: 5px;
-    }
-
-    .challenge-difficulty {
-      font-size: 0.8rem;
-      color: #0b949e;
-    }
-
-    .challenge-difficulty.easy {
-      color: #3fb950;
-    }
-
-    .challenge-difficulty.medium {
-      color: #d29922;
-    }
-
-    .challenge-difficulty.hard {
-      color: #f85149;
-    }
-
-    /* === REQUIREMENTS === */
-    .requirements-section {
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 8px;
-      padding: 20px;
-      margin-bottom: 20px;
-    }
-
-    .requirements-list {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-
-    .requirement-item {
-      position: relative;
-      padding: 8px 0 8px 25px;
-      margin: 0;
-      border-bottom: 1px solid #30363d;
-    }
-
-    .requirement-item:before {
-      content: "✓";
-      color: #00ff88;
-      position: absolute;
-      left: 0;
-    }
-
-    /* === MODAL === */
-    .modal {
-      position: absolute;
-      top: 30%;
-      left: 50%;
-      transform: translate(-50%, -30%);
-      background: #121212;
-      padding: 20px;
-      border-radius: 8px;
-      border: 1px solid #444;
-      z-index: 999;
-      color: #ccc;
-    }
-
-    .modal-content label {
-      display: block;
-      margin: 10px 0;
-    }
-
-    .modal-actions {
-      margin-top: 10px;
-      text-align: right;
-    }
-
-    .modal input,
-    .modal select {
-      width: 100%;
-      padding: 6px;
-      margin-top: 4px;
-      background: #222;
-      border: 1px solid #444;
-      color: #fff;
-      border-radius: 4px;
-    }
-
-    /* === MISC === */
-    #score-panel {
-      margin-top: 16px;
-    }
-    
-    .userbox {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-    .avatar {
-      width: 32px;
-      height: 32px;
-      border-radius: 12px;
-    }
-    </style>
-  </head>
+    <link rel="stylesheet" type="text/css" href="/static/style.css" />
+    </head>
  <body>
    <div id="page-container">
      <div id="sd-header">
@ -587,7 +21,6 @@
				@@ -587,7 +21,6 @@
            Login with GitHub
          </a>
        {{ end }}
-
      </div>
      <div id="main-content">
        <div id="challenge-container">
--- a/static/style.css
+++ b/static/style.css
@ -0,0 +1,567 @@
				@@ -0,0 +1,567 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
+
+/* === CSS VARIABLES === */
+:root {
+    /* Colors */
+    --color-bg-body: #161b22;
+    --color-bg-dark: #121212;
+    --color-bg-sidebar: #111;
+    --color-bg-component: #1e1e1e;
+    --color-bg-hover: #2a2a2a;
+    --color-bg-accent: #005f87;
+    --color-bg-tab-active: #1a3d2a;
+    --color-border: #444;
+    --color-border-accent: #00ff88;
+    --color-border-panel: #30363d;
+    --color-text-primary: #ccc;
+    --color-text-muted: #888;
+    --color-text-accent: #00ff88;
+    --color-text-white: #fff;
+    --color-text-dark: #333;
+    --color-button: #238636;
+    --color-button-disabled: #555;
+    --color-connection: #333;
+    --color-connection-selected: #007bff;
+    --color-tooltip-bg: #333;
+    --color-tooltip-text: #fff;
+
+    /* Sizes */
+    --radius-small: 4px;
+    --radius-medium: 6px;
+    --radius-large: 8px;
+    --font-family-mono: 'JetBrains Mono', monospace;
+    --font-family-code: 'Fira Code', monospace;
+    --component-padding: 8px;
+    --component-gap: 12px;
+}
+
+/* === RESET & BASE STYLES === */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: var(--font-family-mono);
+    color: var(--color-text-primary);
+    display: flex;
+    flex-direction: row;
+    min-height: 100vh;
+    background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%),
+                radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%),
+                var(--color-bg-body)
+}
+
+/* === LAYOUT === */
+#page-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+#sd-header {
+    width: 100%;
+    padding: 12px 24px;
+    font-weight: bold;
+    color: var(--color-text-accent);
+    border-bottom: 1px solid var(--color-text-dark);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-text {
+    font-size: 24px;
+    margin: 0;
+                text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
+
+}
+
+#main-content {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+
+/* === SIDEBAR === */
+#sidebar {
+    width: 100%;
+    background-color: var(--color-bg-sidebar);
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: var(--component-gap);
+}
+
+.sidebar-title {
+    color: #8b949e;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+    padding-bottom: 8px;
+    padding-left: 8px;
+    border-bottom: 1px solid #303638;
+}
+
+/* === COMPONENT ICONS === */
+.component-icon,
+#arrow-tool {
+    position: relative;
+    padding: var(--component-padding) 12px;
+    background-color: var(--color-bg-component);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-medium);
+    text-align: center;
+    cursor: grab;
+    user-select: none;
+    font-size: 16px;
+    color: var(--color-text-primary);
+    transition: background-color 0.1s ease;
+}
+
+.component-icon:hover,
+#arrow-tool:hover {
+    background-color: var(--color-bg-hover);
+    border-color: var(--color-border-accent);
+}
+
+.component-icon:active,
+#arrow-tool:active {
+    cursor: grabbing;
+}
+
+#arrow-tool.active {
+    background-color: var(--color-bg-accent);
+    color: var(--color-text-white);
+    border-color: var(--color-button);
+}
+
+/* === TOOLTIP === */
+.tooltip {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    background: var(--color-tooltip-bg);
+    color: var(--color-tooltip-text);
+    padding: 6px 8px;
+    border-radius: var(--radius-small);
+    white-space: nowrap;
+    font-size: 14px;
+    line-height: 1.4;
+    margin-top: 4px;
+    transition: opacity 0.2s;
+}
+
+.component-icon:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+    z-index: 1000;
+}
+
+.component-icon.dragging .tooltip {
+    display: none;
+}
+
+/* === CANVAS === */
+#canvas-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--radius-large);
+    border: 2px solid var(--color-border-panel);
+    overflow: hidden;
+    background: var(--color-bg-dark);
+    margin: 12px 12px 12px 0;
+    padding: 16px;
+}
+
+#canvas-container {
+    flex: 1;
+    position: relative;
+    background: var(--color-bg-dark);
+    height: 100%;
+    margin-top: 16px;
+}
+
+#canvas {
+    width: 100%;
+    height: 90%;
+    background: var(--color-bg-dark);
+    border: 2px dashed var(--color-border-panel);
+    border-radius: var(--radius-large);
+}
+
+.dropped {
+    cursor: move;
+}
+
+.dropped.selected rect {
+    stroke: #00bcd4;
+    stroke-width: 2;
+}
+
+/* === TOOLBAR === */
+#canvas-toolbar {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 20;
+    display: flex;
+    gap: 8px;
+    background: var(--color-bg-component);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-small);
+    padding: 6px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
+}
+
+.toolbar-btn {
+    background: none;
+    border: 1px solid var(--color-border);
+    color: var(--color-text-primary);
+    padding: 6px 10px;
+    border-radius: var(--radius-small);
+    font-size: 14px;
+    cursor: pointer;
+    font-family: var(--font-family-mono);
+}
+
+.toolbar-btn:hover {
+    background-color: var(--color-bg-hover);
+    border-color: var(--color-border-accent);
+}
+
+.toolbar-btn.active {
+    background-color: var(--color-bg-accent);
+    color: var(--color-text-white);
+    border-color: var(--color-button);
+}
+
+/* === PANELS === */
+#info-panel {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: var(--color-bg-dark);
+    color: var(--color-text-primary);
+    padding: 1rem;
+    border-radius: var(--radius-large);
+    font-family: monospace;
+    font-size: 14px;
+    min-width: 220px;
+    z-index: 10;
+    border: 1px solid var(--color-text-dark);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+}
+
+#node-props-panel {
+    position: absolute;
+    width: 220px;
+    background-color: var(--color-bg-sidebar);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-small);
+    padding: 12px;
+    color: var(--color-text-white);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+    display: none;
+    z-index: 10;
+}
+
+#node-props-panel h3 {
+    margin-top: 0;
+    font-size: 15px;
+    color: var(--color-text-primary);
+}
+
+#node-props-panel .form-group {
+    margin-bottom: 10px;
+}
+
+#node-props-panel label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+
+#node-props-panel select {
+    width: 100%;
+    padding: 4px;
+    font-size: 14px;
+}
+
+.prop-group {
+    display: none;
+    margin-bottom: 12px;
+}
+
+.prop-group label,
+.prop-group input {
+    display: block;
+    width: 100%;
+    margin-top: 6px;
+    font-size: 13px;
+}
+
+.panel-title {
+    font-weight: bold;
+    color: var(--color-text-white);
+    font-size: 15px;
+    margin-bottom: 0.5rem;
+}
+
+.panel-metric {
+    margin-bottom: 0.4rem;
+}
+
+.panel-metric .label {
+    display: inline-block;
+    width: 140px;
+    color: var(--color-text-muted);
+}
+
+/* === INPUTS & BUTTONS === */
+input[type="text"],
+input[type="number"] {
+    padding: 6px;
+    background-color: #222;
+    border: 1px solid var(--color-border);
+    color: var(--color-text-white);
+    border-radius: var(--radius-small);
+    font-family: var(--font-family-code);
+}
+
+#node-props-save,
+#run-button {
+    margin-top: 8px;
+    padding: 10px;
+    background-color: var(--color-button);
+    color: var(--color-text-white);
+    border: none;
+    border-radius: var(--radius-small);
+    cursor: pointer;
+    font-size: 14px;
+}
+
+#run-button:disabled,
+#node-props-panel button:disabled {
+    background-color: var(--color-button-disabled);
+    cursor: not-allowed;
+}
+
+#github-login-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    background-color: #fff;
+    color: #000000;
+    text-decoration: none;
+    border-radius: var(--radius-medium);
+    font-weight: 500;
+    font-family: var(--font-family-mono);
+    font-size: 12px;
+    border: 1px solid #2ea043;
+    transition: background-color 0.2s ease;
+    float: right;
+}
+
+#github-login-btn:hover {
+    background-color: #ccc;
+}
+
+#github-login-btn img {
+    width: 18px;
+    height: 18px;
+}
+
+/* === TABS === */
+.tabs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.tab-labels {
+    display: flex;
+    cursor: pointer;
+}
+
+.tab-labels label {
+    padding: 10px 20px;
+    background: var(--color-bg-body);
+    margin-right: 4px;
+    margin-bottom: 20px;
+    border-radius: var(--radius-small);
+}
+
+.tab-content {
+    border-top: 1px solid var(--color-border-panel);
+    padding: 20px 0 0;
+    display: none;
+    height: 100%;
+}
+
+input[name="tab"] {
+    display: none;
+}
+
+#tab1:checked ~ .tabs .tab-labels label[for="tab1"],
+#tab2:checked ~ .tabs .tab-labels label[for="tab2"],
+#tab3:checked ~ .tabs .tab-labels label[for="tab3"] {
+    background: var(--color-bg-tab-active);
+    font-weight: bold;
+    color: var(--color-text-accent);
+}
+
+#tab1:checked ~ .tabs #content1,
+#tab2:checked ~ .tabs #content2,
+#tab3:checked ~ .tabs #content3 {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* === CHALLENGE PANEL === */
+#challenge-container {
+    width: 15%;
+    background: var(--color-bg-dark);
+    margin: 12px 12px;
+    border: 2px solid var(--color-border-panel);
+    border-radius: var(--radius-large);
+    padding: 0 12px;
+}
+
+.challenge-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.challenge-item {
+    padding: 10px;
+    margin: 5px 0;
+    background: #21262d;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-left: 3px solid transparent;
+    list-style: none;
+}
+
+.challenge-item:hover {
+    background: #30363d;
+}
+
+.challenge-item.active {
+    background: #1a3d2a;
+    border-left-color: #00ff88;
+}
+
+.challenge-name {
+    font-weight: 500;
+    margin-bottom: 5px;
+}
+
+.challenge-difficulty {
+    font-size: 0.8rem;
+    color: #0b949e;
+}
+
+.challenge-difficulty.easy {
+    color: #3fb950;
+}
+
+.challenge-difficulty.medium {
+    color: #d29922;
+}
+
+.challenge-difficulty.hard {
+    color: #f85149;
+}
+
+/* === REQUIREMENTS === */
+.requirements-section {
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.requirements-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.requirement-item {
+    position: relative;
+    padding: 8px 0 8px 25px;
+    margin: 0;
+    border-bottom: 1px solid #30363d;
+}
+
+.requirement-item:before {
+    content: "✓";
+    color: #00ff88;
+    position: absolute;
+    left: 0;
+}
+
+/* === MODAL === */
+.modal {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -30%);
+    background: #121212;
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid #444;
+    z-index: 999;
+    color: #ccc;
+}
+
+.modal-content label {
+    display: block;
+    margin: 10px 0;
+}
+
+.modal-actions {
+    margin-top: 10px;
+    text-align: right;
+}
+
+.modal input,
+.modal select {
+    width: 100%;
+    padding: 6px;
+    margin-top: 4px;
+    background: #222;
+    border: 1px solid #444;
+    color: #fff;
+    border-radius: 4px;
+}
+
+/* === MISC === */
+#score-panel {
+    margin-top: 16px;
+}
+
+.userbox {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+}
+
--- a/static/success.html
+++ b/static/success.html
@ -0,0 +1,657 @@
				@@ -0,0 +1,657 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>System Success - System Design Game</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet"/>
+  <style>
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
+
+/* === CSS VARIABLES === */
+:root {
+    /* Colors */
+    --color-bg-body: #161b22;
+    --color-bg-dark: #121212;
+    --color-bg-sidebar: #111;
+    --color-bg-component: #1e1e1e;
+    --color-bg-hover: #2a2a2a;
+    --color-bg-accent: #005f87;
+    --color-bg-tab-active: #1a3d2a;
+    --color-border: #444;
+    --color-border-accent: #00ff88;
+    --color-border-panel: #30363d;
+    --color-text-primary: #ccc;
+    --color-text-muted: #888;
+    --color-text-accent: #00ff88;
+    --color-text-white: #fff;
+    --color-text-dark: #333;
+    --color-button: #238636;
+    --color-button-disabled: #555;
+    --color-connection: #333;
+    --color-connection-selected: #007bff;
+    --color-tooltip-bg: #333;
+    --color-tooltip-text: #fff;
+
+    /* Sizes */
+    --radius-small: 4px;
+    --radius-medium: 6px;
+    --radius-large: 8px;
+    --font-family-mono: 'JetBrains Mono', monospace;
+    --font-family-code: 'Fira Code', monospace;
+    --component-padding: 8px;
+    --component-gap: 12px;
+}
+
+/* === RESET & BASE STYLES === */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: var(--font-family-mono);
+    background-color: var(--color-bg-body);
+    color: var(--color-text-primary);
+    display: flex;
+    flex-direction: row;
+    height: 100vh;
+}
+
+/* === LAYOUT === */
+#page-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+#sd-header {
+    width: 100%;
+    background: none;
+    padding: 12px 24px;
+    font-weight: bold;
+    color: var(--color-text-accent);
+    border-bottom: 1px solid var(--color-text-dark);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-text {
+    font-size: 24px;
+    margin: 0;
+}
+
+#main-content {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%),
+        radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%);
+}
+
+/* === SIDEBAR === */
+#sidebar {
+    width: 100%;
+    background-color: var(--color-bg-sidebar);
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: var(--component-gap);
+}
+
+.sidebar-title {
+    color: #8b949e;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+    padding-bottom: 8px;
+    padding-left: 8px;
+    border-bottom: 1px solid #303638;
+}
+
+/* === COMPONENT ICONS === */
+.component-icon,
+#arrow-tool {
+    position: relative;
+    padding: var(--component-padding) 12px;
+    background-color: var(--color-bg-component);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-medium);
+    text-align: center;
+    cursor: grab;
+    user-select: none;
+    font-size: 16px;
+    color: var(--color-text-primary);
+    transition: background-color 0.1s ease;
+}
+
+.component-icon:hover,
+#arrow-tool:hover {
+    background-color: var(--color-bg-hover);
+    border-color: var(--color-border-accent);
+}
+
+.component-icon:active,
+#arrow-tool:active {
+    cursor: grabbing;
+}
+
+#arrow-tool.active {
+    background-color: var(--color-bg-accent);
+    color: var(--color-text-white);
+    border-color: var(--color-button);
+}
+
+/* === TOOLTIP === */
+.tooltip {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    background: var(--color-tooltip-bg);
+    color: var(--color-tooltip-text);
+    padding: 6px 8px;
+    border-radius: var(--radius-small);
+    white-space: nowrap;
+    font-size: 14px;
+    line-height: 1.4;
+    margin-top: 4px;
+    transition: opacity 0.2s;
+}
+
+.component-icon:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+    z-index: 1000;
+}
+
+.component-icon.dragging .tooltip {
+    display: none;
+}
+
+/* === CANVAS === */
+#canvas-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--radius-large);
+    border: 2px solid var(--color-border-panel);
+    overflow: hidden;
+    background: var(--color-bg-dark);
+    margin: 12px 12px 12px 0;
+    padding: 16px;
+}
+
+#canvas-container {
+    flex: 1;
+    position: relative;
+    background: var(--color-bg-dark);
+    height: 100%;
+    margin-top: 16px;
+}
+
+#canvas {
+    width: 100%;
+    height: 90%;
+    background: var(--color-bg-dark);
+    border: 2px dashed var(--color-border-panel);
+    border-radius: var(--radius-large);
+}
+
+.dropped {
+    cursor: move;
+}
+
+.dropped.selected rect {
+    stroke: #00bcd4;
+    stroke-width: 2;
+}
+
+/* === TOOLBAR === */
+#canvas-toolbar {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 20;
+    display: flex;
+    gap: 8px;
+    background: var(--color-bg-component);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-small);
+    padding: 6px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
+}
+
+.toolbar-btn {
+    background: none;
+    border: 1px solid var(--color-border);
+    color: var(--color-text-primary);
+    padding: 6px 10px;
+    border-radius: var(--radius-small);
+    font-size: 14px;
+    cursor: pointer;
+    font-family: var(--font-family-mono);
+}
+
+.toolbar-btn:hover {
+    background-color: var(--color-bg-hover);
+    border-color: var(--color-border-accent);
+}
+
+.toolbar-btn.active {
+    background-color: var(--color-bg-accent);
+    color: var(--color-text-white);
+    border-color: var(--color-button);
+}
+
+/* === PANELS === */
+#info-panel {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: var(--color-bg-dark);
+    color: var(--color-text-primary);
+    padding: 1rem;
+    border-radius: var(--radius-large);
+    font-family: monospace;
+    font-size: 14px;
+    min-width: 220px;
+    z-index: 10;
+    border: 1px solid var(--color-text-dark);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+}
+
+#node-props-panel {
+    position: absolute;
+    width: 220px;
+    background-color: var(--color-bg-sidebar);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-small);
+    padding: 12px;
+    color: var(--color-text-white);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+    display: none;
+    z-index: 10;
+}
+
+#node-props-panel h3 {
+    margin-top: 0;
+    font-size: 15px;
+    color: var(--color-text-primary);
+}
+
+#node-props-panel .form-group {
+    margin-bottom: 10px;
+}
+
+#node-props-panel label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+
+#node-props-panel select {
+    width: 100%;
+    padding: 4px;
+    font-size: 14px;
+}
+
+.prop-group {
+    display: none;
+    margin-bottom: 12px;
+}
+
+.prop-group label,
+.prop-group input {
+    display: block;
+    width: 100%;
+    margin-top: 6px;
+    font-size: 13px;
+}
+
+.panel-title {
+    font-weight: bold;
+    color: var(--color-text-white);
+    font-size: 15px;
+    margin-bottom: 0.5rem;
+}
+
+.panel-metric {
+    margin-bottom: 0.4rem;
+}
+
+.panel-metric .label {
+    display: inline-block;
+    width: 140px;
+    color: var(--color-text-muted);
+}
+
+/* === INPUTS & BUTTONS === */
+input[type="text"],
+input[type="number"] {
+    padding: 6px;
+    background-color: #222;
+    border: 1px solid var(--color-border);
+    color: var(--color-text-white);
+    border-radius: var(--radius-small);
+    font-family: var(--font-family-code);
+}
+
+#node-props-save,
+#run-button {
+    margin-top: 8px;
+    padding: 10px;
+    background-color: var(--color-button);
+    color: var(--color-text-white);
+    border: none;
+    border-radius: var(--radius-small);
+    cursor: pointer;
+    font-size: 14px;
+}
+
+#run-button:disabled,
+#node-props-panel button:disabled {
+    background-color: var(--color-button-disabled);
+    cursor: not-allowed;
+}
+
+#github-login-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    background-color: #fff;
+    color: #000000;
+    text-decoration: none;
+    border-radius: var(--radius-medium);
+    font-weight: 500;
+    font-family: var(--font-family-mono);
+    font-size: 12px;
+    border: 1px solid #2ea043;
+    transition: background-color 0.2s ease;
+    float: right;
+}
+
+#github-login-btn:hover {
+    background-color: #ccc;
+}
+
+#github-login-btn img {
+    width: 18px;
+    height: 18px;
+}
+
+/* === TABS === */
+.tabs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.tab-labels {
+    display: flex;
+    cursor: pointer;
+}
+
+.tab-labels label {
+    padding: 10px 20px;
+    background: var(--color-bg-body);
+    margin-right: 4px;
+    margin-bottom: 20px;
+    border-radius: var(--radius-small);
+}
+
+.tab-content {
+    border-top: 1px solid var(--color-border-panel);
+    padding: 20px 0 0;
+    display: none;
+    height: 100%;
+}
+
+input[name="tab"] {
+    display: none;
+}
+
+#tab1:checked ~ .tabs .tab-labels label[for="tab1"],
+#tab2:checked ~ .tabs .tab-labels label[for="tab2"],
+#tab3:checked ~ .tabs .tab-labels label[for="tab3"] {
+    background: var(--color-bg-tab-active);
+    font-weight: bold;
+    color: var(--color-text-accent);
+}
+
+#tab1:checked ~ .tabs #content1,
+#tab2:checked ~ .tabs #content2,
+#tab3:checked ~ .tabs #content3 {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* === CHALLENGE PANEL === */
+#challenge-container {
+    width: 15%;
+    background: var(--color-bg-dark);
+    margin: 12px 12px;
+    border: 2px solid var(--color-border-panel);
+    border-radius: var(--radius-large);
+    padding: 0 12px;
+}
+
+.challenge-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.challenge-item {
+    padding: 10px;
+    margin: 5px 0;
+    background: #21262d;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-left: 3px solid transparent;
+    list-style: none;
+}
+
+.challenge-item:hover {
+    background: #30363d;
+}
+
+.challenge-item.active {
+    background: #1a3d2a;
+    border-left-color: #00ff88;
+}
+
+.challenge-name {
+    font-weight: 500;
+    margin-bottom: 5px;
+}
+
+.challenge-difficulty {
+    font-size: 0.8rem;
+    color: #0b949e;
+}
+
+.challenge-difficulty.easy {
+    color: #3fb950;
+}
+
+.challenge-difficulty.medium {
+    color: #d29922;
+}
+
+.challenge-difficulty.hard {
+    color: #f85149;
+}
+
+/* === REQUIREMENTS === */
+.requirements-section {
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.requirements-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.requirement-item {
+    position: relative;
+    padding: 8px 0 8px 25px;
+    margin: 0;
+    border-bottom: 1px solid #30363d;
+}
+
+.requirement-item:before {
+    content: "✓";
+    color: #00ff88;
+    position: absolute;
+    left: 0;
+}
+
+/* === MODAL === */
+.modal {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -30%);
+    background: #121212;
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid #444;
+    z-index: 999;
+    color: #ccc;
+}
+
+.modal-content label {
+    display: block;
+    margin: 10px 0;
+}
+
+.modal-actions {
+    margin-top: 10px;
+    text-align: right;
+}
+
+.modal input,
+.modal select {
+    width: 100%;
+    padding: 6px;
+    margin-top: 4px;
+    background: #222;
+    border: 1px solid #444;
+    color: #fff;
+    border-radius: 4px;
+}
+
+/* === MISC === */
+#score-panel {
+    margin-top: 16px;
+}
+
+.userbox {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 12px;
+}
+
+    /* Paste your full design system styles here */
+    /* Use the complete CSS block you shared earlier */
+  </style>
+</head>
+<body>
+  <div id="page-container">
+    <div id="sd-header">
+      <h1 class="header-text">System Design Game</h1>
+      <div class="userbox">
+        <div class="status-indicator" style="color: var(--color-text-accent); font-weight: bold;">
+          ✅ SYSTEM SUCCESS
+        </div>
+      </div>
+    </div>
+
+    <div id="main-content" style="justify-content: center; align-items: center; flex: 1; padding: 40px;">
+      <div style="max-width: 600px; width: 100%; background: var(--color-bg-component); border: 1px solid var(--color-border); border-radius: var(--radius-large); padding: 32px;">
+        <h2 style="color: var(--color-text-accent); font-size: 32px; text-align: center; margin-top: 0;">🏆 Mission Accomplished</h2>
+        <p style="text-align: center; font-size: 16px; color: var(--color-text-muted); margin-bottom: 32px;">
+          Your architecture scaled successfully and met all performance targets. Well done!
+        </p>
+
+        <div class="failure-metrics" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;">
+          <div class="metric-item" style="background: var(--color-bg-dark); border: 1px solid var(--color-border); padding: 16px; border-radius: var(--radius-medium); text-align: center;">
+            <div class="metric-label" style="color: var(--color-text-muted); margin-bottom: 6px;">Target RPS</div>
+            <div class="metric-value" style="font-size: 20px; font-weight: bold;">10,000</div>
+          </div>
+          <div class="metric-item" style="background: var(--color-bg-dark); border: 1px solid var(--color-border); padding: 16px; border-radius: var(--radius-medium); text-align: center;">
+            <div class="metric-label" style="color: var(--color-text-muted); margin-bottom: 6px;">Achieved RPS</div>
+            <div class="metric-value" style="font-size: 20px; font-weight: bold; color: var(--color-text-accent);">10,417</div>
+          </div>
+          <div class="metric-item" style="background: var(--color-bg-dark); border: 1px solid var(--color-border); padding: 16px; border-radius: var(--radius-medium); text-align: center;">
+            <div class="metric-label" style="color: var(--color-text-muted); margin-bottom: 6px;">Max Latency</div>
+            <div class="metric-value" style="font-size: 20px; font-weight: bold;">200ms</div>
+          </div>
+          <div class="metric-item" style="background: var(--color-bg-dark); border: 1px solid var(--color-border); padding: 16px; border-radius: var(--radius-medium); text-align: center;">
+            <div class="metric-label" style="color: var(--color-text-muted); margin-bottom: 6px;">Actual Latency</div>
+            <div class="metric-value" style="font-size: 20px; font-weight: bold; color: var(--color-text-accent);">87ms</div>
+          </div>
+        </div>
+
+        <div class="error-log" style="background: var(--color-bg-dark); border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: 16px; font-family: monospace; font-size: 13px; color: var(--color-text-muted); max-height: 160px; overflow-y: auto;">
+          <div>[INFO] System initialized and scaled successfully</div>
+          <div>[INFO] Load balancer handled traffic with 0% errors</div>
+          <div>[INFO] Cache hit ratio: 97%</div>
+          <div>[SUCCESS] SLA met - all objectives achieved</div>
+        </div>
+
+        <div class="action-buttons" style="display: flex; justify-content: center; gap: 16px; margin-top: 32px;">
+          <button onclick="retryLevel()" id="retry-button" style="padding: 12px 24px; background: var(--color-button); color: var(--color-text-white); border: none; border-radius: var(--radius-medium); font-size: 14px; cursor: pointer;">
+            🔁 Replay Level
+          </button>
+          <a href="/game-modes" style="padding: 12px 24px; background: transparent; border: 1px solid var(--color-border); color: var(--color-text-accent); border-radius: var(--radius-medium); font-size: 14px; text-decoration: none; display: inline-block;">
+            🏠 Main Menu
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      function retryLevel() {
+        const btn = document.getElementById('retry-button');
+        btn.textContent = '⏳ Reloading...';
+        btn.disabled = true;
+        setTimeout(() => {
+          window.location.href = '/game?retry=true';
+        }, 1500);
+      }
+
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          retryLevel();
+        } else if (e.key === 'Escape') {
+          window.location.href = '/game-modes';
+        }
+      });
+
+      console.log("✅ SYSTEM SUCCESS SCREEN DISPLAYED");
+    </script>
+  </div>
+</body>
+</html>
+