npm - mudra-skills - Versions diffs - 1.0.0 - Mend

mudra-skills 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/skills/mudra-preview/assets/runner.html ADDED Viewed

@@ -0,0 +1,1812 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Intent Runner: The Ghost Trail</title>
+    <style>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    background: #0a0a0f;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    overflow: hidden;
+    color: #fff;
+}
+#game-container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+#game-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+/* HUD Styles */
+#hud {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 15px 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    pointer-events: none;
+    z-index: 10;
+}
+.hud-left, .hud-right {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.hud-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.hud-item {
+    display: flex;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 8px 12px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.hud-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: rgba(255, 255, 255, 0.6);
+}
+.hud-value {
+    font-size: 18px;
+    font-weight: bold;
+    font-family: 'Courier New', monospace;
+}
+.hud-value.glow {
+    color: #00ffff;
+    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
+}
+.intent-lead {
+    border: 1px solid rgba(0, 255, 255, 0.3);
+    background: rgba(0, 255, 255, 0.1);
+}
+#lives-container {
+    display: flex;
+    gap: 10px;
+    font-size: 28px;
+}
+.heart {
+    color: #ff4757;
+    text-shadow: 0 0 10px #ff4757;
+    transition: all 0.3s ease;
+}
+.heart.lost {
+    color: #333;
+    text-shadow: none;
+    transform: scale(0.8);
+}
+/* Connection Status */
+#connection-status {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.6);
+    z-index: 10;
+}
+.status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+}
+.status-dot.connected {
+    background: #2ed573;
+    box-shadow: 0 0 10px #2ed573;
+}
+.status-dot.disconnected {
+    background: #ff4757;
+    box-shadow: 0 0 10px #ff4757;
+}
+/* Delta Flash */
+#delta-flash {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 48px;
+    font-weight: bold;
+    font-family: 'Courier New', monospace;
+    color: #00ffff;
+    text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 20;
+    transition: opacity 0.1s ease;
+}
+#delta-flash.show {
+    opacity: 1;
+    animation: flashPulse 0.8s ease-out forwards;
+}
+@keyframes flashPulse {
+    0% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+    50% {
+        opacity: 0.8;
+        transform: translate(-50%, -50%) scale(1.1);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.9);
+    }
+}
+/* Screens */
+.screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: rgba(10, 10, 15, 0.95);
+    z-index: 100;
+    transition: opacity 0.5s ease;
+}
+.screen.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+/* Title Screen */
+#title-screen h1 {
+    font-size: 72px;
+    font-weight: 300;
+    letter-spacing: 8px;
+    text-transform: uppercase;
+    background: linear-gradient(135deg, #00ffff, #a855f7);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 10px;
+}
+#title-screen h2 {
+    font-size: 24px;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 0.6);
+    letter-spacing: 4px;
+    margin-bottom: 30px;
+}
+.tagline {
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.4);
+    margin-bottom: 40px;
+}
+.controls-info {
+    margin-bottom: 30px;
+}
+/* Threshold Setting */
+.threshold-setting {
+    margin-bottom: 30px;
+    padding: 20px 30px;
+    background: rgba(0, 255, 255, 0.05);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 12px;
+    min-width: 300px;
+}
+.threshold-setting label {
+    display: block;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.7);
+    margin-bottom: 12px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+.slider-container {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+#threshold-slider {
+    flex: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    outline: none;
+    cursor: pointer;
+}
+#threshold-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: #00ffff;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+    transition: transform 0.2s ease;
+}
+#threshold-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+#threshold-slider::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: #00ffff;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+}
+#threshold-value {
+    font-family: 'Courier New', monospace;
+    font-size: 18px;
+    font-weight: bold;
+    color: #00ffff;
+    min-width: 45px;
+    text-align: right;
+}
+#pressure-indicator {
+    position: relative;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+#pressure-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, #00ffff, #a855f7);
+    border-radius: 12px;
+    transition: width 0.05s ease;
+}
+#pressure-bar.triggered {
+    background: linear-gradient(90deg, #2ed573, #00ffff);
+}
+#threshold-marker {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 3px;
+    background: #fff;
+    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
+    left: 30%;
+    transition: left 0.1s ease;
+}
+.threshold-hint {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.4);
+    font-style: italic;
+}
+.controls-info p {
+    margin: 10px 0;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.7);
+}
+.key {
+    display: inline-block;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    margin-right: 10px;
+}
+.ghost-key {
+    background: rgba(0, 255, 255, 0.2);
+    border: 1px solid #00ffff;
+    color: #00ffff;
+}
+.physical-key {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    color: #fff;
+}
+.game-btn {
+    padding: 15px 50px;
+    font-size: 18px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    border: 2px solid #00ffff;
+    background: transparent;
+    color: #00ffff;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 20px;
+}
+.game-btn:hover {
+    background: #00ffff;
+    color: #0a0a0f;
+    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
+}
+#title-connection-status {
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.5);
+}
+/* Countdown */
+#countdown {
+    background: rgba(10, 10, 15, 0.8);
+}
+#countdown-number {
+    font-size: 200px;
+    font-weight: bold;
+    color: #00ffff;
+    text-shadow: 0 0 50px #00ffff;
+    animation: countdownPulse 1s ease-in-out infinite;
+}
+@keyframes countdownPulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.1); opacity: 0.8; }
+}
+/* End Screen */
+#end-screen h1 {
+    font-size: 48px;
+    margin-bottom: 30px;
+    color: #fff;
+}
+.stats-container {
+    display: flex;
+    gap: 60px;
+    margin-bottom: 30px;
+}
+.stats-column {
+    min-width: 250px;
+}
+.stats-column h3 {
+    font-size: 18px;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid;
+}
+.ghost-title {
+    color: #00ffff;
+    border-color: #00ffff !important;
+}
+.physical-title {
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.5) !important;
+}
+.stat-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.stat-label {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 14px;
+}
+.stat-value {
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+}
+.advantage-summary {
+    background: rgba(0, 255, 255, 0.1);
+    border: 1px solid rgba(0, 255, 255, 0.3);
+    border-radius: 12px;
+    padding: 25px 40px;
+    margin-bottom: 25px;
+}
+.advantage-summary h3 {
+    color: #00ffff;
+    margin-bottom: 20px;
+    text-align: center;
+    font-size: 20px;
+}
+.advantage-stats {
+    display: flex;
+    gap: 40px;
+}
+.advantage-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 120px;
+}
+.advantage-value {
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Courier New', monospace;
+    color: #00ffff;
+    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+}
+.advantage-label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: rgba(255, 255, 255, 0.5);
+    margin-top: 5px;
+}
+.summary-message {
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.8);
+    max-width: 500px;
+    text-align: center;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+/* Message Flash */
+#message-flash {
+    position: absolute;
+    bottom: 30%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 24px;
+    font-weight: bold;
+    color: #ff4757;
+    text-shadow: 0 0 20px rgba(255, 71, 87, 0.8);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 15;
+    text-align: center;
+    white-space: nowrap;
+}
+#message-flash.show {
+    animation: messageFlash 2s ease-out forwards;
+}
+@keyframes messageFlash {
+    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
+    20% { opacity: 1; transform: translateX(-50%) translateY(0); }
+    80% { opacity: 1; }
+    100% { opacity: 0; }
+}
+/* Screen shake */
+.shake {
+    animation: shake 0.3s ease-in-out;
+}
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    20% { transform: translateX(-10px); }
+    40% { transform: translateX(10px); }
+    60% { transform: translateX(-5px); }
+    80% { transform: translateX(5px); }
+}
+    </style>
+</head>
+<body>
+    <a href="/gallery" style="position:fixed;top:12px;left:12px;z-index:9999;padding:6px 14px;background:rgba(0,0,0,0.6);color:#77eae9;text-decoration:none;font-size:13px;font-family:system-ui,sans-serif;border-radius:8px;backdrop-filter:blur(8px);border:1px solid rgba(119,234,233,0.2);transition:background 0.2s;"onmouseenter="this.style.background='rgba(0,0,0,0.8)'"onmouseleave="this.style.background='rgba(0,0,0,0.6)'">&larr; Gallery</a>
+    <div id="game-container">
+        <canvas id="game-canvas"></canvas>
+        <!-- HUD -->
+        <div id="hud">
+            <div class="hud-left">
+                <div class="hud-item">
+                    <span class="hud-label">Distance</span>
+                    <span id="distance-value" class="hud-value">0m</span>
+                </div>
+                <div class="hud-item">
+                    <span class="hud-label">Speed</span>
+                    <span id="speed-value" class="hud-value">8.0 m/s</span>
+                </div>
+                <div class="hud-item intent-lead">
+                    <span class="hud-label">Intent Lead</span>
+                    <span id="lead-value" class="hud-value glow">+0.0m</span>
+                </div>
+            </div>
+            <div class="hud-center">
+                <div id="lives-container">
+                    <span class="heart">♥</span>
+                    <span class="heart">♥</span>
+                    <span class="heart">♥</span>
+                </div>
+            </div>
+            <div class="hud-right">
+                <div class="hud-item">
+                    <span class="hud-label">Mudra Avg</span>
+                    <span id="mudra-avg" class="hud-value">--ms</span>
+                </div>
+                <div class="hud-item">
+                    <span class="hud-label">Mouse Avg</span>
+                    <span id="mouse-avg" class="hud-value">--ms</span>
+                </div>
+                <div class="hud-item">
+                    <span class="hud-label">Obstacles</span>
+                    <span id="obstacles-value" class="hud-value">0</span>
+                </div>
+            </div>
+        </div>
+        <!-- Connection Status -->
+        <div id="connection-status">
+            <span id="mudra-status" class="status-dot disconnected"></span>
+            <span id="mudra-status-text">Mudra: Disconnected</span>
+        </div>
+        <!-- Delta Flash -->
+        <div id="delta-flash"></div>
+        <!-- Title Screen -->
+        <div id="title-screen" class="screen">
+            <h1>Intent Runner</h1>
+            <h2>The Ghost Trail</h2>
+            <p class="tagline">See the gap between thought and action</p>
+            <div class="controls-info">
+                <p><span class="key ghost-key">Mudra SNC</span> = Ghost (Intent)</p>
+                <p><span class="key physical-key">Mouse Click</span> = Runner (Action)</p>
+            </div>
+            <div class="threshold-setting">
+                <label for="threshold-slider">SNC Threshold</label>
+                <div class="slider-container">
+                    <input type="range" id="threshold-slider" min="0.1" max="0.9" step="0.05" value="0.3">
+                    <span id="threshold-value">0.30</span>
+                </div>
+                <div id="pressure-indicator">
+                    <div id="pressure-bar"></div>
+                    <div id="threshold-marker"></div>
+                </div>
+                <span class="threshold-hint">Flex to test - bar shows live SNC magnitude</span>
+            </div>
+            <button id="start-btn" class="game-btn">Start Run</button>
+            <div id="title-connection-status">
+                <span id="title-mudra-dot" class="status-dot disconnected"></span>
+                <span id="title-mudra-text">Mudra: Connecting...</span>
+            </div>
+        </div>
+        <!-- Countdown -->
+        <div id="countdown" class="screen hidden">
+            <span id="countdown-number">3</span>
+        </div>
+        <!-- End Screen -->
+        <div id="end-screen" class="screen hidden">
+            <h1 id="end-title">Run Complete</h1>
+            <div class="stats-container">
+                <div class="stats-column">
+                    <h3 class="ghost-title">Intent (Mudra)</h3>
+                    <div class="stat-item">
+                        <span class="stat-label">Average Reaction</span>
+                        <span id="end-mudra-avg" class="stat-value">--ms</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Fastest Reaction</span>
+                        <span id="end-mudra-fastest" class="stat-value">--ms</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Obstacles Cleared</span>
+                        <span id="end-mudra-cleared" class="stat-value">0</span>
+                    </div>
+                </div>
+                <div class="stats-column">
+                    <h3 class="physical-title">Action (Mouse)</h3>
+                    <div class="stat-item">
+                        <span class="stat-label">Average Reaction</span>
+                        <span id="end-mouse-avg" class="stat-value">--ms</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Fastest Reaction</span>
+                        <span id="end-mouse-fastest" class="stat-value">--ms</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Obstacles Cleared</span>
+                        <span id="end-mouse-cleared" class="stat-value">0</span>
+                    </div>
+                </div>
+            </div>
+            <div class="advantage-summary">
+                <h3>Intent Advantage</h3>
+                <div class="advantage-stats">
+                    <div class="advantage-item">
+                        <span class="advantage-value" id="total-time-saved">0ms</span>
+                        <span class="advantage-label">Total Time Saved</span>
+                    </div>
+                    <div class="advantage-item">
+                        <span class="advantage-value" id="distance-equivalent">0m</span>
+                        <span class="advantage-label">Distance Equivalent</span>
+                    </div>
+                    <div class="advantage-item">
+                        <span class="advantage-value" id="ghost-saves">0</span>
+                        <span class="advantage-label">Ghost Saves</span>
+                    </div>
+                    <div class="advantage-item">
+                        <span class="advantage-value" id="avg-delta">0ms</span>
+                        <span class="advantage-label">Avg Delta/Obstacle</span>
+                    </div>
+                </div>
+            </div>
+            <p id="summary-message" class="summary-message"></p>
+            <button id="restart-btn" class="game-btn">Run Again</button>
+        </div>
+    </div>
+    <script>
+// Intent Runner: The Ghost Trail
+// A visualization of the gap between neural intent and physical action
+class IntentRunner {
+    constructor() {
+        this.canvas = document.getElementById('game-canvas');
+        this.ctx = this.canvas.getContext('2d');
+        // Game state
+        this.gameStatus = 'idle'; // 'idle', 'countdown', 'running', 'ended'
+        this.lives = 3;
+        this.distance = 0;
+        this.speed = 8; // m/s
+        this.baseSpeed = 8;
+        this.maxSpeed = 16;
+        this.speedIncrement = 0.5;
+        this.speedIncrementInterval = 10; // seconds
+        this.lastSpeedIncrement = 0;
+        // Timing
+        this.totalAdvantage = 0; // cumulative ms saved
+        this.ghostLead = 0; // visual distance in pixels
+        this.reactions = [];
+        this.ghostSaves = 0;
+        // Obstacles
+        this.obstacles = [];
+        this.obstacleInterval = 2500; // ms
+        this.minObstacleInterval = 800;
+        this.lastObstacleSpawn = 0;
+        this.obstaclesPassed = 0;
+        // Finish line
+        this.finishDistance = 500; // meters
+        this.finishLineX = null; // Will be set when close to finish
+        this.victory = false;
+        // Runners
+        this.runnerY = 0;
+        this.groundY = 0;
+        this.runnerX = 200;
+        this.ghostOffset = 0;
+        // Jump state
+        this.physicalJumping = false;
+        this.physicalJumpVelocity = 0;
+        this.physicalJumpHeight = 0;
+        this.ghostJumping = false;
+        this.ghostJumpVelocity = 0;
+        this.ghostJumpHeight = 0;
+        this.jumpForce = 18;
+        this.gravity = 0.8;
+        // Animation
+        this.runFrame = 0;
+        this.frameCount = 0;
+        this.physicalStumble = 0; // Stumble animation timer
+        this.ghostStumble = 0;
+        // Input tracking
+        this.currentObstacle = null;
+        this.mudraTime = null;
+        this.mouseTime = null;
+        this.reactionWindowOpen = false;
+        // Mudra connection
+        this.mudraConnected = false;
+        this.ws = null;
+        // Pressure detection
+        this.pressureThreshold = 0.3; // Trigger jump when pressure exceeds this
+        this.pressureActive = false; // Prevents repeated triggers while held
+        this.lastPressure = 0; // For spike detection
+        this.lastPressureTime = 0; // Timestamp of last pressure reading
+        // Stats
+        this.mudraReactions = [];
+        this.mouseReactions = [];
+        this.ghostCleared = 0;
+        this.physicalCleared = 0;
+        // Visual effects
+        this.particles = [];
+        this.speedLines = [];
+        this.screenShake = 0;
+        this.deltaFlashTimeout = null;
+        // Grid for background
+        this.gridOffset = 0;
+        this.init();
+    }
+    init() {
+        this.resize();
+        window.addEventListener('resize', () => this.resize());
+        // Input handlers
+        document.addEventListener('click', (e) => this.handleMouseClick(e));
+        document.addEventListener('keydown', (e) => {
+            if (e.code === 'Space') {
+                e.preventDefault();
+                this.handleMouseClick(e);
+            }
+        });
+        // UI handlers
+        document.getElementById('start-btn').addEventListener('click', () => this.startGame());
+        document.getElementById('restart-btn').addEventListener('click', () => this.restartGame());
+        // Threshold slider
+        const thresholdSlider = document.getElementById('threshold-slider');
+        const thresholdValue = document.getElementById('threshold-value');
+        const thresholdMarker = document.getElementById('threshold-marker');
+        thresholdSlider.addEventListener('input', (e) => {
+            this.pressureThreshold = parseFloat(e.target.value);
+            thresholdValue.textContent = this.pressureThreshold.toFixed(2);
+            thresholdMarker.style.left = `${this.pressureThreshold * 100}%`;
+        });
+        // Initialize marker position
+        thresholdMarker.style.left = `${this.pressureThreshold * 100}%`;
+        // Connect to Mudra
+        this.connectMudra();
+        // Start render loop
+        this.lastTime = performance.now();
+        this.gameLoop();
+    }
+    resize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+        this.groundY = this.canvas.height * 0.7;
+        this.runnerY = this.groundY;
+    }
+    connectMudra() {
+        try {
+            this.ws = new WebSocket('ws://127.0.0.1:8766');
+            this.ws.onopen = () => {
+                console.log('Connected to Mudra Companion');
+                // Subscribe to SNC (neuromuscular EMG) events
+                this.ws.send(JSON.stringify({
+                    command: 'subscribe',
+                    signal: 'snc'
+                }));
+            };
+            this.ws.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    // Log all messages for debugging
+                    console.log('Mudra message:', data.type, data.data);
+                    if (data.type === 'connection_status' && data.data?.status === 'connected') {
+                        this.setMudraConnected(true);
+                    } else if (data.type === 'snc') {
+                        // Handle SNC (neuromuscular EMG) signal
+                        // SNC data is typically an array of values in range -1 to 1
+                        const rawData = data.data;
+                        let magnitude = 0;
+                        // Try to extract numeric values from various formats
+                        let values = [];
+                        if (typeof rawData === 'number') {
+                            values = [rawData];
+                        } else if (Array.isArray(rawData)) {
+                            // Flatten if nested array
+                            values = rawData.flat().filter(v => typeof v === 'number');
+                        } else if (typeof rawData === 'object' && rawData !== null) {
+                            // Try to find array or number in object
+                            const possibleKeys = ['value', 'values', 'data', 'snc', 'magnitude', 'samples'];
+                            for (const key of possibleKeys) {
+                                if (rawData[key] !== undefined) {
+                                    const val = rawData[key];
+                                    if (Array.isArray(val)) {
+                                        values = val.flat().filter(v => typeof v === 'number');
+                                    } else if (typeof val === 'number') {
+                                        values = [val];
+                                    }
+                                    if (values.length > 0) break;
+                                }
+                            }
+                            // If still empty, try all numeric values in object
+                            if (values.length === 0) {
+                                values = Object.values(rawData).filter(v => typeof v === 'number');
+                            }
+                        }
+                        // Calculate magnitude from values
+                        if (values.length > 0) {
+                            // RMS (root mean square) for EMG signal
+                            const sumSquares = values.reduce((sum, v) => sum + v * v, 0);
+                            magnitude = Math.sqrt(sumSquares / values.length);
+                        }
+                        // SNC is in range -1 to 1, so magnitude should be 0 to 1
+                        // But clamp just in case
+                        magnitude = Math.max(0, Math.min(1, magnitude));
+                        // Update live indicator on title screen
+                        this.updatePressureIndicator(magnitude);
+                        // Store for tracking
+                        this.lastPressure = magnitude;
+                        this.lastPressureTime = performance.now();
+                        if (magnitude > this.pressureThreshold && !this.pressureActive) {
+                            // Signal exceeded threshold - trigger jump
+                            this.pressureActive = true;
+                            this.handleMudraInput(performance.now());
+                        } else if (magnitude <= this.pressureThreshold) {
+                            // Signal dropped - allow next trigger
+                            this.pressureActive = false;
+                        }
+                    }
+                } catch (e) {
+                    console.error('Error parsing Mudra message:', e);
+                }
+            };
+            this.ws.onclose = () => {
+                console.log('Mudra connection closed');
+                this.setMudraConnected(false);
+                // Attempt reconnection after 3 seconds
+                setTimeout(() => this.connectMudra(), 3000);
+            };
+            this.ws.onerror = (error) => {
+                console.error('Mudra WebSocket error:', error);
+                this.setMudraConnected(false);
+            };
+        } catch (e) {
+            console.error('Failed to connect to Mudra:', e);
+            this.setMudraConnected(false);
+        }
+    }
+    setMudraConnected(connected) {
+        this.mudraConnected = connected;
+        const dots = document.querySelectorAll('.status-dot');
+        const texts = [
+            document.getElementById('mudra-status-text'),
+            document.getElementById('title-mudra-text')
+        ];
+        dots.forEach(dot => {
+            dot.classList.toggle('connected', connected);
+            dot.classList.toggle('disconnected', !connected);
+        });
+        texts.forEach(text => {
+            if (text) {
+                text.textContent = connected ? 'Mudra: Connected' : 'Mudra: Disconnected';
+            }
+        });
+    }
+    updatePressureIndicator(pressure) {
+        const pressureBar = document.getElementById('pressure-bar');
+        if (pressureBar) {
+            // Clamp pressure to 0-1 range and convert to percentage
+            const clampedPressure = Math.max(0, Math.min(1, pressure));
+            pressureBar.style.width = `${clampedPressure * 100}%`;
+            // Add visual feedback when threshold is exceeded
+            if (pressure > this.pressureThreshold) {
+                pressureBar.classList.add('triggered');
+            } else {
+                pressureBar.classList.remove('triggered');
+            }
+        }
+    }
+    handleMudraInput(timestamp) {
+        if (this.gameStatus !== 'running') return;
+        if (this.ghostJumping) return; // Already jumping
+        // Record reaction time if in reaction window
+        if (this.reactionWindowOpen && this.currentObstacle && !this.currentObstacle.ghostJumped) {
+            const reactionTime = timestamp - this.currentObstacle.reactionWindowStart;
+            this.mudraReactions.push(reactionTime);
+            this.mudraTime = timestamp;
+            this.currentObstacle.ghostJumped = true;
+        }
+        // Trigger ghost jump
+        this.ghostJumping = true;
+        this.ghostJumpVelocity = this.jumpForce;
+        // Add particles for ghost jump
+        this.addJumpParticles(this.runnerX + this.ghostOffset, this.runnerY, true);
+    }
+    handleMouseClick(e) {
+        if (this.gameStatus !== 'running') return;
+        if (this.physicalJumping) return; // Already jumping
+        const timestamp = performance.now();
+        // Record reaction time if in reaction window
+        if (this.reactionWindowOpen && this.currentObstacle && !this.currentObstacle.physicalJumped) {
+            const reactionTime = timestamp - this.currentObstacle.reactionWindowStart;
+            this.mouseReactions.push(reactionTime);
+            this.mouseTime = timestamp;
+            this.currentObstacle.physicalJumped = true;
+            // Calculate delta if both inputs received
+            if (this.mudraTime !== null) {
+                const delta = this.mouseTime - this.mudraTime;
+                if (delta > 0) {
+                    this.totalAdvantage += delta;
+                    this.reactions.push({
+                        mudraTime: this.mudraTime,
+                        mouseTime: this.mouseTime,
+                        delta: delta
+                    });
+                    this.showDeltaFlash(delta);
+                }
+            }
+        }
+        // Trigger physical jump
+        this.physicalJumping = true;
+        this.physicalJumpVelocity = this.jumpForce;
+        // Add particles for physical jump
+        this.addJumpParticles(this.runnerX, this.runnerY, false);
+    }
+    showDeltaFlash(delta) {
+        const flash = document.getElementById('delta-flash');
+        flash.textContent = `+${Math.round(delta)}ms`;
+        flash.classList.remove('show');
+        void flash.offsetWidth; // Force reflow
+        flash.classList.add('show');
+        if (this.deltaFlashTimeout) {
+            clearTimeout(this.deltaFlashTimeout);
+        }
+        this.deltaFlashTimeout = setTimeout(() => {
+            flash.classList.remove('show');
+        }, 800);
+    }
+    addJumpParticles(x, y, isGhost) {
+        const color = isGhost ? { r: 0, g: 255, b: 255 } : { r: 255, g: 255, b: 255 };
+        for (let i = 0; i < 10; i++) {
+            this.particles.push({
+                x: x,
+                y: y,
+                vx: (Math.random() - 0.5) * 8,
+                vy: Math.random() * -5 - 2,
+                life: 1,
+                color: color,
+                isGhost: isGhost
+            });
+        }
+    }
+    startGame() {
+        document.getElementById('title-screen').classList.add('hidden');
+        document.getElementById('countdown').classList.remove('hidden');
+        this.gameStatus = 'countdown';
+        let count = 3;
+        const countdownEl = document.getElementById('countdown-number');
+        const countdownInterval = setInterval(() => {
+            count--;
+            if (count > 0) {
+                countdownEl.textContent = count;
+            } else if (count === 0) {
+                countdownEl.textContent = 'GO!';
+            } else {
+                clearInterval(countdownInterval);
+                document.getElementById('countdown').classList.add('hidden');
+                this.gameStatus = 'running';
+                this.lastObstacleSpawn = performance.now();
+                this.lastSpeedIncrement = performance.now();
+            }
+        }, 1000);
+    }
+    restartGame() {
+        // Reset all state
+        this.lives = 3;
+        this.distance = 0;
+        this.speed = this.baseSpeed;
+        this.totalAdvantage = 0;
+        this.ghostLead = 0;
+        this.reactions = [];
+        this.ghostSaves = 0;
+        this.obstacles = [];
+        this.obstaclesPassed = 0;
+        this.obstacleInterval = 2500;
+        this.mudraReactions = [];
+        this.mouseReactions = [];
+        this.ghostCleared = 0;
+        this.physicalCleared = 0;
+        this.particles = [];
+        this.speedLines = [];
+        this.physicalJumping = false;
+        this.physicalJumpHeight = 0;
+        this.ghostJumping = false;
+        this.ghostJumpHeight = 0;
+        this.physicalStumble = 0;
+        this.ghostStumble = 0;
+        this.currentObstacle = null;
+        this.mudraTime = null;
+        this.mouseTime = null;
+        this.reactionWindowOpen = false;
+        this.finishLineX = null;
+        this.victory = false;
+        // Reset UI
+        this.updateLivesDisplay();
+        document.getElementById('end-screen').classList.add('hidden');
+        this.startGame();
+    }
+    endGame(isVictory = false) {
+        this.gameStatus = 'ended';
+        this.victory = isVictory;
+        this.showEndScreen();
+    }
+    showEndScreen() {
+        const endScreen = document.getElementById('end-screen');
+        const endTitle = document.getElementById('end-title');
+        // Update title based on victory or defeat
+        if (endTitle) {
+            endTitle.textContent = this.victory ? 'Victory!' : 'Run Complete';
+            endTitle.style.color = this.victory ? '#2ed573' : '#fff';
+        }
+        // Calculate stats
+        const mudraAvg = this.mudraReactions.length > 0
+            ? Math.round(this.mudraReactions.reduce((a, b) => a + b, 0) / this.mudraReactions.length)
+            : '--';
+        const mouseAvg = this.mouseReactions.length > 0
+            ? Math.round(this.mouseReactions.reduce((a, b) => a + b, 0) / this.mouseReactions.length)
+            : '--';
+        const mudraFastest = this.mudraReactions.length > 0
+            ? Math.round(Math.min(...this.mudraReactions))
+            : '--';
+        const mouseFastest = this.mouseReactions.length > 0
+            ? Math.round(Math.min(...this.mouseReactions))
+            : '--';
+        // Update stats display
+        document.getElementById('end-mudra-avg').textContent = mudraAvg !== '--' ? `${mudraAvg}ms` : '--ms';
+        document.getElementById('end-mouse-avg').textContent = mouseAvg !== '--' ? `${mouseAvg}ms` : '--ms';
+        document.getElementById('end-mudra-fastest').textContent = mudraFastest !== '--' ? `${mudraFastest}ms` : '--ms';
+        document.getElementById('end-mouse-fastest').textContent = mouseFastest !== '--' ? `${mouseFastest}ms` : '--ms';
+        document.getElementById('end-mudra-cleared').textContent = this.ghostCleared;
+        document.getElementById('end-mouse-cleared').textContent = this.physicalCleared;
+        // Advantage summary
+        const avgSpeed = (this.baseSpeed + this.speed) / 2;
+        const distanceEquiv = (this.totalAdvantage / 1000) * avgSpeed;
+        const avgDelta = this.reactions.length > 0
+            ? Math.round(this.reactions.reduce((a, b) => a + b.delta, 0) / this.reactions.length)
+            : 0;
+        document.getElementById('total-time-saved').textContent = `${Math.round(this.totalAdvantage)}ms`;
+        document.getElementById('distance-equivalent').textContent = `${distanceEquiv.toFixed(1)}m`;
+        document.getElementById('ghost-saves').textContent = this.ghostSaves;
+        document.getElementById('avg-delta').textContent = `${avgDelta}ms`;
+        // Summary message
+        let message = '';
+        if (this.victory) {
+            message = `You crossed the finish line! `;
+            if (this.reactions.length > 0 && avgDelta > 0) {
+                message += `Your intent was ${avgDelta}ms faster on average, saving ${distanceEquiv.toFixed(1)} meters.`;
+            }
+        } else if (this.reactions.length > 0 && avgDelta > 0) {
+            message = `Your intent was ${avgDelta}ms faster on average. Over this run, thinking beat doing by ${distanceEquiv.toFixed(1)} meters.`;
+        } else if (!this.mudraConnected) {
+            message = `Mudra wasn't connected. Connect to see the gap between thought and action.`;
+        } else {
+            message = `Keep practicing! Try to react with both intent and action to see the difference.`;
+        }
+        document.getElementById('summary-message').textContent = message;
+        endScreen.classList.remove('hidden');
+    }
+    updateLivesDisplay() {
+        const hearts = document.querySelectorAll('.heart');
+        hearts.forEach((heart, i) => {
+            heart.classList.toggle('lost', i >= this.lives);
+        });
+    }
+    spawnObstacle() {
+        const obstacle = {
+            x: this.canvas.width + 100,
+            width: 30 + Math.random() * 20,
+            height: 60 + Math.random() * 30,
+            reactionWindowStart: null,
+            ghostJumped: false,
+            physicalJumped: false,
+            ghostCleared: false,
+            physicalCleared: false,
+            ghostHit: false,
+            physicalHit: false,
+            processed: false
+        };
+        this.obstacles.push(obstacle);
+    }
+    update(deltaTime) {
+        if (this.gameStatus !== 'running') return;
+        const now = performance.now();
+        // Update distance
+        this.distance += this.speed * (deltaTime / 1000);
+        // Check for finish line
+        const pixelsPerMeter = 50;
+        const distanceToFinish = this.finishDistance - this.distance;
+        // Spawn finish line when close (within screen width + buffer)
+        if (distanceToFinish > 0 && distanceToFinish < 30 && this.finishLineX === null) {
+            this.finishLineX = this.canvas.width + distanceToFinish * pixelsPerMeter;
+        }
+        // Update finish line position
+        if (this.finishLineX !== null) {
+            this.finishLineX -= this.speed * pixelsPerMeter * (deltaTime / 1000);
+            // Check if runner crossed finish line
+            if (this.finishLineX < this.runnerX) {
+                this.endGame(true); // Victory!
+                return;
+            }
+        }
+        // Stop spawning obstacles when close to finish
+        const shouldSpawnObstacles = distanceToFinish > 50; // Stop spawning 50m before finish
+        // Update speed over time
+        if (now - this.lastSpeedIncrement > this.speedIncrementInterval * 1000) {
+            if (this.speed < this.maxSpeed) {
+                this.speed = Math.min(this.speed + this.speedIncrement, this.maxSpeed);
+                // Also decrease obstacle interval
+                this.obstacleInterval = Math.max(
+                    this.minObstacleInterval,
+                    this.obstacleInterval - 100
+                );
+            }
+            this.lastSpeedIncrement = now;
+        }
+        // Update ghost lead based on total advantage
+        // Convert ms to distance: distance = time(s) * speed(m/s) * pixels_per_meter
+        this.ghostLead = (this.totalAdvantage / 1000) * this.speed * pixelsPerMeter;
+        this.ghostOffset = Math.min(this.ghostLead, 300); // Cap visual offset
+        // Spawn obstacles (but not near finish line)
+        if (now - this.lastObstacleSpawn > this.obstacleInterval && shouldSpawnObstacles) {
+            this.spawnObstacle();
+            this.lastObstacleSpawn = now;
+        }
+        // Update obstacles
+        const obstacleSpeed = this.speed * pixelsPerMeter * (deltaTime / 1000);
+        for (let i = this.obstacles.length - 1; i >= 0; i--) {
+            const obs = this.obstacles[i];
+            obs.x -= obstacleSpeed;
+            // Open reaction window when obstacle enters reaction zone
+            const reactionZone = this.runnerX + 400;
+            if (obs.x <= reactionZone && obs.reactionWindowStart === null) {
+                obs.reactionWindowStart = now;
+                this.currentObstacle = obs;
+                this.reactionWindowOpen = true;
+                this.mudraTime = null;
+                this.mouseTime = null;
+            }
+            // Check collisions
+            const ghostX = this.runnerX + this.ghostOffset;
+            const runnerWidth = 40;
+            const runnerHeight = 60;
+            const jumpThreshold = obs.height - 10;
+            // Ghost collision check - is ghost overlapping obstacle?
+            const ghostOverlapping = obs.x < ghostX + runnerWidth && obs.x + obs.width > ghostX;
+            if (ghostOverlapping && !obs.ghostCleared && !obs.ghostHit) {
+                if (this.ghostJumpHeight >= jumpThreshold) {
+                    // Ghost jumped high enough - cleared!
+                    obs.ghostCleared = true;
+                    this.ghostCleared++;
+                } else {
+                    // Ghost hit the obstacle
+                    obs.ghostHit = true;
+                    this.ghostStumble = 30; // Stumble animation frames
+                }
+            }
+            // Physical runner collision check - is runner overlapping obstacle?
+            const physicalOverlapping = obs.x < this.runnerX + runnerWidth && obs.x + obs.width > this.runnerX;
+            if (physicalOverlapping && !obs.physicalCleared && !obs.physicalHit) {
+                if (this.physicalJumpHeight >= jumpThreshold) {
+                    // Runner jumped high enough - cleared!
+                    obs.physicalCleared = true;
+                    this.physicalCleared++;
+                } else {
+                    // Runner hit the obstacle!
+                    obs.physicalHit = true;
+                    obs.processed = true;
+                    this.lives--;
+                    this.updateLivesDisplay();
+                    this.screenShake = 15;
+                    this.physicalStumble = 30; // Stumble animation frames
+                    // Check if ghost saved (ghost cleared but physical didn't)
+                    if (obs.ghostCleared) {
+                        this.ghostSaves++;
+                        this.showMessage("Intent cleared it. Body didn't.");
+                    }
+                    if (this.lives <= 0) {
+                        this.endGame();
+                        return;
+                    }
+                }
+            }
+            // Close reaction window and count obstacle when it passes
+            if (obs.x + obs.width < this.runnerX && !obs.processed) {
+                obs.processed = true;
+                this.obstaclesPassed++;
+                this.reactionWindowOpen = false;
+                this.currentObstacle = null;
+            }
+            // Remove off-screen obstacles
+            if (obs.x + obs.width < -100) {
+                this.obstacles.splice(i, 1);
+            }
+        }
+        // Update jumps
+        if (this.physicalJumping) {
+            this.physicalJumpHeight += this.physicalJumpVelocity;
+            this.physicalJumpVelocity -= this.gravity;
+            if (this.physicalJumpHeight <= 0) {
+                this.physicalJumpHeight = 0;
+                this.physicalJumping = false;
+                this.physicalJumpVelocity = 0;
+            }
+        }
+        if (this.ghostJumping) {
+            this.ghostJumpHeight += this.ghostJumpVelocity;
+            this.ghostJumpVelocity -= this.gravity;
+            if (this.ghostJumpHeight <= 0) {
+                this.ghostJumpHeight = 0;
+                this.ghostJumping = false;
+                this.ghostJumpVelocity = 0;
+            }
+        }
+        // Update particles
+        for (let i = this.particles.length - 1; i >= 0; i--) {
+            const p = this.particles[i];
+            p.x += p.vx;
+            p.y += p.vy;
+            p.vy += 0.2;
+            p.life -= 0.02;
+            if (p.life <= 0) {
+                this.particles.splice(i, 1);
+            }
+        }
+        // Update speed lines
+        if (Math.random() < 0.3) {
+            this.speedLines.push({
+                x: this.canvas.width,
+                y: Math.random() * this.canvas.height,
+                length: 50 + Math.random() * 100,
+                speed: this.speed * 10
+            });
+        }
+        for (let i = this.speedLines.length - 1; i >= 0; i--) {
+            this.speedLines[i].x -= this.speedLines[i].speed * (deltaTime / 1000);
+            if (this.speedLines[i].x + this.speedLines[i].length < 0) {
+                this.speedLines.splice(i, 1);
+            }
+        }
+        // Update grid offset for scrolling effect
+        this.gridOffset = (this.gridOffset + obstacleSpeed) % 100;
+        // Update screen shake
+        if (this.screenShake > 0) {
+            this.screenShake *= 0.9;
+            if (this.screenShake < 0.1) this.screenShake = 0;
+        }
+        // Update stumble timers
+        if (this.physicalStumble > 0) this.physicalStumble--;
+        if (this.ghostStumble > 0) this.ghostStumble--;
+        // Update animation frame
+        this.frameCount++;
+        if (this.frameCount % 6 === 0) {
+            this.runFrame = (this.runFrame + 1) % 4;
+        }
+        // Update HUD
+        this.updateHUD();
+    }
+    showMessage(text) {
+        let flash = document.getElementById('message-flash');
+        if (!flash) {
+            flash = document.createElement('div');
+            flash.id = 'message-flash';
+            document.getElementById('game-container').appendChild(flash);
+        }
+        flash.textContent = text;
+        flash.classList.remove('show');
+        void flash.offsetWidth;
+        flash.classList.add('show');
+    }
+    updateHUD() {
+        document.getElementById('distance-value').textContent = `${Math.floor(this.distance)}m / ${this.finishDistance}m`;
+        document.getElementById('speed-value').textContent = `${this.speed.toFixed(1)} m/s`;
+        document.getElementById('lead-value').textContent = `+${(this.ghostLead / 50).toFixed(1)}m`;
+        document.getElementById('obstacles-value').textContent = this.obstaclesPassed;
+        if (this.mudraReactions.length > 0) {
+            const avg = Math.round(this.mudraReactions.reduce((a, b) => a + b, 0) / this.mudraReactions.length);
+            document.getElementById('mudra-avg').textContent = `${avg}ms`;
+        }
+        if (this.mouseReactions.length > 0) {
+            const avg = Math.round(this.mouseReactions.reduce((a, b) => a + b, 0) / this.mouseReactions.length);
+            document.getElementById('mouse-avg').textContent = `${avg}ms`;
+        }
+    }
+    render() {
+        const ctx = this.ctx;
+        // Apply screen shake
+        ctx.save();
+        if (this.screenShake > 0) {
+            ctx.translate(
+                (Math.random() - 0.5) * this.screenShake,
+                (Math.random() - 0.5) * this.screenShake
+            );
+        }
+        // Clear canvas
+        ctx.fillStyle = '#0a0a0f';
+        ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        // Draw grid background
+        this.drawGrid();
+        // Draw speed lines
+        this.drawSpeedLines();
+        // Draw ground
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(0, this.groundY);
+        ctx.lineTo(this.canvas.width, this.groundY);
+        ctx.stroke();
+        // Draw obstacles
+        this.drawObstacles();
+        // Draw finish line
+        if (this.finishLineX !== null) {
+            this.drawFinishLine();
+        }
+        // Draw tether between runners
+        if (this.ghostOffset > 10) {
+            this.drawTether();
+        }
+        // Draw ghost runner (behind, but visually ahead)
+        this.drawRunner(
+            this.runnerX + this.ghostOffset,
+            this.groundY - this.ghostJumpHeight,
+            true
+        );
+        // Draw physical runner
+        this.drawRunner(
+            this.runnerX,
+            this.groundY - this.physicalJumpHeight,
+            false
+        );
+        // Draw particles
+        this.drawParticles();
+        ctx.restore();
+    }
+    drawGrid() {
+        const ctx = this.ctx;
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
+        ctx.lineWidth = 1;
+        // Vertical lines (moving for parallax)
+        for (let x = -this.gridOffset; x < this.canvas.width + 100; x += 100) {
+            ctx.beginPath();
+            ctx.moveTo(x, this.groundY - 200);
+            ctx.lineTo(x, this.groundY);
+            ctx.stroke();
+        }
+        // Horizontal lines
+        for (let y = this.groundY - 200; y <= this.groundY; y += 50) {
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(this.canvas.width, y);
+            ctx.stroke();
+        }
+    }
+    drawSpeedLines() {
+        const ctx = this.ctx;
+        const intensity = (this.speed - this.baseSpeed) / (this.maxSpeed - this.baseSpeed);
+        ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 + intensity * 0.2})`;
+        ctx.lineWidth = 1;
+        for (const line of this.speedLines) {
+            ctx.beginPath();
+            ctx.moveTo(line.x, line.y);
+            ctx.lineTo(line.x + line.length, line.y);
+            ctx.stroke();
+        }
+    }
+    drawObstacles() {
+        const ctx = this.ctx;
+        for (const obs of this.obstacles) {
+            // Main obstacle
+            ctx.fillStyle = '#ff4757';
+            ctx.fillRect(obs.x, this.groundY - obs.height, obs.width, obs.height);
+            // Highlight
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+            ctx.fillRect(obs.x, this.groundY - obs.height, obs.width, 5);
+            // Glow
+            ctx.shadowColor = '#ff4757';
+            ctx.shadowBlur = 20;
+            ctx.fillStyle = 'transparent';
+            ctx.fillRect(obs.x, this.groundY - obs.height, obs.width, obs.height);
+            ctx.shadowBlur = 0;
+        }
+    }
+    drawFinishLine() {
+        const ctx = this.ctx;
+        const x = this.finishLineX;
+        const flagHeight = 150;
+        const flagWidth = 80;
+        const poleHeight = flagHeight + 50;
+        // Draw pole
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(x - 3, this.groundY - poleHeight, 6, poleHeight);
+        // Draw checkered flag
+        const squareSize = 10;
+        for (let row = 0; row < flagHeight / squareSize; row++) {
+            for (let col = 0; col < flagWidth / squareSize; col++) {
+                const isWhite = (row + col) % 2 === 0;
+                ctx.fillStyle = isWhite ? '#fff' : '#000';
+                ctx.fillRect(
+                    x + 3 + col * squareSize,
+                    this.groundY - poleHeight + row * squareSize,
+                    squareSize,
+                    squareSize
+                );
+            }
+        }
+        // Draw "FINISH" text
+        ctx.font = 'bold 24px Courier New';
+        ctx.fillStyle = '#2ed573';
+        ctx.textAlign = 'center';
+        ctx.shadowColor = '#2ed573';
+        ctx.shadowBlur = 20;
+        ctx.fillText('FINISH', x + flagWidth / 2, this.groundY - poleHeight - 20);
+        ctx.shadowBlur = 0;
+        // Draw finish line on ground
+        ctx.strokeStyle = '#2ed573';
+        ctx.lineWidth = 4;
+        ctx.setLineDash([10, 10]);
+        ctx.beginPath();
+        ctx.moveTo(x, this.groundY - 200);
+        ctx.lineTo(x, this.groundY);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        // Distance remaining indicator
+        const distanceToFinish = Math.max(0, this.finishDistance - this.distance);
+        if (distanceToFinish > 0 && distanceToFinish < 100) {
+            ctx.font = 'bold 18px Courier New';
+            ctx.fillStyle = '#2ed573';
+            ctx.textAlign = 'center';
+            ctx.fillText(`${Math.ceil(distanceToFinish)}m to go!`, x, this.groundY + 40);
+        }
+    }
+    drawTether() {
+        const ctx = this.ctx;
+        const startX = this.runnerX + 20;
+        const startY = this.groundY - this.physicalJumpHeight - 30;
+        const endX = this.runnerX + this.ghostOffset + 20;
+        const endY = this.groundY - this.ghostJumpHeight - 30;
+        // Create gradient for tether
+        const gradient = ctx.createLinearGradient(startX, startY, endX, endY);
+        gradient.addColorStop(0, 'rgba(255, 255, 255, 0.5)');
+        gradient.addColorStop(1, 'rgba(0, 255, 255, 0.8)');
+        ctx.strokeStyle = gradient;
+        ctx.lineWidth = 3;
+        ctx.setLineDash([5, 5]);
+        ctx.beginPath();
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        // Draw distance label
+        const midX = (startX + endX) / 2;
+        const midY = Math.min(startY, endY) - 20;
+        const leadDistance = (this.ghostLead / 50).toFixed(1);
+        ctx.font = 'bold 14px Courier New';
+        ctx.fillStyle = '#00ffff';
+        ctx.textAlign = 'center';
+        ctx.shadowColor = '#00ffff';
+        ctx.shadowBlur = 10;
+        ctx.fillText(`+${leadDistance}m`, midX, midY);
+        ctx.shadowBlur = 0;
+    }
+    drawRunner(x, y, isGhost) {
+        const ctx = this.ctx;
+        const width = 40;
+        const height = 60;
+        // Check if stumbling
+        const isStumbling = isGhost ? this.ghostStumble > 0 : this.physicalStumble > 0;
+        ctx.save();
+        // Apply stumble effect (red tint and wobble)
+        if (isStumbling) {
+            const wobble = Math.sin(this.frameCount * 0.5) * 5;
+            ctx.translate(wobble, 0);
+        }
+        if (isGhost) {
+            // Ghost effect
+            ctx.globalAlpha = isStumbling ? 0.4 : 0.7;
+            ctx.shadowColor = isStumbling ? '#ff4757' : '#00ffff';
+            ctx.shadowBlur = 30;
+            // Motion blur effect
+            for (let i = 3; i > 0; i--) {
+                ctx.globalAlpha = 0.1 * i;
+                this.drawRunnerBody(x - i * 8, y, width, height, isGhost, isStumbling);
+            }
+            ctx.globalAlpha = isStumbling ? 0.4 : 0.7;
+        }
+        this.drawRunnerBody(x, y, width, height, isGhost, isStumbling);
+        ctx.restore();
+    }
+    drawRunnerBody(x, y, width, height, isGhost, isStumbling = false) {
+        const ctx = this.ctx;
+        const color = isStumbling ? '#ff4757' : (isGhost ? '#00ffff' : '#ffffff');
+        const secondaryColor = isStumbling ? '#ff6b7a' : (isGhost ? '#a855f7' : '#cccccc');
+        // Body
+        ctx.fillStyle = color;
+        ctx.fillRect(x, y - height, width * 0.6, height * 0.5);
+        // Head
+        ctx.beginPath();
+        ctx.arc(x + width * 0.3, y - height - 10, 12, 0, Math.PI * 2);
+        ctx.fill();
+        // Legs (animated)
+        const legOffset = Math.sin(this.runFrame * Math.PI / 2) * 15;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 6;
+        ctx.lineCap = 'round';
+        // Back leg
+        ctx.beginPath();
+        ctx.moveTo(x + width * 0.3, y - height * 0.5);
+        ctx.lineTo(x + width * 0.3 - legOffset, y);
+        ctx.stroke();
+        // Front leg
+        ctx.beginPath();
+        ctx.moveTo(x + width * 0.3, y - height * 0.5);
+        ctx.lineTo(x + width * 0.3 + legOffset, y);
+        ctx.stroke();
+        // Arms (animated opposite to legs)
+        ctx.strokeStyle = secondaryColor;
+        ctx.lineWidth = 4;
+        // Back arm
+        ctx.beginPath();
+        ctx.moveTo(x + width * 0.3, y - height * 0.7);
+        ctx.lineTo(x + width * 0.3 + legOffset * 0.7, y - height * 0.4);
+        ctx.stroke();
+        // Front arm
+        ctx.beginPath();
+        ctx.moveTo(x + width * 0.3, y - height * 0.7);
+        ctx.lineTo(x + width * 0.3 - legOffset * 0.7, y - height * 0.4);
+        ctx.stroke();
+    }
+    drawParticles() {
+        const ctx = this.ctx;
+        for (const p of this.particles) {
+            ctx.globalAlpha = p.life;
+            ctx.fillStyle = `rgb(${p.color.r}, ${p.color.g}, ${p.color.b})`;
+            if (p.isGhost) {
+                ctx.shadowColor = `rgb(${p.color.r}, ${p.color.g}, ${p.color.b})`;
+                ctx.shadowBlur = 10;
+            }
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, 3 * p.life, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.shadowBlur = 0;
+        }
+        ctx.globalAlpha = 1;
+    }
+    gameLoop() {
+        const now = performance.now();
+        const deltaTime = now - this.lastTime;
+        this.lastTime = now;
+        this.update(deltaTime);
+        this.render();
+        requestAnimationFrame(() => this.gameLoop());
+    }
+}
+// Initialize game when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    new IntentRunner();
+});
+    </script>
+</body>
+</html>