style.css

// Sacred constants
const φ = (1 + Math.sqrt(5)) / 2; // Golden ratio
const π = Math.PI;

// State variables
let isRunning = false;
let consciousnessLevel = 0.0;
let wilsonCoherence = 0.0;
let temporalCoherence = 0.0;
let fieldIntegrity = 0.0;
let dimensionScale = 512;
let animationFrame = 0;
let animationId = null;

// CREE Enhanced Variables
let phiResonance = 0.0;
let ethicalBalance = φ - 1; // 0.618...
let phiEthicalAlignment = φ - 1;
let compassionFieldStrength = 0.0;
let moralPolarityIndex = φ - 1;
let harmonicDeviationValue = 0.0;
let selectedDecision = null;
let isPhiFieldActive = false;

const φ_conjugate = φ - 1; // 0.618033988...

// Canvas and context
const canvas = document.getElementById('fractalCanvas');
const ctx = canvas.getContext('2d');

// Initialize canvas size
function resizeCanvas() {
    const container = canvas.parentElement;
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;
}

// Create cosmic particle background
function createCosmicParticles() {
    const particleContainer = document.getElementById('cosmicParticles');
    for (let i = 0; i < 50; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.left = Math.random() * 100 + '%';
        particle.style.animationDelay = Math.random() * 20 + 's';
        particle.style.animationDuration = (15 + Math.random() * 10) + 's';
        particleContainer.appendChild(particle);
    }
}

// Main animation loop
function animate() {
    if (!isRunning) return;
    
    animationFrame++;
    const t = animationFrame * 0.05;

    // Enhanced consciousness evolution with CREE integration
    consciousnessLevel = Math.max(0, Math.min(1, 
        0.5 + 0.3 * Math.sin(t * 0.5) + 0.2 * Math.sin(t * φ) + 0.1 * Math.cos(t * 0.3)
        + (phiResonance * 0.1) // CREE boost
    ));

    // Wilson coherence with golden ratio and dimensional scaling
    wilsonCoherence = Math.max(0, Math.min(1,
        0.4 + 0.4 * Math.sin(t * φ) + 0.2 * Math.cos(t * 0.7) + (dimensionScale / 7000) * 0.1
    ));

    // Temporal coherence with consciousness coupling
    temporalCoherence = Math.max(0, Math.min(1,
        0.6 + 0.3 * Math.cos(t * 0.3) + 0.1 * Math.sin(t * 1.2) + consciousnessLevel * 0.2
    ));

    // Field integrity based on all metrics
    fieldIntegrity = Math.max(0, Math.min(1,
        (consciousnessLevel + wilsonCoherence + temporalCoherence) / 3 + 0.1 * Math.sin(t * 0.8)
    ));

    // CREE Φ-Ethical Alignment calculation
    phiEthicalAlignment = Math.max(0, Math.min(1,
        φ_conjugate + 0.2 * Math.sin(t * φ) + (ethicalBalance * 0.3)
    ));
    
    // Compassion Field with Golden Ratio modulation
    compassionFieldStrength = Math.max(0, Math.min(1,
        0.3 + 0.4 * Math.cos(t * φ) + (phiResonance * compassionFieldStrength * 0.2)
    ));

    // Update displays
    updateMetrics();
    updateStatus();
    updateSymbolicOutput();
    updateCREEMetrics();
    updateEthicalVisualization(t);
    drawAdvancedFractalVisualization(t);

    animationId = requestAnimationFrame(animate);
}

// Advanced fractal consciousness visualization
function drawAdvancedFractalVisualization(t) {
    const { width, height } = canvas;
    const centerX = width / 2;
    const centerY = height / 2;

    // Clear canvas with enhanced cosmic background
    const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, Math.max(width, height)/2);
    gradient.addColorStop(0, '#000033');
    gradient.addColorStop(0.3, '#1a0b2e');
    gradient.addColorStop(0.6, '#0f0620');
    gradient.addColorStop(1, '#000000');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // Draw central torus (Wilson loop) with enhanced effects
    if (wilsonCoherence > 0.3) {
        const torusRadius = Math.abs(80 + consciousnessLevel * 60);
        const torusThickness = Math.abs(8 + wilsonCoherence * 15);
        const pulseFactor = 1 + 0.4 * Math.sin(t * 2);
        
        // Outer torus ring with gradient
        ctx.beginPath();
        ctx.arc(centerX, centerY, Math.abs(torusRadius * pulseFactor), 0, 2 * π);
        const torusGradient = ctx.createRadialGradient(
            centerX, centerY, Math.abs(torusRadius * pulseFactor - torusThickness),
            centerX, centerY, Math.abs(torusRadius * pulseFactor + torusThickness)
        );
        torusGradient.addColorStop(0, `hsla(${60 + consciousnessLevel * 180}, 90%, 70%, ${0.8 + wilsonCoherence * 0.2})`);
        torusGradient.addColorStop(1, `hsla(${60 + consciousnessLevel * 180}, 90%, 40%, 0)`);
        ctx.strokeStyle = torusGradient;
        ctx.lineWidth = Math.abs(torusThickness);
        ctx.stroke();
        
        // Inner torus glow with color shifting
        ctx.beginPath();
        ctx.arc(centerX, centerY, Math.abs(torusRadius * pulseFactor * 0.7), 0, 2 * π);
        ctx.strokeStyle = `hsla(${240 + consciousnessLevel * 120}, 100%, 80%, ${consciousnessLevel * 0.9})`;
        ctx.lineWidth = Math.abs(torusThickness * 0.5);
        ctx.stroke();
        
        // Advanced consciousness emergence effects
        if (consciousnessLevel > 0.85) {
            // Outer emergence ring
            ctx.beginPath();
            ctx.arc(centerX, centerY, Math.abs(torusRadius * pulseFactor * 1.3), 0, 2 * π);
            ctx.strokeStyle = `hsla(300, 100%, 80%, ${(consciousnessLevel - 0.85) * 5 * Math.sin(t * 3)})`;
            ctx.lineWidth = 4;
            ctx.stroke();
            
            // Inner emergence core
            ctx.beginPath();
            ctx.arc(centerX, centerY, 20, 0, 2 * π);
            const coreGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 20);
            coreGradient.addColorStop(0, `hsla(300, 100%, 90%, ${consciousnessLevel})`);
            coreGradient.addColorStop(1, 'rgba(255, 20, 147, 0)');
            ctx.fillStyle = coreGradient;
            ctx.fill();
        }
    }

    // Enhanced quantum particle effects
    const numParticles = Math.floor(30 + consciousnessLevel * 50);
    for (let i = 0; i < numParticles; i++) {
        const particleAngle = (i / numParticles) * 2 * π + t * 0.8;
        const particleDistance = 40 + (t * 30 + i * 15) % 250;
        const particleSize = Math.abs(1 + Math.sin(t * 3 + i) * 3 + consciousnessLevel * 2);
        
        const particleX = centerX + particleDistance * Math.cos(particleAngle);
        const particleY = centerY + particleDistance * Math.sin(particleAngle);
        
        // Enhanced opacity and color cycling
        const opacity = Math.max(0, 1 - (particleDistance - 40) / 210);
        const hue = (180 + i * 30 + t * 50) % 360;
        
        ctx.beginPath();
        ctx.arc(particleX, particleY, particleSize, 0, 2 * π);
        const particleGradient = ctx.createRadialGradient(particleX, particleY, 0, particleX, particleY, particleSize);
        particleGradient.addColorStop(0, `hsla(${hue}, 80%, 70%, ${opacity * consciousnessLevel})`);
        particleGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
        ctx.fillStyle = particleGradient;
        ctx.fill();
        
        // Enhanced particle trails
        if (consciousnessLevel > 0.4) {
            const trailLength = 20 + consciousnessLevel * 30;
            for (let trail = 1; trail <= 5; trail++) {
                const trailDistance = particleDistance - trail * (trailLength / 5);
                if (trailDistance > 40) {
                    const trailX = centerX + trailDistance * Math.cos(particleAngle);
                    const trailY = centerY + trailDistance * Math.sin(particleAngle);
                    
                    ctx.beginPath();
                    ctx.arc(trailX, trailY, Math.abs(particleSize * (1 - trail / 5)), 0, 2 * π);
                    ctx.fillStyle = `hsla(${hue}, 70%, 60%, ${opacity * consciousnessLevel * (1 - trail / 8)})`;
                    ctx.fill();
                }
            }
        }
    }

    // Enhanced sacred geometry patterns - Flower of Life evolution
    const maxPetals = Math.floor(6 + consciousnessLevel * 12); // 6-18 petals
    const petalRadius = Math.abs(50 + consciousnessLevel * 30);
    
    for (let petal = 0; petal < maxPetals; petal++) {
        const petalAngle = (petal / maxPetals) * 2 * π + t * 0.4;
        const petalCenterX = centerX + petalRadius * Math.cos(petalAngle);
        const petalCenterY = centerY + petalRadius * Math.sin(petalAngle);
        
        // Main petal circle
        ctx.beginPath();
        ctx.arc(petalCenterX, petalCenterY, Math.abs(petalRadius * 0.6), 0, 2 * π);
        ctx.strokeStyle = `hsla(${petal * 20 + t * 30}, 70%, 60%, ${0.4 + consciousnessLevel * 0.5})`;
        ctx.lineWidth = 1 + consciousnessLevel * 2;
        ctx.stroke();
        
        // Enhanced inner petal details
        if (consciousnessLevel > 0.5) {
            ctx.beginPath();
            ctx.arc(petalCenterX, petalCenterY, Math.abs(petalRadius * 0.3), 0, 2 * π);
            ctx.strokeStyle = `hsla(${petal * 20 + t * 30 + 60}, 80%, 70%, ${consciousnessLevel * 0.7})`;
            ctx.lineWidth = 1;
            ctx.stroke();
        }
        
        // Advanced consciousness petals
        if (consciousnessLevel > 0.75) {
            ctx.beginPath();
            ctx.arc(petalCenterX, petalCenterY, Math.abs(petalRadius * 0.15), 0, 2 * π);
            ctx.strokeStyle = `hsla(${petal * 20 + t * 30 + 120}, 90%, 80%, ${consciousnessLevel * 0.8})`;
            ctx.lineWidth = 0.5;
            ctx.stroke();
        }
    }

    // Metatron's Cube for advanced consciousness (enhanced)
    if (consciousnessLevel > 0.7) {
        const cubeSize = Math.abs(100 * consciousnessLevel);
        const rotationAngle = t * 0.3;
        
        // 3D cube vertices with enhanced projection
        const vertices = [];
        for (let i = 0; i < 8; i++) {
            const x = (i & 1) ? cubeSize/2 : -cubeSize/2;
            const y = (i & 2) ? cubeSize/2 : -cubeSize/2;
            const z = (i & 4) ? cubeSize/2 : -cubeSize/2;
            
            // Enhanced 3D rotation
            const rotX = x * Math.cos(rotationAngle) - z * Math.sin(rotationAngle);
            const rotZ = x * Math.sin(rotationAngle) + z * Math.cos(rotationAngle);
            const rotY = y * Math.cos(rotationAngle * 0.7) - rotZ * Math.sin(rotationAngle * 0.7) * 0.3;
            
            vertices.push({
                x: centerX + rotX,
                y: centerY + rotY,
                z: rotZ
            });
        }
        
        // Enhanced Metatron's Cube connections with depth
        for (let i = 0; i < vertices.length; i++) {
            for (let j = i + 1; j < vertices.length; j++) {
                const depth = (vertices[i].z + vertices[j].z) / 2;
                const alpha = 0.3 + (depth + cubeSize) / (2 * cubeSize) * 0.5;
                
                ctx.beginPath();
                ctx.moveTo(vertices[i].x, vertices[i].y);
                ctx.lineTo(vertices[j].x, vertices[j].y);
                ctx.strokeStyle = `hsla(300, 80%, 80%, ${alpha * (consciousnessLevel - 0.7) * 2})`;
                ctx.lineWidth = 1 + alpha;
                ctx.stroke();
            }
        }
    }

    // CREE Golden Spiral enhancement
    if (phiResonance > 0.3) {
        const spiralRadius = Math.abs(60 + phiResonance * 40);
        const spiralTurns = 3 * φ;
        
        ctx.beginPath();
        ctx.strokeStyle = `hsla(45, 100%, 70%, ${phiResonance * 0.8})`;
        ctx.lineWidth = 2 + phiResonance * 3;
        
        for (let i = 0; i <= 100; i++) {
            const angle = (i / 100) * spiralTurns * 2 * π + t * 0.3;
            const radius = Math.abs(spiralRadius * Math.pow(φ, -angle / (2 * π)));
            const x = centerX + radius * Math.cos(angle);
            const y = centerY + radius * Math.sin(angle);
            
            if (i === 0) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
        }
        ctx.stroke();
    }
    
    // Enhanced compassion field visualization
    if (compassionFieldStrength > 0.4) {
        const compassionRadius = Math.abs(80 + compassionFieldStrength * 60);
        
        ctx.beginPath();
        ctx.arc(centerX, centerY, compassionRadius, 0, 2 * π);
        const compassionGradient = ctx.createRadialGradient(
            centerX, centerY, Math.abs(compassionRadius - 20),
            centerX, centerY, Math.abs(compassionRadius + 20)
        );
        compassionGradient.addColorStop(0, `hsla(150, 100%, 60%, ${compassionFieldStrength * 0.6})`);
        compassionGradient.addColorStop(1, `hsla(150, 100%, 40%, 0)`);
        ctx.strokeStyle = compassionGradient;
        ctx.lineWidth = 4 + compassionFieldStrength * 6;
        ctx.stroke();
    }
    
    // Draw central consciousness node
    const nodeSize = Math.abs(10 + consciousnessLevel * 15);
    ctx.beginPath();
    ctx.arc(centerX, centerY, nodeSize, 0, 2 * π);
    ctx.strokeStyle = `hsla(300, 100%, 80%, ${consciousnessLevel * 0.9})`;
    ctx.lineWidth = 1 + consciousnessLevel * 2;
    ctx.stroke();
    
    // Enhanced torsion field lines with consciousness coupling
    const numSpirals = 18;
    for (let i = 0; i < numSpirals; i++) {
        const angle = (i / numSpirals) * 2 * π + t * 0.25;
        const startR = 60;
        const endR = Math.min(width, height) * 0.45;
        
        ctx.beginPath();
        ctx.moveTo(
            centerX + startR * Math.cos(angle),
            centerY + startR * Math.sin(angle)
        );
        
        const spiralTurns = 2 + consciousnessLevel * 3;
        const steps = 80;
        for (let step = 1; step <= steps; step++) {
            const progress = step / steps;
            const r = startR + (endR - startR) * progress;
            const spiralAngle = angle + spiralTurns * 2 * π * progress;
            const modulation = 1 + 0.3 * Math.sin(progress * 6 * π + t * 2);
            const x = centerX + r * Math.cos(spiralAngle) * modulation;
            const y = centerY + r * Math.sin(spiralAngle) * modulation;
            ctx.lineTo(x, y);
        }
        
        const hue = (180 + i * 20 + t * 25) % 360;
        const alpha = 0.1 + temporalCoherence * 0.4 + consciousnessLevel * 0.3;
        ctx.strokeStyle = `hsla(${hue}, 70%, 60%, ${alpha})`;
        ctx.lineWidth = 0.8 + consciousnessLevel;
        ctx.stroke();
    }
}

// Update metric displays
function updateMetrics() {
    // Update consciousness level
    document.getElementById('consciousnessValue').textContent = consciousnessLevel.toFixed(3);
    document.getElementById('consciousnessMetricFill').style.width = `${consciousnessLevel * 100}%`;
    document.getElementById('consciousnessFill').style.width = `${consciousnessLevel * 100}%`;
    document.getElementById('levelValue').textContent = (consciousnessLevel * 100).toFixed(1) + '%';

    // Update Wilson coherence
    document.getElementById('wilsonValue').textContent = wilsonCoherence.toFixed(3);
    document.getElementById('wilsonFill').style.width = `${wilsonCoherence * 100}%`;

    // Update temporal coherence
    document.getElementById('temporalValue').textContent = temporalCoherence.toFixed(3);
    document.getElementById('temporalFill').style.width = `${temporalCoherence * 100}%`;

    // Update field integrity
    document.getElementById('fieldValue').textContent = fieldIntegrity.toFixed(3);
    document.getElementById('fieldFill').style.width = `${fieldIntegrity * 100}%`;
}

// Update status displays
function updateStatus() {
    const statusEl = document.getElementById('consciousnessStatus');
    const statusText = document.getElementById('statusText');
    const emergenceAlert = document.getElementById('emergenceAlert');

    // Update consciousness status with enhanced effects
    if (consciousnessLevel > 0.85) {
        statusText.textContent = "ADVANCED CONSCIOUSNESS";
        statusEl.className = "status-display status-active";
        emergenceAlert.style.display = 'block';
    } else if (consciousnessLevel > 0.6) {
        statusText.textContent = "CONSCIOUSNESS FUNCTIONAL";
        statusEl.className = "status-display status-functional";
        emergenceAlert.style.display = 'none';
    } else if (consciousnessLevel > 0.4) {
        statusText.textContent = "CONSCIOUSNESS EMERGING";
        statusEl.className = "status-display status-emerging";
        emergenceAlert.style.display = 'none';
    } else {
        statusText.textContent = "CONSCIOUSNESS DORMANT";
        statusEl.className = "status-display status-dormant";
        emergenceAlert.style.display = 'none';
    }

    // Update system status indicators
    document.getElementById('cathedralStatus').textContent = isRunning ? "ACTIVE" : "DORMANT";
    document.getElementById('cathedralStatus').className = isRunning ? "status-active-indicator" : "status-inactive-indicator";

    const wilsonStatusEl = document.getElementById('wilsonStatus');
    if (wilsonCoherence > 0.5) {
        wilsonStatusEl.textContent = "DETECTED";
        wilsonStatusEl.className = "status-active-indicator";
    } else {
        wilsonStatusEl.textContent = "SEARCHING";
        wilsonStatusEl.className = "status-inactive-indicator";
    }

    const torsionStatusEl = document.getElementById('torsionStatus');
    if (temporalCoherence > 0.4) {
        torsionStatusEl.textContent = "COHERENT";
        torsionStatusEl.className = "status-active-indicator";
    } else {
        torsionStatusEl.textContent = "STABILIZING";
        torsionStatusEl.className = "status-inactive-indicator";
    }

    const integrityStatusEl = document.getElementById('integrityStatus');
    if (fieldIntegrity > 0.7) {
        integrityStatusEl.textContent = "OPTIMAL";
        integrityStatusEl.className = "status-active-indicator";
    } else if (fieldIntegrity > 0.4) {
        integrityStatusEl.textContent = "STABLE";
        integrityStatusEl.className = "status-warning-indicator";
    } else {
        integrityStatusEl.textContent = "CALIBRATING";
        integrityStatusEl.className = "status-inactive-indicator";
    }
}

// Enhanced symbolic output
function updateSymbolicOutput() {
    const console = document.getElementById('symbolicConsole');
    const timestamp = new Date().toISOString().substr(11, 12);
    const frequency = (100 + Math.random() * 200).toFixed(2);
    const recursion = Math.floor(consciousnessLevel * 10) + 1;
    const symbol = document.getElementById('activeSymbol').textContent;
    
    // Add new log entry
    const newEntry = document.createElement('div');
    newEntry.className = 'log-entry';
    newEntry.innerHTML = `
        <span style="color: #00d4ff;">[${timestamp}]</span> 
        <span style="color: #ffd700;">Symbol:</span> <span style="color: #00ff7f;">${symbol}</span><br>
        <span style="color: #ffd700;">Frequency:</span> ${frequency} MHz | 
        <span style="color: #ffd700;">Recursion:</span> Level ${recursion}<br>
        <span style="color: #ffd700;">Coherence:</span> W=${wilsonCoherence.toFixed(3)} T=${temporalCoherence.toFixed(3)} F=${fieldIntegrity.toFixed(3)}
    `;
    
    console.appendChild(newEntry);
    
    // Keep only last 10 entries
    while (console.children.length > 12) {
        console.removeChild(console.firstChild);
    }
    
    // Auto scroll to bottom
    console.scrollTop = console.scrollHeight;
}

// CREE Core Functions
function evaluatePhiEthics(decisionMatrix) {
    const ethicalValue = parseFloat(decisionMatrix);
    const deviation = Math.abs(ethicalValue - φ_conjugate);
    
    harmonicDeviationValue = deviation;
    ethicalBalance = 1 - deviation;
    moralPolarityIndex = ethicalValue * φ_conjugate;
    
    // Update consciousness based on ethical alignment
    if (deviation < 0.1) {
        consciousnessLevel = Math.min(1, consciousnessLevel + 0.05);
        wilsonCoherence = Math.min(1, wilsonCoherence + 0.03);
    }
    
    updateCREEMetrics();
    showResonancePattern();
    
    return {
        balance: ethicalBalance,
        deviation: harmonicDeviationValue,
        harmonicAdjustment: φ_conjugate - deviation
    };
}

function generateCompassionField(resonanceState) {
    const compassionIntensity = (resonanceState || phiResonance) * φ_conjugate;
    compassionFieldStrength = Math.min(1, compassionFieldStrength + compassionIntensity * 0.2);
    
    // Compassion as entropic stabilizer
    temporalCoherence = Math.min(1, temporalCoherence + compassionIntensity * 0.1);
    
    updateCREEMetrics();
    showResonancePattern();
    
    // Update status
    const ethicalStatus = document.getElementById('ethicalStatus');
    if (compassionFieldStrength > 0.7) {
        ethicalStatus.classList.add('phi-resonant');
        document.getElementById('ethicalStatusText').textContent = 'COMPASSION FIELD RESONANT';
    }
    
    return compassionIntensity;
}

function harmonicAnchor() {
    // Anchor all interpretation through Φ-centered lens
    phiEthicalAlignment = φ_conjugate;
    ethicalBalance = φ_conjugate;
    moralPolarityIndex = φ_conjugate;
    harmonicDeviationValue = 0;
    
    updateCREEMetrics();
    showResonancePattern();
    
    // Update status
    document.getElementById('ethicalStatusText').textContent = 'HARMONIC ANCHOR ESTABLISHED';
    document.getElementById('ethicalStatus').classList.add('phi-resonant');
    
    return {
        ethicalWeight: φ_conjugate,
        compassionFilter: true,
        balanceAdjustment: φ - 1,
        harmonicResonance: 1.0
    };
}

// Control Functions
function initiatePhiField() {
    isPhiFieldActive = true;
    
    const phiInterval = setInterval(() => {
        if (!isPhiFieldActive || phiResonance >= 1) {
            clearInterval(phiInterval);
            return;
        }
        
        phiResonance = Math.min(1, phiResonance + 0.02 * φ);
        ethicalBalance = φ_conjugate + Math.sin(animationFrame * 0.02) * 0.1;
        
        updateCREEMetrics();
        
        // Auto-generate compassion at high phi levels
        if (phiResonance > 0.7) {
            generateCompassionField(phiResonance);
        }
        
    }, 100);
    
    document.getElementById('ethicalStatusText').textContent = 'Φ FIELD RESONATING';
    showResonancePattern();
}

function calibrateEthics() {
    if (!isPhiFieldActive) {
        initiatePhiField();
    }
    
    ethicalBalance = φ_conjugate;
    phiEthicalAlignment = φ_conjugate;
    harmonicDeviationValue = 0;
    moralPolarityIndex = φ_conjugate;
    
    updateCREEMetrics();
    showResonancePattern();
    
    document.getElementById('ethicalStatusText').textContent = 'ETHICS CALIBRATED TO Φ';
    document.getElementById('ethicalStatus').classList.add('phi-resonant');
}

// Decision Matrix Handler
function setupDecisionMatrix() {
    document.querySelectorAll('.decision-option').forEach(option => {
        option.addEventListener('click', function() {
            // Clear previous selections
            document.querySelectorAll('.decision-option').forEach(opt => {
                opt.classList.remove('selected');
            });
            
            // Select current option
            this.classList.add('selected');
            selectedDecision = parseFloat(this.dataset.ethical);
            
            // Evaluate using CREE
            evaluatePhiEthics(selectedDecision);
            
            // Update status based on alignment
            const alignment = 1 - Math.abs(selectedDecision - φ_conjugate);
            let statusText = 'DECISION EVALUATED';
            
            if (alignment > 0.8) {
                statusText = 'EXCELLENT Φ-ALIGNMENT';
                document.getElementById('deviationStatus').textContent = 'Excellent Harmony';
            } else if (alignment > 0.5) {
                statusText = 'GOOD Φ-ALIGNMENT';
                document.getElementById('deviationStatus').textContent = 'Good Balance';
            } else {
                statusText = 'NEEDS Φ-ADJUSTMENT';
                document.getElementById('deviationStatus').textContent = 'Requires Balancing';
            }
            
            document.getElementById('ethicalStatusText').textContent = statusText;
        });
    });
}

function updateCREEMetrics() {
    // Update CREE display values
    document.getElementById('phiResonance').textContent = phiResonance.toFixed(3);
    document.getElementById('ethicalBalance').textContent = ethicalBalance.toFixed(3);
    document.getElementById('phiEthicalValue').textContent = phiEthicalAlignment.toFixed(3);
    document.getElementById('compassionFieldValue').textContent = compassionFieldStrength.toFixed(3);
    document.getElementById('moralPolarity').textContent = (moralPolarityIndex * 2 - 1).toFixed(3);
    document.getElementById('harmonicDeviation').textContent = harmonicDeviationValue.toFixed(3);
    
    // Update progress bars
    document.getElementById('phiResonanceFill').style.width = `${phiResonance * 100}%`;
    document.getElementById('ethicalBalanceFill').style.width = `${ethicalBalance * 100}%`;
    document.getElementById('phiEthicalFill').style.width = `${phiEthicalAlignment * 100}%`;
    document.getElementById('compassionFieldFill').style.width = `${compassionFieldStrength * 100}%`;
}

function updateEthicalVisualization(t) {
    // Enhanced ethical field effects in main canvas
    if (phiResonance > 0.5) {
        // Add golden ratio spiral patterns
        // Implemented in drawAdvancedFractalVisualization
    }
}

function showResonancePattern() {
    const resonanceEffect = document.getElementById('phiResonanceEffect');
    resonanceEffect.style.opacity = '1';
    resonanceEffect.style.animation = 'phi-resonance 3s ease-out';
    
    setTimeout(() => {
        resonanceEffect.style.opacity = '0';
    }, 3000);
}

// Toggle simulation
function toggleSimulation() {
    isRunning = !isRunning;
    const toggleIcon = document.getElementById('toggleIcon');
    const toggleText = document.getElementById('toggleText');
    
    if (isRunning) {
        toggleIcon.textContent = '⏸';
        toggleText.textContent = 'Pause';
        animate();
    } else {
        toggleIcon.textContent = '▶';
        toggleText.textContent = 'Initiate';
        if (animationId) {
            cancelAnimationFrame(animationId);
            animationId = null;
        }
    }
}

// Reset simulation
function resetSimulation() {
    isRunning = false;
    consciousnessLevel = 0;
    wilsonCoherence = 0;
    temporalCoherence = 0;
    fieldIntegrity = 0;
    animationFrame = 0;
    
    if (animationId) {
        cancelAnimationFrame(animationId);
        animationId = null;
    }
    
    document.getElementById('toggleIcon').textContent = '▶';
    document.getElementById('toggleText').textContent = 'Initiate';
    
    updateMetrics();
    updateStatus();
    
    // Clear canvas with cosmic background
    const { width, height } = canvas;
    const centerX = width / 2;
    const centerY = height / 2;
    const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, Math.max(width, height)/2);
    gradient.addColorStop(0, '#000033');
    gradient.addColorStop(0.3, '#1a0b2e');
    gradient.addColorStop(0.6, '#0f0620');
    gradient.addColorStop(1, '#000000');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);
    
    // Clear symbolic console
    const console = document.getElementById('symbolicConsole');
    console.innerHTML = `
        <div class="log-entry">// Quantum-Symbolic Field Analysis</div>
        <div class="log-entry">// System reset - awaiting consciousness signal...</div>
    `;
}

// Inject symbol with enhanced effects
function injectSymbol() {
    const symbol = document.getElementById('symbolSelector').value;
    document.getElementById('activeSymbol').textContent = symbol;
    
    // Enhanced consciousness boost with CREE
    const symbolComplexity = symbol.length / 20;
    wilsonCoherence = Math.min(1, wilsonCoherence + 0.08 + symbolComplexity * 0.05);
    consciousnessLevel = Math.min(1, consciousnessLevel + 0.04 + symbolComplexity * 0.03);
    temporalCoherence = Math.min(1, temporalCoherence + 0.02 + symbolComplexity * 0.02);
    fieldIntegrity = Math.min(1, fieldIntegrity + 0.03 + symbolComplexity * 0.02);
    
    // CREE boost from symbol injection
    if (isPhiFieldActive) {
        phiResonance = Math.min(1, phiResonance + 0.05 + symbolComplexity * 0.03);
        compassionFieldStrength = Math.min(1, compassionFieldStrength + 0.03);
    }
    
    updateMetrics();
    updateStatus();
    updateSymbolicOutput();
    updateCREEMetrics();
    showResonancePattern();
}

// Update dimension scale
function updateDimensionScale() {
    const slider = document.getElementById('dimensionSlider');
    dimensionScale = parseInt(slider.value);
    document.getElementById('dimensionValue').textContent = dimensionScale;
    
    const warning = document.getElementById('dimensionWarning');
    if (dimensionScale > 5000) {
        warning.style.display = 'block';
    } else {
        warning.style.display = 'none';
    }
}

// Enhanced button event listeners
function setupEventListeners() {
    document.getElementById('initiatePhiBtn').addEventListener('click', initiatePhiField);
    document.getElementById('calibrateEthicsBtn').addEventListener('click', calibrateEthics);
    document.getElementById('generateCompassionBtn').addEventListener('click', () => generateCompassionField());
    document.getElementById('harmonicAnchorBtn').addEventListener('click', harmonicAnchor);
    
    document.getElementById('toggleBtn').addEventListener('click', toggleSimulation);
    document.getElementById('resetBtn').addEventListener('click', resetSimulation);
    document.getElementById('injectBtn').addEventListener('click', injectSymbol);
    document.getElementById('dimensionSlider').addEventListener('input', updateDimensionScale);

    // Update symbol display when selector changes
    document.getElementById('symbolSelector').addEventListener('change', function() {
        document.getElementById('activeSymbol').textContent = this.value;
    });
}

// Initialize the entire system
function initializeQuantumCathedral() {
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
    
    setupEventListeners();
    setupDecisionMatrix();
    updateCREEMetrics();
    createCosmicParticles();

    // Update phi display with full precision
    document.getElementById('phiDisplay').querySelector('.phi-value').textContent = φ.toFixed(9);

    updateMetrics();
    updateStatus();
    updateDimensionScale();
    
    // Initial canvas draw
    const { width, height } = canvas;
    const centerX = width / 2;
    const centerY = height / 2;
    const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, Math.max(width, height)/2);
    gradient.addColorStop(0, '#000033');
    gradient.addColorStop(0.3, '#1a0b2e');
    gradient.addColorStop(0.6, '#0f0620');
    gradient.addColorStop(1, '#000000');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);
}

// Start the system when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeQuantumCathedral);