<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🦴 ONYXBONE: The Recursive Naming System</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(135deg, #f5f1e8 0%, #e8dcc6 25%, #d4c4a8 50%, #c9b896 75%, #bfa882 100%);
            background-attachment: fixed;
            color: #2a1810;
            font-family: 'Courier New', monospace;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        /* Bone texture overlay */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(circle at 20% 20%, rgba(255, 248, 235, 0.3) 1px, transparent 1px),
                radial-gradient(circle at 60% 70%, rgba(235, 220, 195, 0.2) 1px, transparent 1px),
                radial-gradient(circle at 80% 30%, rgba(245, 235, 215, 0.15) 1px, transparent 1px);
            background-size: 150px 150px, 200px 200px, 100px 100px;
            pointer-events: none;
            z-index: -1;
        }

        /* Ash particle animation */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(1px 1px at 20px 30px, rgba(180, 160, 120, 0.4), transparent),
                radial-gradient(1px 1px at 40px 70px, rgba(200, 180, 140, 0.3), transparent),
                radial-gradient(1px 1px at 90px 40px, rgba(160, 140, 100, 0.2), transparent),
                radial-gradient(1px 1px at 130px 80px, rgba(220, 200, 160, 0.3), transparent);
            background-repeat: repeat;
            background-size: 100px 100px;
            animation: drift 20s infinite linear;
            pointer-events: none;
            z-index: -1;
        }

        @keyframes drift {
            from { transform: translateY(0px); }
            to { transform: translateY(-100px); }
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(245, 240, 230, 0.6);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(180, 160, 120, 0.3);
            box-shadow: inset 0 0 20px rgba(200, 180, 140, 0.2);
        }

        .header h1 {
            font-size: 2.5em;
            color: #8b4513;
            text-shadow: 2px 2px 4px rgba(139, 69, 19, 0.3);
            margin-bottom: 10px;
            font-weight: bold;
        }

        .header p {
            color: #5d4037;
            font-style: italic;
        }

        .sync-status {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(245, 235, 215, 0.9);
            padding: 10px 15px;
            border-radius: 8px;
            border: 2px solid rgba(180, 160, 120, 0.5);
            font-size: 0.9em;
            z-index: 1000;
        }

        .sync-status.syncing {
            background: rgba(255, 245, 200, 0.9);
            border-color: #daa520;
        }

        .sync-status.error {
            background: rgba(255, 220, 220, 0.9);
            border-color: #dc143c;
        }

        .main-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .panel {
            background: rgba(250, 245, 235, 0.8);
            border-radius: 12px;
            padding: 20px;
            backdrop-filter: blur(15px);
            border: 1px solid rgba(180, 160, 120, 0.4);
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(160, 140, 100, 0.2);
        }

        .panel:hover {
            background: rgba(255, 250, 240, 0.9);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(160, 140, 100, 0.3);
        }

        .panel h3 {
            color: #8b4513;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: bold;
        }

        .bone-creation {
            margin-bottom: 20px;
        }

        .bone-creation input, .bone-creation select {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            background: rgba(245, 235, 215, 0.8);
            border: 2px solid rgba(180, 160, 120, 0.5);
            border-radius: 5px;
            color: #2a1810;
            font-family: inherit;
        }

        .bone-creation input:focus, .bone-creation select:focus {
            outline: none;
            border-color: #8b4513;
            background: rgba(255, 245, 225, 0.9);
        }

        .bone-creation button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(45deg, #d2691e, #cd853f);
            border: none;
            border-radius: 8px;
            color: #f5f5dc;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .bone-creation button:hover {
            background: linear-gradient(45deg, #cd853f, #daa520);
            transform: scale(1.02);
            box-shadow: 0 4px 10px rgba(210, 105, 30, 0.3);
        }

        .lattice-display {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .bone-card {
            background: rgba(240, 230, 210, 0.9);
            border-radius: 10px;
            padding: 15px;
            border: 2px solid rgba(180, 160, 120, 0.6);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(160, 140, 100, 0.2);
        }

        .bone-card.awakened {
            border-color: #d2691e;
            box-shadow: 0 0 15px rgba(210, 105, 30, 0.4);
            background: rgba(255, 248, 235, 0.95);
        }

        .bone-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #d2691e, transparent);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }

        .bone-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .bone-id {
            font-weight: bold;
            color: #8b4513;
        }

        .bone-type {
            background: rgba(210, 180, 140, 0.4);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            color: #5d4037;
            border: 1px solid rgba(180, 160, 120, 0.6);
        }

        .bone-stats {
            font-size: 0.9em;
            margin: 8px 0;
            color: #3e2723;
        }
        
        .debt-stats {
             font-size: 0.9em;
             margin: 8px 0;
             color: #3e2723;
        }

        .debt-bar {
            background: rgba(210, 105, 30, 0.2);
            height: 6px;
            border-radius: 3px;
            margin: 5px 0;
            overflow: hidden;
            border: 1px solid rgba(210, 105, 30, 0.3);
        }

        .debt-fill {
            height: 100%;
            background: linear-gradient(90deg, #dc143c, #ff6347);
            transition: width 0.3s ease;
        }

        .glyphs {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            margin: 8px 0;
        }

        .glyph {
            background: rgba(210, 105, 30, 0.2);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.8em;
            border: 1px solid #d2691e;
            color: #8b4513;
        }

        .connections {
            font-size: 0.8em;
            color: #5d4037;
            margin-top: 5px;
        }
        
        .naming-interface {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-top: 15px;
            position: relative;
        }
        
        .input-container {
            position: relative;
        }

        .naming-interface select {
            width: 100%;
            padding: 8px;
            background: rgba(245, 235, 215, 0.8);
            border: 2px solid rgba(180, 160, 120, 0.5);
            border-radius: 5px;
            color: #2a1810;
            font-family: inherit;
        }

        .naming-interface select:focus {
            outline: none;
            border-color: #8b4513;
            background: rgba(255, 245, 225, 0.9);
        }
        
        .naming-interface .smart-input,
        .naming-interface #speakerInput {
             width: 100%;
             padding: 12px;
             background: rgba(245, 235, 215, 0.8);
             border: 2px solid rgba(180, 160, 120, 0.5);
             border-radius: 8px;
             color: #2a1810;
             font-family: inherit;
             font-size: 1em;
             transition: all 0.3s ease;
             position: relative;
        }
        
        .naming-interface #speakerInput {
            padding: 8px; /* Slightly smaller padding for speaker */
        }

        .smart-input:focus,
        .naming-interface #speakerInput:focus {
            outline: none;
            border-color: #8b4513;
            background: rgba(255, 245, 225, 0.9);
            box-shadow: 0 0 10px rgba(139, 69, 19, 0.2);
        }

        .smart-input.awakening {
            border-color: #d2691e;
            box-shadow: 0 0 15px rgba(210, 105, 30, 0.4);
            background: rgba(255, 248, 235, 0.95);
        }

        .smart-input.transcendent {
            border-color: #b8860b;
            box-shadow: 0 0 20px rgba(184, 134, 11, 0.6);
            background: linear-gradient(135deg, rgba(255, 248, 235, 0.95), rgba(255, 245, 200, 0.95));
            animation: transcendentPulse 2s infinite;
        }

        @keyframes transcendentPulse {
            0%, 100% { box-shadow: 0 0 20px rgba(184, 134, 11, 0.6); }
            50% { box-shadow: 0 0 30px rgba(184, 134, 11, 0.8); }
        }

        .score-indicator {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(210, 105, 30, 0.9);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: bold;
            min-width: 30px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .score-indicator.awakening {
            background: linear-gradient(45deg, #d2691e, #ff6347);
            animation: awakeningGlow 1.5s infinite;
        }

        .score-indicator.transcendent {
            background: linear-gradient(45deg, #b8860b, #ffd700);
            animation: transcendentGlow 1s infinite;
        }

        @keyframes awakeningGlow {
            0%, 100% { transform: translateY(-50%) scale(1); }
            50% { transform: translateY(-50%) scale(1.1); }
        }

        @keyframes transcendentGlow {
            0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 10px rgba(255, 215, 0, 0.7); }
            50% { transform: translateY(-50%) scale(1.15); box-shadow: 0 0 20px rgba(255, 215, 0, 0.9); }
        }

        .power-word-hint {
            position: absolute;
            top: -35px;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, rgba(184, 134, 11, 0.95), rgba(218, 165, 32, 0.95));
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 0.85em;
            font-weight: bold;
            text-align: center;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            pointer-events: none;
            z-index: 100;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .power-word-hint.show {
            opacity: 1;
            transform: translateY(0);
        }

        .execute-btn {
            padding: 12px;
            background: linear-gradient(45deg, #b8860b, #daa520);
            border: none;
            border-radius: 8px;
            color: #f5f5dc;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
            font-size: 1.1em;
        }

        .execute-btn:hover {
            background: linear-gradient(45deg, #daa520, #ffd700);
            transform: scale(1.02);
            box-shadow: 0 6px 15px rgba(218, 165, 32, 0.4);
        }

        .execute-btn:disabled {
            background: rgba(180, 160, 120, 0.5);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .awakening-particles {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #ffd700;
            border-radius: 50%;
            animation: float 3s infinite;
            opacity: 0;
        }

        @keyframes float {
            0% { opacity: 0; transform: translateY(100%) scale(0); }
            20% { opacity: 1; transform: translateY(80%) scale(1); }
            80% { opacity: 1; transform: translateY(20%) scale(1); }
            100% { opacity: 0; transform: translateY(0%) scale(0); }
        }


        .event-log {
            height: 300px;
            overflow-y: auto;
            background: rgba(245, 235, 215, 0.9);
            padding: 15px;
            border-radius: 8px;
            font-size: 0.9em;
            line-height: 1.4;
            border: 2px solid rgba(180, 160, 120, 0.4);
            color: #2a1810;
        }

        .event-log::-webkit-scrollbar {
            width: 8px;
        }

        .event-log::-webkit-scrollbar-track {
            background: rgba(210, 180, 140, 0.3);
            border-radius: 4px;
        }

        .event-log::-webkit-scrollbar-thumb {
            background: #d2691e;
            border-radius: 4px;
        }

        .network-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .stat-card {
            background: rgba(245, 235, 215, 0.9);
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border: 2px solid rgba(180, 160, 120, 0.4);
            box-shadow: 0 2px 8px rgba(160, 140, 100, 0.2);
        }

        .stat-value {
            font-size: 1.5em;
            font-weight: bold;
            color: #8b4513;
            display: block;
        }

        .stat-label {
            font-size: 0.8em;
            color: #5d4037;
            margin-top: 5px;
        }

        .resonance-visual {
            height: 60px;
            background: rgba(210, 180, 140, 0.3);
            border-radius: 5px;
            margin: 10px 0;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(180, 160, 120, 0.5);
        }

        .resonance-wave {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, rgba(210, 105, 30, 0.3), #d2691e);
            transition: height 0.5s ease;
            opacity: 0.7;
        }

        .tag-circles {
            margin-top: 15px;
        }

        .circle {
            background: rgba(245, 235, 215, 0.8);
            padding: 10px;
            border-radius: 6px;
            margin: 5px 0;
            border-left: 4px solid #d2691e;
            border: 1px solid rgba(180, 160, 120, 0.4);
            color: #2a1810;
        }

        .tag-circle-btn {
            margin-top: 10px;
            padding: 8px 16px;
            background: linear-gradient(45deg, #b8860b, #daa520);
            border: 2px solid rgba(180, 160, 120, 0.5);
            border-radius: 5px;
            color: #f5f5dc;
            cursor: pointer;
            font-family: inherit;
            font-weight: bold;
            transition: all 0.3s ease;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .tag-circle-btn:hover {
            background: linear-gradient(45deg, #daa520, #ffd700);
            transform: scale(1.02);
            box-shadow: 0 4px 10px rgba(218, 165, 32, 0.3);
        }

        .loading {
            opacity: 0.6;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="sync-status" id="syncStatus">🔄 Connecting to lattice...</div>

    <div class="container">
        <div class="header">
            <h1>🦴 ONYXBONE</h1>
            <p>※ The more you name, the more you repeat. The more you repeat, the more you remember. ※</p>
        </div>

        <div class="main-grid">
            <div class="panel">
                <h3>🏗️ Bone Creation</h3>
                <div class="bone-creation">
                    <select id="boneType">
                        <option value="femur">Femur</option>
                        <option value="clavicle">Clavicle</option>
                        <option value="sacrum">Sacrum</option>
                        <option value="tibia">Tibia</option>
                        <option value="skull">Skull</option>
                        <option value="spine">Spine</option>
                    </select>
                    <input type="text" id="boneId" placeholder="Bone ID (e.g., 44102)" />
                    <button onclick="createBone()">Materialize Bone</button>
                </div>

                <h3>🎯 Naming Cycle</h3>
                <div class="naming-interface">
                    <select id="targetBone">
                        <option value="">Select Bone...</option>
                    </select>
                    
                    <div class="input-container">
                        <input type="text" id="namingInput" class="smart-input" placeholder="Speak the name..." />
                        <div class="score-indicator" id="nameScore">0</div>
                        <div class="power-word-hint" id="nameHint"></div>
                        <div class="awakening-particles" id="nameParticles"></div>
                    </div>
                    
                    <div class="input-container">
                        <input type="text" id="justificationInput" class="smart-input" placeholder="Provide justification..." />
                        <div class="score-indicator" id="justificationScore">0</div>
                        <div class="power-word-hint" id="justificationHint"></div>
                        <div class="awakening-particles" id="justificationParticles"></div>
                    </div>
                    
                    <input type="text" id="speakerInput" placeholder="Speaker name" value="The Seeker" />
                    
                    <button class="execute-btn" onclick="executeNamingCycle()" id="executeBtn" disabled>Execute Cycle</button>
                </div>
            </div>

            <div class="panel">
                <h3>📡 Network Status</h3>
                <div class="network-stats" id="networkStats"></div>
                <div class="resonance-visual">
                    <div class="resonance-wave" id="resonanceWave"></div>
                </div>
            </div>
        </div>

        <div class="main-grid">
            <div class="panel">
                <h3>🦴 Bone Lattice</h3>
                <div class="lattice-display" id="latticeDisplay"></div>
            </div>

            <div class="panel">
                <h3>📜 Event Log</h3>
                <div class="event-log" id="eventLog"></div>
            </div>
        </div>

        <div class="panel">
            <h3>🔄 Tag Circles</h3>
            <div class="tag-circles" id="tagCircles"></div>
            <button onclick="createTagCircle()" class="tag-circle-btn">Create Tag Circle</button>
        </div>
    </div>

    <script>
        // Configuration - Update this to your actual server path
        const API_BASE_URL = 'https://kelbv.com/onyxbone/rns/api';

        // Global state
        let latticeData = {
            bones: [],
            tagCircles: [],
            events: [],
            glyphs: [],
            networkStats: {},
            globalResonance: 0
        };

        // Direct API Client for individual endpoints
        class ONYXBONEDirectAPI {
            constructor(baseUrl) {
                this.baseUrl = baseUrl;
            }

            async request(endpoint, options = {}) {
                const url = `${this.baseUrl}/${endpoint}`;
                const config = {
                    headers: {
                        'Content-Type': 'application/json',
                        ...options.headers
                    },
                    ...options
                };

                try {
                    const response = await fetch(url, config);
                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.error || `HTTP ${response.status}`);
                    }

                    return data;
                } catch (error) {
                    console.error('API Request failed:', error);
                    throw error;
                }
            }

            // Test connection
            async test() {
                return this.request('test.php');
            }

            // Bone operations
            async createBone(boneKey, boneType, boneId) {
                return this.request('bones.php', {
                    method: 'POST',
                    body: JSON.stringify({
                        bone_key: boneKey,
                        bone_type: boneType,
                        bone_id: boneId
                    })
                });
            }

            async getBones() {
                return this.request('bones.php');
            }

            async updateBone(boneKey, data) {
                // Use POST with method override for better shared hosting compatibility
                const updateData = {
                    _method: 'PUT',
                    bone_key: boneKey,
                    ...data
                };

                return this.request(`bones.php?bone_key=${encodeURIComponent(boneKey)}`, {
                    method: 'POST',
                    body: JSON.stringify(updateData)
                });
            }

            // Tag Circle operations
            async createTagCircle(circleId, participants, purpose, sharedDebt = 0) {
                return this.request('tag-circles.php', {
                    method: 'POST',
                    body: JSON.stringify({
                        circle_id: circleId,
                        participants: participants,
                        purpose: purpose,
                        shared_debt: sharedDebt
                    })
                });
            }

            async getTagCircles() {
                return this.request('tag-circles.php');
            }

            // Event operations
            async logEvent(message, eventType = 'general') {
                return this.request('events.php', {
                    method: 'POST',
                    body: JSON.stringify({
                        message: message,
                        event_type: eventType
                    })
                });
            }

            async getEvents(limit = 50) {
                return this.request(`events.php?limit=${limit}`);
            }

            // Glyph operations
            async registerGlyph(glyphId, boneKey, glyphData) {
                return this.request('glyphs.php', {
                    method: 'POST',
                    body: JSON.stringify({
                        glyph_id: glyphId,
                        bone_key: boneKey,
                        glyph_data: glyphData
                    })
                });
            }

            async getGlyphs() {
                return this.request('glyphs.php');
            }

            // Network operations
            async getNetworkStats() {
                return this.request('network.php?action=stats');
            }

            async updateGlobalResonance(resonance) {
                return this.request('network.php?action=resonance', {
                    method: 'PUT',
                    body: JSON.stringify({
                        global_resonance: resonance
                    })
                });
            }

            // Sync operation
            async syncAll() {
                return this.request('sync.php');
            }
        }

        // Initialize API client
        const apiClient = new ONYXBONEDirectAPI(API_BASE_URL);

        // Power words and their effects for the scoring system
        const powerWords = {
            naming: {
                transcendent: ['bearer', 'anchor', 'vessel', 'herald', 'keeper', 'guardian', 'weaver', 'nexus'],
                awakening: ['bridge', 'axis', 'channel', 'conduit', 'heart', 'soul', 'spirit', 'essence'],
                resonant: ['truth', 'memory', 'desire', 'burden', 'light', 'shadow', 'echo', 'whisper']
            },
            justification: {
                transcendent: ['continuity', 'eternity', 'infinity', 'transcendence', 'awakening', 'enlightenment'],
                awakening: ['burden', 'truth', 'forgiveness', 'remembrance', 'connection', 'understanding'],
                resonant: ['carries', 'holds', 'binds', 'connects', 'flows', 'resonates', 'echoes', 'speaks']
            }
        };

        // ONYXBONE System with server persistence
        class ONYXBONESystem {
            constructor() {
                this.lattice = new Map();
                this.glyphRegistry = new Map();
                this.tagCircles = [];
                this.globalResonance = 0;
                this.eventLog = [];
                this.lastSync = null;
            }

            async testConnection() {
                try {
                    const response = await apiClient.test();
                    this.log(`✨ Connected to ONYXBONE API: ${response.message}`);
                    return true;
                } catch (error) {
                    this.log(`❌ API connection failed: ${error.message}`);
                    return false;
                }
            }

            async createBone(type, id) {
                const boneKey = `${type}_${id}`;
                try {
                    await apiClient.createBone(boneKey, type, id);
                    await this.syncFromServer();
                    this.log(`🦴 Bone materialized: ${boneKey}`);
                    return true;
                } catch (error) {
                    this.log(`❌ Failed to create bone: ${error.message}`);
                    return false;
                }
            }

            async executeNamingCycle(boneKey, name, justification, speaker = 'Practitioner') {
                try {
                    this.log(`🦴 === BEGINNING NAMING CYCLE ===`);
                    
                    const boneResponse = await apiClient.getBones();
                    const bone = boneResponse.data.find(b => b.bone_key === boneKey);
                    
                    if (!bone) {
                        throw new Error(`Bone ${boneKey} not found`);
                    }

                    // Calculate scores using the new advanced system
                    const nameAnalysis = this.calculateScore(name, 'naming');
                    const justificationAnalysis = this.calculateScore(justification, 'justification');
                    
                    const newSyllabicDebt = parseFloat(bone.syllabic_debt) + (nameAnalysis.syllables * 1.5);
                    const justificationWeight = justificationAnalysis.score;
                    const finalDebt = Math.max(0, newSyllabicDebt - justificationWeight);

                    const newNames = [...bone.names, {
                        designation: name,
                        speaker: speaker,
                        timestamp: Date.now(),
                        syllables: nameAnalysis.syllables
                    }];

                    const newJustifications = [...bone.justifications, {
                        text: justification,
                        weight: justificationWeight,
                        speaker: speaker,
                        timestamp: Date.now()
                    }];

                    let newGlyphs = [...bone.glyphs];
                    let isAwakened = bone.is_awakened;
                    let resonanceLevel = parseFloat(bone.resonance_level);

                    if (this.isHarmonicallyAligned(finalDebt, newJustifications.length, newNames.length)) {
                        const glyph = this.generateGlyph({ designation: name }, { text: justification });
                        newGlyphs.push(glyph);
                        
                        await apiClient.registerGlyph(glyph.id, boneKey, glyph);
                        this.log(`⚡ GLYPH EMERGENCE: ${glyph.symbol} "${glyph.essence}"`);

                        if (!isAwakened) {
                            isAwakened = true;
                            resonanceLevel = this.calculateResonance(newNames.length, newJustifications.length, newGlyphs.length, 0);
                            this.log(`✨ INTERFACE AWAKENED: ${boneKey}`);
                            triggerAwakeningEffect();
                        }
                    }

                    const updateData = {
                        names: newNames,
                        justifications: newJustifications,
                        glyphs: newGlyphs,
                        syllabic_debt: finalDebt,
                        resonance_level: resonanceLevel,
                        is_awakened: isAwakened
                    };

                    await apiClient.updateBone(boneKey, updateData);

                    if (isAwakened) {
                        this.globalResonance += resonanceLevel * 0.1;
                        await apiClient.updateGlobalResonance(this.globalResonance);
                    }

                    await apiClient.logEvent(`💀 NAMING: "${name}" spoken for ${boneKey} by ${speaker}`, 'naming');
                    await apiClient.logEvent(`🔮 JUSTIFICATION: "${justification}"`, 'justification');
                    await apiClient.logEvent(`📉 Debt reduced to ${finalDebt.toFixed(1)}`, 'debt_change');

                    this.log(`🔁 === CYCLE COMPLETE ===`);
                    await this.syncFromServer();
                    return true;
                } catch (error) {
                    this.log(`❌ Cycle failed: ${error.message}`);
                    return false;
                }
            }

            async createTagCircle() {
                try {
                    const boneResponse = await apiClient.getBones();
                    const awakenedBones = boneResponse.data.filter(bone => bone.is_awakened);
                    if (awakenedBones.length < 2) {
                        alert('Need at least 2 awakened bones for a tag circle');
                        return false;
                    }
                    const circleId = `circle_${Date.now()}`;
                    const participants = awakenedBones.slice(0, 3).map(bone => bone.bone_key);
                    const purpose = 'Circle of Shared Truth';
                    await apiClient.createTagCircle(circleId, participants, purpose, 0);
                    await this.syncFromServer();
                    this.log(`🔄 TAG CIRCLE formed: "${purpose}" with ${participants.length} participants`);
                    return true;
                } catch (error) {
                    this.log(`❌ Failed to create tag circle: ${error.message}`);
                    return false;
                }
            }

            async syncFromServer() {
                try {
                    updateSyncStatus('syncing', '🔄 Syncing with lattice...');
                    const response = await apiClient.syncAll();
                    const data = response.data;
                    
                    latticeData.bones = data.bones || [];
                    latticeData.tagCircles = data.tag_circles || [];
                    latticeData.events = data.events || [];
                    latticeData.glyphs = data.glyphs || [];
                    latticeData.networkStats = data.network_stats || {};
                    
                    this.globalResonance = parseFloat(latticeData.networkStats.global_resonance) || 0;
                    this.lastSync = new Date();
                    updateSyncStatus('connected', `✨ Synced at ${this.lastSync.toLocaleTimeString()}`);
                    return true;
                } catch (error) {
                    updateSyncStatus('error', `❌ Sync failed: ${error.message}`);
                    console.error('Sync failed:', error);
                    return false;
                }
            }

            // Scoring system
            calculateScore(text, type) {
                const words = text.toLowerCase().split(/\s+/);
                let score = words.length * 5; // Base score
                let powerLevel = 'basic';
                let foundPowerWords = [];
    
                words.forEach(word => {
                    if (powerWords[type].transcendent.includes(word)) {
                        score += 25;
                        powerLevel = 'transcendent';
                        foundPowerWords.push({ word, level: 'transcendent' });
                    } else if (powerWords[type].awakening.includes(word)) {
                        score += 15;
                        if (powerLevel !== 'transcendent') powerLevel = 'awakening';
                        foundPowerWords.push({ word, level: 'awakening' });
                    } else if (powerWords[type].resonant.includes(word)) {
                        score += 8;
                        if (powerLevel === 'basic') powerLevel = 'resonant';
                        foundPowerWords.push({ word, level: 'resonant' });
                    }
                });
    
                const metaphorPatterns = /\b(like|as|is the|becomes|transforms|embodies)\b/i;
                if (metaphorPatterns.test(text)) {
                    score += 10;
                }
    
                const syllables = this.countSyllables(text);
                score += Math.floor(syllables / 3) * 2;
    
                return { score, powerLevel, foundPowerWords, syllables };
            }

            countSyllables(text) {
                return text.toLowerCase().match(/[aeiouy]+/g)?.length || 1;
            }
            
            isHarmonicallyAligned(syllabicDebt, justificationCount, nameCount) {
                // Using the more lenient condition from trash_index for better UX with the new scoring
                return syllabicDebt < 5 && justificationCount > 0 && nameCount > 0;
            }

            generateGlyph(nameObj, justificationObj) {
                const symbols = ['⚡', '🌀', '🔺', '◈', '⬢', '⚮', '♦', '◉', '⟐', '◈'];
                const essences = ['Bearer of Continuity', 'Axis of Desire', 'Helix of Burden', 'Bridge of Truth', 'Anchor of Memory'];
                return {
                    id: `glyph_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
                    symbol: symbols[Math.floor(Math.random() * symbols.length)],
                    essence: essences[Math.floor(Math.random() * essences.length)],
                    sourceNaming: nameObj.designation,
                    sourceJustification: justificationObj.text,
                    resonanceFreq: Math.random() * 100,
                    emerged: Date.now()
                };
            }

            calculateResonance(nameCount, justificationCount, glyphCount, connectionCount) {
                return nameCount * 10 + justificationCount * 15 + glyphCount * 25 + connectionCount * 5;
            }

            log(message) {
                const timestamp = new Date().toISOString().split('T')[1].substr(0, 8);
                const logEntry = `[${timestamp}] ${message}`;
                console.log(logEntry);
                updateEventLogUI();
            }
        }

        // Initialize system
        const onyxbone = new ONYXBONESystem();

        // --- UI Functions ---
        
        function updateSyncStatus(status, message) {
            const syncStatus = document.getElementById('syncStatus');
            syncStatus.textContent = message;
            syncStatus.className = `sync-status ${status}`;
        }

        async function createBone() {
            const type = document.getElementById('boneType').value;
            const id = document.getElementById('boneId').value;
            if (!id) {
                alert('Please enter a bone ID');
                return;
            }
            const success = await onyxbone.createBone(type, id);
            if (success) {
                document.getElementById('boneId').value = '';
                updateUI();
            }
        }

        async function executeNamingCycle() {
            const boneKey = document.getElementById('targetBone').value;
            const name = document.getElementById('namingInput').value;
            const justification = document.getElementById('justificationInput').value;
            const speaker = document.getElementById('speakerInput').value;
            if (!boneKey || !name || !justification) {
                alert('Please fill in all fields');
                return;
            }
            const success = await onyxbone.executeNamingCycle(boneKey, name, justification, speaker);
            if (success) {
                resetInput(document.getElementById('namingInput'), document.getElementById('nameScore'), document.getElementById('nameHint'), document.getElementById('nameParticles'));
                resetInput(document.getElementById('justificationInput'), document.getElementById('justificationScore'), document.getElementById('justificationHint'), document.getElementById('justificationParticles'));
                updateUI();
            }
        }

        async function createTagCircle() {
            const success = await onyxbone.createTagCircle();
            if (success) {
                updateUI();
            }
        }

        function updateUI() {
            updateLatticeDisplay();
            updateNetworkStats();
            updateTargetBoneDropdown();
            updateTagCircles();
            updateEventLogUI();
        }

        function updateUINoForms() {
            updateLatticeDisplay();
            updateNetworkStats();
            updateTagCircles();
            updateEventLogUI();
        }

        function updateLatticeDisplay() {
            const display = document.getElementById('latticeDisplay');
            display.innerHTML = '';
            latticeData.bones.forEach(bone => {
                const card = document.createElement('div');
                card.className = `bone-card ${bone.is_awakened ? 'awakened' : ''}`;
                const debtPercentage = Math.min((parseFloat(bone.syllabic_debt) / 20) * 100, 100);
                card.innerHTML = `
                    <div class="bone-header">
                        <div class="bone-id">${bone.bone_key}</div>
                        <div class="bone-type">${bone.bone_type}</div>
                    </div>
                    <div class="bone-stats">
                        Names: ${bone.names.length} | Justifications: ${bone.justifications.length}
                    </div>
                    <div class="debt-bar">
                        <div class="debt-fill" style="width: ${debtPercentage}%"></div>
                    </div>
                    <div class="debt-stats">
                        Debt: ${parseFloat(bone.syllabic_debt).toFixed(1)} | Resonance: ${parseFloat(bone.resonance_level).toFixed(1)}
                    </div>
                    <div class="glyphs">
                        ${bone.glyphs.map(g => `<span class="glyph" title="${g.essence}">${g.symbol}</span>`).join('')}
                    </div>
                    <div class="connections">
                        ${bone.connections && bone.connections.length > 0 ?
                          `Connected to: ${bone.connections.slice(0, 2).join(', ')}${bone.connections.length > 2 ? '...' : ''}` :
                          'No connections'}
                    </div>
                `;
                display.appendChild(card);
            });
        }

        function updateNetworkStats() {
            const stats = latticeData.networkStats;
            const container = document.getElementById('networkStats');
            container.innerHTML = `
                <div class="stat-card">
                    <span class="stat-value">${stats.total_bones || 0}</span>
                    <div class="stat-label">Total Bones</div>
                </div>
                <div class="stat-card">
                    <span class="stat-value">${stats.awakened_bones || 0}</span>
                    <div class="stat-label">Awakened</div>
                </div>
                <div class="stat-card">
                    <span class="stat-value">${stats.total_glyphs || 0}</span>
                    <div class="stat-label">Glyphs</div>
                </div>
                <div class="stat-card">
                    <span class="stat-value">${parseFloat(stats.global_resonance || 0).toFixed(2)}</span>
                    <div class="stat-label">Resonance</div>
                </div>
                <div class="stat-card">
                    <span class="stat-value">${parseFloat(stats.total_syllabic_debt || 0).toFixed(1)}</span>
                    <div class="stat-label">Total Debt</div>
                </div>
                <div class="stat-card">
                    <span class="stat-value">${stats.active_tag_circles || 0}</span>
                    <div class="stat-label">Tag Circles</div>
                </div>
            `;
            const wave = document.getElementById('resonanceWave');
            const resonanceHeight = Math.min((parseFloat(stats.global_resonance || 0) / 100) * 100, 100);
            wave.style.height = `${resonanceHeight}%`;
        }

        function updateTargetBoneDropdown() {
            const dropdown = document.getElementById('targetBone');
            const currentSelection = dropdown.value;
            dropdown.innerHTML = '<option value="">Select Bone...</option>';
            latticeData.bones.forEach(bone => {
                const option = document.createElement('option');
                option.value = bone.bone_key;
                option.textContent = `${bone.bone_key} ${bone.is_awakened ? '✨' : ''}`;
                dropdown.appendChild(option);
            });
            if (currentSelection && latticeData.bones.some(bone => bone.bone_key === currentSelection)) {
                dropdown.value = currentSelection;
            }
        }

        function updateEventLogUI() {
            const log = document.getElementById('eventLog');
            const events = latticeData.events || [];
            log.innerHTML = events.map(event => {
                let color = '#2a1810';
                const message = event.message || '';
                if (message.includes('NAMING:')) color = '#8b4513';
                else if (message.includes('JUSTIFICATION:')) color = '#5d4037';
                else if (message.includes('GLYPH')) color = '#d2691e';
                else if (message.includes('AWAKENED')) color = '#cd853f';
                else if (message.includes('COLLAPSE')) color = '#dc143c';
                else if (message.includes('FORGIVENESS')) color = '#228b22';
                else if (message.includes('TAG CIRCLE')) color = '#b8860b';
                const timestamp = event.timestamp ? new Date(event.timestamp).toLocaleTimeString() : '';
                return `<div style="color: ${color}; margin-bottom: 3px;">[${timestamp}] ${message}</div>`;
            }).join('');
            log.scrollTop = log.scrollHeight;
        }

        function updateTagCircles() {
            const container = document.getElementById('tagCircles');
            if (!latticeData.tagCircles || latticeData.tagCircles.length === 0) {
                container.innerHTML = '<div style="color: #5d4037; font-style: italic;">No tag circles active</div>';
                return;
            }
            container.innerHTML = latticeData.tagCircles.map(circle => `
                <div class="circle">
                    <strong>${circle.purpose}</strong><br>
                    <small>Participants: ${circle.participants.join(', ')}</small><br>
                    <small>Shared Debt: ${parseFloat(circle.shared_debt).toFixed(1)}</small>
                </div>
            `).join('');
        }
        
        // --- Smart Input UI Functions ---
        
        function setupSmartInput(inputId, scoreId, hintId, particlesId, type) {
            const input = document.getElementById(inputId);
            const scoreEl = document.getElementById(scoreId);
            const hintEl = document.getElementById(hintId);
            const particlesEl = document.getElementById(particlesId);

            input.addEventListener('input', () => {
                const text = input.value;
                if (!text.trim()) {
                    resetInput(input, scoreEl, hintEl, particlesEl);
                    updateExecuteButton();
                    return;
                }

                const analysis = onyxbone.calculateScore(text, type);
                updateScore(scoreEl, analysis.score, analysis.powerLevel);
                updateInputVisuals(input, analysis.powerLevel);
                updateHint(hintEl, analysis.foundPowerWords, type);
                updateParticles(particlesEl, analysis.powerLevel);
                updateExecuteButton();
            });

            input.addEventListener('focus', () => {
                showRandomHint(hintEl, type);
            });

            input.addEventListener('blur', () => {
                hideHint(hintEl);
            });
            
            document.getElementById('targetBone').addEventListener('change', updateExecuteButton);
        }

        function resetInput(input, scoreEl, hintEl, particlesEl) {
            input.value = '';
            scoreEl.textContent = '0';
            scoreEl.className = 'score-indicator';
            input.className = 'smart-input';
            hideHint(hintEl);
            clearParticles(particlesEl);
            updateExecuteButton();
        }

        function updateScore(scoreEl, score, powerLevel) {
            scoreEl.textContent = score;
            scoreEl.className = `score-indicator ${powerLevel}`;
        }

        function updateInputVisuals(input, powerLevel) {
            input.className = `smart-input ${powerLevel}`;
        }

        function updateHint(hintEl, foundPowerWords, type) {
            if (foundPowerWords.length > 0) {
                const bestWord = foundPowerWords.reduce((best, current) => 
                    current.level === 'transcendent' ? current : best
                );
                showHint(hintEl, `✨ Power Word: "${bestWord.word}" (${bestWord.level})`);
            } else {
                const suggestion = getRandomPowerWord(type);
                showHint(hintEl, `💡 Try: "${suggestion}"`);
            }
        }
        
        function showHint(hintEl, text) {
            hintEl.textContent = text;
            hintEl.classList.add('show');
        }

        function hideHint(hintEl) {
            hintEl.classList.remove('show');
        }

        function showRandomHint(hintEl, type) {
             if (!document.getElementById('namingInput').value && !document.getElementById('justificationInput').value) {
                const suggestion = getRandomPowerWord(type);
                showHint(hintEl, `💡 Try power words like: "${suggestion}"`);
                setTimeout(() => hideHint(hintEl), 3000);
            }
        }

        function getRandomPowerWord(type) {
            const allWords = [
                ...powerWords[type].transcendent,
                ...powerWords[type].awakening,
                ...powerWords[type].resonant
            ];
            return allWords[Math.floor(Math.random() * allWords.length)];
        }

        function updateParticles(particlesEl, powerLevel) {
            clearParticles(particlesEl);
            if (powerLevel === 'awakening' || powerLevel === 'transcendent') {
                const particleCount = powerLevel === 'transcendent' ? 8 : 4;
                for (let i = 0; i < particleCount; i++) {
                    createParticle(particlesEl, i * 200);
                }
            }
        }

        function createParticle(container, delay) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.animationDelay = delay + 'ms';
            container.appendChild(particle);
            setTimeout(() => {
                if (particle.parentNode) particle.parentNode.removeChild(particle);
            }, 3000 + delay);
        }

        function clearParticles(particlesEl) {
            particlesEl.innerHTML = '';
        }

        function updateExecuteButton() {
            const nameInput = document.getElementById('namingInput');
            const justificationInput = document.getElementById('justificationInput');
            const targetBone = document.getElementById('targetBone');
            const executeBtn = document.getElementById('executeBtn');
            
            const nameAnalysis = onyxbone.calculateScore(nameInput.value, 'naming');
            const justificationAnalysis = onyxbone.calculateScore(justificationInput.value, 'justification');
            
            const hasRequiredFields = nameInput.value.trim() && justificationInput.value.trim() && targetBone.value;
            const hasGoodScores = nameAnalysis.score >= 20 && justificationAnalysis.score >= 30;
            
            if (hasRequiredFields && hasGoodScores) {
                executeBtn.disabled = false;
                executeBtn.textContent = '✨ Execute Transcendent Cycle';
                executeBtn.style.background = 'linear-gradient(45deg, #b8860b, #ffd700)';
            } else if (hasRequiredFields) {
                executeBtn.disabled = false;
                executeBtn.textContent = 'Execute Cycle';
                executeBtn.style.background = 'linear-gradient(45deg, #d2691e, #cd853f)';
            } else {
                executeBtn.disabled = true;
                executeBtn.textContent = 'Execute Cycle';
                executeBtn.style.background = 'rgba(180, 160, 120, 0.5)';
            }
        }

        function triggerAwakeningEffect() {
            const body = document.body;
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    const particle = document.createElement('div');
                    Object.assign(particle.style, {
                        position: 'fixed',
                        left: `${Math.random() * window.innerWidth}px`,
                        top: `${Math.random() * window.innerHeight}px`,
                        width: '8px',
                        height: '8px',
                        background: '#ffd700',
                        borderRadius: '50%',
                        pointerEvents: 'none',
                        zIndex: '9999',
                        animation: 'float 2s ease-out forwards'
                    });
                    body.appendChild(particle);
                    setTimeout(() => particle.parentNode?.removeChild(particle), 2000);
                }, i * 100);
            }
        }
        
        // --- Initialization and Event Listeners ---

        async function autoSync() {
            await onyxbone.syncFromServer();
            updateUINoForms();
        }

        document.addEventListener('DOMContentLoaded', async () => {
            setupSmartInput('namingInput', 'nameScore', 'nameHint', 'nameParticles', 'naming');
            setupSmartInput('justificationInput', 'justificationScore', 'justificationHint', 'justificationParticles', 'justification');
            
            const connected = await onyxbone.testConnection();
            if (connected) {
                await onyxbone.syncFromServer();
                updateUI();
                setInterval(autoSync, 10000);
                setInterval(updateUINoForms, 2000);
                
                let lastBoneCount = 0;
                setInterval(() => {
                    if (latticeData.bones.length !== lastBoneCount) {
                        updateTargetBoneDropdown();
                        lastBoneCount = latticeData.bones.length;
                    }
                }, 1000);
            } else {
                updateSyncStatus('error', '❌ Cannot connect to ONYXBONE API');
            }
        });

        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 'Enter') {
                if(!document.getElementById('executeBtn').disabled) {
                   executeNamingCycle();
                }
            }
        });

        window.addEventListener('online', () => {
            updateSyncStatus('connected', '✨ Connection restored');
            autoSync();
        });

        window.addEventListener('offline', () => {
            updateSyncStatus('error', '📡 Connection lost');
        });
    </script>
</body>
</html>