/**
 * Interactive Task Manager - Handles advanced task types with user interaction
 * Supports mini-games, interactive elements, progress tracking, and dynamic content
 */

class InteractiveTaskManager {
    constructor(gameInstance) {
        this.game = gameInstance;
        this.currentInteractiveTask = null;
        this.taskContainer = null;
        this.isInteractiveTaskActive = false;
        
        // Initialize TTS voice manager (will be loaded when needed)
        this.voiceManager = null;
        this.ttsEnabled = false;
        this.initializeTTS();
        
        // Task type registry
        this.taskTypes = new Map();
        this.registerBuiltInTaskTypes();
    }

    /**
     * Initialize TTS system
     */
    async initializeTTS() {
        try {
            // Check if VoiceManager is available globally
            if (window.VoiceManager) {
                this.voiceManager = new window.VoiceManager();
                if (this.voiceManager.isSupported()) {
                    await this.voiceManager.initialize();
                    this.ttsEnabled = true;
                    console.log('🎤 TTS initialized with voice:', this.voiceManager.getVoiceInfo().name);
                } else {
                    console.warn('TTS not supported in this environment');
                }
            } else {
                console.log('VoiceManager not available, TTS disabled');
            }
        } catch (error) {
            console.error('Failed to initialize TTS:', error);
        }
    }

    /**
     * Register all built-in interactive task types
     */
    registerBuiltInTaskTypes() {
        // Rhythm tasks removed per user request

        // Input Tasks
        // Focus/Concentration Tasks
        this.registerTaskType('focus-hold', {
            name: 'Focus Hold',
            description: 'Maintain focus on a target for set duration',
            handler: this.createFocusTask.bind(this),
            validator: this.validateFocusTask.bind(this)
        });

        // Scenario Builder Tasks
        this.registerTaskType('scenario-adventure', {
            name: 'Choose Your Own Adventure',
            description: 'Interactive storylines with meaningful choices',
            handler: this.createScenarioTask.bind(this),
            validator: this.validateScenarioTask.bind(this)
        });

        // Mirror tasks
        this.registerTaskType('mirror-task', {
            name: 'Webcam Mirror Task',
            description: 'Use webcam as mirror for self-viewing tasks',
            handler: this.createMirrorTask.bind(this),
            validator: this.validateMirrorTask.bind(this)
        });

        // Academy Training Tasks
        this.registerTaskType('edge', {
            name: 'Edge Training',
            description: 'Complete specified number of edges',
            handler: this.createEdgeTask.bind(this),
            validator: this.validateEdgeTask.bind(this)
        });

        this.registerTaskType('rhythm', {
            name: 'Rhythm Pattern',
            description: 'Follow a specific stroking rhythm',
            handler: this.createRhythmTask.bind(this),
            validator: this.validateRhythmTask.bind(this)
        });

        this.registerTaskType('add-library-directory', {
            name: 'Add Library Directory',
            description: 'Add a directory to your media library',
            handler: this.createAddLibraryTask.bind(this),
            validator: this.validateAddLibraryTask.bind(this)
        });

        this.registerTaskType('tag-files', {
            name: 'Tag Files',
            description: 'Tag files in your library',
            handler: this.createTagFilesTask.bind(this),
            validator: this.validateTagFilesTask.bind(this)
        });

        this.registerTaskType('enable-webcam', {
            name: 'Enable Webcam',
            description: 'Activate webcam for mirror viewing',
            handler: this.createEnableWebcamTask.bind(this),
            validator: this.validateEnableWebcamTask.bind(this)
        });

        this.registerTaskType('dual-video', {
            name: 'Dual Video',
            description: 'Watch two videos simultaneously',
            handler: this.createDualVideoTask.bind(this),
            validator: this.validateDualVideoTask.bind(this)
        });

        this.registerTaskType('tts-command', {
            name: 'TTS Command',
            description: 'Receive voice commands via text-to-speech',
            handler: this.createTTSCommandTask.bind(this),
            validator: this.validateTTSCommandTask.bind(this)
        });

        this.registerTaskType('quad-video', {
            name: 'Quad Video',
            description: 'Watch four videos simultaneously',
            handler: this.createQuadVideoTask.bind(this),
            validator: this.validateQuadVideoTask.bind(this)
        });

        this.registerTaskType('hypno-spiral', {
            name: 'Hypno Spiral',
            description: 'View hypnotic spiral overlay',
            handler: this.createHypnoSpiralTask.bind(this),
            validator: this.validateHypnoSpiralTask.bind(this)
        });

        this.registerTaskType('video-start', {
            name: 'Start Video',
            description: 'Start a video player',
            handler: this.createVideoStartTask.bind(this),
            validator: this.validateVideoStartTask.bind(this)
        });

        this.registerTaskType('update-preferences', {
            name: 'Update Preferences',
            description: 'Update Academy preferences at checkpoint',
            handler: this.createUpdatePreferencesTask.bind(this),
            validator: this.validateUpdatePreferencesTask.bind(this)
        });

        this.registerTaskType('free-edge-session', {
            name: 'Free Edge Session',
            description: 'Free-form edging session with features enabled',
            handler: this.createFreeEdgeSessionTask.bind(this),
            validator: this.validateFreeEdgeSessionTask.bind(this)
        });

        // Advanced Training Arc Actions (Levels 11-20)
        this.registerTaskType('hypno-caption-combo', {
            name: 'Hypno Caption Combo',
            description: 'Hypno spiral with timed caption overlays',
            handler: this.createHypnoCaptionComboTask.bind(this),
            validator: this.validateTimedTask.bind(this)
        });

        this.registerTaskType('dynamic-captions', {
            name: 'Dynamic Captions',
            description: 'Preference-based caption display',
            handler: this.createDynamicCaptionsTask.bind(this),
            validator: this.validateTimedTask.bind(this)
        });

        this.registerTaskType('tts-hypno-sync', {
            name: 'TTS Hypno Sync',
            description: 'Voice commands synchronized with hypno spiral',
            handler: this.createTTSHypnoSyncTask.bind(this),
            validator: this.validateTimedTask.bind(this)
        });

        this.registerTaskType('sensory-overload', {
            name: 'Sensory Overload',
            description: 'All features combined in one session',
            handler: this.createSensoryOverloadTask.bind(this),
            validator: this.validateTimedTask.bind(this)
        });

        this.registerTaskType('enable-interruptions', {
            name: 'Enable Interruptions',
            description: 'Activate random interruption system',
            handler: this.createEnableInterruptionsTask.bind(this),
            validator: this.validateInstantTask.bind(this)
        });

        this.registerTaskType('denial-training', {
            name: 'Denial Training',
            description: 'Timed stroking/stopping periods',
            handler: this.createDenialTrainingTask.bind(this),
            validator: this.validateTimedTask.bind(this)
        });

        this.registerTaskType('stop-stroking', {
            name: 'Stop Stroking',
            description: 'Enforced hands-off period',
            handler: this.createStopStrokingTask.bind(this),
            validator: this.validateTimedTask.bind(this)
        });

        this.registerTaskType('enable-popups', {
            name: 'Enable Popups',
            description: 'Activate random popup image system',
            handler: this.createEnablePopupsTask.bind(this),
            validator: this.validateInstantTask.bind(this)
        });

        this.registerTaskType('popup-image', {
            name: 'Popup Image',
            description: 'Display specific popup image',
            handler: this.createPopupImageTask.bind(this),
            validator: this.validateTimedTask.bind(this)
        });
    }

    /**
     * Register a new task type
     */
    registerTaskType(typeId, config) {
        this.taskTypes.set(typeId, {
            id: typeId,
            name: config.name,
            description: config.description,
            handler: config.handler,
            validator: config.validator,
            cleanup: config.cleanup || (() => {})
        });
        console.log(`Registered interactive task type: ${typeId}`);
    }

    /**
     * Check if a task is interactive
     */
    isInteractiveTask(task) {
        return task.hasOwnProperty('interactiveType') && this.taskTypes.has(task.interactiveType);
    }

    /**
     * Display an interactive task
     */
    async displayInteractiveTask(task) {
        if (!this.isInteractiveTask(task)) {
            console.warn('Task is not interactive:', task);
            return false;
        }

        this.currentInteractiveTask = task;
        this.isInteractiveTaskActive = true;

        // Handle task image for interactive tasks
        const taskImage = document.getElementById('task-image');
        if (taskImage && task.image) {
            taskImage.src = task.image;
            taskImage.onerror = () => {
                console.warn('Interactive task image failed to load:', task.image);
                // Create placeholder if image fails
                taskImage.src = this.createPlaceholderImage('Interactive Task');
            };
        } else if (taskImage) {
            taskImage.src = this.createPlaceholderImage('Interactive Task');
        }

        // Get the task container
        this.taskContainer = document.querySelector('.task-display-container');
        
        // Add interactive container
        const interactiveContainer = document.createElement('div');
        interactiveContainer.id = 'interactive-task-container';
        interactiveContainer.className = 'interactive-task-container';
        
        // Insert after task text
        const taskTextContainer = document.querySelector('.task-text-container');
        taskTextContainer.parentNode.insertBefore(interactiveContainer, taskTextContainer.nextSibling);

        // Get task type config and create the interactive element
        const taskType = this.taskTypes.get(task.interactiveType);
        if (taskType && taskType.handler) {
            await taskType.handler(task, interactiveContainer);
        }

        // Hide normal action buttons and show interactive controls
        this.showInteractiveControls();

        return true;
    }

    /**
     * Create placeholder image for interactive tasks
     */
    createPlaceholderImage(text) {
        const canvas = document.createElement('canvas');
        canvas.width = 400;
        canvas.height = 300;
        const ctx = canvas.getContext('2d');
        
        // Create gradient background
        const gradient = ctx.createLinearGradient(0, 0, 400, 300);
        gradient.addColorStop(0, '#667eea');
        gradient.addColorStop(1, '#764ba2');
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 400, 300);
        
        // Add text
        ctx.fillStyle = 'white';
        ctx.font = '24px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, 200, 150);
        
        return canvas.toDataURL();
    }

    /**
     * Show interactive controls and hide standard buttons
     */
    showInteractiveControls() {
        const actionButtons = document.querySelector('.action-buttons');
        const originalButtons = actionButtons.querySelectorAll('button:not(.interactive-btn)');
        
        // Hide original buttons
        originalButtons.forEach(btn => btn.style.display = 'none');
        
        // Add interactive control buttons
        const interactiveControls = document.createElement('div');
        interactiveControls.className = 'interactive-controls';
        interactiveControls.innerHTML = `
            <button id="interactive-complete-btn" class="btn btn-success interactive-btn" disabled>
                Complete Challenge
            </button>
            <button id="interactive-give-up-btn" class="btn btn-danger interactive-btn">
                Give Up
            </button>
            <button id="multi-screen-btn" class="btn btn-primary interactive-btn">
                🎬 Multi-Screen Mode
            </button>
        `;
        
        actionButtons.appendChild(interactiveControls);

        // Add event listeners
        document.getElementById('interactive-complete-btn').addEventListener('click', () => {
            console.log('🎯 Complete Challenge button clicked!');
            console.log('🎯 Current task:', this.game?.gameState?.currentTask?.id);
            console.log('🎯 Is scenario mode:', window.gameModeManager?.isScenarioMode());
            console.log('🎯 Current interactive task:', this.currentInteractiveTask);
            this.completeInteractiveTask();
        });
        document.getElementById('interactive-give-up-btn').addEventListener('click', () => this.giveUpInteractiveTask());
        document.getElementById('multi-screen-btn').addEventListener('click', () => this.openMultiScreenMode());

    }

    /**
     * Validate and complete interactive task
     */
    async completeInteractiveTask() {
        console.log('🔍 CompleteInteractiveTask called - currentInteractiveTask:', this.currentInteractiveTask);
        
        // Check if game is still running - prevent completion after game has ended
        if (!this.game.gameState.isRunning) {
            console.log('Interactive task completion cancelled - game no longer running');
            return;
        }

        // Handle scenario completion even if currentInteractiveTask is null
        if (!this.currentInteractiveTask) {
            console.log('⚠️ No current interactive task found - checking for scenario completion');
            
            // Check if this is a scenario completion
            const currentTask = this.game.gameState.currentTask;
            if (currentTask && currentTask.interactiveType === 'scenario-adventure' && 
                currentTask.scenarioState && currentTask.scenarioState.completed) {
                console.log('✅ Found completed scenario - proceeding with completion');
                this.showFeedback('success', 'Scenario completed successfully! 🎉');
                setTimeout(() => {
                    if (this.game.gameState.isRunning) {
                        this.cleanupInteractiveTask();
                        this.game.completeTask();
                    }
                }, 1500);
                return;
            }
            
            console.log('❌ No current interactive task or completed scenario found!');
            return;
        }

        console.log(`🔍 Attempting to complete interactive task:`, this.currentInteractiveTask);
        console.log(`🔍 Task interactiveType: ${this.currentInteractiveTask.interactiveType}`);
        console.log(`🔍 Task isInterruption: ${this.currentInteractiveTask.isInterruption}`);
        console.log(`🔍 Task scenarioState:`, this.currentInteractiveTask.scenarioState);

        const taskType = this.taskTypes.get(this.currentInteractiveTask.interactiveType);
        console.log(`🔍 Found task type:`, taskType);
        
        if (taskType && taskType.validator) {
            console.log(`🔍 Calling validator for ${this.currentInteractiveTask.interactiveType}`);
            const isValid = await taskType.validator(this.currentInteractiveTask);
            
            if (isValid) {
                // Task completed successfully
                this.showFeedback('success', 'Challenge completed successfully! 🎉');
                setTimeout(() => {
                    // Double-check game is still running before proceeding
                    if (this.game.gameState.isRunning) {
                        // Check if this was a focus interruption task BEFORE cleanup
                        const isInterruption = this.currentInteractiveTask && this.currentInteractiveTask.isInterruption;
                        console.log(`🔍 Is interruption task: ${isInterruption}`);
                        
                        // For interruption tasks, don't fully cleanup - we need the container
                        if (isInterruption) {
                            // Just stop audio and clear task reference, but keep container
                            if (this.game && this.game.audioManager) {
                                console.log('Interruption task cleanup - stopping audio only');
                                this.game.audioManager.stopCategory('tasks', 0);
                                this.game.audioManager.stopCategory('punishments', 0);
                            }
                            this.currentInteractiveTask = null;
                        } else {
                            this.cleanupInteractiveTask();
                        }
                        
                        if (isInterruption) {
                            console.log(`🧘 Resuming scenario after interruption completion`);
                            this.resumeScenarioAfterInterruption();
                        } else {
                            console.log(`🎯 Completing regular task`);
                            this.game.completeTask();
                        }
                    }
                }, 1500);
            } else {
                // Task failed validation
                this.showFeedback('error', 'Not quite right. Try again! 🤔');
                this.enableInteractiveControls();
            }
        }
    }

    /**
     * Give up on interactive task (shows warning first)
     */
    giveUpInteractiveTask() {
        // Check if game is still running
        if (!this.game.gameState.isRunning) {
            console.log('Interactive task give up cancelled - game no longer running');
            return;
        }
        
        // Show rude warning popup instead of immediate action
        this.showGiveUpWarning();
    }

    /**
     * Show rude warning popup when user tries to give up
     */
    showGiveUpWarning() {
        // Create warning modal
        const modal = document.createElement('div');
        modal.id = 'give-up-warning-modal';
        modal.className = 'modal-overlay';
        
        const rudeMessages = [
            "Really? You're going to quit like a pathetic little coward?",
            "What a weak, spineless loser. Can't handle a simple challenge?",
            "Typical. Running away the moment things get interesting.",
            "How embarrassing. Even a child could do better than this.",
            "Such a disappointment. I expected more from you, but clearly I was wrong.",
            "Pathetic. You're proving just how worthless and weak you really are.",
            "Giving up already? What a sad, miserable failure you are.",
            "Can't even finish what you started. How utterly shameful."
        ];
        
        const randomMessage = rudeMessages[Math.floor(Math.random() * rudeMessages.length)];
        
        modal.innerHTML = `
            <div class="modal-content give-up-warning">
                <div class="warning-header">
                    <h2>🚨 Pathetic Attempt to Quit</h2>
                </div>
                <div class="warning-message">
                    <p>${randomMessage}</p>
                    <p class="warning-consequence">Are you absolutely certain you want to prove what a quitter you are?</p>
                </div>
                <div class="warning-buttons">
                    <button id="confirm-give-up" class="btn btn-danger warning-btn">
                        😢 Yes, I'm a Pathetic Quitter
                    </button>
                    <button id="cancel-give-up" class="btn btn-success warning-btn">
                        💪 No, I'll Actually Try
                    </button>
                </div>
            </div>
        `;
        
        document.body.appendChild(modal);
        
        // Add event listeners
        document.getElementById('confirm-give-up').addEventListener('click', () => {
            this.confirmGiveUp();
            document.body.removeChild(modal);
        });
        
        document.getElementById('cancel-give-up').addEventListener('click', () => {
            document.body.removeChild(modal);
        });
        
        // Add styles for the warning modal
        this.addGiveUpWarningStyles();
    }

    /**
     * Actually give up after confirmation
     */
    confirmGiveUp() {
        // Double-check game is still running before proceeding
        if (this.game.gameState.isRunning) {
            this.cleanupInteractiveTask();
            this.game.skipTask();
        }
    }

    /**
     * Show hint for current task
     */
    showHint() {
        if (!this.currentInteractiveTask || !this.currentInteractiveTask.hint) {
            this.showFeedback('info', 'No hint available for this challenge.');
            return;
        }

        this.showFeedback('info', `💡 Hint: ${this.currentInteractiveTask.hint}`);
    }

    /**
     * Show feedback message
     */
    showFeedback(type, message, duration = 3000) {
        // Create or update feedback element
        let feedback = document.getElementById('interactive-feedback');
        if (!feedback) {
            feedback = document.createElement('div');
            feedback.id = 'interactive-feedback';
            feedback.className = 'interactive-feedback';
            
            const container = document.getElementById('interactive-task-container');
            if (container) {
                container.appendChild(feedback);
            } else {
                // If no interactive container, try to append to task display
                const taskDisplay = document.querySelector('.task-display-container') || 
                                  document.querySelector('.task-display') ||
                                  document.body;
                if (taskDisplay) {
                    taskDisplay.appendChild(feedback);
                } else {
                    console.warn('No suitable container found for feedback message');
                    return; // Exit early if no container available
                }
            }
        }

        feedback.className = `interactive-feedback feedback-${type}`;
        feedback.textContent = message;
        feedback.style.display = 'block';

        // Auto-hide after specified duration for non-error messages
        if (type !== 'error') {
            setTimeout(() => {
                if (feedback) feedback.style.display = 'none';
            }, duration);
        }
    }

    /**
     * Enable/disable interactive controls
     */
    enableInteractiveControls(enabled = true) {
        const completeBtn = document.getElementById('interactive-complete-btn');
        if (completeBtn) {
            completeBtn.disabled = !enabled;
        }
    }

    /**
     * Clean up interactive task elements
     */
    cleanupInteractiveTask() {
        // Stop any audio that might be playing before cleanup
        if (this.game && this.game.audioManager) {
            this.game.audioManager.stopCategory('tasks', 0);
            this.game.audioManager.stopCategory('punishments', 0);
        }
        
        // Stop any ongoing TTS narration
        if (this.voiceManager) {
            this.stopTTS();
        }
        
        // Remove interactive container
        const container = document.getElementById('interactive-task-container');
        if (container) {
            container.remove();
        }

        // Remove interactive controls
        const controls = document.querySelector('.interactive-controls');
        if (controls) {
            controls.remove();
        }

        // Show original buttons
        const actionButtons = document.querySelector('.action-buttons');
        const originalButtons = actionButtons.querySelectorAll('button:not(.interactive-btn)');
        originalButtons.forEach(btn => btn.style.display = '');

        // Run task-specific cleanup
        if (this.currentInteractiveTask) {
            const taskType = this.taskTypes.get(this.currentInteractiveTask.interactiveType);
            if (taskType && taskType.cleanup) {
                taskType.cleanup();
            }
        }

        this.currentInteractiveTask = null;
        this.isInteractiveTaskActive = false;
    }

    // =============================================================================
    // TASK TYPE IMPLEMENTATIONS
    // =============================================================================

    // Rhythm task implementations removed per user request

    // =============================================================================
    // TASK TYPE IMPLEMENTATIONS - Focus, Scenario, and Mirror tasks only
    // =============================================================================

    async createFocusTask(task, container) {
        console.log('📝 Creating text input task');
        
        // Create text input interface
        container.innerHTML = `
            <div class="text-input-task">
                <div class="task-header">
                    <h3>✍️ ${task.text}</h3>
                    <p class="task-story">${task.story}</p>
                </div>
                <div class="text-input-content">
                    <label for="task-text-input">${task.prompt || 'Enter your response:'}</label>
                    <textarea 
                        id="task-text-input" 
                        placeholder="Type your response here..."
                        minlength="${task.minLength || 10}"
                        rows="4"
                        class="task-textarea"
                    ></textarea>
                    <div class="text-requirements">
                        Minimum ${task.minLength || 10} characters required
                    </div>
                    <button id="submit-text-btn" class="btn btn-primary" disabled>
                        Submit Response
                    </button>
                </div>
            </div>
        `;

        // Style the container
        const taskContainer = container.querySelector('.text-input-task');
        taskContainer.style.cssText = `
            background: rgba(40, 40, 40, 0.95);
            border-radius: 15px;
            padding: 25px;
            margin: 15px 0;
            border: 2px solid rgba(76, 175, 80, 0.4);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.2);
        `;

        // Style the textarea
        const textarea = container.querySelector('#task-text-input');
        textarea.style.cssText = `
            width: 100%;
            padding: 15px;
            border-radius: 8px;
            border: 2px solid rgba(76, 175, 80, 0.3);
            background: rgba(30, 30, 30, 0.8);
            color: white;
            font-size: 16px;
            resize: vertical;
            margin: 10px 0;
        `;

        // Style the submit button
        const submitBtn = container.querySelector('#submit-text-btn');
        submitBtn.style.cssText = `
            background: linear-gradient(135deg, #4caf50, #45a049);
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 15px;
            width: 100%;
        `;

        // Add validation and submission logic
        const minLength = task.minLength || 10;
        
        textarea.addEventListener('input', () => {
            const length = textarea.value.length;
            const reqDiv = container.querySelector('.text-requirements');
            
            if (length >= minLength) {
                submitBtn.disabled = false;
                submitBtn.style.opacity = '1';
                reqDiv.style.color = '#4caf50';
                reqDiv.textContent = `✓ Requirement met (${length} characters)`;
            } else {
                submitBtn.disabled = true;
                submitBtn.style.opacity = '0.6';
                reqDiv.style.color = '#f44336';
                reqDiv.textContent = `Need ${minLength - length} more characters`;
            }
        });

        submitBtn.addEventListener('click', () => {
            console.log('📝 Text input submitted:', textarea.value);
            submitBtn.disabled = true;
            submitBtn.textContent = '✓ Submitted';
            submitBtn.style.background = '#4caf50';
            
            // Enable completion controls
            setTimeout(() => {
                this.enableInteractiveControls(true);
            }, 1500);
        });

        console.log('📝 Text input task created successfully');
    }

    async validateTextInputTask(task) {
        const textarea = document.getElementById('task-text-input');
        const submitBtn = document.getElementById('submit-text-btn');
        
        if (!textarea || !submitBtn) return false;
        
        // Check if task was submitted (button disabled and text changed)
        return submitBtn.disabled && submitBtn.textContent.includes('✓');
    }

    async createSliderTask(task, container) {
        console.log('🎚️ Creating slider challenge task');
        
        // Create slider task interface
        container.innerHTML = `
            <div class="slider-task">
                <div class="task-header">
                    <h3>🎚️ ${task.text}</h3>
                    <p class="task-story">${task.story}</p>
                </div>
                <div class="slider-content">
                    <div class="slider-instructions">
                        <p><strong>Target:</strong> ${task.targetValue || 50}${task.valueUnit || '%'}</p>
                        <p><strong>Time Limit:</strong> ${task.duration || 60} seconds</p>
                        <p>Move the slider to reach the exact target value!</p>
                    </div>
                    <div class="slider-controls">
                        <div class="slider-container">
                            <input type="range" 
                                   id="challenge-slider" 
                                   min="${task.minValue || 0}" 
                                   max="${task.maxValue || 100}" 
                                   value="${task.startValue || 0}"
                                   step="${task.stepSize || 1}"
                                   class="slider-input">
                            <div class="slider-display">
                                <span class="current-value" id="current-value">${task.startValue || 0}</span>
                                <span class="target-value">Target: ${task.targetValue || 50}</span>
                            </div>
                        </div>
                    </div>
                    <div class="timer-progress" style="display: none;">
                        <div class="progress-bar" id="slider-progress-bar"></div>
                        <div class="timer-text" id="slider-timer-text">${task.duration || 60}s</div>
                    </div>
                    <button id="start-slider-btn" class="btn btn-primary">
                        🎚️ Start Challenge
                    </button>
                    <button id="submit-slider-btn" class="btn btn-success" style="display: none;">
                        ✅ Submit Answer
                    </button>
                </div>
            </div>
        `;

        // Add task-specific styling
        const styles = document.createElement('style');
        styles.textContent = `
            .slider-task {
                max-width: 600px;
                margin: 0 auto;
                padding: 20px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                border-radius: 15px;
                color: white;
            }
            
            .slider-container {
                background: rgba(255,255,255,0.1);
                padding: 20px;
                border-radius: 10px;
                margin: 20px 0;
            }
            
            .slider-input {
                width: 100%;
                height: 20px;
                margin: 15px 0;
                appearance: none;
                background: linear-gradient(to right, #ff4757, #ffa502, #2ed573);
                border-radius: 10px;
                outline: none;
            }
            
            .slider-input::-webkit-slider-thumb {
                appearance: none;
                width: 30px;
                height: 30px;
                background: white;
                border-radius: 50%;
                cursor: pointer;
                box-shadow: 0 0 10px rgba(0,0,0,0.3);
            }
            
            .slider-display {
                display: flex;
                justify-content: space-between;
                font-size: 18px;
                font-weight: bold;
            }
            
            .current-value {
                color: #ffa502;
            }
            
            .target-value {
                color: #2ed573;
            }
            
            .timer-progress {
                margin: 15px 0;
            }
            
            .progress-bar {
                width: 100%;
                height: 10px;
                background: rgba(255,255,255,0.2);
                border-radius: 5px;
                overflow: hidden;
                position: relative;
            }
            
            .progress-bar::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background: linear-gradient(90deg, #2ed573, #ffa502);
                border-radius: 5px;
                transition: width 0.1s linear;
            }
        `;
        document.head.appendChild(styles);

        // Get elements
        const slider = document.getElementById('challenge-slider');
        const currentValueSpan = document.getElementById('current-value');
        const startBtn = document.getElementById('start-slider-btn');
        const submitBtn = document.getElementById('submit-slider-btn');
        const timerProgress = document.querySelector('.timer-progress');
        const progressBar = document.getElementById('slider-progress-bar');
        const timerText = document.getElementById('slider-timer-text');

        let isActive = false;
        let timeLeft = task.duration || 60;
        let timerInterval = null;

        // Update slider display
        slider.addEventListener('input', (e) => {
            currentValueSpan.textContent = e.target.value;
            
            // Visual feedback based on accuracy
            const target = task.targetValue || 50;
            const current = parseInt(e.target.value);
            const accuracy = Math.abs(target - current);
            const tolerance = task.tolerance || 5;
            
            if (accuracy <= tolerance) {
                currentValueSpan.style.color = '#2ed573'; // Green for close
            } else if (accuracy <= tolerance * 2) {
                currentValueSpan.style.color = '#ffa502'; // Orange for medium
            } else {
                currentValueSpan.style.color = '#ff4757'; // Red for far
            }
        });

        // Start challenge
        startBtn.addEventListener('click', () => {
            if (isActive) return;
            
            isActive = true;
            startBtn.style.display = 'none';
            submitBtn.style.display = 'block';
            timerProgress.style.display = 'block';
            
            // Start timer
            const totalTime = task.duration || 60;
            timerInterval = setInterval(() => {
                timeLeft--;
                timerText.textContent = `${timeLeft}s`;
                
                // Update progress bar
                const progress = ((totalTime - timeLeft) / totalTime) * 100;
                progressBar.style.setProperty('--progress', `${progress}%`);
                progressBar.querySelector('::after') && (progressBar.style.background = `linear-gradient(90deg, transparent ${progress}%, #2ed573 ${progress}%)`);
                
                if (timeLeft <= 0) {
                    clearInterval(timerInterval);
                    this.completeSliderTask(task, false, 'Time ran out!');
                }
            }, 1000);
        });

        // Submit answer
        submitBtn.addEventListener('click', () => {
            if (!isActive) return;
            
            clearInterval(timerInterval);
            
            const target = task.targetValue || 50;
            const current = parseInt(slider.value);
            const accuracy = Math.abs(target - current);
            const tolerance = task.tolerance || 5;
            
            const success = accuracy <= tolerance;
            const message = success ? 
                `Perfect! You hit ${current}, target was ${target}` :
                `Close! You hit ${current}, target was ${target} (off by ${accuracy})`;
                
            this.completeSliderTask(task, success, message);
        });

        console.log('✅ Slider challenge task interface created');
    }

    async validateSliderTask(task) {
        console.log('🎚️ Validating slider task');
        return true; // Validation handled in interface
    }

    completeSliderTask(task, success, message) {
        console.log(`🎚️ Slider task completed: ${success ? 'Success' : 'Failed'}`);
        
        // Show completion feedback
        const container = this.taskContainer;
        if (container) {
            container.innerHTML = `
                <div class="task-completion ${success ? 'success' : 'failure'}">
                    <div class="completion-icon">
                        ${success ? '🎯' : '❌'}
                    </div>
                    <h3>${success ? 'Perfect Aim!' : 'Nice Try!'}</h3>
                    <p>${message}</p>
                    <button onclick="game.completeCurrentTask()" class="btn btn-primary">
                        Continue
                    </button>
                </div>
            `;
        }
        
        // Mark task as completed
        this.isInteractiveTaskActive = false;
        this.currentInteractiveTask = null;
    }

    async createRhythmTask(task, container) {
        console.log('🥁 Creating rhythm challenge task');
        
        // Create rhythm task interface
        container.innerHTML = `
            <div class="rhythm-task">
                <div class="task-header">
                    <h3>🥁 ${task.text}</h3>
                    <p class="task-story">${task.story}</p>
                </div>
                <div class="rhythm-content">
                    <div class="rhythm-instructions">
                        <p><strong>Duration:</strong> ${task.duration || 60} seconds</p>
                        <p><strong>Target BPM:</strong> ${task.targetBPM || 120}</p>
                        <p>Tap the beat button to match the rhythm!</p>
                    </div>
                    <div class="rhythm-display">
                        <div class="bpm-meter">
                            <div class="current-bpm" id="current-bpm">0</div>
                            <div class="bpm-label">BPM</div>
                        </div>
                        <div class="accuracy-meter">
                            <div class="accuracy-value" id="accuracy-value">0%</div>
                            <div class="accuracy-label">Accuracy</div>
                        </div>
                    </div>
                    <div class="rhythm-controls">
                        <div class="beat-button-container">
                            <button id="beat-button" class="beat-button" disabled>
                                🥁 TAP THE BEAT
                            </button>
                        </div>
                        <div class="metronome-display" id="metronome-display">
                            <div class="metronome-dot"></div>
                        </div>
                    </div>
                    <div class="timer-progress" style="display: none;">
                        <div class="progress-bar" id="rhythm-progress-bar"></div>
                        <div class="timer-text" id="rhythm-timer-text">${task.duration || 60}s</div>
                    </div>
                    <button id="start-rhythm-btn" class="btn btn-primary">
                        🥁 Start Rhythm Challenge
                    </button>
                </div>
            </div>
        `;

        // Add rhythm-specific styling
        const styles = document.createElement('style');
        styles.textContent = `
            .rhythm-task {
                max-width: 700px;
                margin: 0 auto;
                padding: 20px;
                background: linear-gradient(135deg, #e74c3c 0%, #8e44ad 100%);
                border-radius: 15px;
                color: white;
            }
            
            .rhythm-display {
                display: flex;
                justify-content: space-around;
                margin: 20px 0;
            }
            
            .bpm-meter, .accuracy-meter {
                background: rgba(255,255,255,0.1);
                padding: 15px;
                border-radius: 10px;
                text-align: center;
                min-width: 120px;
            }
            
            .current-bpm, .accuracy-value {
                font-size: 24px;
                font-weight: bold;
                color: #ffa502;
            }
            
            .bpm-label, .accuracy-label {
                font-size: 12px;
                opacity: 0.8;
                margin-top: 5px;
            }
            
            .beat-button-container {
                text-align: center;
                margin: 20px 0;
            }
            
            .beat-button {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background: linear-gradient(135deg, #ff6b6b, #ffa500);
                border: none;
                color: white;
                font-size: 18px;
                font-weight: bold;
                cursor: pointer;
                transition: all 0.1s ease;
                box-shadow: 0 10px 20px rgba(0,0,0,0.3);
            }
            
            .beat-button:hover:not(:disabled) {
                transform: scale(1.05);
            }
            
            .beat-button:active {
                transform: scale(0.95);
                background: linear-gradient(135deg, #ff4757, #ff6348);
            }
            
            .beat-button:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
            
            .metronome-display {
                text-align: center;
                margin: 20px 0;
            }
            
            .metronome-dot {
                width: 20px;
                height: 20px;
                background: #2ed573;
                border-radius: 50%;
                margin: 0 auto;
                transition: all 0.1s ease;
                opacity: 0.3;
            }
            
            .metronome-dot.beat {
                opacity: 1;
                transform: scale(1.5);
                background: #fff;
            }
            
            .timer-progress {
                margin: 15px 0;
            }
            
            .progress-bar {
                width: 100%;
                height: 10px;
                background: rgba(255,255,255,0.2);
                border-radius: 5px;
                overflow: hidden;
                position: relative;
            }
            
            .progress-bar::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background: linear-gradient(90deg, #e74c3c, #ffa502);
                border-radius: 5px;
                transition: width 0.1s linear;
            }
        `;
        document.head.appendChild(styles);

        // Initialize rhythm tracking
        const beatButton = document.getElementById('beat-button');
        const startBtn = document.getElementById('start-rhythm-btn');
        const currentBpmSpan = document.getElementById('current-bpm');
        const accuracySpan = document.getElementById('accuracy-value');
        const timerProgress = document.querySelector('.timer-progress');
        const progressBar = document.getElementById('rhythm-progress-bar');
        const timerText = document.getElementById('rhythm-timer-text');
        const metronomeDot = document.querySelector('.metronome-dot');

        let isActive = false;
        let timeLeft = task.duration || 60;
        let timerInterval = null;
        let metronomeInterval = null;
        let tapTimes = [];
        let targetBPM = task.targetBPM || 120;
        let currentBPM = 0;
        let accuracy = 0;

        // Start challenge
        startBtn.addEventListener('click', () => {
            if (isActive) return;
            
            isActive = true;
            startBtn.style.display = 'none';
            beatButton.disabled = false;
            timerProgress.style.display = 'block';
            
            // Start metronome
            const beatInterval = 60000 / targetBPM;
            metronomeInterval = setInterval(() => {
                metronomeDot.classList.add('beat');
                setTimeout(() => metronomeDot.classList.remove('beat'), 100);
            }, beatInterval);
            
            // Start timer
            const totalTime = task.duration || 60;
            timerInterval = setInterval(() => {
                timeLeft--;
                timerText.textContent = `${timeLeft}s`;
                
                // Update progress bar
                const progress = ((totalTime - timeLeft) / totalTime) * 100;
                progressBar.style.setProperty('--progress', `${progress}%`);
                
                if (timeLeft <= 0) {
                    clearInterval(timerInterval);
                    clearInterval(metronomeInterval);
                    this.completeRhythmTask(task, accuracy >= 70, `Challenge complete! Final accuracy: ${accuracy}%`);
                }
            }, 1000);
        });

        // Handle beat taps
        beatButton.addEventListener('click', () => {
            if (!isActive) return;
            
            const now = Date.now();
            tapTimes.push(now);
            
            // Keep only recent taps (last 10 or within 5 seconds)
            tapTimes = tapTimes.filter(time => now - time < 5000).slice(-10);
            
            if (tapTimes.length >= 2) {
                // Calculate BPM from tap intervals
                const intervals = [];
                for (let i = 1; i < tapTimes.length; i++) {
                    intervals.push(tapTimes[i] - tapTimes[i-1]);
                }
                
                const avgInterval = intervals.reduce((a, b) => a + b) / intervals.length;
                currentBPM = Math.round(60000 / avgInterval);
                
                // Calculate accuracy
                const bpmDiff = Math.abs(currentBPM - targetBPM);
                const maxDiff = targetBPM * 0.3; // 30% tolerance
                accuracy = Math.max(0, Math.round(100 * (1 - bpmDiff / maxDiff)));
                
                // Update display
                currentBpmSpan.textContent = currentBPM;
                accuracySpan.textContent = `${accuracy}%`;
                
                // Color feedback
                if (accuracy >= 80) {
                    currentBpmSpan.style.color = '#2ed573'; // Green
                    accuracySpan.style.color = '#2ed573';
                } else if (accuracy >= 60) {
                    currentBpmSpan.style.color = '#ffa502'; // Orange
                    accuracySpan.style.color = '#ffa502';
                } else {
                    currentBpmSpan.style.color = '#ff4757'; // Red
                    accuracySpan.style.color = '#ff4757';
                }
            }
        });

        console.log('✅ Rhythm challenge task interface created');
    }

    async validateRhythmTask(task) {
        console.log('🥁 Validating rhythm task');
        return true; // Validation handled in interface
    }

    completeRhythmTask(task, success, message) {
        console.log(`🥁 Rhythm task completed: ${success ? 'Success' : 'Failed'}`);
        
        // Show completion feedback
        const container = this.taskContainer;
        if (container) {
            container.innerHTML = `
                <div class="task-completion ${success ? 'success' : 'failure'}">
                    <div class="completion-icon">
                        ${success ? '🎵' : '🥁'}
                    </div>
                    <h3>${success ? 'Perfect Rhythm!' : 'Keep Practicing!'}</h3>
                    <p>${message}</p>
                    <button onclick="game.completeCurrentTask()" class="btn btn-primary">
                        Continue
                    </button>
                </div>
            `;
        }
        
        // Mark task as completed
        this.isInteractiveTaskActive = false;
        this.currentInteractiveTask = null;
    }

    async createChoiceTask(task, container) {
        // Implementation for choice tasks
        console.log('Choice task created');
    }

    async validateChoiceTask(task) {
        return true; // Placeholder
    }

    async createSpeedTask(task, container) {
        // Implementation for speed tasks
        console.log('Speed task created');
    }

    async validateSpeedTask(task) {
        return true; // Placeholder
    }

    async createFocusTask(task, container) {
        console.log('🧘 Creating focus task');
        
        // Create focus task interface with integrated video player
        container.innerHTML = `
            <div class="focus-task">
                <div class="task-header">
                    <h3>🧘 ${task.text}</h3>
                    <p class="task-story">${task.story}</p>
                </div>
                <div class="focus-content">
                    <div class="focus-instructions">
                        ${task.instructions || 'Hold the position and focus for the required time'}
                    </div>
                    <div class="focus-video-container" id="focus-video-container" style="display: none;">
                        <video id="focus-video-player" 
                               autoplay 
                               style="width: 100%; max-height: 400px; border-radius: 8px; margin: 15px 0;">
                        </video>
                        <div class="focus-video-controls" style="display: flex; align-items: center; justify-content: center; gap: 4px; margin: 5px 0; position: relative;">
                            <label for="focus-video-volume" style="color: #bbb; font-size: 10px;">🔊</label>
                            <input type="range" 
                                   id="focus-video-volume" 
                                   class="focus-volume-slider"
                                   min="0" 
                                   max="100" 
                                   value="50" 
                                   style="width: 60px !important; max-width: 60px !important; min-width: 60px !important; height: 3px !important; accent-color: #673ab7;">
                            <span id="focus-volume-display" style="color: #bbb; font-size: 9px; min-width: 20px;">50%</span>
                        </div>
                        <div class="video-info" id="video-info" style="font-size: 12px; color: #bbb; margin-top: 5px; text-align: center;">
                            Loading video...
                        </div>
                    </div>
                    <div class="focus-timer-display" id="focus-timer-display">
                        ${task.duration || 60} seconds
                    </div>
                    <button id="start-focus-btn" class="btn btn-primary">
                        🧘 Start Focus Session
                    </button>
                    <div class="focus-progress" id="focus-progress" style="display: none;">
                        <div class="progress-bar" id="progress-bar"></div>
                        <div class="progress-text" id="progress-text">Starting...</div>
                    </div>
                </div>
            </div>
        `;

        // Style the container
        const taskContainer = container.querySelector('.focus-task');
        taskContainer.style.cssText = `
            background: rgba(40, 40, 40, 0.95);
            border-radius: 15px;
            padding: 25px;
            margin: 15px 0;
            text-align: center;
            border: 2px solid rgba(103, 58, 183, 0.4);
            box-shadow: 0 5px 15px rgba(103, 58, 183, 0.2);
        `;

        // Style the timer display
        const timerDisplay = container.querySelector('#focus-timer-display');
        timerDisplay.style.cssText = `
            font-size: 48px;
            font-weight: bold;
            color: #673ab7;
            margin: 20px 0;
        `;

        // Style the start button
        const startBtn = container.querySelector('#start-focus-btn');
        startBtn.style.cssText = `
            background: linear-gradient(135deg, #673ab7, #5e35b1);
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 18px;
            border-radius: 8px;
            cursor: pointer;
            margin: 20px 0;
        `;

        // Style the progress bar container
        const progressContainer = container.querySelector('#focus-progress');
        progressContainer.style.cssText = `
            margin: 20px 0;
            width: 100%;
        `;

        const progressBar = container.querySelector('#progress-bar');
        progressBar.style.cssText = `
            width: 0%;
            height: 8px;
            background: linear-gradient(90deg, #673ab7, #9c27b0);
            border-radius: 4px;
            transition: width 1s ease;
            margin: 10px 0;
        `;

        // Style the volume slider
        const volumeSlider = container.querySelector('#focus-video-volume');
        if (volumeSlider) {
            volumeSlider.style.cssText = `
                width: 200px;
                height: 6px;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 3px;
                outline: none;
                cursor: pointer;
            `;
        }

        // Initialize video management for focus session
        this.initializeFocusVideos();

        // Add focus session logic
        const duration = task.duration || 60;
        
        startBtn.addEventListener('click', () => {
            console.log('🧘 Starting focus session');
            
            // Track focus session start for XP (5 XP per minute)
            if (this.game && this.game.trackFocusSession) {
                this.game.trackFocusSession(true);
            }
            
            // Hide start button and show progress
            startBtn.style.display = 'none';
            progressContainer.style.display = 'block';
            
            // Show and start video player
            const videoContainer = container.querySelector('#focus-video-container');
            if (videoContainer) {
                videoContainer.style.display = 'block';
                this.setupFocusVolumeControl();
                this.startFocusVideoPlayback();
            }
            
            let timeLeft = duration;
            const progressText = container.querySelector('#progress-text');
            
            const focusInterval = setInterval(() => {
                const elapsed = duration - timeLeft;
                const progressPercent = (elapsed / duration) * 100;
                
                // Update progress bar
                progressBar.style.width = `${progressPercent}%`;
                
                // Update timer display
                timerDisplay.textContent = `${timeLeft}s`;
                progressText.textContent = `Hold position... ${timeLeft}s remaining`;
                
                timeLeft--;
                
                if (timeLeft < 0) {
                    clearInterval(focusInterval);
                    
                    // Track focus session end for XP
                    if (this.game && this.game.trackFocusSession) {
                        this.game.trackFocusSession(false);
                    }
                    
                    // Focus session completed
                    timerDisplay.textContent = 'Complete!';
                    progressText.textContent = '✓ Focus session completed';
                    progressBar.style.width = '100%';
                    progressBar.style.background = '#4caf50';
                    
                    // Stop video playback
                    this.stopFocusVideoPlayback();
                    
                    console.log('🧘 Focus session completed');
                    
                    // Enable completion controls
                    setTimeout(() => {
                        this.enableInteractiveControls(true);
                    }, 1500);
                }
            }, 1000);
        });

        console.log('🧘 Focus task created successfully');
    }

    /**
     * Setup volume control for focus videos
     */
    setupFocusVolumeControl() {
        const volumeSlider = document.getElementById('focus-video-volume');
        const volumeDisplay = document.getElementById('focus-volume-display');
        
        if (!volumeSlider || !volumeDisplay) {
            console.warn('🧘 ⚠️ Volume controls not found');
            return;
        }

        // Get initial volume from video manager settings or default
        const initialVolume = (window.videoPlayerManager?.settings?.volume || 0.5) * 100;
        volumeSlider.value = initialVolume;
        volumeDisplay.textContent = `${Math.round(initialVolume)}%`;

        // Handle volume changes
        volumeSlider.addEventListener('input', (e) => {
            const volume = parseInt(e.target.value);
            const volumeDecimal = volume / 100;
            
            // Update display
            volumeDisplay.textContent = `${volume}%`;
            
            // Update video player volume
            const videoPlayer = document.getElementById('focus-video-player');
            if (videoPlayer) {
                videoPlayer.volume = volumeDecimal;
                console.log(`🧘 🔊 Volume changed to: ${volume}%`);
            }
            
            // Save to video manager settings if available
            if (window.videoPlayerManager && window.videoPlayerManager.settings) {
                window.videoPlayerManager.settings.volume = volumeDecimal;
                console.log(`🧘 💾 Saved volume setting: ${volume}%`);
            }
        });

        console.log(`🧘 🎛️ Volume control setup complete, initial volume: ${Math.round(initialVolume)}%`);
    }

    /**
     * Initialize video system for focus sessions
     */
    initializeFocusVideos() {
        // Initialize with new FocusVideoPlayer
        try {
            this.focusVideoPlayer = new FocusVideoPlayer('#focus-video-container');
            console.log('🧘 📺 FocusVideoPlayer initialized');
            
            // Initialize video library from video manager
            if (window.videoPlayerManager) {
                this.focusVideoPlayer.initializeVideoLibrary(window.videoPlayerManager);
            } else {
                console.warn('🧘 ⚠️ Video manager not available, focus videos disabled');
            }
        } catch (error) {
            console.error('🧘 ❌ Failed to initialize FocusVideoPlayer:', error);
            // Fallback to legacy implementation
            this.initializeLegacyFocusVideos();
        }
    }

    /**
     * Legacy focus video initialization (fallback)
     */
    initializeLegacyFocusVideos() {
        this.focusVideoLibrary = [];
        this.focusVideoPlayer = null;
        this.focusVideoIndex = 0;
        this.focusVideoActive = false;
        
        // Get all available videos from video manager
        if (window.videoPlayerManager && window.videoPlayerManager.videoLibrary) {
            const library = window.videoPlayerManager.videoLibrary;
            
            // Combine all video categories into one pool
            this.focusVideoLibrary = [
                ...(library.task || []),
                ...(library.reward || []),
                ...(library.punishment || []),
                ...(library.background || [])
            ];
            
            console.log(`🧘 🎬 Initialized legacy focus video library with ${this.focusVideoLibrary.length} videos`);
            
            if (this.focusVideoLibrary.length === 0) {
                console.warn('🧘 ⚠️ No videos found in any category, focus videos will be disabled');
            }
        } else {
            console.warn('🧘 ⚠️ Video manager not available, focus videos disabled');
        }
    }

    /**
     * Start continuous video playback for focus session
     */
    async startFocusVideoPlayback() {
        // Try new FocusVideoPlayer first
        if (this.focusVideoPlayer && typeof this.focusVideoPlayer.startFocusSession === 'function') {
            console.log('🧘 📺 Starting focus session with FocusVideoPlayer');
            this.focusVideoPlayer.startFocusSession();
            return;
        }

        // Fallback to legacy implementation
        console.log('🧘 📹 Using legacy focus video implementation');
        this.startLegacyFocusVideoPlayback();
    }

    /**
     * Legacy focus video playback (fallback)
     */
    async startLegacyFocusVideoPlayback() {
        if (this.focusVideoLibrary.length === 0) {
            console.warn('🧘 ⚠️ No videos available for focus session, hiding video container');
            const videoContainer = document.getElementById('focus-video-container');
            if (videoContainer) {
                videoContainer.style.display = 'none';
            }
            return;
        }

        this.focusVideoActive = true;
        this.focusVideoPlayer = document.getElementById('focus-video-player');
        
        if (!this.focusVideoPlayer) {
            console.error('🧘 ❌ Focus video player element not found');
            return;
        }

        // Set up video ended event to play next video automatically
        this.focusVideoPlayer.addEventListener('ended', () => {
            if (this.focusVideoActive) {
                console.log('🧘 🎬 Video ended, playing next...');
                setTimeout(() => this.playNextFocusVideo(), 500); // Small delay before next video
            } else {
                console.log('🧘 📹 Video ended after session completed, not playing next');
            }
        });

        // Set up error handling
        this.focusVideoPlayer.addEventListener('error', (e) => {
            // Don't handle errors if the focus session is no longer active
            if (!this.focusVideoActive) {
                console.log('🧘 📹 Video error after session ended, ignoring');
                return;
            }
            
            const error = this.focusVideoPlayer.error;
            let errorMessage = 'Unknown video error';
            
            if (error) {
                switch (error.code) {
                    case 1: errorMessage = 'Video loading aborted'; break;
                    case 2: errorMessage = 'Network error'; break;
                    case 3: errorMessage = 'Video decoding error'; break;
                    case 4: errorMessage = 'Video format not supported'; break;
                    default: errorMessage = `Video error code: ${error.code}`;
                }
            }
            
            console.warn(`🧘 ⚠️ Video error (${errorMessage}), skipping to next video`);
            
            if (this.focusVideoActive) {
                // Update video info to show error
                const videoInfo = document.getElementById('video-info');
                if (videoInfo) {
                    videoInfo.textContent = `Error: ${errorMessage}, loading next...`;
                }
                
                setTimeout(() => this.playNextFocusVideo(), 1000);
            }
        });

        // Set up loading start
        this.focusVideoPlayer.addEventListener('loadstart', () => {
            const videoInfo = document.getElementById('video-info');
            if (videoInfo) {
                videoInfo.textContent = 'Loading video...';
            }
        });

        // Start playing the first video
        this.playNextFocusVideo();
    }

    /**
     * Check if video format is supported
     */
    isVideoFormatSupported(videoPath) {
        const extension = videoPath.toLowerCase().split('.').pop();
        const supportedFormats = ['mp4', 'webm', 'ogg', 'avi', 'mov', 'mkv'];
        
        // Check basic extension support
        if (!supportedFormats.includes(extension)) {
            console.warn(`🧘 ⚠️ Potentially unsupported video format: .${extension}`);
            return false;
        }
        
        // For .mov files, check if browser can play them
        if (extension === 'mov') {
            const testVideo = document.createElement('video');
            const canPlay = testVideo.canPlayType('video/quicktime');
            if (canPlay === '') {
                console.warn('🧘 ⚠️ Browser may not support .mov files');
                return false;
            }
        }
        
        return true;
    }

    /**
     * Play the next random video in the focus session
     */
    async playNextFocusVideo() {
        if (!this.focusVideoActive || this.focusVideoLibrary.length === 0) {
            return;
        }

        // Try up to 5 times to find a compatible video
        let attempts = 0;
        let videoFile, videoPath;
        
        do {
            // Pick a random video
            const randomIndex = Math.floor(Math.random() * this.focusVideoLibrary.length);
            videoFile = this.focusVideoLibrary[randomIndex];
            
            // Get video path (handle both string and object formats)
            if (typeof videoFile === 'string') {
                videoPath = videoFile;
            } else if (videoFile.path) {
                videoPath = videoFile.path;
            } else if (videoFile.name) {
                videoPath = videoFile.name;
            } else {
                console.warn('🧘 ⚠️ Invalid video file format:', videoFile);
                attempts++;
                continue;
            }
            
            // Check if format is supported
            if (this.isVideoFormatSupported(videoPath)) {
                break; // Found a compatible video
            }
            
            attempts++;
        } while (attempts < 5);
        
        if (attempts >= 5) {
            console.warn('🧘 ⚠️ Could not find compatible video after 5 attempts');
            const videoInfo = document.getElementById('video-info');
            if (videoInfo) {
                videoInfo.textContent = 'No compatible videos found';
            }
            return;
        }
        
        try {
            // Construct full path
            const fullPath = this.getVideoFilePath(videoPath);
            
            console.log(`🧘 🎬 Playing focus video: ${videoPath}`);
            
            // Update video info display
            const videoInfo = document.getElementById('video-info');
            if (videoInfo) {
                const fileName = videoPath.split('/').pop().split('\\').pop();
                videoInfo.textContent = `Playing: ${fileName}`;
            }

            // Set video source and play
            this.focusVideoPlayer.src = fullPath;
            this.focusVideoPlayer.muted = false; // Ensure video is not muted
            
            // Get volume from slider if available, otherwise use default
            const volumeSlider = document.getElementById('focus-video-volume');
            let volume = 0.5; // default
            if (volumeSlider) {
                volume = parseInt(volumeSlider.value) / 100;
            } else {
                volume = window.videoPlayerManager?.settings?.volume || 0.5;
            }
            
            this.focusVideoPlayer.volume = volume;
            console.log(`🧘 🎬 Video volume set to: ${Math.round(volume * 100)}%`);
            
            // Add load event to handle successful loading
            const handleLoad = () => {
                const fileName = videoPath.split('/').pop().split('\\').pop();
                console.log(`🧘 🎬 Video loaded successfully: ${fileName}`);
                this.focusVideoPlayer.removeEventListener('loadeddata', handleLoad);
            };
            this.focusVideoPlayer.addEventListener('loadeddata', handleLoad);
            
            try {
                await this.focusVideoPlayer.play();
                const fileName = videoPath.split('/').pop().split('\\').pop();
                console.log(`🧘 🎬 Video playing: ${fileName}`);
            } catch (playError) {
                console.warn('🧘 ⚠️ Could not autoplay video:', playError);
                // Still might work with user interaction, so don't skip immediately
            }

        } catch (error) {
            console.error('🧘 ❌ Error setting up focus video:', error);
            // Try another video after a short delay
            setTimeout(() => {
                if (this.focusVideoActive) {
                    this.playNextFocusVideo();
                }
            }, 1000);
        }
    }

    /**
     * Stop focus video playback
     */
    stopFocusVideoPlayback() {
        console.log('🧘 🎬 Stopping focus video playback...');
        
        // End focus session tracking for XP (if still active)
        if (this.game && this.game.trackFocusSession) {
            this.game.trackFocusSession(false);
        }
        
        // Try new FocusVideoPlayer first
        if (this.focusVideoPlayer && typeof this.focusVideoPlayer.stopFocusSession === 'function') {
            console.log('🧘 📺 Stopping focus session with FocusVideoPlayer');
            this.focusVideoPlayer.stopFocusSession();
            return;
        }

        // Fallback to legacy implementation
        this.stopLegacyFocusVideoPlayback();
    }

    /**
     * Legacy focus video stop (fallback)
     */
    stopLegacyFocusVideoPlayback() {
        console.log('🧘 📹 Using legacy focus video stop');
        this.focusVideoActive = false;
        
        if (this.focusVideoPlayer) {
            // Pause and clear the video
            this.focusVideoPlayer.pause();
            this.focusVideoPlayer.src = '';
            this.focusVideoPlayer.load(); // Reset the video element
            
            // Update video info
            const videoInfo = document.getElementById('video-info');
            if (videoInfo) {
                videoInfo.textContent = 'Video session completed';
            }
            
            // Hide video container
            const videoContainer = document.getElementById('focus-video-container');
            if (videoContainer) {
                videoContainer.style.display = 'none';
            }
        }
        
        console.log('🧘 🎬 Legacy focus video playback stopped');
    }

    /**
     * Get proper file path for videos
     */
    getVideoFilePath(videoPath) {
        // If it's already a full path or data URL, use as-is
        if (videoPath.startsWith('http') || videoPath.startsWith('data:') || videoPath.startsWith('file:')) {
            return videoPath;
        }
        
        // For desktop app, construct proper file path
        if (window.electronAPI) {
            // Handle both forward and back slashes and ensure proper file:// protocol
            const normalizedPath = videoPath.replace(/\\/g, '/');
            // Remove any leading slashes to avoid file:////
            const cleanPath = normalizedPath.replace(/^\/+/, '');
            return `file:///${cleanPath}`;
        }
        
        // For web version, assume relative path in videos directory
        if (!videoPath.startsWith('videos/')) {
            return `videos/${videoPath}`;
        }
        
        return videoPath;
    }

    async validateFocusTask(task) {
        const timerDisplay = document.getElementById('focus-timer-display');
        const progressText = document.getElementById('progress-text');
        
        console.log(`🧘 Validating focus task...`);
        console.log(`🧘 Timer display found: ${!!timerDisplay}, text: "${timerDisplay?.textContent}"`);
        console.log(`🧘 Progress text found: ${!!progressText}, text: "${progressText?.textContent}"`);
        
        if (!timerDisplay || !progressText) {
            console.log(`🧘 ❌ Missing required elements for focus validation`);
            return false;
        }
        
        // Check if focus session was completed
        const isComplete = timerDisplay.textContent === 'Complete!' && 
                          progressText.textContent.includes('✓');
        
        console.log(`🧘 Focus task validation result: ${isComplete ? '✅ VALID' : '❌ INVALID'}`);
        return isComplete;
    }

    // =============================================================================
    // SCENARIO BUILDER IMPLEMENTATION
    // =============================================================================

    /**
     * Create a choose your own adventure scenario task
     */
    async createScenarioTask(task, container) {
        const scenario = task.interactiveData || {};
        
        // Set this task as the current interactive task
        this.currentInteractiveTask = task;
        console.log('🎭 Set scenario task as current interactive task:', task.id);
        
        container.innerHTML = `
            <div class="scenario-task">
                <div class="scenario-header">
                    <h4>📖 ${scenario.title || 'Interactive Scenario'}</h4>
                    <div class="scenario-progress">
                        Step <span id="scenario-step">1</span> of <span id="scenario-total">${this.getScenarioStepCount(scenario)}</span>
                    </div>
                    <div class="scenario-controls">
                        <button id="tts-toggle" class="tts-control ${this.ttsEnabled ? 'enabled' : 'disabled'}" 
                                title="Toggle text-to-speech narration">
                            🎤 ${this.ttsEnabled ? 'TTS On' : 'TTS Off'}
                        </button>
                        <button id="tts-stop" class="tts-control" title="Stop current narration" style="display: none;">
                            ⏹️ Stop
                        </button>
                    </div>
                </div>
                
                <div class="scenario-content">
                    <div id="scenario-story" class="scenario-story"></div>
                    <div id="scenario-choices" class="scenario-choices"></div>
                </div>
                
                <div class="scenario-status">
                    <div class="tts-info" id="tts-info" style="font-size: 12px; color: #888; margin-top: 10px;"></div>
                </div>
            </div>
        `;

        // Initialize scenario state
        this.initializeScenario(task, scenario);
    }

    initializeScenario(task, scenario) {
        // Safety check for scenario data
        if (!scenario) {
            console.error('❌ Cannot initialize scenario - scenario data is undefined for task:', task.id);
            console.error('Task object:', task);
            return;
        }
        
        if (!scenario.steps) {
            console.error('❌ Cannot initialize scenario - no steps found in scenario for task:', task.id);
            console.error('Scenario object:', scenario);
            return;
        }
        
        // Scenario state tracking
        task.scenarioState = {
            currentStep: 'start',
            stepNumber: 1,
            totalSteps: this.getScenarioStepCount(scenario),
            choices: [],
            completed: false,
            outcome: null
        };

        // Start the scenario
        this.displayScenarioStep(task, scenario, 'start');
        
        // Setup TTS controls
        this.setupTTSControls();
    }

    /**
     * Setup TTS control event handlers
     */
    setupTTSControls() {
        const ttsToggle = document.getElementById('tts-toggle');
        const ttsStop = document.getElementById('tts-stop');
        const ttsInfo = document.getElementById('tts-info');

        // TTS toggle button
        if (ttsToggle) {
            ttsToggle.addEventListener('click', () => {
                const newState = this.toggleTTS();
                ttsToggle.textContent = `🎤 ${newState ? 'TTS On' : 'TTS Off'}`;
                ttsToggle.className = `tts-control ${newState ? 'enabled' : 'disabled'}`;
                this.updateTTSInfo();
            });
        }

        // TTS stop button
        if (ttsStop) {
            ttsStop.addEventListener('click', () => {
                this.stopTTS();
            });
        }

        // Display current TTS info
        this.updateTTSInfo();
    }

    /**
     * Update TTS information display
     */
    updateTTSInfo() {
        const ttsInfo = document.getElementById('tts-info');
        if (!ttsInfo) return;

        const info = this.getTTSInfo();
        if (info.available) {
            const voiceInfo = info.voiceInfo;
            ttsInfo.innerHTML = `🎤 Voice: ${voiceInfo.name} (${voiceInfo.platform})`;
        } else {
            ttsInfo.innerHTML = '🎤 TTS not available';
        }
    }

    displayScenarioStep(task, scenario, stepId) {
        // Add scenario styles when displaying scenario steps
        this.addScenarioStyles();
        
        const step = scenario.steps[stepId];
        if (!step) {
            console.error('Scenario step not found:', stepId);
            return;
        }

        // Stop any previous TTS narration before displaying new step
        if (this.voiceManager) {
            this.stopTTS();
        }

        // Check if scenario interface elements exist (safety check)
        const storyEl = document.getElementById('scenario-story');
        const choicesEl = document.getElementById('scenario-choices');
        const stepEl = document.getElementById('scenario-step');
        
        if (!storyEl || !choicesEl || !stepEl) {
            console.warn('Scenario interface not available - cannot display step:', stepId);
            console.log('Available elements:', { storyEl: !!storyEl, choicesEl: !!choicesEl, stepEl: !!stepEl });
            
            // If this is an ending step and interface is gone, complete the task instead
            if (step.type === 'ending') {
                console.log('🎭 Ending step reached with no UI - completing task');
                if (this.game && this.game.gameState && this.game.gameState.isRunning) {
                    this.cleanupInteractiveTask();
                    this.game.completeTask();
                }
            }
            return;
        }
        
        // Update step counter
        stepEl.textContent = task.scenarioState.stepNumber;

        // Display story text with dynamic content
        const storyText = this.processScenarioText(step.story, task.scenarioState);
        storyEl.innerHTML = `
            <div class="story-text ${step.mood || 'neutral'}">
                ${storyText}
            </div>
        `;

        // Speak the story text using TTS
        this.speakScenarioText(step.story, task.scenarioState, {
            onComplete: () => {
                // Story narration complete - could add visual feedback here if needed
            }
        });

        // Clear previous choices
        choicesEl.innerHTML = '';

        if (step.type === 'choice') {
            // Display choices
            step.choices.forEach((choice, index) => {
                const isAvailable = this.isChoiceAvailable(choice, task.scenarioState);
                const choiceBtn = document.createElement('button');
                choiceBtn.className = `scenario-choice ${choice.type || 'normal'} ${!isAvailable ? 'disabled' : ''}`;
                choiceBtn.disabled = !isAvailable;
                
                choiceBtn.innerHTML = `
                    <div class="choice-text">${choice.text}</div>
                    <div class="choice-preview">${choice.preview || ''}</div>
                    ${choice.requirements ? `<div class="choice-requirements">${choice.requirements}</div>` : ''}
                `;

                if (isAvailable) {
                    choiceBtn.addEventListener('click', () => {
                        this.makeScenarioChoice(task, scenario, choice, index);
                    });
                }

                choicesEl.appendChild(choiceBtn);
            });
        } else if (step.type === 'action') {
            console.log('📸 Action step detected, checking if photography step...');
            // Check if this is a photography task first
            const isPhotoStep = this.isPhotographyStep(step);
            const hasWebcamManager = !!this.game.webcamManager;
            console.log('📸 Is photography step:', isPhotoStep, 'Has webcam manager:', hasWebcamManager);
            
            if (isPhotoStep && hasWebcamManager) {
                console.log('📸 Creating CAMERA BUTTON for photography step');
                // For photography tasks, show camera button instead of timer
                const cameraBtn = document.createElement('button');
                cameraBtn.className = 'scenario-camera-btn';
                
                // Get dynamic photo requirements
                const photoRequirements = this.getPhotoRequirements(step);
                console.log('📸 Photo requirements for button:', photoRequirements);
                
                cameraBtn.innerHTML = `
                    <div class="camera-text">${step.actionText || 'Take Photos'}</div>
                    <div class="camera-info">${photoRequirements.description}</div>
                `;

                cameraBtn.addEventListener('click', () => {
                    console.log('📸 Camera button clicked!');
                    this.startPhotographySession(task, scenario, step);
                });

                choicesEl.appendChild(cameraBtn);
                console.log('📸 Camera button added to DOM');
            } else {
                console.log('📸 Creating ACTION BUTTON for non-photography step');
                // For non-photography tasks, show regular action button with timer
                const actionBtn = document.createElement('button');
                actionBtn.className = 'scenario-action';
                actionBtn.innerHTML = `
                    <div class="action-text">${step.actionText}</div>
                    <div class="action-timer" id="action-timer">${step.duration || 30}s</div>
                    <button id="skip-action-timer-btn" class="btn btn-warning skip-timer-btn" style="margin-top: 10px;">
                        ⏩ Skip Timer (Testing)
                    </button>
                `;

                actionBtn.addEventListener('click', () => {
                    this.startScenarioAction(task, scenario, step);
                });

                choicesEl.appendChild(actionBtn);
            }
        } else if (step.type === 'mirror-action') {
            // Handle mirror-based action steps - create the mirror task directly
            this.createMirrorTask(task, choicesEl);
        } else if (step.type === 'inventory-check') {
            // Handle inventory questionnaire
            this.displayInventoryQuestionnaire(task, scenario, step, choicesEl);
        } else if (step.type === 'path-generation') {
            // Handle dynamic path generation based on inventory
            this.generateInventoryPath(task, scenario, step, choicesEl);
        } else if (step.type === 'text') {
            // Handle text-only steps that just need a continue button
            const continueBtn = document.createElement('button');
            continueBtn.className = 'scenario-continue';
            continueBtn.innerHTML = `
                <div class="continue-text">Continue</div>
            `;

            continueBtn.addEventListener('click', () => {
                const nextStep = step.next || step.nextStep || this.getDefaultNextStep(task.scenarioState);
                task.scenarioState.currentStep = nextStep;
                task.scenarioState.stepNumber++;
                this.displayScenarioStep(task, scenario, nextStep);
            });

            choicesEl.appendChild(continueBtn);
        } else if (step.type === 'ending') {
            // Display ending and completion
            task.scenarioState.completed = true;
            task.scenarioState.outcome = step.outcome;
            
            // Stop any ongoing TTS narration when scenario ends
            if (this.voiceManager) {
                this.stopTTS();
            }
            
            const endingDiv = document.createElement('div');
            endingDiv.className = 'scenario-ending';
            endingDiv.innerHTML = `
                <div class="ending-text">${this.processScenarioText(step.endingText, task.scenarioState)}</div>
                <div class="ending-outcome ${step.outcome}">${this.getOutcomeText(step.outcome)}</div>
            `;

            choicesEl.appendChild(endingDiv);
            
            // For inventory-based endings, populate the items list
            if (task.scenarioState.tier && task.scenarioState.inventoryManager) {
                setTimeout(() => {
                    this.populateInventoryItemsList(task.scenarioState.tier, task.scenarioState.inventoryManager);
                }, 100);
            }
            
            // Enable completion button
            setTimeout(() => {
                this.enableInteractiveControls(true);
            }, 2000);
        }

        // Apply scenario effects (audio, visual effects, etc.)
        this.applyScenarioEffects(step, task.scenarioState);
    }

    makeScenarioChoice(task, scenario, choice, choiceIndex) {
        console.log(`🎯 makeScenarioChoice called: "${choice.text}" (choice ${choiceIndex})`);
        console.log(`🎯 Current step: ${task.scenarioState.currentStep}, Step #${task.scenarioState.stepNumber}`);
        
        // Record the choice
        task.scenarioState.choices.push({
            step: task.scenarioState.currentStep,
            choice: choiceIndex,
            text: choice.text
        });

        // Apply choice effects
        this.applyChoiceEffects(choice, task.scenarioState);

        console.log(`🧘 Checking for focus interruption before proceeding to: ${choice.nextStep || 'default'}`);
        
        // Check for focus-hold interruption
        if (this.shouldTriggerFocusInterruption()) {
            console.log(`🧘 ⚡ INTERRUPTION TRIGGERED! Pausing scenario progress.`);
            this.triggerFocusInterruption(task, scenario, choice);
            return; // Don't proceed to next step yet
        }

        console.log(`🎯 No interruption - proceeding to next step`);
        
        // Move to next step
        const nextStep = choice.nextStep || this.getDefaultNextStep(task.scenarioState);
        task.scenarioState.currentStep = nextStep;
        task.scenarioState.stepNumber++;

        console.log(`🎯 Moving to step: ${nextStep} (Step #${task.scenarioState.stepNumber})`);

        // Display next step
        this.displayScenarioStep(task, scenario, nextStep);
    }

    startScenarioAction(task, scenario, step) {
        const duration = step.duration || 30;
        const timerEl = document.getElementById('action-timer');
        let timeLeft = duration;

        // Disable the action button
        const actionBtn = document.querySelector('.scenario-action');
        actionBtn.disabled = true;
        actionBtn.classList.add('active');

        // Add skip button handler
        const skipBtn = document.getElementById('skip-action-timer-btn');
        if (skipBtn) {
            skipBtn.addEventListener('click', () => {
                timeLeft = 0; // This will trigger completion on next interval
            });
        }

        const countdown = setInterval(() => {
            timeLeft--;
            timerEl.textContent = `${timeLeft}s`;

            if (timeLeft <= 0) {
                clearInterval(countdown);
                
                // Action completed
                actionBtn.classList.remove('active');
                actionBtn.classList.add('completed');
                
                // Apply action effects
                this.applyActionEffects(step, task.scenarioState);

                // Move to next step
                setTimeout(() => {
                    const nextStep = step.nextStep || step.next || this.getDefaultNextStep(task.scenarioState);
                    task.scenarioState.currentStep = nextStep;
                    task.scenarioState.stepNumber++;
                    this.displayScenarioStep(task, scenario, nextStep);
                }, 1500);
            }
        }, 1000);
    }

    startScenarioMirrorAction(task, scenario, step) {
        console.log('🪞 Starting scenario mirror action');
        
        // Create mirror interface for scenario step
        const choicesEl = document.getElementById('scenario-choices');
        if (!choicesEl) return;

        // Clear existing content
        choicesEl.innerHTML = '';

        // Create mirror task interface
        const mirrorContainer = document.createElement('div');
        mirrorContainer.className = 'scenario-mirror-container';
        mirrorContainer.innerHTML = `
            <div class="mirror-task-header">
                <h4>🪞 Mirror Session</h4>
                <p>${step.story || 'Complete the mirror task'}</p>
            </div>
            <div class="mirror-instructions">
                ${step.mirrorInstructions || 'Look at yourself while completing the task'}
            </div>
            <button id="scenario-mirror-btn" class="btn btn-primary">
                🪞 Open Webcam Mirror
            </button>
            <div class="mirror-task-text">
                ${step.mirrorTaskText || ''}
            </div>
            <div class="mirror-timer" id="mirror-timer" style="display: none;">
                <div class="mirror-progress" id="mirror-progress">
                    <div class="progress-bar" id="mirror-progress-bar"></div>
                </div>
                <div class="timer-text">Time remaining: <span id="mirror-time">${step.duration || 60}</span>s</div>
                <button id="skip-scenario-mirror-timer-btn" class="btn btn-warning skip-timer-btn" style="margin-top: 10px;">
                    ⏩ Skip Timer (Testing)
                </button>
            </div>
        `;

        choicesEl.appendChild(mirrorContainer);

        // Add click handler for mirror button
        const mirrorBtn = document.getElementById('scenario-mirror-btn');
        mirrorBtn.addEventListener('click', async () => {
            console.log('🪞 Opening webcam for scenario mirror task');
            
            // Disable button while starting
            mirrorBtn.disabled = true;
            mirrorBtn.textContent = '🪞 Opening...';

            try {
                // Use webcam manager to start mirror mode
                if (this.game && this.game.webcamManager) {
                    await this.game.webcamManager.startMirrorMode();
                    
                    // Start countdown timer with slight delay to ensure overlay is ready
                    setTimeout(() => {
                        this.startMirrorTimer(task, scenario, step);
                    }, 100);
                } else {
                    console.error('Webcam manager not available');
                    mirrorBtn.disabled = false;
                    mirrorBtn.textContent = '🪞 Try Again';
                }
            } catch (error) {
                console.error('Failed to start mirror mode:', error);
                mirrorBtn.disabled = false;
                mirrorBtn.textContent = '🪞 Try Again';
            }
        });
    }

    startMirrorTimer(task, scenario, step) {
        const duration = step.duration || 60;
        
        console.log('🪞 Starting mirror timer for', duration, 'seconds');
        
        // Look for timer elements in the mirror overlay first
        const overlay = document.getElementById('mirror-overlay');
        let timerEl, timeEl, progressBar;
        
        if (overlay) {
            timerEl = overlay.querySelector('#mirror-timer');
            timeEl = overlay.querySelector('#mirror-time');
            progressBar = overlay.querySelector('#mirror-progress-bar');
            console.log('🪞 Found overlay elements:', {timerEl: !!timerEl, timeEl: !!timeEl, progressBar: !!progressBar});
        }
        
        // Fallback to scenario elements if overlay elements not found
        if (!timerEl || !timeEl) {
            timerEl = document.getElementById('mirror-timer');
            timeEl = document.getElementById('mirror-time');
            progressBar = document.getElementById('mirror-progress-bar');
            console.log('🪞 Using fallback elements:', {timerEl: !!timerEl, timeEl: !!timeEl, progressBar: !!progressBar});
        }
        
        if (!timerEl || !timeEl) {
            console.error('Timer elements not found in overlay or scenario');
            return;
        }

        // Show timer and progress bar
        timerEl.style.display = 'block';
        let timeLeft = duration;

        // Update time display
        timeEl.textContent = timeLeft;

        // Style and reset the progress bar if found
        if (progressBar) {
            progressBar.style.cssText = `
                width: 0%;
                height: 100%;
                background: linear-gradient(90deg, #8a2be2, #9c27b0);
                border-radius: 4px;
                transition: width 1s ease;
            `;
            
            // Style the progress container
            const progressContainer = progressBar.parentElement;
            if (progressContainer) {
                progressContainer.style.cssText = `
                    width: 100%;
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 4px;
                    margin: 10px 0;
                    height: 8px;
                    overflow: hidden;
                `;
            }
        }

        // Update scenario button state if it exists
        const mirrorBtn = document.getElementById('scenario-mirror-btn');
        if (mirrorBtn) {
            mirrorBtn.textContent = '🪞 Mirror Active';
            mirrorBtn.disabled = true;
        }

        // Prevent camera closure during session
        if (this.game && this.game.webcamManager) {
            this.game.webcamManager.preventClose = true;
        }

        // Add skip button handler
        const skipBtn = document.getElementById('skip-scenario-mirror-timer-btn');
        if (skipBtn) {
            skipBtn.addEventListener('click', () => {
                timeLeft = 0; // This will trigger completion on next interval
            });
        }

        const countdown = setInterval(() => {
            timeLeft--;
            timeEl.textContent = timeLeft;
            
            // Update progress bar
            if (progressBar) {
                const elapsed = duration - timeLeft;
                const progressPercent = (elapsed / duration) * 100;
                progressBar.style.width = `${progressPercent}%`;
            }

            if (timeLeft <= 0) {
                clearInterval(countdown);
                
                // Timer completed - allow camera closure
                if (this.game && this.game.webcamManager) {
                    this.game.webcamManager.preventClose = false;
                }
                
                // Update progress bar to complete
                if (progressBar) {
                    progressBar.style.width = '100%';
                    progressBar.style.background = '#4caf50';
                }
                
                // Timer completed
                mirrorBtn.textContent = '🪞 Completed';
                mirrorBtn.classList.add('completed');
                timeEl.textContent = 'Complete!';
                
                // Apply step effects
                this.applyActionEffects(step, task.scenarioState);

                // Move to next step
                setTimeout(() => {
                    const nextStep = step.next || step.nextStep || this.getDefaultNextStep(task.scenarioState);
                    task.scenarioState.currentStep = nextStep;
                    task.scenarioState.stepNumber++;
                    this.displayScenarioStep(task, scenario, nextStep);
                }, 1500);
            }
        }, 1000);
    }

    startStandaloneMirrorTimer(task, container) {
        const duration = task.duration || 60;
        const timerSection = container.querySelector('#mirror-timer-section');
        const progressBar = container.querySelector('#standalone-mirror-progress-bar');
        const timeDisplay = container.querySelector('#standalone-mirror-time');
        const startBtn = container.querySelector('#start-mirror-btn');
        
        if (!timerSection || !progressBar || !timeDisplay) return;

        // Show timer section
        timerSection.style.display = 'block';
        let timeLeft = duration;

        // Style the progress bar
        progressBar.style.cssText = `
            width: 0%;
            height: 10px;
            background: linear-gradient(90deg, #8a2be2, #9c27b0);
            border-radius: 5px;
            transition: width 1s ease;
        `;
        
        // Style the progress container
        const progressContainer = progressBar.parentElement;
        progressContainer.style.cssText = `
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            margin: 20px 0;
            border: 1px solid rgba(138, 43, 226, 0.3);
        `;

        // Style the timer display
        timeDisplay.style.cssText = `
            font-size: 36px;
            font-weight: bold;
            color: #8a2be2;
            margin: 15px 0;
        `;

        // Update button state
        startBtn.textContent = '🪞 Mirror Active';
        startBtn.disabled = true;
        startBtn.style.opacity = '0.6';

        // Prevent camera closure during session
        if (this.game && this.game.webcamManager) {
            this.game.webcamManager.preventClose = true;
        }

        // Add skip button handler
        const skipBtn = container.querySelector('#skip-mirror-timer-btn');
        if (skipBtn) {
            skipBtn.addEventListener('click', () => {
                timeLeft = 0; // This will trigger completion on next interval
            });
        }

        const countdown = setInterval(() => {
            timeLeft--;
            timeDisplay.textContent = `${timeLeft}s`;
            
            // Update progress bar
            const elapsed = duration - timeLeft;
            const progressPercent = (elapsed / duration) * 100;
            progressBar.style.width = `${progressPercent}%`;

            if (timeLeft <= 0) {
                clearInterval(countdown);
                
                // Timer completed - allow camera closure
                if (this.game && this.game.webcamManager) {
                    this.game.webcamManager.preventClose = false;
                }
                
                // Update progress bar to complete
                progressBar.style.width = '100%';
                progressBar.style.background = '#4caf50';
                
                // Timer completed
                timeDisplay.textContent = 'Complete!';
                timeDisplay.style.color = '#4caf50';
                
                // Update timer label
                const timerLabel = container.querySelector('.timer-label');
                if (timerLabel) {
                    timerLabel.textContent = '✓ Mirror session completed successfully!';
                    timerLabel.style.color = '#4caf50';
                }
                
                console.log('🪞 Standalone mirror task completed');
                
                // Complete the task
                setTimeout(() => {
                    this.completeMirrorTask(task);
                }, 1500);
            }
        }, 1000);
    }

    applyChoiceEffects(choice, state) {
        // Effects system removed
    }

    applyActionEffects(step, state) {
        // Effects system removed
    }

    applyScenarioEffects(step, state) {
        // Could add visual effects, audio changes, etc. based on step properties
        if (step.bgColor) {
            document.querySelector('.interactive-task-container').style.background = step.bgColor;
        }
    }

    // Scenario stats system removed - counters no longer used

    getOutcomeText(outcome) {
        const outcomes = {
            'success': '🎉 Scenario Completed Successfully!',
            'partial': '⚡ Partially Successful',
            'failure': '🔥 Overwhelmed by Desire',
            'denied': '🚫 Denied and Frustrated',
            'reward': '🏆 Earned a Special Reward',
            'punishment': '⛓️ Earned Punishment'
        };
        return outcomes[outcome] || 'Scenario Complete';
    }

    isChoiceAvailable(choice, state) {
        // Counter-based conditions removed - all choices are available
        return true;
    }

    processScenarioText(text, state) {
        // Counter system removed - return text as-is
        return text
            .replace(/\{arousal\}/g, 'your state')
            .replace(/\{control\}/g, 'your focus')
            .replace(/\{intensity\}/g, 'the level');
    }

    /**
     * Speak scenario text using TTS with cross-platform voice
     */
    speakScenarioText(text, state, options = {}) {
        if (!this.ttsEnabled || !text) {
            return;
        }

        // Process the text to replace placeholders
        const processedText = this.processScenarioText(text, state);
        
        // Clean up HTML tags and excessive whitespace for better speech
        const cleanText = processedText
            .replace(/<[^>]*>/g, ' ')  // Remove HTML tags
            .replace(/\s+/g, ' ')      // Collapse whitespace
            .trim();

        if (!cleanText) {
            return;
        }

        // Default TTS settings optimized for scenario narration
        const ttsOptions = {
            rate: options.rate || 0.9,     // Slightly slower for dramatic effect
            pitch: options.pitch || 1.1,   // Slightly higher for feminine voice
            volume: options.volume || 0.8, // Not too loud
            onStart: () => {
                // Optional: could add subtle visual indicator
            },
            onEnd: () => {
                if (options.onComplete) options.onComplete();
            },
            onError: (error) => {
                console.warn('TTS error:', error.message || error);
                if (options.onError) options.onError(error);
            }
        };

        // Speak the text
        this.voiceManager.speak(cleanText, ttsOptions);
    }

    /**
     * Stop any current TTS playback
     */
    stopTTS() {
        if (this.voiceManager) {
            this.voiceManager.stop();
        }
    }

    /**
     * Toggle TTS on/off
     */
    toggleTTS() {
        this.ttsEnabled = !this.ttsEnabled;
        
        if (!this.ttsEnabled) {
            this.stopTTS();
        }
        
        return this.ttsEnabled;
    }

    /**
     * Get current TTS voice information
     */
    getTTSInfo() {
        if (!this.voiceManager) {
            return { available: false, reason: 'Voice manager not initialized' };
        }
        
        return {
            available: this.ttsEnabled,
            voiceInfo: this.voiceManager.getVoiceInfo(),
            supported: this.voiceManager.isSupported()
        };
    }

    getScenarioStepCount(scenario) {
        return Object.keys(scenario.steps || {}).length;
    }

    /**
     * Check if a focus interruption should be triggered
     */
    shouldTriggerFocusInterruption() {
        const chance = window.game?.gameState?.focusInterruptionChance || 0;
        console.log(`🧘 Focus interruption chance setting: ${chance}%`);
        
        if (chance <= 0) {
            console.log(`🧘 Focus interruption disabled (chance is ${chance}%)`);
            return false;
        }
        
        const random = Math.random() * 100;
        const shouldInterrupt = random < chance;
        
        console.log(`🧘 Focus interruption check: ${random.toFixed(1)}% vs ${chance}% = ${shouldInterrupt ? 'INTERRUPT' : 'continue'}`);
        return shouldInterrupt;
    }

    /**
     * Trigger a focus-hold interruption during scenario
     */
    triggerFocusInterruption(task, scenario, pendingChoice) {
        console.log('🧘 ⚡ === FOCUS INTERRUPTION TRIGGERED ===');
        console.log(`🧘 Scenario: ${scenario.id || scenario.title || 'unknown'}, Current Step: ${task.scenarioState.currentStep}`);
        console.log(`🧘 Pending Choice: "${pendingChoice.text}" -> ${pendingChoice.nextStep}`);
        
        // Show brief notification
        this.showFeedback('info', '⚡ Focus interruption triggered! Prepare to concentrate...', 2000);
        
        // Store the scenario state for resumption
        const resumeData = {
            task: task,
            scenario: scenario,
            pendingChoice: pendingChoice,
            originalContainer: this.currentContainer
        };
        
        // Store resume data for later
        this.scenarioResumeData = resumeData;
        console.log(`🧘 Stored resume data for later:`, resumeData);
        
        // Create interruption message
        const container = document.getElementById('interactive-task-container');
        if (!container) {
            console.error('🧘 ❌ Interactive task container not found - cannot show interruption');
            return;
        }
        
        console.log(`🧘 Found container, showing focus interruption interface`);
        container.innerHTML = `
            <div class="focus-interruption">
                <div class="interruption-header">
                    <h4>🧘 Focus Interruption</h4>
                    <p class="interruption-message">Your mind needs to focus. Complete this concentration task before continuing your adventure...</p>
                </div>
                <div id="focus-interruption-content" class="focus-task-content">
                    <!-- Focus task will be inserted here -->
                </div>
            </div>
        `;
        
        // Create a focus-hold task
        const focusTask = this.createFocusInterruptionTask();
        
        // Set this as the current interactive task so validation works
        this.currentInteractiveTask = focusTask;
        console.log(`🧘 Set focus interruption as current task:`, focusTask);
        
        // Insert focus task into the interruption content
        setTimeout(() => {
            const focusContainer = container.querySelector('#focus-interruption-content');
            if (focusContainer) {
                this.createFocusTask(focusTask, focusContainer);
            }
        }, 100);
    }

    /**
     * Create a focus-hold task for interruption
     */
    createFocusInterruptionTask() {
        const durations = [30, 45, 60, 90]; // Different durations in seconds
        const instructions = [
            'Hold the position and maintain focus on the screen',
            'Focus on your breathing and stay perfectly still',
            'Clear your mind and concentrate on the task at hand',
            'Hold steady and let your arousal build without release',
            'Maintain perfect focus while staying on the edge'
        ];
        
        return {
            id: 'focus-interruption',
            text: '🧘 Focus Training Interruption',
            story: '⚡ Your adventure is interrupted by a moment requiring deep concentration. Complete this focus challenge to continue your journey.',
            instructions: instructions[Math.floor(Math.random() * instructions.length)],
            duration: durations[Math.floor(Math.random() * durations.length)],
            interactiveType: 'focus-hold',
            isInterruption: true
        };
    }

    /**
     * Resume scenario after focus interruption
     */
    resumeScenarioAfterInterruption() {
        console.log('🧘 === RESUMING SCENARIO AFTER INTERRUPTION ===');
        
        if (!this.scenarioResumeData) {
            console.warn('⚠️ No scenario resume data found');
            return;
        }
        
        console.log('🧘 Found resume data:', this.scenarioResumeData);
        
        // Show success message
        this.showFeedback('success', '✨ Focus completed! Returning to your adventure...', 2000);
        
        const { task, scenario, pendingChoice } = this.scenarioResumeData;
        
        console.log(`🧘 Resuming scenario: ${scenario.id}`);
        console.log(`🧘 Continuing with choice: "${pendingChoice.text}" -> ${pendingChoice.nextStep}`);
        
        // Small delay to show the success message before continuing
        setTimeout(() => {
            // First, restore the scenario interface since interruption replaced it
            console.log(`🧘 Restoring scenario interface...`);
            const container = document.getElementById('interactive-task-container');
            if (container) {
                console.log(`🧘 Container found, calling createScenarioTask...`);
                this.createScenarioTask(task, container);
                
                // Wait a moment for the interface to be created
                setTimeout(() => {
                    console.log(`🧘 Checking if scenario elements are now available...`);
                    const storyEl = document.getElementById('scenario-story');
                    const choicesEl = document.getElementById('scenario-choices');
                    const stepEl = document.getElementById('scenario-step');
                    console.log(`🧘 Elements found: story=${!!storyEl}, choices=${!!choicesEl}, step=${!!stepEl}`);
                    
                    // Move to next step (the original choice processing)
                    const nextStep = pendingChoice.nextStep || this.getDefaultNextStep(task.scenarioState);
                    task.scenarioState.currentStep = nextStep;
                    task.scenarioState.stepNumber++;

                    console.log(`🧘 ✅ Scenario resumed - moved to step: ${nextStep} (Step #${task.scenarioState.stepNumber})`);

                    // Display next step
                    this.displayScenarioStep(task, scenario, nextStep);
                    
                    // Clear resume data
                    this.scenarioResumeData = null;
                    console.log(`🧘 Resume data cleared - scenario flow restored`);
                }, 100);
            } else {
                console.error(`🧘 ❌ Container not found for scenario restoration`);
            }
        }, 1000);
    }

    getDefaultNextStep(state) {
        // Simple logic to determine next step based on state
        // Can be overridden by specific choice nextStep properties
        return `step${state.stepNumber + 1}`;
    }

    /**
     * Validate scenario task completion
     */
    async validateScenarioTask(task) {
        console.log('🔍 ValidateScenarioTask called with task:', task);
        console.log('🔍 Task scenarioState:', task.scenarioState);
        console.log('🔍 Task scenarioState.completed:', task.scenarioState?.completed);
        
        // Check if scenario is marked as completed
        if (task.scenarioState && task.scenarioState.completed) {
            console.log('✅ Scenario task validation: PASSED (completed = true)');
            return true;
        }
        
        // For photography steps, check if photos have been taken
        const currentStep = task.scenarioState?.currentStep;
        if (currentStep && task.interactiveData?.steps) {
            const step = task.interactiveData.steps[currentStep];
            if (step && this.isPhotographyStep(step)) {
                console.log('📸 Validating photography step completion');
                // Photography steps are considered complete when photos are taken
                // The webcam manager should have already handled completion
                return true;
            }
        }
        
        console.log('❌ Scenario task validation: FAILED');
        return false;
    }

    /**
     * Create mirror task - opens webcam for self-viewing
     */
    async createMirrorTask(task, container) {
        console.log('🪞 Creating mirror task');
        
        // Create mirror task interface
        container.innerHTML = `
            <div class="mirror-task-container">
                <div class="mirror-task-header">
                    <h3>🪞 Mirror Task</h3>
                    <p>${task.story || 'Use the webcam to look at yourself and complete the task'}</p>
                </div>
                <div class="mirror-task-content">
                    <div class="mirror-instructions">
                        ${task.mirrorInstructions || task.story || 'Complete the task while looking at yourself'}
                    </div>
                    <button id="start-mirror-btn" class="btn btn-primary mirror-start-btn">
                        🪞 Open Webcam Mirror
                    </button>
                    <div class="mirror-task-details">
                        ${task.mirrorTaskText || ''}
                    </div>
                    <div class="mirror-timer-section" id="mirror-timer-section" style="display: none;">
                        <div class="mirror-progress-container" id="mirror-progress-container">
                            <div class="progress-bar" id="standalone-mirror-progress-bar"></div>
                        </div>
                        <div class="timer-display" id="standalone-mirror-time">
                            ${task.duration || 60}s
                        </div>
                        <div class="timer-label">Mirror session in progress...</div>
                        <button id="skip-mirror-timer-btn" class="btn btn-warning skip-timer-btn" style="margin-top: 15px;">
                            ⏩ Skip Timer (Testing)
                        </button>
                    </div>
                </div>
            </div>
        `;

        // Style the mirror task
        const mirrorContainer = container.querySelector('.mirror-task-container');

        // Add event listener for the start button
        const startBtn = container.querySelector('#start-mirror-btn');

        // Add hover effect
        startBtn.addEventListener('mouseenter', () => {
            startBtn.style.transform = 'translateY(-2px) scale(1.05)';
            startBtn.style.boxShadow = '0 5px 15px rgba(138, 43, 226, 0.5)';
        });

        startBtn.addEventListener('mouseleave', () => {
            startBtn.style.transform = 'translateY(0) scale(1)';
            startBtn.style.boxShadow = '0 3px 10px rgba(138, 43, 226, 0.3)';
        });

        // Add click handler to start mirror mode
        startBtn.addEventListener('click', () => {
            if (this.game.webcamManager) {
                const mirrorData = {
                    instructions: task.mirrorInstructions || 'Complete your task while looking at yourself',
                    taskText: task.mirrorTaskText || task.story,
                    task: task
                };
                
                // Start mirror mode
                this.game.webcamManager.startMirrorMode(mirrorData);
                
                // Start the timer and progress bar
                this.startStandaloneMirrorTimer(task, container);
                
            } else {
                console.warn('Webcam not available - falling back to regular task completion');
                if (this.game && this.game.showNotification) {
                    this.game.showNotification('Webcam not available. Task completed automatically.', 'warning');
                }
                setTimeout(() => {
                    this.completeMirrorTask(task);
                }, 2000);
            }
        });

        return true;
    }

    /**
     * Validate mirror task completion
     */
    async validateMirrorTask(task) {
        return true; // Mirror tasks are completed when webcam mirror is closed
    }

    /**
     * Create pose verification task
     */
    async createPoseVerificationTask(task, container) {
        console.log('🔍 Creating pose verification task');
        
        // Extract pose information from task
        const poseInstructions = this.extractPoseInstructions(task);
        const verificationDuration = task.verificationDuration || task.duration || 30;
        
        // Create pose verification interface
        container.innerHTML = `
            <div class="pose-verification-container">
                <div class="pose-verification-header">
                    <h3>🔍 Pose Verification Required</h3>
                    <p>${task.story || 'Assume the required pose and verify with webcam'}</p>
                </div>
                <div class="pose-verification-content">
                    <div class="pose-instructions">
                        <h4>Required Pose:</h4>
                        <div class="pose-description">${poseInstructions}</div>
                    </div>
                    <div class="verification-info">
                        <p>🔍 Use your webcam to verify you're maintaining the correct pose</p>
                        <p>⏱️ Hold the position for ${verificationDuration} seconds</p>
                    </div>
                    <button id="start-pose-verification-btn" class="btn btn-primary pose-verification-btn">
                        🔍 Start Pose Verification
                    </button>
                    <div class="pose-verification-timer" id="pose-verification-timer" style="display: none;">
                        <div class="verification-progress-container">
                            <div class="progress-bar" id="pose-verification-progress-bar"></div>
                        </div>
                        <div class="timer-display" id="pose-verification-time">
                            ${verificationDuration}s
                        </div>
                        <div class="timer-label">Verification in progress...</div>
                        <button id="skip-pose-timer-btn" class="btn btn-warning skip-timer-btn" style="margin-top: 15px;">
                            ⏩ Skip Timer (Testing)
                        </button>
                    </div>
                </div>
            </div>
        `;

        // Add event listener for the start button
        const startBtn = container.querySelector('#start-pose-verification-btn');

        // Add hover effects
        startBtn.addEventListener('mouseenter', () => {
            startBtn.style.transform = 'translateY(-2px) scale(1.05)';
            startBtn.style.boxShadow = '0 5px 15px rgba(231, 76, 60, 0.5)';
        });

        startBtn.addEventListener('mouseleave', () => {
            startBtn.style.transform = 'translateY(0) scale(1)';
            startBtn.style.boxShadow = '0 3px 10px rgba(231, 76, 60, 0.3)';
        });

        // Add click handler to start pose verification
        startBtn.addEventListener('click', () => {
            if (this.game.webcamManager) {
                const verificationData = {
                    instructions: `Assume the required pose: ${poseInstructions}`,
                    verificationInstructions: poseInstructions,
                    verificationDuration: verificationDuration,
                    verificationText: task.actionText || task.story,
                    task: task
                };
                
                // Start verification mode
                this.game.webcamManager.startVerificationMode(verificationData);
                
                // Start the timer and progress bar
                this.startPoseVerificationTimer(task, container);
                
            } else {
                console.warn('Webcam not available - falling back to regular task completion');
                if (this.game && this.game.showNotification) {
                    this.game.showNotification('Webcam not available. Task completed automatically.', 'warning');
                }
                setTimeout(() => {
                    this.completePoseVerificationTask(task);
                }, 2000);
            }
        });

        return true;
    }

    /**
     * Extract pose instructions from task data
     */
    extractPoseInstructions(task) {
        // Check for specific pose indicators in task text
        const text = `${task.story || ''} ${task.actionText || ''}`.toLowerCase();
        
        if (text.includes('all fours') || text.includes('hands and knees')) {
            return 'Get on all fours with hands and knees on the ground';
        } else if (text.includes('kneel') || text.includes('kneeling')) {
            return 'Kneel with proper posture, hands on thighs';
        } else if (text.includes('present') || text.includes('spread')) {
            return 'Assume a presenting position as described';
        } else if (text.includes('position') && text.includes('stress')) {
            return 'Maintain stress position - hands behind head, standing on toes';
        } else if (text.includes('crawl')) {
            return 'Get into crawling position on hands and knees';
        } else if (text.includes('shameful') && text.includes('position')) {
            return 'Assume the shameful position as described in the task';
        } else {
            return task.actionText || 'Assume the position described in the task';
        }
    }

    /**
     * Start pose verification timer
     */
    startPoseVerificationTimer(task, container) {
        const duration = task.verificationDuration || task.duration || 30;
        const timerSection = container.querySelector('#pose-verification-timer');
        const progressBar = container.querySelector('#pose-verification-progress-bar');
        const timeDisplay = container.querySelector('#pose-verification-time');
        const startBtn = container.querySelector('#start-pose-verification-btn');
        
        // Show timer and hide start button
        timerSection.style.display = 'block';
        startBtn.style.display = 'none';
        
        let timeLeft = duration;

        // Add skip button handler
        const skipBtn = container.querySelector('#skip-pose-timer-btn');
        if (skipBtn) {
            skipBtn.addEventListener('click', () => {
                timeLeft = 0; // This will trigger completion on next interval
            });
        }

        const interval = setInterval(() => {
            timeLeft--;
            timeDisplay.textContent = `${timeLeft}s`;
            
            const progress = ((duration - timeLeft) / duration) * 100;
            progressBar.style.width = `${progress}%`;
            
            if (timeLeft <= 0) {
                clearInterval(interval);
                this.completePoseVerificationTask(task);
            }
        }, 1000);

        // Store interval for cleanup
        this.poseVerificationInterval = interval;
    }

    /**
     * Complete pose verification task
     */
    completePoseVerificationTask(task) {
        console.log('✅ Pose verification task completed');
        
        // Clean up interval
        if (this.poseVerificationInterval) {
            clearInterval(this.poseVerificationInterval);
            this.poseVerificationInterval = null;
        }
        
        // Close webcam verification if active
        if (this.game.webcamManager) {
            this.game.webcamManager.stopCamera();
        }
        
        // Complete the task
        this.completeInteractiveTask();
    }

    /**
     * Validate pose verification task
     */
    async validatePoseVerificationTask(task) {
        return true; // Pose verification tasks are completed when timer expires
    }

    /**
     * Check if a scenario step involves photography
     */
    isPhotographyStep(step) {
        if (!step) return false;
        
        // Check for explicit photography step markers
        if (step.type === 'action' && step.duration === 0) {
            console.log('📸 Photography step detected: explicit 0 duration');
            return true; // Steps with 0 duration are photo steps
        }
        
        // For dress-up scenarios, all action steps should be photography steps
        const task = this.game?.gameState?.currentTask;
        console.log('📸 Checking photography step detection for task:', task?.id, 'step type:', step.type);
        if (task && task.id === 'scenario-dress-up-photo') {
            const isAction = step.type === 'action';
            console.log('📸 Dress-up scenario detected, is action step:', isAction);
            return isAction;
        }
        
        const photoKeywords = ['photo', 'photograph', 'camera', 'picture', 'pose', 'submissive_photo', 'dress.*photo'];
        const textToCheck = `${step.actionText || ''} ${step.story || ''}`.toLowerCase();
        console.log('📸 Keyword detection - text to check:', textToCheck);
        
        const result = photoKeywords.some(keyword => {
            if (keyword.includes('.*')) {
                // Handle regex patterns
                const regex = new RegExp(keyword);
                return regex.test(textToCheck);
            }
            return textToCheck.includes(keyword);
        });
        
        console.log('📸 Photography step detection result:', result);
        return result;
    }

    /**
     * Start photography session for scenario step
     */
    async startPhotographySession(task, scenario, step) {
        console.log('📸 Starting photography session for scenario step');
        console.log('📸 Task:', task?.id, 'Step:', step?.nextStep || 'no-next-step');
        console.log('📸 Step details:', { type: step?.type, actionText: step?.actionText });
        
        // Determine photo requirements from step
        const photoRequirements = this.getPhotoRequirements(step);
        console.log('📸 Photo requirements:', photoRequirements);
        
        const sessionType = this.getSessionTypeFromStep(step);
        console.log('📸 Session type:', sessionType);
        
        // Set up event listener for photo session completion
        const handlePhotoCompletion = (event) => {
            console.log('📸 EVENT TRIGGERED - Photo session completed - handling scenario progression');
            console.log('📸 Event detail:', event.detail);
            console.log('📸 Task state:', { id: task?.id, stepNumber: task?.scenarioState?.stepNumber });
            console.log('📸 Current step:', task?.scenarioState?.currentStep);
            
            // Remove this specific event listener
            document.removeEventListener('photoSessionComplete', handlePhotoCompletion);
            
            // Progress to next scenario step
            console.log('📸 About to handle photography step completion');
            this.handlePhotographyStepCompletion(task, scenario, step);
        };
        
        // Add the event listener
        document.addEventListener('photoSessionComplete', handlePhotoCompletion);
        console.log('📸 Event listener set up, starting photo session...');
        
        const success = await this.game.webcamManager.startPhotoSessionWithProgress(sessionType, {
            task: task,
            scenario: scenario,
            step: step,
            requirements: photoRequirements
        });
        
        console.log('📸 Photo session start result:', success);
        if (!success) {
            console.log('📸 Camera not available - removing event listener');
            document.removeEventListener('photoSessionComplete', handlePhotoCompletion);
            this.showFeedback('error', 'Camera not available. Please complete the task manually.');
        }
    }

    /**
     * Handle completion of a photography step in scenario
     */
    handlePhotographyStepCompletion(task, scenario, step) {
        console.log('📸 ENTERING handlePhotographyStepCompletion');
        console.log('📸 Task:', task?.id);
        console.log('📸 Step:', step);
        console.log('📸 Step nextStep:', step?.nextStep);
        console.log('📸 Current scenario state:', task?.scenarioState);
        
        // Check if this step has a specific nextStep
        if (step.nextStep) {
            console.log(`📸 Auto-progressing to next step: ${step.nextStep}`);
            console.log('📸 Setting up auto-progression with 1500ms delay...');
            
            // Add a small delay to show completion feedback
            setTimeout(() => {
                console.log('📸 TIMEOUT EXECUTING - updating scenario state');
                console.log('📸 Previous step:', task.scenarioState.currentStep);
                console.log('📸 Previous step number:', task.scenarioState.stepNumber);
                
                task.scenarioState.currentStep = step.nextStep;
                task.scenarioState.stepNumber++;
                
                console.log('📸 New step:', task.scenarioState.currentStep);
                console.log('📸 New step number:', task.scenarioState.stepNumber);
                console.log('📸 About to call displayScenarioStep...');
                
                this.displayScenarioStep(task, scenario, step.nextStep);
                console.log('📸 displayScenarioStep called');
            }, 1500);
        } else {
            console.log('📸 No nextStep found - enabling manual progression');
            console.log('📸 Photo step completed - enabling manual progression');
            // Show completion message and enable manual progression
            this.showFeedback('success', '📸 Photo task completed! Click Complete to continue.');
            
            // Enable the complete button for manual progression
            const completeBtn = document.getElementById('interactive-complete-btn');
            console.log('📸 Looking for complete button:', !!completeBtn);
            if (completeBtn) {
                completeBtn.disabled = false;
                completeBtn.style.display = 'block';
                console.log('📸 Complete button enabled for manual progression');
            } else {
                console.log('📸 WARNING: Complete button not found!');
            }
        }
        
        // Show success feedback
        this.showFeedback('success', '📸 Photo session completed successfully!');
    }

    /**
     * Get photo requirements from step
     */
    getPhotoRequirements(step) {
        // First check if step has photoRequirements object (inventory-based progression)
        if (step.photoRequirements) {
            return {
                count: step.photoRequirements.count || 3,
                description: `Take ${step.photoRequirements.count || 3} photos to complete this task`,
                items: step.photoRequirements.items || [],
                pose: step.photoRequirements.pose || null,
                edging: step.photoRequirements.edging || false
            };
        }
        
        // Check if step has explicit photoCount property
        if (step.photoCount) {
            return { 
                count: step.photoCount, 
                description: `Take ${step.photoCount} photos to complete this task` 
            };
        }
        
        // Check if this is a scenario with dynamic photo count based on state
        if (this.currentInteractiveTask && this.currentInteractiveTask.scenarioState) {
            const state = this.currentInteractiveTask.scenarioState;
            const photoCount = this.calculateDynamicPhotoCount(state, step);
            
            return { 
                count: photoCount, 
                description: `Take ${photoCount} photos to complete this task` 
            };
        }
        
        // Otherwise parse step content to determine how many photos are needed
        const actionText = step.actionText?.toLowerCase() || '';
        const story = step.story?.toLowerCase() || '';
        
        // Look for photo count hints in the text
        if (actionText.includes('series') || story.includes('multiple') || story.includes('several')) {
            return { count: 3, description: 'Take 3 photos in different poses' };
        } else if (actionText.includes('photo session') || story.includes('photo shoot')) {
            return { count: 5, description: 'Complete photo session (5 photos)' };
        } else {
            return { count: 1, description: 'Take 1 photo to complete task' };
        }
    }

    /**
     * Calculate dynamic photo count based on scenario state
     */
    calculateDynamicPhotoCount(state, step) {
        // Counter system removed
        // Counter system removed
        
        // Base photo count
        let photoCount = 1;
        
        // Increase photo count based on arousal level
        photoCount += 1; // Static photo count
        
        // Adjust based on control level
        if (control <= 20) {
            photoCount += 2; // Very low control = need more photos for submission
        } else if (control <= 40) {
            photoCount += 1; // Low control = need extra photos
        }
        
        // Cap at reasonable limits
        photoCount = Math.max(1, Math.min(6, photoCount));
        
        console.log(`📸 Dynamic photo count: ${photoCount}`);
        return photoCount;
    }

    /**
     * Get session type from scenario step
     */
    getSessionTypeFromStep(step) {
        const content = `${step.actionText || ''} ${step.story || ''}`.toLowerCase();
        
        if (content.includes('submissive') || content.includes('pose')) {
            return 'submissive_poses';
        } else if (content.includes('dress') || content.includes('costume')) {
            return 'dress_up_photos';
        } else if (content.includes('humil') || content.includes('degrad')) {
            return 'humiliation_photos';
        } else {
            return 'general_photography';
        }
    }

    /**
     * Offer webcam option for photography tasks
     */
    async offerWebcamOption(task) {
        return new Promise((resolve) => {
            // Create modal dialog
            const modal = document.createElement('div');
            modal.id = 'webcam-offer-modal';
            modal.innerHTML = `
                <div class="modal-overlay">
                    <div class="modal-content">
                        <h3>📸 Photography Task Detected</h3>
                        <p>This task involves photography. Would you like to use your webcam for a more immersive experience?</p>
                        <div class="task-preview">
                            <strong>Task:</strong> ${task.text}
                        </div>
                        <div class="modal-buttons">
                            <button id="use-webcam-btn" class="btn-primary">📷 Use Webcam</button>
                            <button id="skip-webcam-btn" class="btn-secondary">📝 Text Only</button>
                        </div>
                        <div class="privacy-note">
                            <small>🔒 Photos are processed locally and never uploaded</small>
                        </div>
                    </div>
                </div>
            `;

            document.body.appendChild(modal);
            this.addWebcamModalStyles();

            // Handle button clicks
            document.getElementById('use-webcam-btn').addEventListener('click', () => {
                modal.remove();
                resolve(true);
            });

            document.getElementById('skip-webcam-btn').addEventListener('click', () => {
                modal.remove();
                resolve(false);
            });
        });
    }

    /**
     * Start webcam photo session for photography task
     */
    async startWebcamPhotoSession(task) {
        console.log('📸 Starting webcam photo session for task:', task.interactiveType);
        
        const sessionType = this.game.webcamManager.getSessionTypeFromTask(task);
        const success = await this.game.webcamManager.startPhotoSession(sessionType, task);
        
        if (success) {
            console.log('✅ Webcam photo session started successfully');
            return true;
        } else {
            console.log('❌ Webcam photo session failed to start, falling back to text mode');
            // Fall back to regular interactive task display
            return this.displayRegularInteractiveTask(task);
        }
    }

    /**
     * Handle photo session completion (multiple photos)
     */
    handlePhotoSessionCompletion(detail) {
        console.log('🎉 Photo session completion handled:', detail.sessionType, `(${detail.photos.length} photos)`);
        
        // Show task completion message
        if (this.game.showNotification) {
            this.game.showNotification(`Photography completed! ${detail.photos.length} photos taken 📸`, 'success', 3000);
        }

        // Progress the scenario to next step (don't end the game)
        if (this.currentInteractiveTask && detail.taskData) {
            const { task, scenario, step } = detail.taskData;
            
            // Apply step effects based on photo count (more photos = more arousal/less control)
            if (step.effects) {
                this.applyStepEffects(step.effects, task.scenarioState, detail.photos.length);
            }
            
            // Move to next step
            const nextStep = step.nextStep || 'completion';
            setTimeout(() => {
                this.displayScenarioStep(task, scenario, nextStep);
            }, 1000);
        }
    }

    /**
     * Apply step effects with photo count modifiers
     */
    applyStepEffects(effects, state, photoCount = 1) {
        // Effects system removed
    }

    /**
     * Handle photo completion from webcam (single photo - keep for compatibility)
     */
    handlePhotoCompletion(detail) {
        console.log('📸 Photo completion handled:', detail.sessionType);
        
        // Show task completion message
        if (this.game.showNotification) {
            this.game.showNotification('Photography task completed! 📸', 'success', 3000);
        }

        // Mark current task as completed after a delay (but don't use completeInteractiveTask to avoid container issues)
        setTimeout(() => {
            // Check if game is still running before completing
            if (this.currentInteractiveTask && this.game.gameState.isRunning) {
                this.cleanupInteractiveTask();
                this.game.completeTask();
            }
        }, 2000);
    }

    /**
     * Resume from camera back to task
     */
    resumeFromCamera() {
        console.log('📱 Resuming from camera to task interface');
        
        // Check if game is still running
        if (!this.game.gameState.isRunning) {
            console.log('Resume from camera cancelled - game no longer running');
            return;
        }
        
        // Show completion message and progress to next task
        if (this.currentInteractiveTask) {
            // Mark task as completed without trying to show feedback in missing containers
            this.cleanupInteractiveTask();
            
            // Show success notification through game system instead
            if (this.game && this.game.showNotification) {
                this.game.showNotification('Photography task completed successfully! 📸', 'success', 3000);
            }
            
            // Complete the task directly
            setTimeout(() => {
                // Double-check game is still running
                if (this.game.gameState.isRunning) {
                    this.game.completeTask();
                }
            }, 1000);
        }
    }

    /**
     * Complete mirror task from webcam
     */
    completeMirrorTask(taskData) {
        console.log('🪞 Mirror task completed through webcam');
        
        // Check if this is a scenario step (not a standalone task)
        const currentTask = this.game?.gameState?.currentTask;
        console.log('🔍 Current task check:', currentTask);
        console.log('🔍 Task details:', {
            hasTask: !!currentTask,
            taskId: currentTask?.id,
            interactiveType: currentTask?.interactiveType,
            hasScenarioState: !!currentTask?.scenarioState,
            scenarioState: currentTask?.scenarioState,
            currentStep: currentTask?.scenarioState?.currentStep
        });
        
        if (currentTask && currentTask.interactiveType === 'scenario-adventure' && currentTask.scenarioState) {
            console.log('✅ IS SCENARIO - Completing scenario mirror step');
            
            // Get the current step
            const scenario = currentTask.interactiveData;
            const currentStepId = currentTask.scenarioState.currentStep;
            const step = scenario.steps[currentStepId];
            
            console.log('🔍 Step info:', {
                currentStepId,
                stepType: step?.type,
                hasNextStep: !!(step?.nextStep || step?.next),
                nextStep: step?.nextStep || step?.next,
                step: step
            });
            
            if (step && (step.nextStep || step.next)) {
                // Apply step effects
                this.applyActionEffects(step, currentTask.scenarioState);
                
                // Move to next step
                const nextStep = step.next || step.nextStep || this.getDefaultNextStep(currentTask.scenarioState);
                console.log('⏭️ Advancing to next step:', nextStep);
                
                setTimeout(() => {
                    currentTask.scenarioState.currentStep = nextStep;
                    currentTask.scenarioState.stepNumber++;
                    
                    // Check if we're in training academy mode
                    if (window.proceedToNextStep && typeof window.proceedToNextStep === 'function') {
                        console.log('🎓 Using training academy progression');
                        window.proceedToNextStep(nextStep);
                    } else {
                        // Standard scenario progression
                        this.displayScenarioStep(currentTask, scenario, nextStep);
                    }
                }, 1000);
                
                return; // Don't complete the whole task, just advance the scenario
            } else {
                console.log('❌ Step has no nextStep property');
            }
        } else {
            console.log('❌ NOT A SCENARIO - will complete task normally');
            console.log('  - currentTask exists:', !!currentTask);
            console.log('  - is scenario-adventure:', currentTask?.interactiveType === 'scenario-adventure');
            console.log('  - has scenarioState:', !!currentTask?.scenarioState);
        }
        
        // Only try to complete the task if game is running
        if (!this.game?.gameState?.isRunning) {
            console.log('Mirror task completion cancelled - game no longer running');
            return;
        }
        
        // Show completion message for standalone tasks
        if (this.game && this.game.showNotification) {
            this.game.showNotification('Mirror task completed! 🪞', 'success', 3000);
        }
        
        // Clean up any interactive task
        if (this.currentInteractiveTask) {
            this.cleanupInteractiveTask();
        }
        
        // Complete the task
        console.log('📞 Calling game.completeTask()');
        setTimeout(() => {
            if (this.game.gameState.isRunning) {
                this.game.completeTask();
            }
        }, 1000);
    }

    /**
     * Handle mirror task abandonment
     */
    abandonMirrorTask() {
        console.log('❌ Mirror task abandoned by user');
        
        // Check if game is still running
        if (!this.game.gameState.isRunning) {
            console.log('Mirror task abandonment cancelled - game no longer running');
            return;
        }
        
        // Show abandonment message
        if (this.game && this.game.showNotification) {
            this.game.showNotification('Mirror task abandoned. You gave up like a quitter! 😤', 'error', 4000);
        }
        
        // Clean up any interactive task
        if (this.currentInteractiveTask) {
            this.cleanupInteractiveTask();
        }
        
        // Mark as failure and end task
        setTimeout(() => {
            if (this.game.gameState.isRunning) {
                // Add penalty points or mark as failure
                if (this.game.gameState.stats) {
                    this.game.gameState.stats.failures = (this.game.gameState.stats.failures || 0) + 1;
                    this.game.gameState.stats.abandonments = (this.game.gameState.stats.abandonments || 0) + 1;
                }
                
                // End task as failure
                this.game.failTask('Mirror task abandoned');
            }
        }, 1000);
    }

    /**
     * Display regular interactive task (fallback from webcam)
     */
    async displayRegularInteractiveTask(task) {
        // Continue with regular interactive task display
        // (This is the original displayInteractiveTask logic)
        
        // Handle task image for interactive tasks
        const taskImage = document.getElementById('task-image');
        if (taskImage && task.image) {
            console.log(`🖼️ Setting interactive task image: ${task.image}`);
            taskImage.src = task.image;
            taskImage.onerror = () => {
                console.log('Interactive task image failed to load:', task.image);
                taskImage.src = this.createPlaceholderImage('Interactive Task');
            };
        } else if (taskImage) {
            console.log(`⚠️ No image provided for interactive task, creating placeholder`);
            taskImage.src = this.createPlaceholderImage('Interactive Task');
        }

        // Continue with rest of task display logic...
        const taskContainer = this.taskContainer || document.querySelector('.task-display-container');
        
        // Add interactive container
        const interactiveContainer = document.createElement('div');
        interactiveContainer.id = 'interactive-task-container';
        interactiveContainer.innerHTML = `
            <div class="interactive-task-content">
                <h3>Interactive Task: ${task.interactiveType}</h3>
                <p>${task.text}</p>
                <div class="task-completion">
                    <button id="complete-photo-task" class="btn-primary">📸 Complete Photography Task</button>
                </div>
            </div>
        `;

        if (taskContainer) {
            taskContainer.appendChild(interactiveContainer);
        }

        // Bind completion button
        document.getElementById('complete-photo-task').addEventListener('click', () => {
            this.completeInteractiveTask();
        });

        return true;
    }

    /**
     * Add styles for webcam modal
     */
    addWebcamModalStyles() {
        if (document.getElementById('webcam-modal-styles')) return;

        const styles = document.createElement('style');
        styles.id = 'webcam-modal-styles';
        styles.textContent = `
            #webcam-offer-modal .modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0, 0, 0, 0.8);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 9999;
            }

            #webcam-offer-modal .modal-content {
                background: #2a2a2a;
                padding: 30px;
                border-radius: 10px;
                max-width: 500px;
                text-align: center;
                color: white;
                box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            }

            #webcam-offer-modal h3 {
                margin-bottom: 20px;
                color: #ff6b6b;
            }

            #webcam-offer-modal .task-preview {
                background: #3a3a3a;
                padding: 15px;
                border-radius: 5px;
                margin: 20px 0;
                font-style: italic;
            }

            #webcam-offer-modal .modal-buttons {
                margin: 20px 0;
            }

            #webcam-offer-modal .modal-buttons button {
                margin: 0 10px;
                padding: 12px 24px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
                transition: all 0.3s;
            }

            #webcam-offer-modal .btn-primary {
                background: #ff6b6b;
                color: white;
            }

            #webcam-offer-modal .btn-secondary {
                background: #6c757d;
                color: white;
            }

            #webcam-offer-modal .modal-buttons button:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            }

            #webcam-offer-modal .privacy-note {
                color: #aaa;
                margin-top: 15px;
            }
        `;

        document.head.appendChild(styles);
    }

    /**
     * Add styles for scenario interface elements
     */
    addScenarioStyles() {
        if (document.getElementById('scenario-styles')) return;

        const styles = document.createElement('style');
        styles.id = 'scenario-styles';
        styles.textContent = `
            /* Scenario camera button styles */
            .scenario-camera-btn {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border: none;
                border-radius: 16px;
                padding: 20px 25px;
                margin: 15px 0;
                width: 100%;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                font-size: 16px;
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
                border: 2px solid rgba(255, 255, 255, 0.1);
            }

            .scenario-camera-btn::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                transition: left 0.6s;
            }

            .scenario-camera-btn:hover {
                background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
                transform: translateY(-3px) scale(1.02);
                box-shadow: 0 12px 28px rgba(102, 126, 234, 0.4);
                border-color: rgba(255, 255, 255, 0.2);
            }

            .scenario-camera-btn:hover::before {
                left: 100%;
            }

            .scenario-camera-btn:active {
                transform: translateY(-1px) scale(1.01);
                box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3);
            }

            .camera-text {
                font-weight: bold;
                margin-bottom: 8px;
                font-size: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            }

            .camera-text::before {
                content: '📷';
                font-size: 24px;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
                animation: cameraGlow 2s ease-in-out infinite alternate;
            }

            .camera-info {
                font-size: 14px;
                opacity: 0.95;
                font-weight: 500;
                text-align: center;
                background: rgba(255, 255, 255, 0.1);
                padding: 8px 12px;
                border-radius: 20px;
                margin-top: 10px;
                border: 1px solid rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
            }

            @keyframes cameraGlow {
                0% { 
                    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
                    transform: scale(1);
                }
                100% { 
                    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.4));
                    transform: scale(1.05);
                }
            }

            /* Scenario action button styles */
            .scenario-action {
                background: linear-gradient(135deg, #e91e63 0%, #ad1457 100%);
                color: white;
                border: none;
                border-radius: 16px;
                padding: 20px 25px;
                margin: 15px 0;
                width: 100%;
                cursor: pointer;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                font-size: 16px;
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 20px rgba(233, 30, 99, 0.3);
                border: 2px solid rgba(255, 255, 255, 0.1);
            }

            .scenario-action:hover {
                background: linear-gradient(135deg, #c2185b 0%, #880e4f 100%);
                transform: translateY(-3px) scale(1.02);
                box-shadow: 0 12px 28px rgba(233, 30, 99, 0.4);
                border-color: rgba(255, 255, 255, 0.2);
            }

            .scenario-action:active {
                transform: translateY(-1px) scale(1.01);
                box-shadow: 0 6px 16px rgba(233, 30, 99, 0.3);
            }

            .scenario-action.active {
                background: linear-gradient(135deg, #ff5722 0%, #d84315 100%);
                cursor: not-allowed;
                animation: actionPulse 1s ease-in-out infinite;
            }

            .scenario-action.completed {
                background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
                cursor: default;
            }

            .action-text {
                font-weight: bold;
                margin-bottom: 8px;
                font-size: 18px;
                text-align: center;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            }

            .action-timer {
                font-size: 24px;
                font-weight: bold;
                color: #fff;
                background: rgba(255, 255, 255, 0.2);
                padding: 8px 16px;
                border-radius: 20px;
                text-align: center;
                border: 1px solid rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
            }

            /* Skip Timer Button Styling */
            .skip-timer-btn {
                background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
                color: white;
                border: 2px solid rgba(255, 255, 255, 0.2);
                border-radius: 12px;
                padding: 10px 20px;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
            }

            .skip-timer-btn:hover {
                background: linear-gradient(135deg, #fb8c00 0%, #e65100 100%);
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(255, 152, 0, 0.5);
            }

            .skip-timer-btn:active {
                transform: translateY(0);
                box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
            }

            @keyframes actionPulse {
                0%, 100% { 
                    opacity: 1;
                    transform: scale(1);
                }
                50% { 
                    opacity: 0.8;
                    transform: scale(1.02);
                }
            }

            /* TTS Control Styling */
            .tts-control {
                background: linear-gradient(135deg, #37474f 0%, #263238 100%);
                color: #b0bec5;
                border: none;
                border-radius: 12px;
                padding: 8px 16px;
                margin: 0 5px;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
                font-size: 13px;
                font-weight: 500;
                position: relative;
                overflow: hidden;
                box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.05);
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }

            .tts-control::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
                transition: left 0.5s;
            }

            .tts-control:hover {
                background: linear-gradient(135deg, #455a64 0%, #37474f 100%);
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
                border-color: rgba(255, 255, 255, 0.1);
                color: #cfd8dc;
            }

            .tts-control:hover::before {
                left: 100%;
            }

            .tts-control:active {
                transform: translateY(0);
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            }

            .tts-control.enabled {
                background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
                color: white;
                box-shadow: 0 3px 8px rgba(67, 160, 71, 0.3);
                border-color: rgba(255, 255, 255, 0.1);
            }

            .tts-control.enabled:hover {
                background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
                box-shadow: 0 6px 16px rgba(67, 160, 71, 0.4);
                transform: translateY(-2px);
            }

            .tts-control.disabled {
                background: linear-gradient(135deg, #757575 0%, #424242 100%);
                color: #bdbdbd;
                box-shadow: 0 3px 8px rgba(117, 117, 117, 0.2);
            }

            .tts-control.disabled:hover {
                background: linear-gradient(135deg, #616161 0%, #424242 100%);
                box-shadow: 0 6px 16px rgba(117, 117, 117, 0.3);
                color: #e0e0e0;
            }

            /* Scenario controls container */
            .scenario-controls {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            /* Responsive adjustments */
            @media (max-width: 768px) {
                .scenario-camera-btn {
                    padding: 18px 20px;
                    border-radius: 14px;
                }
                
                .camera-text {
                    font-size: 16px;
                }
                
                .camera-text::before {
                    font-size: 22px;
                }
            }
        `;

        document.head.appendChild(styles);
    }

    /**
     * Add styles for give up warning modal
     */
    addGiveUpWarningStyles() {
        if (document.getElementById('give-up-warning-styles')) return;

        const styles = document.createElement('style');
        styles.id = 'give-up-warning-styles';
        styles.textContent = `
            #give-up-warning-modal.modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0, 0, 0, 0.85);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 10000;
                backdrop-filter: blur(5px);
            }

            .give-up-warning {
                background: linear-gradient(135deg, #1a1a1a 0%, #2d1b1b 100%);
                border: 2px solid #d32f2f;
                border-radius: 20px;
                padding: 30px;
                max-width: 500px;
                margin: 20px;
                box-shadow: 0 20px 40px rgba(211, 47, 47, 0.3);
                animation: warningPulse 0.5s ease-out;
            }

            @keyframes warningPulse {
                0% { transform: scale(0.8); opacity: 0; }
                50% { transform: scale(1.05); }
                100% { transform: scale(1); opacity: 1; }
            }

            .warning-header {
                text-align: center;
                margin-bottom: 20px;
            }

            .warning-header h2 {
                color: #f44336;
                margin: 0;
                font-size: 24px;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                font-weight: bold;
            }

            .warning-message {
                margin-bottom: 25px;
                text-align: center;
            }

            .warning-message p {
                color: #ffcdd2;
                font-size: 16px;
                line-height: 1.5;
                margin: 15px 0;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            }

            .warning-consequence {
                color: #ff8a80 !important;
                font-weight: bold;
                font-style: italic;
                border-top: 1px solid rgba(211, 47, 47, 0.3);
                padding-top: 15px;
                margin-top: 20px !important;
            }

            .warning-buttons {
                display: flex;
                gap: 15px;
                justify-content: center;
                flex-wrap: wrap;
            }

            .warning-btn {
                padding: 12px 20px;
                border: none;
                border-radius: 12px;
                font-weight: bold;
                cursor: pointer;
                transition: all 0.3s ease;
                font-size: 14px;
                min-width: 180px;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }

            .warning-btn.btn-danger {
                background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
                color: white;
                box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
            }

            .warning-btn.btn-danger:hover {
                background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4);
            }

            .warning-btn.btn-success {
                background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
                color: white;
                box-shadow: 0 4px 12px rgba(56, 142, 60, 0.3);
            }

            .warning-btn.btn-success:hover {
                background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(56, 142, 60, 0.4);
            }

            .warning-btn:active {
                transform: translateY(0);
            }

            @media (max-width: 600px) {
                .give-up-warning {
                    margin: 10px;
                    padding: 20px;
                }
                
                .warning-buttons {
                    flex-direction: column;
                }
                
                .warning-btn {
                    min-width: auto;
                    width: 100%;
                }
            }
        `;

        document.head.appendChild(styles);
    }

    /**
     * Open multi-screen mode overlay for intensive training
     */
    async openMultiScreenMode() {
        console.log('🎬 Opening Multi-Screen Mode...');

        try {
            // Check if quad player exists and is minimized
            if (this.quadPlayer && this.quadPlayer.isMinimized) {
                console.log('🎬 Restoring minimized QuadVideoPlayer');
                this.quadPlayer.restore();
                return;
            }

            // If quad player exists but might be corrupted, destroy and recreate
            if (this.quadPlayer) {
                console.log('🎬 Recreating QuadVideoPlayer to prevent corruption');
                this.quadPlayer.destroy();
                this.quadPlayer = null;
            }

            // Create new quad player
            this.quadPlayer = new QuadVideoPlayer();
            const initialized = await this.quadPlayer.initialize();
            
            if (!initialized) {
                console.error('❌ Failed to initialize QuadVideoPlayer');
                // Show user-friendly error
                if (this.game && this.game.showNotification) {
                    this.game.showNotification('⚠️ No videos available for multi-screen mode', 'warning');
                }
                return;
            }

            // Show the quad overlay
            this.quadPlayer.show();
            
            // Log for user feedback
            if (this.game && this.game.showNotification) {
                this.game.showNotification('🎬 Multi-Screen Mode activated! Press ESC to close, — to minimize', 'info');
            }

        } catch (error) {
            console.error('❌ Error opening multi-screen mode:', error);
            if (this.game && this.game.showNotification) {
                this.game.showNotification('❌ Failed to open multi-screen mode', 'error');
            }
        }
    }

    /**
     * Display inventory questionnaire
     */
    displayInventoryQuestionnaire(task, scenario, step, choicesEl) {
        console.log('📋 Displaying inventory questionnaire');
        
        // Initialize inventory in scenario state if not exists
        if (!task.scenarioState.inventory) {
            task.scenarioState.inventory = {};
        }

        const categories = step.inventoryCategories || {};
        const categoryKeys = Object.keys(categories);
        
        // Build questionnaire HTML
        let questionnaireHTML = '<div class="inventory-questionnaire">';
        
        categoryKeys.forEach(categoryKey => {
            const category = categories[categoryKey];
            questionnaireHTML += `
                <div class="inventory-category">
                    <h3 class="category-title">${category.title}</h3>
                    <div class="inventory-items">
            `;
            
            Object.keys(category.items).forEach(itemKey => {
                const item = category.items[itemKey];
                const currentValue = task.scenarioState.inventory[itemKey] || (item.type === 'boolean' ? false : 'none');
                
                if (item.type === 'boolean') {
                    // Boolean checkbox
                    questionnaireHTML += `
                        <div class="inventory-item">
                            <label class="checkbox-label">
                                <input type="checkbox" 
                                       class="inventory-checkbox" 
                                       data-item="${itemKey}"
                                       ${currentValue ? 'checked' : ''}>
                                <span>${item.label}</span>
                            </label>
                        </div>
                    `;
                } else {
                    // Dropdown select
                    questionnaireHTML += `
                        <div class="inventory-item">
                            <label class="select-label">
                                <span>${item.label}:</span>
                                <select class="inventory-select" data-item="${itemKey}">
                                    ${item.options.map(opt => 
                                        `<option value="${opt}" ${currentValue === opt ? 'selected' : ''}>${opt}</option>`
                                    ).join('')}
                                </select>
                            </label>
                        </div>
                    `;
                }
            });
            
            questionnaireHTML += `
                    </div>
                </div>
            `;
        });
        
        questionnaireHTML += '</div>';
        
        // Display the questionnaire
        choicesEl.innerHTML = questionnaireHTML;
        
        // Add submit button
        const submitBtn = document.createElement('button');
        submitBtn.className = 'scenario-choice primary';
        submitBtn.innerHTML = '<div class="choice-text">Submit Inventory</div>';
        submitBtn.addEventListener('click', () => {
            // Collect all inventory values
            document.querySelectorAll('.inventory-select').forEach(select => {
                const itemKey = select.dataset.item;
                task.scenarioState.inventory[itemKey] = select.value;
            });
            
            document.querySelectorAll('.inventory-checkbox').forEach(checkbox => {
                const itemKey = checkbox.dataset.item;
                task.scenarioState.inventory[itemKey] = checkbox.checked;
            });
            
            console.log('📦 Collected inventory:', task.scenarioState.inventory);
            
            // Move to next step
            const nextStep = step.nextStep;
            task.scenarioState.currentStep = nextStep;
            task.scenarioState.stepNumber++;
            this.displayScenarioStep(task, scenario, nextStep);
        });
        
        choicesEl.appendChild(submitBtn);
    }

    /**
     * Populate inventory items list in certificate ending
     */
    populateInventoryItemsList(tier, inventoryManager) {
        const listEl = document.getElementById(`tier-${tier}-items-list`);
        if (!listEl) {
            console.warn(`Could not find tier-${tier}-items-list element`);
            return;
        }
        
        const summary = inventoryManager.getInventorySummary();
        let itemsHTML = '';
        
        // Combine all items into one list
        const allItems = [
            ...summary.clothing.map(item => `👗 ${item}`),
            ...summary.accessories.map(item => `💄 ${item}`),
            ...summary.toys.map(item => `🔞 ${item}`),
            ...summary.environment.map(item => `📸 ${item}`)
        ];
        
        if (allItems.length > 0) {
            itemsHTML = `<ul style="text-align: left; margin-left: 20px;">
                ${allItems.map(item => `<li>${item}</li>`).join('')}
            </ul>`;
        } else {
            itemsHTML = '<p>No items used</p>';
        }
        
        listEl.innerHTML = itemsHTML;
    }

    /**
     * Generate dynamic photo progression based on inventory
     */
    async generateInventoryPath(task, scenario, step, choicesEl) {
        console.log('🎯 Generating inventory-based path');
        
        // Load InventoryManager if not already loaded
        if (!window.InventoryManager) {
            console.error('❌ InventoryManager not loaded!');
            return;
        }
        
        // Create inventory manager instance
        const inventoryManager = new window.InventoryManager();
        inventoryManager.setInventory(task.scenarioState.inventory);
        
        // Get tier and summary
        const tier = inventoryManager.tier;
        const summary = inventoryManager.getInventorySummary();
        const photoCount = inventoryManager.getTotalPhotos();
        
        console.log(`📊 Tier ${tier}: ${summary.totalItems} items, ${photoCount} photos`);
        
        // Store in scenario state
        task.scenarioState.tier = tier;
        task.scenarioState.photoCount = photoCount;
        task.scenarioState.inventoryManager = inventoryManager;
        
        // Generate photo progression
        const progression = inventoryManager.generatePhotoProgression();
        console.log(`📸 Generated ${progression.length} photo challenges`);
        
        // Load pose bank
        if (!window.InventoryPoseBank) {
            console.error('❌ InventoryPoseBank not loaded!');
            return;
        }
        
        // Dynamically add challenge steps to scenario
        progression.forEach((challenge, index) => {
            const stepId = `challenge_${index + 1}`;
            const isLastChallenge = index === progression.length - 1;
            const nextStepId = isLastChallenge ? `tier_${tier}_ending` : `challenge_${index + 2}`;
            
            // Create photo-verification step
            scenario.steps[stepId] = {
                type: 'photo-verification',
                mood: 'progressive',
                story: challenge.instruction,
                photoRequirements: {
                    items: challenge.requiredItems,
                    pose: challenge.pose,
                    edging: challenge.edging,
                    count: 3
                },
                nextStep: nextStepId
            };
        });
        
        console.log(`✅ Added ${progression.length} challenge steps to scenario`);
        
        // Display summary
        const summaryHTML = `
            <div class="inventory-summary">
                <h3>📊 Your Photo Journey</h3>
                <div class="tier-badge tier-${tier}">Tier ${tier}</div>
                <div class="summary-stats">
                    <div class="stat">
                        <span class="stat-label">Items Available:</span>
                        <span class="stat-value">${summary.totalItems}</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Photos Required:</span>
                        <span class="stat-value">${photoCount}</span>
                    </div>
                </div>
                
                <div class="inventory-lists">
                    ${summary.clothing.length > 0 ? `
                        <div class="item-category">
                            <h4>👗 Clothing</h4>
                            <ul>${summary.clothing.map(item => `<li>${item}</li>`).join('')}</ul>
                        </div>
                    ` : ''}
                    
                    ${summary.accessories.length > 0 ? `
                        <div class="item-category">
                            <h4>💄 Accessories</h4>
                            <ul>${summary.accessories.map(item => `<li>${item}</li>`).join('')}</ul>
                        </div>
                    ` : ''}
                    
                    ${summary.toys.length > 0 ? `
                        <div class="item-category">
                            <h4>🔞 Toys</h4>
                            <ul>${summary.toys.map(item => `<li>${item}</li>`).join('')}</ul>
                        </div>
                    ` : ''}
                    
                    ${summary.environment.length > 0 ? `
                        <div class="item-category">
                            <h4>📸 Environment</h4>
                            <ul>${summary.environment.map(item => `<li>${item}</li>`).join('')}</ul>
                        </div>
                    ` : ''}
                </div>
            </div>
        `;
        
        choicesEl.innerHTML = summaryHTML;
        
        // Add choice buttons
        const choicesHTML = step.choices.map((choice, index) => {
            const btnClass = index === 0 ? 'primary' : 'secondary';
            const btn = document.createElement('button');
            btn.className = `scenario-choice ${btnClass}`;
            btn.innerHTML = `<div class="choice-text">${choice.text}</div>`;
            btn.addEventListener('click', () => {
                const nextStep = choice.nextStep;
                task.scenarioState.currentStep = nextStep;
                task.scenarioState.stepNumber++;
                this.displayScenarioStep(task, scenario, nextStep);
            });
            return btn;
        }).forEach(btn => choicesEl.appendChild(btn));
    }

    // ========================================
    // ACADEMY TRAINING ACTION HANDLERS
    // ========================================

    /**
     * Edge Training Task - Timed edging/gooning session
     */
    async createEdgeTask(task, container) {
        const duration = task.params?.duration || 300; // Default 5 minutes
        const instruction = task.params?.instruction || 'Edge and goon for the full duration';
        const withVideo = task.params?.keepVideoPlaying || false;
        const preserveContent = task.params?.preserveContent !== false; // Default true
        
        // If preserving content, add edge UI below existing content instead of replacing
        const edgeUI = `
            <div class="academy-edge-task" style="margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--color-primary);">
                <h3>🎯 Edge Training</h3>
                <p class="instruction">${instruction}</p>
                <div class="edge-session-info">
                    <div class="session-duration">
                        <span class="label">Session Duration:</span>
                        <span class="value">${Math.floor(duration / 60)} minutes ${duration % 60} seconds</span>
                    </div>
                </div>
                <div class="timer-display" id="edge-timer">
                    <div class="time-remaining">--:--</div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="edge-progress"></div>
                    </div>
                </div>
                <div style="display: flex; gap: 10px; justify-content: center; margin: 10px 0;">
                    <button class="btn btn-primary" id="start-edge-session-btn">
                        🎯 Start Edging Session
                    </button>
                    <button class="btn btn-warning" id="skip-edge-timer-btn" style="display: none;">
                        ⏩ Skip Timer (Testing)
                    </button>
                </div>
                <div id="edge-status" class="status-area"></div>
            </div>
        `;
        
        if (preserveContent) {
            // Append to existing content
            container.insertAdjacentHTML('beforeend', edgeUI);
        } else {
            // Replace content (old behavior)
            container.innerHTML = edgeUI;
        }
        
        const btn = container.querySelector('#start-edge-session-btn');
        const skipTimerBtn = container.querySelector('#skip-edge-timer-btn');
        const statusArea = container.querySelector('#edge-status');
        const timerDisplay = container.querySelector('.time-remaining');
        const progressFill = container.querySelector('#edge-progress');
        
        let timerInterval = null;
        
        btn.addEventListener('click', async () => {
            btn.disabled = true;
            btn.style.display = 'none';
            
            // Show skip timer button
            if (skipTimerBtn) {
                skipTimerBtn.style.display = 'inline-block';
            }
            
            console.log('🎯 Starting edge session - features remain active from previous step');
            
            let timeRemaining = duration;
            timerDisplay.textContent = `${Math.floor(timeRemaining / 60)}:${(timeRemaining % 60).toString().padStart(2, '0')}`;
            statusArea.innerHTML = '<div class="info">🎯 Edge and stroke... don\'t stop until time is up!</div>';
            
            timerInterval = setInterval(() => {
                timeRemaining--;
                
                const minutes = Math.floor(timeRemaining / 60);
                const seconds = timeRemaining % 60;
                timerDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
                
                const progress = ((duration - timeRemaining) / duration) * 100;
                progressFill.style.width = `${progress}%`;
                
                if (timeRemaining <= 0) {
                    clearInterval(timerInterval);
                    timerDisplay.textContent = 'COMPLETE!';
                    timerDisplay.style.color = 'var(--color-success, #4caf50)';
                    statusArea.innerHTML = '<div class="success">✅ Edge training session complete!</div>';
                    
                    task.completed = true;
                    
                    const completeBtn = document.getElementById('interactive-complete-btn');
                    if (completeBtn) {
                        completeBtn.disabled = false;
                        completeBtn.textContent = 'Continue to Next Step ✓';
                        completeBtn.style.background = 'linear-gradient(135deg, var(--color-success), var(--color-primary))';
                    }
                    
                    if (skipTimerBtn) {
                        skipTimerBtn.style.display = 'none';
                    }
                }
            }, 1000);
        });
        
        // Skip timer button handler
        if (skipTimerBtn) {
            skipTimerBtn.addEventListener('click', () => {
                console.log('⏩ Skipping edge timer');
                if (timerInterval) {
                    clearInterval(timerInterval);
                }
                
                timerDisplay.textContent = 'COMPLETE!';
                timerDisplay.style.color = 'var(--color-success, #4caf50)';
                progressFill.style.width = '100%';
                statusArea.innerHTML = '<div class="success">✅ Edge training session complete! (Skipped for testing)</div>';
                
                task.completed = true;
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) {
                    completeBtn.disabled = false;
                    completeBtn.textContent = 'Continue to Next Step ✓';
                    completeBtn.style.background = 'linear-gradient(135deg, var(--color-success), var(--color-primary))';
                }
                
                skipTimerBtn.style.display = 'none';
            });
        }
    }

    validateEdgeTask(task) {
        return task.completed === true;
    }

    /**
     * Rhythm Pattern Task - Follow stroking rhythm
     */
    async createRhythmTask(task, container) {
        const pattern = task.params?.pattern || 'slow-fast-slow';
        const duration = task.params?.duration || 120;
        
        const patterns = {
            'slow-fast-slow': [60, 120, 60],
            'fast-slow-fast': [120, 60, 120],
            'steady': [90, 90, 90],
            'escalating': [60, 90, 120, 150]
        };
        
        const bpmSequence = patterns[pattern] || patterns['steady'];
        let currentPhase = 0;
        let timeRemaining = duration;
        
        container.innerHTML = `
            <div class="academy-rhythm-task">
                <h3>🎵 Rhythm Pattern: ${pattern}</h3>
                <div class="rhythm-display">
                    <div class="metronome-visual" id="metronome-visual"></div>
                    <div class="bpm-display">
                        <span class="bpm-value">${bpmSequence[0]}</span> BPM
                    </div>
                    <div class="phase-indicator">
                        Phase ${currentPhase + 1} of ${bpmSequence.length}
                    </div>
                </div>
                <div class="timer-display">
                    <span id="rhythm-timer">${timeRemaining}s</span> remaining
                </div>
            </div>
        `;
        
        const metronomeVisual = container.querySelector('#metronome-visual');
        const bpmDisplay = container.querySelector('.bpm-value');
        const timerDisplay = container.querySelector('#rhythm-timer');
        const phaseIndicator = container.querySelector('.phase-indicator');
        
        // Start metronome animation
        let bpm = bpmSequence[currentPhase];
        let beatInterval = (60 / bpm) * 1000;
        
        const beat = () => {
            metronomeVisual.classList.add('beat');
            setTimeout(() => metronomeVisual.classList.remove('beat'), 100);
        };
        
        let beatTimer = setInterval(beat, beatInterval);
        
        // Countdown timer and phase progression
        const phaseDuration = duration / bpmSequence.length;
        let phaseTime = phaseDuration;
        
        const countdown = setInterval(() => {
            timeRemaining--;
            phaseTime--;
            timerDisplay.textContent = `${timeRemaining}s`;
            
            if (phaseTime <= 0 && currentPhase < bpmSequence.length - 1) {
                currentPhase++;
                phaseTime = phaseDuration;
                bpm = bpmSequence[currentPhase];
                beatInterval = (60 / bpm) * 1000;
                
                clearInterval(beatTimer);
                beatTimer = setInterval(beat, beatInterval);
                
                bpmDisplay.textContent = bpm;
                phaseIndicator.textContent = `Phase ${currentPhase + 1} of ${bpmSequence.length}`;
            }
            
            if (timeRemaining <= 0) {
                clearInterval(countdown);
                clearInterval(beatTimer);
                task.completed = true;
                
                container.innerHTML += '<div class="success-message">✅ Rhythm pattern complete!</div>';
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) {
                    completeBtn.disabled = false;
                }
            }
        }, 1000);
        
        // Store cleanup
        task.cleanup = () => {
            clearInterval(countdown);
            clearInterval(beatTimer);
        };
    }

    validateRhythmTask(task) {
        return task.completed === true;
    }

    /**
     * Add Library Directory Task
     */
    async createAddLibraryTask(task, container) {
        const suggestedDir = task.params?.directory || '';
        const suggestedTags = task.params?.suggestedTags || [];
        
        container.innerHTML = `
            <div class="academy-library-task">
                <h3>📁 Add Library Directory</h3>
                <p>Add a directory containing your media files to The Academy library.</p>
                ${suggestedDir ? `<p class="suggestion">Suggested: <code>${suggestedDir}</code></p>` : ''}
                ${suggestedTags.length > 0 ? `
                    <p class="suggestion">Suggested tags: ${suggestedTags.map(t => `<span class="tag">${t}</span>`).join(' ')}</p>
                ` : ''}
                <button class="btn btn-primary" id="select-directory-btn">
                    📂 Select Directory
                </button>
                <div id="directory-result" class="result-area"></div>
            </div>
        `;
        
        const btn = container.querySelector('#select-directory-btn');
        const resultArea = container.querySelector('#directory-result');
        
        btn.addEventListener('click', async () => {
            if (window.libraryManager) {
                try {
                    const result = await window.libraryManager.addDirectory(suggestedTags);
                    if (result) {
                        resultArea.innerHTML = `
                            <div class="success">
                                ✅ Directory added successfully!
                                <p>Files found: ${result.fileCount || 'Scanning...'}</p>
                            </div>
                        `;
                        task.completed = true;
                        
                        const completeBtn = document.getElementById('interactive-complete-btn');
                        if (completeBtn) {
                            completeBtn.disabled = false;
                        }
                    }
                } catch (error) {
                    resultArea.innerHTML = `<div class="error">Error: ${error.message}</div>`;
                }
            } else {
                resultArea.innerHTML = '<div class="error">Library manager not available</div>';
            }
        });
    }

    validateAddLibraryTask(task) {
        return task.completed === true;
    }

    /**
     * Tag Files Task
     */
    async createTagFilesTask(task, container) {
        const directory = task.params?.directory || '';
        const minFiles = task.params?.minFiles || 10;
        const suggestedTags = task.params?.suggestedTags || [];
        const preserveContent = task.params?.preserveContent !== false; // Default true
        
        // Track tagged files count
        if (!task.taggedFilesCount) {
            task.taggedFilesCount = 0;
        }
        
        const tagUI = `
            <div class="academy-tag-task" style="${preserveContent ? 'margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--color-primary);' : ''}">
                <h3>🏷️ Tag Your Files</h3>
                <p>Tag at least ${minFiles} files in your library to improve content filtering.</p>
                ${directory ? `<p>Focus on: <code>${directory}</code></p>` : ''}
                ${suggestedTags.length > 0 ? `
                    <p class="suggestion">💡 Suggested tags: ${suggestedTags.map(t => `<span class="tag-chip" style="display: inline-block; background: var(--color-primary); color: white; padding: 4px 12px; border-radius: 12px; margin: 2px; font-size: 0.9em;">${t}</span>`).join(' ')}</p>
                ` : ''}
                <div class="tag-progress" style="margin: 15px 0; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 8px;">
                    <div style="font-size: 1.2em; font-weight: bold;">
                        <span id="files-tagged">${task.taggedFilesCount || 0}</span> / ${minFiles} files tagged
                    </div>
                    <div style="margin-top: 8px; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;">
                        <div id="tag-progress-bar" style="height: 100%; background: var(--color-success); width: ${Math.min(100, (task.taggedFilesCount || 0) / minFiles * 100)}%; transition: width 0.3s;"></div>
                    </div>
                </div>
                <button class="btn btn-primary" id="open-tagging-btn" style="width: 100%; padding: 12px; font-size: 1.1em;">
                    🏷️ Open Library Tagging Interface
                </button>
                <div id="tag-task-status" class="status-area" style="margin-top: 10px;"></div>
            </div>
        `;
        
        if (preserveContent) {
            // Append to existing content (e.g., keep video player active)
            container.insertAdjacentHTML('beforeend', tagUI);
        } else {
            // Replace content (old behavior)
            container.innerHTML = tagUI;
        }
        
        const btn = container.querySelector('#open-tagging-btn');
        const progressEl = container.querySelector('#files-tagged');
        const progressBar = container.querySelector('#tag-progress-bar');
        const statusArea = container.querySelector('#tag-task-status');
        
        // Function to update progress
        const updateProgress = () => {
            // Count how many media items have tags by checking localStorage directly
            try {
                // Tags are stored in localStorage under 'library-mediaTags' key
                const tagsData = localStorage.getItem('library-mediaTags');
                if (tagsData) {
                    const parsed = JSON.parse(tagsData);
                    const mediaTags = parsed.mediaTags || {};
                    // Count media items that have at least one tag
                    const taggedMedia = Object.keys(mediaTags).filter(mediaId => {
                        const tags = mediaTags[mediaId];
                        return tags && tags.length > 0;
                    });
                    task.taggedFilesCount = taggedMedia.length;
                    console.log(`🏷️ Progress update: ${task.taggedFilesCount} files tagged`);
                } else {
                    task.taggedFilesCount = 0;
                    console.log('🏷️ No tag data found in localStorage');
                }
            } catch (error) {
                console.error('❌ Error reading tag data:', error);
                task.taggedFilesCount = 0;
            }
            
            progressEl.textContent = task.taggedFilesCount;
            const percent = Math.min(100, (task.taggedFilesCount / minFiles) * 100);
            progressBar.style.width = percent + '%';
            
            if (task.taggedFilesCount >= minFiles) {
                task.completed = true;
                btn.disabled = true;
                btn.textContent = '✅ Tagging Complete';
                btn.style.background = 'var(--color-success)';
                statusArea.innerHTML = `<div class="success">✅ You have tagged ${task.taggedFilesCount} files! Task complete.</div>`;
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) {
                    completeBtn.disabled = false;
                }
            } else {
                statusArea.innerHTML = `<div class="info">ℹ️ Tag ${minFiles - task.taggedFilesCount} more file(s) to complete this task</div>`;
            }
        };
        
        // Check initial progress
        updateProgress();
        
        btn.addEventListener('click', async () => {
            console.log('🏷️ Tag Files button clicked');
            console.log('🏷️ electronAPI available:', !!window.electronAPI);
            console.log('🏷️ openChildWindow available:', !!window.electronAPI?.openChildWindow);
            
            try {
                // Try Electron child window first (desktop app)
                if (window.electronAPI && window.electronAPI.openChildWindow) {
                    console.log('🖥️ Using Electron child window for Library Tagging');
                    const result = await window.electronAPI.openChildWindow({
                        url: 'library.html?tab=images&focus=tagging',
                        windowName: 'Library Tagging',
                        width: 1400,
                        height: 900
                    });
                    
                    console.log('🖥️ Child window result:', result);
                    
                    if (result.success) {
                        statusArea.innerHTML = `<div class="info">📖 Library ${result.action === 'focused' ? 'focused' : 'opened'} - Tag your files and close when done</div>`;
                        
                        // Poll for progress updates periodically
                        const checkInterval = setInterval(() => {
                            updateProgress();
                        }, 2000); // Check every 2 seconds
                        
                        // Store interval ID for cleanup
                        task.progressCheckInterval = checkInterval;
                    } else {
                        console.error('❌ Failed to open child window:', result.error);
                        statusArea.innerHTML = `<div class="warning">⚠️ Could not open library window: ${result.error || 'Unknown error'}</div>`;
                    }
                } else {
                    // Fallback to browser window.open
                    console.log('🌐 Using browser window.open for Library Tagging');
                    const libraryUrl = 'library.html?tab=images&focus=tagging';
                    const libraryWindow = window.open(libraryUrl, 'LibraryTagging', 'width=1400,height=900');
                    
                    if (libraryWindow) {
                        statusArea.innerHTML = '<div class="info">📖 Library opened - Tag your files and close the window when done</div>';
                        
                        // Poll for progress updates when window closes or periodically
                        const checkInterval = setInterval(() => {
                            // Check if window is closed
                            if (libraryWindow.closed) {
                                clearInterval(checkInterval);
                                updateProgress();
                                statusArea.innerHTML = '<div class="info">📖 Library closed - Progress updated</div>';
                            } else {
                                // Update progress while window is open
                                updateProgress();
                            }
                        }, 2000); // Check every 2 seconds
                        
                        // Store interval ID for cleanup
                        task.progressCheckInterval = checkInterval;
                    } else {
                        statusArea.innerHTML = '<div class="warning">⚠️ Could not open library - please disable popup blocker</div>';
                    }
                }
            } catch (error) {
                console.error('❌ Error opening library:', error);
                statusArea.innerHTML = `<div class="error">❌ Error opening library: ${error.message}</div>`;
            }
        });
        
        // Cleanup interval when task changes
        if (task.progressCheckInterval) {
            clearInterval(task.progressCheckInterval);
        }
    }

    validateTagFilesTask(task) {
        return task.completed === true;
    }

    /**
     * Enable Webcam Task
     */
    async createEnableWebcamTask(task, container) {
        const instruction = task.params?.instruction || 'Turn on your webcam to watch yourself';
        
        container.innerHTML = `
            <div class="academy-webcam-task">
                <h3>📹 Enable Webcam</h3>
                <p>${instruction}</p>
                <div id="webcam-preview" class="webcam-preview" style="margin: 20px 0; text-align: center; max-width: 640px;">
                    <video id="webcam-video" autoplay playsinline style="width: 100%; max-width: 640px; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.5); display: none;"></video>
                </div>
                <button class="btn btn-primary" id="enable-webcam-btn">
                    📹 Start Webcam
                </button>
                <div id="webcam-status" class="status-area"></div>
            </div>
        `;
        
        const btn = container.querySelector('#enable-webcam-btn');
        const statusArea = container.querySelector('#webcam-status');
        const videoEl = container.querySelector('#webcam-video');
        
        btn.addEventListener('click', async () => {
            btn.disabled = true;
            btn.textContent = 'Requesting permission...';
            
            try {
                // Request webcam access directly using browser API
                const stream = await navigator.mediaDevices.getUserMedia({ 
                    video: { 
                        width: { ideal: 1280 },
                        height: { ideal: 720 }
                    }, 
                    audio: false 
                });
                
                // Display webcam feed
                videoEl.srcObject = stream;
                videoEl.style.display = 'block';
                
                statusArea.innerHTML = '<div class="success">✅ Webcam active - Watch yourself as you train</div>';
                btn.textContent = '✅ Webcam Started';
                task.completed = true;
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) {
                    completeBtn.disabled = false;
                }
                
                // Store stream reference for cleanup
                task.webcamStream = stream;
                
            } catch (error) {
                console.error('Webcam error:', error);
                
                let errorMsg = 'Failed to access webcam';
                if (error.name === 'NotAllowedError') {
                    errorMsg = 'Webcam permission denied - you can continue without it';
                } else if (error.name === 'NotFoundError') {
                    errorMsg = 'No webcam found - you can continue without it';
                }
                
                statusArea.innerHTML = `<div class="info">ℹ️ ${errorMsg}</div>`;
                btn.textContent = '⚠️ Webcam Unavailable';
                
                // Auto-complete even on error
                task.completed = true;
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) {
                    completeBtn.disabled = false;
                }
            }
        });
    }

    validateEnableWebcamTask(task) {
        return task.completed === true;
    }

    /**
     * Dual Video Task
     */
    async createDualVideoTask(task, container) {
        const mainVideo = task.params?.mainVideo || 'focus';
        const pipVideo = task.params?.pipVideo || 'overlay';
        const pipPosition = task.params?.pipPosition || 'bottom-right';
        const minDuration = task.params?.minDuration || 120; // Default 2 minutes
        
        container.innerHTML = `
            <div class="academy-dual-video-task">
                <h3>🎬 Dual Video Mode</h3>
                <p>Watch two videos simultaneously - main video with picture-in-picture overlay.</p>
                <p class="info-text">Minimum viewing time: <strong>${minDuration} seconds</strong></p>
                <div id="dual-video-main-container" class="video-player-container" style="position: relative; margin: 20px 0; min-height: 400px; text-align: center;"></div>
                <div style="display: flex; gap: 10px; justify-content: center; margin: 10px 0;">
                    <button class="btn btn-primary" id="start-dual-video-btn">
                        ▶️ Start Dual Video
                    </button>
                    <button class="btn btn-secondary" id="skip-dual-video-btn" style="display: none;">
                        ⏭️ Skip to New Videos
                    </button>
                </div>
                <div id="dual-video-timer" class="timer-display" style="display: none; margin: 15px 0; font-size: 1.2em; font-weight: bold;"></div>
                <div id="dual-video-status" class="status-area"></div>
            </div>
        `;
        
        const btn = container.querySelector('#start-dual-video-btn');
        const skipBtn = container.querySelector('#skip-dual-video-btn');
        const statusArea = container.querySelector('#dual-video-status');
        const mainContainer = container.querySelector('#dual-video-main-container');
        const timerDisplay = container.querySelector('#dual-video-timer');
        
        let availableVideos = [];
        
        const playDualVideos = async () => {
            if (availableVideos.length < 2) return;
            
            // Select two random videos
            const video1 = availableVideos[Math.floor(Math.random() * availableVideos.length)];
            let video2 = availableVideos[Math.floor(Math.random() * availableVideos.length)];
            while (video2 === video1 && availableVideos.length > 1) {
                video2 = availableVideos[Math.floor(Math.random() * availableVideos.length)];
            }
            
            // Clear existing videos
            mainContainer.innerHTML = '';
            
            // Play main video
            await window.videoPlayerManager.playTaskVideo(video1, mainContainer);
            
            // Play overlay video (PiP style)
            await window.videoPlayerManager.playOverlayVideo(video2);
            
            // Position the overlay player as PiP with draggable and resizable
            if (window.videoPlayerManager.overlayPlayer) {
                const pipPlayer = window.videoPlayerManager.overlayPlayer;
                pipPlayer.style.position = 'fixed';
                pipPlayer.style.width = '300px';
                pipPlayer.style.height = 'auto';
                pipPlayer.style.zIndex = '100';
                pipPlayer.style.boxShadow = '0 0 20px rgba(0,0,0,0.5)';
                pipPlayer.style.cursor = 'move';
                pipPlayer.style.border = '2px solid rgba(255,255,255,0.3)';
                pipPlayer.style.borderRadius = '8px';
                
                // Position based on parameter
                const positions = {
                    'bottom-right': { bottom: '20px', right: '20px', top: 'auto', left: 'auto' },
                    'bottom-left': { bottom: '20px', left: '20px', top: 'auto', right: 'auto' },
                    'top-right': { top: '20px', right: '20px', bottom: 'auto', left: 'auto' },
                    'top-left': { top: '20px', left: '20px', bottom: 'auto', right: 'auto' }
                };
                
                const pos = positions[pipPosition] || positions['bottom-right'];
                Object.assign(pipPlayer.style, pos);
                
                // Wrap in container for resize handle
                const pipContainer = document.createElement('div');
                pipContainer.style.cssText = `
                    position: fixed;
                    ${pos.top ? 'top: ' + pos.top : ''};
                    ${pos.bottom ? 'bottom: ' + pos.bottom : ''};
                    ${pos.left ? 'left: ' + pos.left : ''};
                    ${pos.right ? 'right: ' + pos.right : ''};
                    z-index: 100;
                `;
                
                // Move player into container
                pipPlayer.parentElement.insertBefore(pipContainer, pipPlayer);
                pipContainer.appendChild(pipPlayer);
                pipPlayer.style.position = 'relative';
                pipPlayer.style.top = 'auto';
                pipPlayer.style.bottom = 'auto';
                pipPlayer.style.left = 'auto';
                pipPlayer.style.right = 'auto';
                
                // Create resize handle
                const resizeHandle = document.createElement('div');
                resizeHandle.style.cssText = `
                    position: absolute;
                    bottom: 2px;
                    right: 2px;
                    width: 20px;
                    height: 20px;
                    background: rgba(255,255,255,0.7);
                    cursor: nwse-resize;
                    border-radius: 0 0 6px 0;
                    z-index: 101;
                `;
                resizeHandle.innerHTML = '⋰';
                resizeHandle.style.textAlign = 'center';
                resizeHandle.style.lineHeight = '20px';
                resizeHandle.style.fontSize = '12px';
                pipContainer.appendChild(resizeHandle);
                
                // Make draggable
                let isDragging = false;
                let isResizing = false;
                let startX, startY, startWidth, startHeight;
                let currentX, currentY;
                
                // Drag functionality
                pipPlayer.addEventListener('mousedown', (e) => {
                    if (e.target === resizeHandle) return;
                    isDragging = true;
                    const rect = pipContainer.getBoundingClientRect();
                    startX = e.clientX - rect.left;
                    startY = e.clientY - rect.top;
                    pipPlayer.style.opacity = '0.8';
                    e.preventDefault();
                });
                
                // Resize functionality
                resizeHandle.addEventListener('mousedown', (e) => {
                    e.stopPropagation();
                    e.preventDefault();
                    isResizing = true;
                    startX = e.clientX;
                    startY = e.clientY;
                    startWidth = pipPlayer.offsetWidth;
                    startHeight = pipPlayer.offsetHeight;
                });
                
                document.addEventListener('mousemove', (e) => {
                    if (isDragging) {
                        currentX = e.clientX - startX;
                        currentY = e.clientY - startY;
                        
                        // Keep within viewport bounds
                        currentX = Math.max(0, Math.min(currentX, window.innerWidth - pipContainer.offsetWidth));
                        currentY = Math.max(0, Math.min(currentY, window.innerHeight - pipContainer.offsetHeight));
                        
                        pipContainer.style.left = currentX + 'px';
                        pipContainer.style.top = currentY + 'px';
                        pipContainer.style.right = 'auto';
                        pipContainer.style.bottom = 'auto';
                    } else if (isResizing) {
                        const deltaX = e.clientX - startX;
                        const newWidth = Math.max(200, Math.min(800, startWidth + deltaX));
                        pipPlayer.style.width = newWidth + 'px';
                    }
                });
                
                document.addEventListener('mouseup', () => {
                    if (isDragging) {
                        isDragging = false;
                        pipPlayer.style.opacity = '1';
                    }
                    if (isResizing) {
                        isResizing = false;
                    }
                });
            }
        };
        
        skipBtn.addEventListener('click', async () => {
            if (availableVideos.length >= 2) {
                await playDualVideos();
                statusArea.innerHTML = '<div class="info">⏭️ Loaded new videos</div>';
            }
        });
        
        btn.addEventListener('click', async () => {
            btn.disabled = true;
            btn.textContent = 'Loading...';
            
            if (!window.videoPlayerManager) {
                statusArea.innerHTML = '<div class="error">⚠️ Video manager not initialized</div>';
                task.completed = true;
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) completeBtn.disabled = false;
                return;
            }
            
            try {
                const videos = window.videoPlayerManager.videoLibrary?.background || [];
                
                if (videos.length < 2) {
                    statusArea.innerHTML = '<div class="info">ℹ️ Need at least 2 videos - continuing anyway</div>';
                    task.completed = true;
                    const completeBtn = document.getElementById('interactive-complete-btn');
                    if (completeBtn) completeBtn.disabled = false;
                    return;
                }
                
                availableVideos = videos;
                await playDualVideos();
                
                btn.style.display = 'none';
                skipBtn.style.display = 'inline-block';
                
                // Position the overlay player as PiP with draggable and resizable
                if (window.videoPlayerManager.overlayPlayer) {
                    const pipPlayer = window.videoPlayerManager.overlayPlayer;
                    pipPlayer.style.position = 'fixed';
                    pipPlayer.style.width = '300px';
                    pipPlayer.style.height = 'auto';
                    pipPlayer.style.zIndex = '100';
                    pipPlayer.style.boxShadow = '0 0 20px rgba(0,0,0,0.5)';
                    pipPlayer.style.cursor = 'move';
                    pipPlayer.style.border = '2px solid rgba(255,255,255,0.3)';
                    pipPlayer.style.borderRadius = '8px';
                    
                    // Position based on parameter
                    const positions = {
                        'bottom-right': { bottom: '20px', right: '20px', top: 'auto', left: 'auto' },
                        'bottom-left': { bottom: '20px', left: '20px', top: 'auto', right: 'auto' },
                        'top-right': { top: '20px', right: '20px', bottom: 'auto', left: 'auto' },
                        'top-left': { top: '20px', left: '20px', bottom: 'auto', right: 'auto' }
                    };
                    
                    const pos = positions[pipPosition] || positions['bottom-right'];
                    Object.assign(pipPlayer.style, pos);
                    
                    // Wrap in container for resize handle
                    const pipContainer = document.createElement('div');
                    pipContainer.style.cssText = `
                        position: fixed;
                        ${pos.top ? 'top: ' + pos.top : ''};
                        ${pos.bottom ? 'bottom: ' + pos.bottom : ''};
                        ${pos.left ? 'left: ' + pos.left : ''};
                        ${pos.right ? 'right: ' + pos.right : ''};
                        z-index: 100;
                    `;
                    
                    // Move player into container
                    pipPlayer.parentElement.insertBefore(pipContainer, pipPlayer);
                    pipContainer.appendChild(pipPlayer);
                    pipPlayer.style.position = 'relative';
                    pipPlayer.style.top = 'auto';
                    pipPlayer.style.bottom = 'auto';
                    pipPlayer.style.left = 'auto';
                    pipPlayer.style.right = 'auto';
                    
                    // Create resize handle
                    const resizeHandle = document.createElement('div');
                    resizeHandle.style.cssText = `
                        position: absolute;
                        bottom: 2px;
                        right: 2px;
                        width: 20px;
                        height: 20px;
                        background: rgba(255,255,255,0.7);
                        cursor: nwse-resize;
                        border-radius: 0 0 6px 0;
                        z-index: 101;
                    `;
                    resizeHandle.innerHTML = '⋰';
                    resizeHandle.style.textAlign = 'center';
                    resizeHandle.style.lineHeight = '20px';
                    resizeHandle.style.fontSize = '12px';
                    pipContainer.appendChild(resizeHandle);
                    
                    // Make draggable
                    let isDragging = false;
                    let isResizing = false;
                    let startX, startY, startWidth, startHeight;
                    let currentX, currentY;
                    
                    // Drag functionality
                    pipPlayer.addEventListener('mousedown', (e) => {
                        if (e.target === resizeHandle) return;
                        isDragging = true;
                        const rect = pipContainer.getBoundingClientRect();
                        startX = e.clientX - rect.left;
                        startY = e.clientY - rect.top;
                        pipPlayer.style.opacity = '0.8';
                        e.preventDefault();
                    });
                    
                    // Resize functionality
                    resizeHandle.addEventListener('mousedown', (e) => {
                        e.stopPropagation();
                        e.preventDefault();
                        isResizing = true;
                        startX = e.clientX;
                        startY = e.clientY;
                        startWidth = pipPlayer.offsetWidth;
                        startHeight = pipPlayer.offsetHeight;
                    });
                    
                    document.addEventListener('mousemove', (e) => {
                        if (isDragging) {
                            currentX = e.clientX - startX;
                            currentY = e.clientY - startY;
                            
                            // Keep within viewport bounds
                            currentX = Math.max(0, Math.min(currentX, window.innerWidth - pipContainer.offsetWidth));
                            currentY = Math.max(0, Math.min(currentY, window.innerHeight - pipContainer.offsetHeight));
                            
                            pipContainer.style.left = currentX + 'px';
                            pipContainer.style.top = currentY + 'px';
                            pipContainer.style.right = 'auto';
                            pipContainer.style.bottom = 'auto';
                        } else if (isResizing) {
                            const deltaX = e.clientX - startX;
                            const newWidth = Math.max(200, Math.min(800, startWidth + deltaX));
                            pipPlayer.style.width = newWidth + 'px';
                        }
                    });
                    
                    document.addEventListener('mouseup', () => {
                        if (isDragging) {
                            isDragging = false;
                            pipPlayer.style.opacity = '1';
                        }
                        if (isResizing) {
                            isResizing = false;
                        }
                    });
                }
                
                btn.style.display = 'none';
                timerDisplay.style.display = 'block';
                
                // Start countdown timer
                let remainingTime = minDuration;
                timerDisplay.innerHTML = `⏱️ Keep watching both videos... ${remainingTime}s remaining`;
                
                const timerInterval = setInterval(() => {
                    remainingTime--;
                    
                    if (remainingTime > 0) {
                        timerDisplay.innerHTML = `⏱️ Keep watching both videos... ${remainingTime}s remaining`;
                    } else {
                        clearInterval(timerInterval);
                        timerDisplay.innerHTML = '✅ Minimum viewing time complete!';
                        timerDisplay.style.color = 'var(--color-success, #4caf50)';
                        
                        statusArea.innerHTML = '<div class="success">✅ Dual video session complete</div>';
                        task.completed = true;
                        
                        const completeBtn = document.getElementById('interactive-complete-btn');
                        if (completeBtn) {
                            completeBtn.disabled = false;
                        }
                    }
                }, 1000);
                
            } catch (error) {
                console.error('Dual video error:', error);
                statusArea.innerHTML = `<div class="error">⚠️ ${error.message} - Continuing anyway</div>`;
                task.completed = true;
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) {
                    completeBtn.disabled = false;
                }
            }
        });
    }

    validateDualVideoTask(task) {
        return task.completed === true;
    }

    /**
     * TTS Command Task
     */
    async createTTSCommandTask(task, container) {
        const text = task.params?.text || 'Good gooner. Edge again.';
        const voice = task.params?.voice || 'feminine';
        
        container.innerHTML = `
            <div class="academy-tts-task">
                <h3>🎤 Voice Command</h3>
                <p>Listen to the voice command and follow instructions.</p>
                <div class="tts-message">"${text}"</div>
                <button class="btn btn-primary" id="play-tts-btn">
                    🔊 Play Voice Command
                </button>
            </div>
        `;
        
        const btn = container.querySelector('#play-tts-btn');
        
        btn.addEventListener('click', async () => {
            if (this.voiceManager && this.ttsEnabled) {
                try {
                    await this.voiceManager.speak(text);
                    task.completed = true;
                    btn.disabled = true;
                    btn.textContent = '✅ Command Received';
                    
                    const completeBtn = document.getElementById('interactive-complete-btn');
                    if (completeBtn) {
                        completeBtn.disabled = false;
                    }
                } catch (error) {
                    console.error('TTS error:', error);
                }
            } else {
                // TTS not available, auto-complete
                task.completed = true;
                btn.disabled = true;
                btn.textContent = '✅ Command Received (TTS unavailable)';
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) {
                    completeBtn.disabled = false;
                }
            }
        });
    }

    validateTTSCommandTask(task) {
        return task.completed === true;
    }

    /**
     * Quad Video Task
     */
    async createQuadVideoTask(task, container) {
        const layout = task.params?.layout || 'grid';
        const minDuration = task.params?.minDuration || 180; // Default 3 minutes
        
        container.innerHTML = `
            <div class="academy-quad-video-task">
                <h3>🎬 Quad Video Mode</h3>
                <p>Watch four videos simultaneously in a ${layout} layout.</p>
                <p class="info-text">Minimum viewing time: <strong>${minDuration} seconds</strong></p>
                <div id="quad-video-grid" class="quad-video-grid" style="display: none; margin: 20px 0; width: 100%; max-width: 1200px;">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;">
                        <div id="quad-video-1" style="position: relative; background: #000;"></div>
                        <div id="quad-video-2" style="position: relative; background: #000;"></div>
                        <div id="quad-video-3" style="position: relative; background: #000;"></div>
                        <div id="quad-video-4" style="position: relative; background: #000;"></div>
                    </div>
                </div>
                <div style="display: flex; gap: 10px; justify-content: center; margin: 10px 0;">
                    <button class="btn btn-primary" id="start-quad-video-btn">
                        ▶️ Start Quad Video
                    </button>
                    <button class="btn btn-secondary" id="skip-quad-video-btn" style="display: none;">
                        ⏭️ Load New Videos
                    </button>
                </div>
                <div id="quad-video-timer" class="timer-display" style="display: none; margin: 15px 0; font-size: 1.2em; font-weight: bold;"></div>
                <div id="quad-video-status" class="status-area"></div>
            </div>
        `;
        
        const btn = container.querySelector('#start-quad-video-btn');
        const skipBtn = container.querySelector('#skip-quad-video-btn');
        const statusArea = container.querySelector('#quad-video-status');
        const gridContainer = container.querySelector('#quad-video-grid');
        const timerDisplay = container.querySelector('#quad-video-timer');
        
        let availableVideos = [];
        
        const playQuadVideos = async () => {
            if (availableVideos.length < 4) return;
            
            // Select 4 random unique videos
            const selectedVideos = [];
            const availableIndices = [...Array(availableVideos.length).keys()];
            for (let i = 0; i < 4; i++) {
                const randomIndex = Math.floor(Math.random() * availableIndices.length);
                selectedVideos.push(availableVideos[availableIndices[randomIndex]]);
                availableIndices.splice(randomIndex, 1);
            }
            
            // Create 4 video elements in the grid
            gridContainer.style.display = 'block';
            
            for (let i = 0; i < 4; i++) {
                const videoContainer = container.querySelector(`#quad-video-${i + 1}`);
                videoContainer.innerHTML = ''; // Clear existing video
                const videoEl = document.createElement('video');
                videoEl.style.cssText = 'width: 100%; height: auto; display: block;';
                videoEl.autoplay = true;
                videoEl.loop = true;
                videoEl.muted = i > 0; // Only first video has sound
                
                const videoPath = selectedVideos[i];
                videoEl.src = window.videoPlayerManager.getVideoPath(videoPath);
                
                videoContainer.appendChild(videoEl);
                
                try {
                    await videoEl.play();
                } catch (e) {
                    console.warn(`Failed to play video ${i + 1}:`, e);
                }
            }
        };
        
        skipBtn.addEventListener('click', async () => {
            if (availableVideos.length >= 4) {
                await playQuadVideos();
                statusArea.innerHTML = '<div class="info">⏭️ Loaded 4 new videos</div>';
            }
        });
        
        btn.addEventListener('click', async () => {
            btn.disabled = true;
            btn.textContent = 'Loading...';
            
            if (!window.videoPlayerManager) {
                statusArea.innerHTML = '<div class="error">⚠️ Video manager not initialized</div>';
                task.completed = true;
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) completeBtn.disabled = false;
                return;
            }
            
            try {
                const videos = window.videoPlayerManager.videoLibrary?.background || [];
                
                if (videos.length < 4) {
                    statusArea.innerHTML = '<div class="info">ℹ️ Need at least 4 videos - continuing anyway</div>';
                    task.completed = true;
                    const completeBtn = document.getElementById('interactive-complete-btn');
                    if (completeBtn) completeBtn.disabled = false;
                    return;
                }
                
                availableVideos = videos;
                await playQuadVideos();
                
                btn.style.display = 'none';
                skipBtn.style.display = 'inline-block';
                timerDisplay.style.display = 'block';
                
                // Start countdown timer
                let remainingTime = minDuration;
                timerDisplay.innerHTML = `⏱️ Keep watching all 4 videos... ${remainingTime}s remaining`;
                
                const timerInterval = setInterval(() => {
                    remainingTime--;
                    
                    if (remainingTime > 0) {
                        timerDisplay.innerHTML = `⏱️ Keep watching all 4 videos... ${remainingTime}s remaining`;
                    } else {
                        clearInterval(timerInterval);
                        timerDisplay.innerHTML = '✅ Minimum viewing time complete!';
                        timerDisplay.style.color = 'var(--color-success, #4caf50)';
                        
                        statusArea.innerHTML = '<div class="success">✅ Quad video session complete</div>';
                        task.completed = true;
                        
                        const completeBtn = document.getElementById('interactive-complete-btn');
                        if (completeBtn) {
                            completeBtn.disabled = false;
                        }
                    }
                }, 1000);
                
            } catch (error) {
                console.error('Quad video error:', error);
                statusArea.innerHTML = `<div class="error">⚠️ ${error.message} - Continuing anyway</div>`;
                task.completed = true;
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) {
                    completeBtn.disabled = false;
                }
            }
        });
    }

    validateQuadVideoTask(task) {
        return task.completed === true;
    }

    /**
     * Hypno Spiral Task
     */
    async createHypnoSpiralTask(task, container) {
        const duration = task.params?.duration || 120;
        const overlay = task.params?.overlay || true;
        const opacity = task.params?.opacity || 0.5;
        
        let timeRemaining = duration;
        
        container.innerHTML = `
            <div class="academy-hypno-task">
                <h3>🌀 Hypnotic Spiral</h3>
                <p>Stare at the spiral. Let it pull you deeper.</p>
                <div class="hypno-container">
                    <div class="spiral-animation" id="hypno-spiral"></div>
                </div>
                <div class="timer-display">
                    <span id="hypno-timer">${timeRemaining}s</span> remaining
                </div>
                <button class="btn btn-primary" id="start-hypno-btn">
                    🌀 Begin Spiral
                </button>
            </div>
        `;
        
        const btn = container.querySelector('#start-hypno-btn');
        const spiral = container.querySelector('#hypno-spiral');
        const timerDisplay = container.querySelector('#hypno-timer');
        
        btn.addEventListener('click', () => {
            btn.disabled = true;
            spiral.classList.add('spinning');
            
            if (overlay) {
                spiral.style.opacity = opacity;
            }
            
            const countdown = setInterval(() => {
                timeRemaining--;
                timerDisplay.textContent = `${timeRemaining}s`;
                
                if (timeRemaining <= 0) {
                    clearInterval(countdown);
                    task.completed = true;
                    spiral.classList.remove('spinning');
                    
                    container.innerHTML += '<div class="success-message">✅ Spiral session complete</div>';
                    
                    const completeBtn = document.getElementById('interactive-complete-btn');
                    if (completeBtn) {
                        completeBtn.disabled = false;
                    }
                }
            }, 1000);
            
            task.cleanup = () => clearInterval(countdown);
        });
    }

    validateHypnoSpiralTask(task) {
        return task.completed === true;
    }

    /**
     * Video Start Task - Start a video player
     */
    async createVideoStartTask(task, container) {
        const player = task.params?.player || 'task';
        const tags = task.params?.tags || [];
        const minDuration = task.params?.minDuration || 60; // Default 60 seconds minimum viewing
        
        container.innerHTML = `
            <div class="academy-video-start-task">
                <h3>🎬 Video Immersion</h3>
                <p>Prepare to focus on the video content</p>
                <p class="info-text">Minimum viewing time: <strong>${minDuration} seconds</strong></p>
                ${tags.length > 0 ? '<p>Filtering by tags: ' + tags.map(t => '<span class="tag">' + t + '</span>').join(' ') + '</p>' : ''}
                <div id="video-player-container" class="video-player-container" style="margin: 20px 0; min-height: 400px; text-align: center;"></div>
                <div style="display: flex; gap: 10px; justify-content: center; margin: 10px 0;">
                    <button class="btn btn-primary" id="start-video-player-btn">
                        ▶️ Start Video
                    </button>
                    <button class="btn btn-secondary" id="skip-video-btn" style="display: none;">
                        ⏭️ Skip to Next Video
                    </button>
                </div>
                <div id="video-timer-display" class="timer-display" style="display: none; margin: 15px 0; font-size: 1.2em; font-weight: bold;"></div>
                <div id="video-start-status" class="status-area"></div>
            </div>
        `;
        
        const btn = container.querySelector('#start-video-player-btn');
        const skipBtn = container.querySelector('#skip-video-btn');
        const statusArea = container.querySelector('#video-start-status');
        const videoContainer = container.querySelector('#video-player-container');
        const timerDisplay = container.querySelector('#video-timer-display');
        
        let availableVideos = [];
        
        const playRandomVideo = async () => {
            if (availableVideos.length === 0) return;
            
            const randomVideo = availableVideos[Math.floor(Math.random() * availableVideos.length)];
            // Extract path from video object if it's an object, otherwise use as-is
            const videoPath = typeof randomVideo === 'object' ? randomVideo.path : randomVideo;
            await window.videoPlayerManager.playTaskVideo(videoPath, videoContainer);
        };
        
        skipBtn.addEventListener('click', async () => {
            if (availableVideos.length > 0) {
                await playRandomVideo();
                statusArea.innerHTML = '<div class="info">⏭️ Skipped to new video</div>';
            }
        });
        
        btn.addEventListener('click', async () => {
            btn.disabled = true;
            btn.textContent = 'Loading...';
            
            if (!window.videoPlayerManager) {
                statusArea.innerHTML = '<div class="error">⚠️ Video manager not initialized</div>';
                task.completed = true;
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) completeBtn.disabled = false;
                return;
            }
            
            try {
                // Check if videos are available
                availableVideos = window.videoPlayerManager.videoLibrary?.background || [];
                console.log(`📹 Videos available: ${availableVideos.length}`);
                
                if (availableVideos.length === 0) {
                    statusArea.innerHTML = '<div class="info">ℹ️ No videos in library - continuing anyway</div>';
                    task.completed = true;
                    const completeBtn = document.getElementById('interactive-complete-btn');
                    if (completeBtn) completeBtn.disabled = false;
                    return;
                }
                
                await playRandomVideo();
                
                btn.style.display = 'none';
                skipBtn.style.display = 'inline-block';
                timerDisplay.style.display = 'block';
                
                // Start countdown timer
                let remainingTime = minDuration;
                timerDisplay.innerHTML = `⏱️ Keep watching... ${remainingTime}s remaining`;
                
                const timerInterval = setInterval(() => {
                    remainingTime--;
                    
                    if (remainingTime > 0) {
                        timerDisplay.innerHTML = `⏱️ Keep watching... ${remainingTime}s remaining`;
                    } else {
                        clearInterval(timerInterval);
                        timerDisplay.innerHTML = '✅ Minimum viewing time complete!';
                        timerDisplay.style.color = 'var(--color-success, #4caf50)';
                        
                        statusArea.innerHTML = '<div class="success">✅ You may now continue when ready</div>';
                        task.completed = true;
                        
                        const completeBtn = document.getElementById('interactive-complete-btn');
                        if (completeBtn) {
                            completeBtn.disabled = false;
                        }
                    }
                }, 1000);
                
            } catch (error) {
                console.error('Video start error:', error);
                statusArea.innerHTML = `<div class="error">⚠️ ${error.message} - Continuing anyway</div>`;
                // Auto-complete even on error
                task.completed = true;
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) {
                    completeBtn.disabled = false;
                }
            }
        });
    }

    validateVideoStartTask(task) {
        return task.completed === true;
    }

    /**
     * Update Preferences Task - Show preference update modal at checkpoint
     */
    async createUpdatePreferencesTask(task, container) {
        const checkpoint = task.params?.checkpoint || 1;
        
        container.innerHTML = `
            <div class="academy-update-preferences-task">
                <h3>⚙️ Checkpoint ${checkpoint} - Update Preferences</h3>
                <p>Update your content preferences to personalize future training sessions.</p>
                <div style="display: flex; gap: 10px; margin: 20px 0;">
                    <button class="btn btn-primary" id="open-preferences-btn">
                        ⚙️ Open Preference Editor
                    </button>
                    <button class="btn btn-secondary" id="skip-preferences-btn">
                        ⏭️ Skip (Use Current Preferences)
                    </button>
                </div>
                <div id="preference-status" class="status-area"></div>
            </div>
        `;
        
        const openBtn = container.querySelector('#open-preferences-btn');
        const skipBtn = container.querySelector('#skip-preferences-btn');
        const statusArea = container.querySelector('#preference-status');
        
        const completeTask = (message) => {
            statusArea.innerHTML = `<div class="success">${message}</div>`;
            task.completed = true;
            if (openBtn) openBtn.disabled = true;
            if (skipBtn) skipBtn.disabled = true;
            
            const completeBtn = document.getElementById('interactive-complete-btn');
            if (completeBtn) {
                completeBtn.disabled = false;
            }
        };
        
        skipBtn.addEventListener('click', () => {
            completeTask('✅ Preferences skipped - using current settings');
        });
        
        openBtn.addEventListener('click', () => {
            if (window.academyUI && window.preferenceManager) {
                try {
                    // Show checkpoint modal with preferences tab active
                    window.academyUI.showCheckpointModal(checkpoint, () => {
                        completeTask('✅ Preferences updated');
                    });
                } catch (error) {
                    console.error('Preference editor error:', error);
                    completeTask('✅ Preferences configured (with errors)');
                }
            } else {
                // Auto-complete if UI not available
                completeTask('✅ Preferences configured (UI unavailable)');
            }
        });
    }

    validateUpdatePreferencesTask(task) {
        return task.completed === true;
    }

    /**
     * Free Edge Session Task - Free-form edging with features enabled
     */
    async createFreeEdgeSessionTask(task, container) {
        const duration = task.params?.duration || 600;
        const allowedFeatures = task.params?.allowedFeatures || ['video'];
        
        let timeRemaining = duration;
        let edgeCount = 0;
        
        container.innerHTML = `
            <div class="academy-free-edge-task">
                <h3>🎯 Free Edge Session</h3>
                <p>Edge as much as you can with these features enabled:</p>
                <div class="feature-list">
                    ${allowedFeatures.map(f => `<span class="feature-badge">${f}</span>`).join(' ')}
                </div>
                <div class="session-stats">
                    <div class="stat">
                        <span class="stat-value" id="edge-count">0</span>
                        <span class="stat-label">Edges</span>
                    </div>
                    <div class="stat">
                        <span class="stat-value" id="time-remaining">${Math.floor(timeRemaining / 60)}:${String(timeRemaining % 60).padStart(2, '0')}</span>
                        <span class="stat-label">Time Remaining</span>
                    </div>
                </div>
                <button class="btn btn-success" id="log-edge-btn">
                    ➕ I Edged
                </button>
                <button class="btn btn-primary" id="start-session-btn">
                    ▶️ Start Session
                </button>
            </div>
        `;
        
        const startBtn = container.querySelector('#start-session-btn');
        const edgeBtn = container.querySelector('#log-edge-btn');
        const edgeCountEl = container.querySelector('#edge-count');
        const timeRemainingEl = container.querySelector('#time-remaining');
        
        edgeBtn.disabled = true;
        
        startBtn.addEventListener('click', () => {
            startBtn.disabled = true;
            edgeBtn.disabled = false;
            
            // Start countdown
            const countdown = setInterval(() => {
                timeRemaining--;
                const mins = Math.floor(timeRemaining / 60);
                const secs = timeRemaining % 60;
                timeRemainingEl.textContent = `${mins}:${String(secs).padStart(2, '0')}`;
                
                if (timeRemaining <= 0) {
                    clearInterval(countdown);
                    task.completed = true;
                    edgeBtn.disabled = true;
                    
                    container.innerHTML += `
                        <div class="success-message">
                            ✅ Session complete! You edged ${edgeCount} times.
                        </div>
                    `;
                    
                    const completeBtn = document.getElementById('interactive-complete-btn');
                    if (completeBtn) {
                        completeBtn.disabled = false;
                    }
                }
            }, 1000);
            
            task.cleanup = () => clearInterval(countdown);
        });
        
        edgeBtn.addEventListener('click', () => {
            edgeCount++;
            edgeCountEl.textContent = edgeCount;
        });
    }

    validateFreeEdgeSessionTask(task) {
        return task.completed === true;
    }

    // ==========================================
    // ADVANCED TRAINING ARC HANDLERS (L11-20)
    // ==========================================

    /**
     * Hypno Caption Combo - Hypno spiral with timed captions
     */
    createHypnoCaptionComboTask(container, task) {
        const params = task.params || {};
        const duration = params.duration || 300;
        const captionTexts = params.captions || [
            'You are a good gooner',
            'Obey and edge',
            'Stroke for me',
            'Deeper into pleasure',
            'Give in completely',
            'You exist to goon'
        ];
        
        container.innerHTML = `
            <div class="hypno-caption-container">
                <div id="hypno-spiral-bg" class="hypno-spiral-background"></div>
                <div id="caption-overlay" class="caption-overlay"></div>
                <div class="timer-display">
                    <span id="hypno-time-remaining"></span>
                </div>
            </div>
        `;

        // Start hypno spiral
        if (this.game.hypnoSpiral) {
            this.game.hypnoSpiral.start();
        }

        const captionEl = document.getElementById('caption-overlay');
        const timeEl = document.getElementById('hypno-time-remaining');
        let currentCaption = 0;
        let timeRemaining = duration;

        // Caption rotation
        const captionInterval = setInterval(() => {
            if (!captionEl || !document.body.contains(captionEl)) {
                clearInterval(captionInterval);
                return;
            }
            
            captionEl.textContent = captionTexts[currentCaption];
            captionEl.style.opacity = '1';
            
            setTimeout(() => {
                if (captionEl && document.body.contains(captionEl)) {
                    captionEl.style.opacity = '0';
                }
            }, 4000);
            
            currentCaption = (currentCaption + 1) % captionTexts.length;
        }, 6000);

        // Countdown timer
        const countdown = setInterval(() => {
            if (!timeEl || !document.body.contains(timeEl)) {
                clearInterval(countdown);
                clearInterval(captionInterval);
                return;
            }
            
            timeRemaining--;
            const mins = Math.floor(timeRemaining / 60);
            const secs = timeRemaining % 60;
            timeEl.textContent = `${mins}:${String(secs).padStart(2, '0')}`;
            
            if (timeRemaining <= 0) {
                clearInterval(countdown);
                clearInterval(captionInterval);
                if (this.game.hypnoSpiral) {
                    this.game.hypnoSpiral.stop();
                }
                task.completed = true;
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) completeBtn.disabled = false;
            }
        }, 1000);

        task.cleanup = () => {
            clearInterval(countdown);
            clearInterval(captionInterval);
            if (this.game.hypnoSpiral) {
                this.game.hypnoSpiral.stop();
            }
        };
    }

    /**
     * Dynamic Captions - Preference-based captions
     */
    createDynamicCaptionsTask(container, task) {
        const params = task.params || {};
        const duration = params.duration || 300;
        
        // Get user preferences (simplified for now)
        const preferences = this.game.playerStats?.preferences || {};
        const captionPool = this.generatePreferenceBasedCaptions(preferences);
        
        container.innerHTML = `
            <div class="dynamic-captions-container">
                <div id="dynamic-caption-display" class="dynamic-caption"></div>
                <div class="timer-display">
                    Time: <span id="dynamic-time-remaining"></span>
                </div>
                <div class="caption-info">Captions personalized to your preferences</div>
            </div>
        `;

        const captionEl = document.getElementById('dynamic-caption-display');
        const timeEl = document.getElementById('dynamic-time-remaining');
        let timeRemaining = duration;

        // Show random caption every 8 seconds
        const captionInterval = setInterval(() => {
            if (!captionEl) return;
            const caption = captionPool[Math.floor(Math.random() * captionPool.length)];
            captionEl.textContent = caption;
            captionEl.style.opacity = '1';
            
            setTimeout(() => {
                if (captionEl) captionEl.style.opacity = '0';
            }, 6000);
        }, 8000);

        // Countdown
        const countdown = setInterval(() => {
            timeRemaining--;
            const mins = Math.floor(timeRemaining / 60);
            const secs = timeRemaining % 60;
            if (timeEl) timeEl.textContent = `${mins}:${String(secs).padStart(2, '0')}`;
            
            if (timeRemaining <= 0) {
                clearInterval(countdown);
                clearInterval(captionInterval);
                task.completed = true;
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) completeBtn.disabled = false;
            }
        }, 1000);

        task.cleanup = () => {
            clearInterval(countdown);
            clearInterval(captionInterval);
        };
    }

    generatePreferenceBasedCaptions(preferences) {
        // Default captions if no preferences
        return [
            'You love to edge',
            'Gooning is your purpose',
            'Stroke and obey',
            'Deeper into pleasure',
            'You are addicted',
            'Edge for hours',
            'No thinking, only gooning',
            'You need this',
            'Pump and goon',
            'Surrender completely'
        ];
    }

    /**
     * TTS Hypno Sync - Voice + hypno synchronized
     */
    createTTSHypnoSyncTask(container, task) {
        const params = task.params || {};
        const duration = params.duration || 300;
        const commands = params.commands || [
            'Focus on the spiral',
            'Let your mind go blank',
            'Stroke slowly and deeply',
            'You are under my control',
            'Obey and edge'
        ];
        
        container.innerHTML = `
            <div class="tts-hypno-container">
                <div id="tts-hypno-spiral" class="hypno-spiral-background"></div>
                <div id="tts-command-display" class="tts-command"></div>
                <div class="timer-display">
                    Time: <span id="tts-time-remaining"></span>
                </div>
            </div>
        `;

        // Start hypno
        if (this.game.hypnoSpiral) {
            this.game.hypnoSpiral.start();
        }

        const commandEl = document.getElementById('tts-command-display');
        const timeEl = document.getElementById('tts-time-remaining');
        let timeRemaining = duration;
        let commandIndex = 0;

        // Speak commands every 30 seconds
        const speakCommand = () => {
            const command = commands[commandIndex];
            commandEl.textContent = command;
            
            if (this.voiceManager && this.ttsEnabled) {
                this.voiceManager.speak(command);
            }
            
            commandIndex = (commandIndex + 1) % commands.length;
        };

        speakCommand(); // First command immediately
        const commandInterval = setInterval(speakCommand, 30000);

        // Countdown
        const countdown = setInterval(() => {
            timeRemaining--;
            const mins = Math.floor(timeRemaining / 60);
            const secs = timeRemaining % 60;
            timeEl.textContent = `${mins}:${String(secs).padStart(2, '0')}`;
            
            if (timeRemaining <= 0) {
                clearInterval(countdown);
                clearInterval(commandInterval);
                if (this.game.hypnoSpiral) {
                    this.game.hypnoSpiral.stop();
                }
                task.completed = true;
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) completeBtn.disabled = false;
            }
        }, 1000);

        task.cleanup = () => {
            clearInterval(countdown);
            clearInterval(commandInterval);
            if (this.game.hypnoSpiral) {
                this.game.hypnoSpiral.stop();
            }
        };
    }

    /**
     * Sensory Overload - All features combined
     */
    createSensoryOverloadTask(container, task) {
        const params = task.params || {};
        const duration = params.duration || 600;
        const edgeTarget = params.edgeCount || 50;
        
        container.innerHTML = `
            <div class="sensory-overload-container">
                <div id="overload-hypno" class="hypno-spiral-background"></div>
                <div id="overload-caption" class="caption-overlay"></div>
                <div class="overload-stats">
                    <div>Edges: <span id="overload-edge-count">0</span> / ${edgeTarget}</div>
                    <div>Time: <span id="overload-time-remaining"></span></div>
                </div>
                <button id="overload-edge-btn" class="edge-button">I EDGED</button>
                <div class="overload-warning">⚠️ ALL FEATURES ACTIVE ⚠️</div>
            </div>
        `;

        // Start ALL features
        if (this.game.hypnoSpiral) {
            this.game.hypnoSpiral.start();
        }

        const captionEl = document.getElementById('overload-caption');
        const edgeCountEl = document.getElementById('overload-edge-count');
        const timeEl = document.getElementById('overload-time-remaining');
        const edgeBtn = document.getElementById('overload-edge-btn');
        
        let edgeCount = 0;
        let timeRemaining = duration;

        const captions = [
            'EDGE NOW', 'OBEY', 'GOON HARDER', 'SUBMIT', 'EDGE AGAIN',
            'YOU ARE MINE', 'STROKE', 'PUMP', 'DEEPER', 'MORE'
        ];

        // Rapid caption rotation
        const captionInterval = setInterval(() => {
            if (captionEl) captionEl.textContent = captions[Math.floor(Math.random() * captions.length)];
        }, 3000);

        // TTS commands
        const ttsCommands = ['Edge now', 'Faster', 'Slower', 'Stop', 'Continue'];
        const ttsInterval = setInterval(() => {
            if (this.voiceManager && this.ttsEnabled) {
                const cmd = ttsCommands[Math.floor(Math.random() * ttsCommands.length)];
                this.voiceManager.speak(cmd);
            }
        }, 25000);

        // Countdown
        const countdown = setInterval(() => {
            timeRemaining--;
            const mins = Math.floor(timeRemaining / 60);
            const secs = timeRemaining % 60;
            if (timeEl) timeEl.textContent = `${mins}:${String(secs).padStart(2, '0')}`;
            
            if (timeRemaining <= 0) {
                clearInterval(countdown);
                clearInterval(captionInterval);
                clearInterval(ttsInterval);
                if (this.game.hypnoSpiral) {
                    this.game.hypnoSpiral.stop();
                }
                task.completed = true;
                if (edgeBtn) edgeBtn.disabled = true;
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) completeBtn.disabled = false;
            }
        }, 1000);

        if (edgeBtn) {
            edgeBtn.addEventListener('click', () => {
                edgeCount++;
                if (edgeCountEl) edgeCountEl.textContent = edgeCount;
            });
        }

        task.cleanup = () => {
            clearInterval(countdown);
            clearInterval(captionInterval);
            clearInterval(ttsInterval);
            if (this.game.hypnoSpiral) {
                this.game.hypnoSpiral.stop();
            }
        };
    }

    /**
     * Enable Interruptions - Activate interruption system
     */
    createEnableInterruptionsTask(container, task) {
        const params = task.params || {};
        const types = params.types || ['edge', 'pose', 'mantra', 'stop-stroking'];
        const frequency = params.frequency || 'medium';
        
        container.innerHTML = `
            <div class="enable-interruptions-container">
                <div class="feature-unlock">
                    <h3>🚨 INTERRUPTIONS ACTIVATED 🚨</h3>
                    <p>Random commands will interrupt your sessions:</p>
                    <ul>
                        ${types.map(type => `<li>${type}</li>`).join('')}
                    </ul>
                    <p>Frequency: <strong>${frequency}</strong></p>
                    <p class="warning">You must obey immediately when interrupted.</p>
                </div>
                <button id="accept-interruptions-btn" class="accept-btn">I Understand - Activate</button>
            </div>
        `;

        const acceptBtn = document.getElementById('accept-interruptions-btn');
        acceptBtn.addEventListener('click', () => {
            // Store interruption settings in game state
            if (!this.game.interruptionSettings) {
                this.game.interruptionSettings = {};
            }
            this.game.interruptionSettings.enabled = true;
            this.game.interruptionSettings.types = types;
            this.game.interruptionSettings.frequency = frequency;
            
            task.completed = true;
            const completeBtn = document.getElementById('interactive-complete-btn');
            if (completeBtn) completeBtn.disabled = false;
        });
    }

    /**
     * Denial Training - Timed stroking/stopping periods
     */
    createDenialTrainingTask(container, task) {
        const params = task.params || {};
        const periods = params.denialPeriods || [
            { allowStroking: 300, instruction: 'Stroke for 5 minutes' },
            { stopDuration: 120, instruction: 'HANDS OFF for 2 minutes' }
        ];
        
        let currentPeriod = 0;
        let timeInPeriod = 0;
        
        const updateDisplay = () => {
            const period = periods[currentPeriod];
            const isStroking = period.hasOwnProperty('allowStroking');
            const duration = isStroking ? period.allowStroking : period.stopDuration;
            const remaining = duration - timeInPeriod;
            
            container.innerHTML = `
                <div class="denial-training-container ${isStroking ? 'stroking-period' : 'denial-period'}">
                    <h3>${isStroking ? '✋ STROKE' : '🚫 STOP - HANDS OFF'}</h3>
                    <div class="denial-instruction">${period.instruction}</div>
                    <div class="denial-timer">
                        ${Math.floor(remaining / 60)}:${String(remaining % 60).padStart(2, '0')}
                    </div>
                    <div class="denial-progress">
                        Period ${currentPeriod + 1} of ${periods.length}
                    </div>
                </div>
            `;
        };

        updateDisplay();

        const interval = setInterval(() => {
            timeInPeriod++;
            const period = periods[currentPeriod];
            const duration = period.hasOwnProperty('allowStroking') ? period.allowStroking : period.stopDuration;
            
            if (timeInPeriod >= duration) {
                currentPeriod++;
                timeInPeriod = 0;
                
                if (currentPeriod >= periods.length) {
                    clearInterval(interval);
                    task.completed = true;
                    
                    container.innerHTML = `
                        <div class="denial-complete">
                            <h3>✅ Denial Training Complete</h3>
                            <p>You have learned discipline through denial.</p>
                        </div>
                    `;
                    
                    const completeBtn = document.getElementById('interactive-complete-btn');
                    if (completeBtn) completeBtn.disabled = false;
                    return;
                }
            }
            
            updateDisplay();
        }, 1000);

        task.cleanup = () => clearInterval(interval);
    }

    /**
     * Stop Stroking - Enforced hands-off period
     */
    createStopStrokingTask(container, task) {
        const params = task.params || {};
        const duration = params.duration || 120;
        
        container.innerHTML = `
            <div class="stop-stroking-container denial-period">
                <h2>🚫 STOP STROKING 🚫</h2>
                <div class="stop-instruction">HANDS OFF. NO TOUCHING.</div>
                <div class="stop-timer" id="stop-timer"></div>
                <div class="stop-warning">You must wait the full duration.</div>
            </div>
        `;

        const timerEl = document.getElementById('stop-timer');
        let timeRemaining = duration;

        const countdown = setInterval(() => {
            timeRemaining--;
            const mins = Math.floor(timeRemaining / 60);
            const secs = timeRemaining % 60;
            timerEl.textContent = `${mins}:${String(secs).padStart(2, '0')}`;
            
            if (timeRemaining <= 0) {
                clearInterval(countdown);
                task.completed = true;
                
                container.innerHTML = `
                    <div class="stop-complete">
                        <h3>✅ Denial Period Complete</h3>
                        <p>You may resume stroking.</p>
                    </div>
                `;
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) completeBtn.disabled = false;
            }
        }, 1000);

        task.cleanup = () => clearInterval(countdown);
    }

    /**
     * Enable Popups - Activate popup system
     */
    createEnablePopupsTask(container, task) {
        const params = task.params || {};
        const frequency = params.frequency || 'medium';
        const sources = params.sources || ['tasks', 'consequences'];
        
        container.innerHTML = `
            <div class="enable-popups-container">
                <div class="feature-unlock">
                    <h3>📸 POPUP SYSTEM ACTIVATED 📸</h3>
                    <p>Random images will appear during your sessions:</p>
                    <ul>
                        ${sources.map(src => `<li>${src}</li>`).join('')}
                    </ul>
                    <p>Frequency: <strong>${frequency}</strong></p>
                    <p class="warning">You must read and acknowledge each popup.</p>
                </div>
                <button id="accept-popups-btn" class="accept-btn">I Understand - Activate</button>
            </div>
        `;

        const acceptBtn = document.getElementById('accept-popups-btn');
        acceptBtn.addEventListener('click', () => {
            // Store popup settings in game state
            if (!this.game.popupSettings) {
                this.game.popupSettings = {};
            }
            this.game.popupSettings.enabled = true;
            this.game.popupSettings.sources = sources;
            this.game.popupSettings.frequency = frequency;
            
            task.completed = true;
            const completeBtn = document.getElementById('interactive-complete-btn');
            if (completeBtn) completeBtn.disabled = false;
        });
    }

    /**
     * Popup Image - Display specific popup
     */
    createPopupImageTask(container, task) {
        const params = task.params || {};
        const imagePath = params.image || '';
        const displayTime = params.duration || 10;
        const message = params.message || 'Acknowledge this popup';
        
        container.innerHTML = `
            <div class="popup-image-container">
                <div class="popup-content">
                    ${imagePath ? `<img src="${imagePath}" alt="Popup" class="popup-img">` : ''}
                    <div class="popup-message">${message}</div>
                    <div class="popup-timer">Auto-close in: <span id="popup-timer">${displayTime}</span>s</div>
                </div>
                <button id="popup-acknowledge-btn" class="acknowledge-btn">Acknowledge</button>
            </div>
        `;

        const timerEl = document.getElementById('popup-timer');
        const ackBtn = document.getElementById('popup-acknowledge-btn');
        let timeRemaining = displayTime;

        const countdown = setInterval(() => {
            timeRemaining--;
            timerEl.textContent = timeRemaining;
            
            if (timeRemaining <= 0) {
                clearInterval(countdown);
                task.completed = true;
                
                const completeBtn = document.getElementById('interactive-complete-btn');
                if (completeBtn) completeBtn.disabled = false;
            }
        }, 1000);

        ackBtn.addEventListener('click', () => {
            clearInterval(countdown);
            task.completed = true;
            
            const completeBtn = document.getElementById('interactive-complete-btn');
            if (completeBtn) completeBtn.disabled = false;
        });

        task.cleanup = () => clearInterval(countdown);
    }

    /**
     * Generic validators for timed tasks
     */
    validateTimedTask(task) {
        return task.completed === true;
    }

    validateInstantTask(task) {
        return task.completed === true;
    }

    /**
     * Clean up quad video player and other resources
     */
    cleanup() {
        if (this.quadPlayer) {
            console.log('🧹 Cleaning up QuadVideoPlayer...');
            
            // Always stop all videos during cleanup
            this.quadPlayer.stopAllVideos();
            
            // Fully destroy the quad player to prevent DOM corruption
            this.quadPlayer.destroy();
            this.quadPlayer = null;
            
            console.log('✅ QuadVideoPlayer fully cleaned up');
        }
    }
}

// Export for use in other modules
if (typeof module !== 'undefined' && module.exports) {
    module.exports = InteractiveTaskManager;
}

// Make available globally for dependency validation
window.InteractiveTaskManager = InteractiveTaskManager;