<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Infinite Craft Clone</title>
    <style>
        /* Basic Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Fonts and Colors */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #74ebd5 0%, #acb6e5 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        /* Container Layout */
        .container {
            display: flex;
            width: 90%;
            height: 80%;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        /* Sidebar Styling */
        .sidebar {
            width: 25%;
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-right: 2px solid #34495e;
            position: relative;
        }

        .sidebar h2 {
            margin-bottom: 20px;
            font-size: 24px;
            text-shadow: 1px 1px 2px #000;
        }

        .elements {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 15px;
            overflow-y: auto;
            flex-grow: 1;
        }

        .element {
            background: linear-gradient(45deg, #3498db, #2980b9);
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            cursor: grab;
            user-select: none;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s, box-shadow 0.2s;
            position: relative;
        }

        .element:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .element.dragging {
            opacity: 0.6;
            transform: scale(1.1);
        }

        /* Add Element Button */
        .add-element-btn {
            background-color: #e74c3c;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
            transition: background-color 0.3s;
        }

        .add-element-btn:hover {
            background-color: #c0392b;
        }

        /* Game Area Styling */
        .game-area {
            width: 75%;
            position: relative;
            background: url('https://i.imgur.com/2yaf2yn.jpg') center/cover no-repeat;
        }

        .game-area h2 {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 24px;
            text-shadow: 2px 2px 4px #000;
            z-index: 1;
        }

        .drop-zone {
            position: absolute;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 20px;
            border: 2px dashed rgba(255, 255, 255, 0.7);
            border-radius: 15px;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.2);
            transition: background-color 0.3s, border-color 0.3s;
        }

        .drop-zone.active {
            background-color: rgba(255, 255, 255, 0.4);
            border-color: #3498db;
        }

        .dropped-element {
            position: absolute;
            padding: 10px 15px;
            background-color: rgba(255, 255, 255, 0.9);
            border: 2px solid #34495e;
            border-radius: 8px;
            cursor: move;
            user-select: none;
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 100px;
            font-size: 16px;
            color: #2c3e50;
            animation: fadeIn 0.5s ease-in-out;
        }

        .dropped-element:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .dropped-element.dragging {
            opacity: 0.6;
            transform: scale(1.2);
            z-index: 2;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }

        /* Instructions Styling */
        .instructions {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(44, 62, 80, 0.8);
            color: #ecf0f1;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 14px;
            text-align: center;
            max-width: 90%;
        }

        /* Scrollbar Styling */
        .elements::-webkit-scrollbar {
            width: 8px;
        }

        .elements::-webkit-scrollbar-track {
            background: #2c3e50;
            border-radius: 8px;
        }

        .elements::-webkit-scrollbar-thumb {
            background: #3498db;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Sidebar -->
        <div class="sidebar">
            <h2>Elements</h2>
            <div class="elements" id="elements-list">
                <div class="element" draggable="true" data-element="Water">💧 Water</div>
                <div class="element" draggable="true" data-element="Earth">🌍 Earth</div>
                <div class="element" draggable="true" data-element="Fire">🔥 Fire</div>
                <div class="element" draggable="true" data-element="Wind">🌬️ Wind</div>
            </div>
            <button class="add-element-btn" id="add-element-btn">Add Custom Element</button>
        </div>

        <!-- Game Area -->
        <div class="game-area">
            <h2>Game Area</h2>
            <div class="drop-zone" id="drop-zone">
                <div class="instructions">
                    Drag and drop elements from the sidebar into this area. To combine, drag one element directly onto another.
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Adding Custom Elements -->
    <div id="modal" style="display:none;">
        <!-- Modal content will be created dynamically -->
    </div>

    <script>
        // References to DOM elements
        const elementsList = document.getElementById('elements-list');
        const dropZone = document.getElementById('drop-zone');
        const addElementBtn = document.getElementById('add-element-btn');

        let draggedElement = null; // Currently dragged element
        let isCombining = false; // Flag to prevent multiple combinations

        // Initialize draggable elements from the sidebar
        function initializeDraggableElements() {
            const elements = document.querySelectorAll('.element');
            elements.forEach(elem => {
                elem.addEventListener('dragstart', handleDragStart);
                elem.addEventListener('dragend', handleDragEnd);
            });
        }

        // Handle drag start for sidebar elements
        function handleDragStart(e) {
            draggedElement = e.target;
            e.dataTransfer.setData('text/plain', e.target.getAttribute('data-element'));
            e.dataTransfer.effectAllowed = 'move';
            setTimeout(() => {
                e.target.classList.add('dragging');
            }, 0);
        }

        // Handle drag end for sidebar elements
        function handleDragEnd(e) {
            e.target.classList.remove('dragging');
            draggedElement = null;
        }

        // Handle drag over for drop zone
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('active');
            e.dataTransfer.dropEffect = 'move';
        });

        // Handle drag leave for drop zone
        dropZone.addEventListener('dragleave', (e) => {
            e.preventDefault();
            dropZone.classList.remove('active');
        });

        // Handle drop on drop zone
        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('active');
            const elementName = e.dataTransfer.getData('text/plain');
            if (!elementName) return;

            // Calculate drop position relative to drop zone
            const dropRect = dropZone.getBoundingClientRect();
            const x = e.clientX - dropRect.left - 50; // Adjust for element width
            const y = e.clientY - dropRect.top - 30;  // Adjust for element height

            // Prevent duplication if dragging an existing game area element
            if (draggedElement && draggedElement.parentElement === dropZone) {
                moveElementInGameArea(draggedElement, x, y);
                return;
            }

            // Create new element in game area
            createElementInGameArea(elementName, x, y);
        });

        // Create a new element in the game area
        function createElementInGameArea(name, x, y) {
            const newElem = document.createElement('div');
            newElem.classList.add('dropped-element');
            newElem.setAttribute('data-element', name);
            newElem.innerHTML = `${getEmojiForElement(name)} ${name}`;
            newElem.style.left = `${x}px`;
            newElem.style.top = `${y}px`;

            // Make draggable within game area
            newElem.setAttribute('draggable', 'true');
            newElem.addEventListener('dragstart', handleElementDragStart);
            newElem.addEventListener('dragend', handleElementDragEnd);
            newElem.addEventListener('dragover', handleElementDragOver);
            newElem.addEventListener('drop', handleElementDrop);

            dropZone.appendChild(newElem);
        }

        // Handle drag start for game area elements
        function handleElementDragStart(e) {
            draggedElement = e.target;
            e.dataTransfer.setData('text/plain', e.target.getAttribute('data-element'));
            e.dataTransfer.effectAllowed = 'move';
            setTimeout(() => {
                e.target.classList.add('dragging');
            }, 0);
        }

        // Handle drag end for game area elements
        function handleElementDragEnd(e) {
            e.target.classList.remove('dragging');
            draggedElement = null;
        }

        // Handle drag over for game area elements
        function handleElementDragOver(e) {
            e.preventDefault();
            if (e.target.classList.contains('dropped-element') && e.target !== draggedElement) {
                e.target.classList.add('over');
                e.dataTransfer.dropEffect = 'move';
            }
        }

        // Handle drop on game area elements for combination
        function handleElementDrop(e) {
            e.preventDefault();
            e.target.classList.remove('over');
            if (isCombining) return; // Prevent multiple combinations at once

            const targetElement = e.target;
            if (targetElement === draggedElement) return; // Prevent combining with itself
            if (!targetElement.classList.contains('dropped-element')) return;

            const elem1 = draggedElement.getAttribute('data-element');
            const elem2 = targetElement.getAttribute('data-element');

            // Combine elements
            const newName = combineElementsAI(elem1, elem2);

            // Calculate new position (average position)
            const zoneRect = dropZone.getBoundingClientRect();
            const elem1Rect = draggedElement.getBoundingClientRect();
            const elem2Rect = targetElement.getBoundingClientRect();

            const centerX = ((elem1Rect.left + elem1Rect.width / 2) + (elem2Rect.left + elem2Rect.width / 2)) / 2 - zoneRect.left - 50;
            const centerY = ((elem1Rect.top + elem1Rect.height / 2) + (elem2Rect.top + elem2Rect.height / 2)) / 2 - zoneRect.top - 30;

            isCombining = true;

            // Animate removal of old elements
            fadeOutElement(draggedElement);
            fadeOutElement(targetElement, () => {
                draggedElement.remove();
                targetElement.remove();

                // Create new combined element
                createElementInGameArea(newName, centerX, centerY);
                addElementToSidebar(newName);
                isCombining = false;
            });
        }

        // Fade out animation
        function fadeOutElement(element, callback) {
            element.style.transition = 'opacity 0.5s, transform 0.5s';
            element.style.opacity = '0';
            element.style.transform = 'scale(0)';
            setTimeout(() => {
                if (callback) callback();
            }, 500);
        }

        // Move existing game area element
        function moveElementInGameArea(element, x, y) {
            element.style.left = `${x}px`;
            element.style.top = `${y}px`;
        }

        // Simulated AI for combining element names
        function combineElementsAI(name1, name2) {
            // Simple blending algorithm with enhanced logic
            const vowels = ['a','e','i','o','u'];
            let splitIndex1 = Math.floor(name1.length / 2);
            let splitIndex2 = Math.floor(name2.length / 2);

            // Adjust split indices to nearest vowel for better blending
            splitIndex1 = findNearestVowel(name1, splitIndex1);
            splitIndex2 = findNearestVowel(name2, splitIndex2);

            const part1 = name1.substring(0, splitIndex1);
            const part2 = name2.substring(splitIndex2);

            let combinedName = part1 + part2;

            // Capitalize first letter
            combinedName = combinedName.charAt(0).toUpperCase() + combinedName.slice(1).toLowerCase();

            // Ensure uniqueness
            if (isElementExists(combinedName)) {
                combinedName += Math.floor(Math.random() * 100);
            }

            return combinedName;
        }

        // Find nearest vowel index from a given index
        function findNearestVowel(name, index) {
            for (let i = index; i < name.length; i++) {
                if (['a','e','i','o','u'].includes(name[i].toLowerCase())) return i + 1;
            }
            return index;
        }

        // Check if an element already exists
        function isElementExists(name) {
            const existingElements = document.querySelectorAll('.elements .element, .dropped-element');
            for (let elem of existingElements) {
                if (elem.getAttribute('data-element').toLowerCase() === name.toLowerCase()) {
                    return true;
                }
            }
            return false;
        }

        // Add new element to the sidebar
        function addElementToSidebar(name) {
            const emoji = getEmojiForElement(name);
            const newElem = document.createElement('div');
            newElem.classList.add('element');
            newElem.setAttribute('data-element', name);
            newElem.innerHTML = `${emoji} ${name}`;
            newElem.setAttribute('draggable', 'true');

            // Add event listeners
            newElem.addEventListener('dragstart', handleDragStart);
            newElem.addEventListener('dragend', handleDragEnd);

            // Animate addition
            newElem.style.opacity = '0';
            newElem.style.transform = 'translateY(-20px)';
            elementsList.appendChild(newElem);
            setTimeout(() => {
                newElem.style.transition = 'opacity 0.5s, transform 0.5s';
                newElem.style.opacity = '1';
                newElem.style.transform = 'translateY(0)';
            }, 100);
        }

        // Assign emojis based on element name (enhanced)
        function getEmojiForElement(name) {
            const firstChar = name.charAt(0).toLowerCase();
            switch(firstChar) {
                case 'w': return '💧';
                case 'e': return '🌍';
                case 'f': return '🔥';
                case 'd': return '🌬️';
                case 'm': return '🌟';
                case 's': return '☀️';
                case 'a': return '⚡';
                case 'g': return '🌿';
                case 'l': return '🌋';
                case 'c': return '☁️';
                case 't': return '💨';
                case 'h': return '🌈';
                case 'b': return '🌊';
                case 'r': return '🌪️';
                case 'c': return '❄️';
                default: return '✨';
            }
        }

        // Add Custom Element via Modal
        addElementBtn.addEventListener('click', () => {
            openModal();
        });

        function openModal() {
            // Create modal overlay
            const modalOverlay = document.createElement('div');
            modalOverlay.style.position = 'fixed';
            modalOverlay.style.top = '0';
            modalOverlay.style.left = '0';
            modalOverlay.style.width = '100%';
            modalOverlay.style.height = '100%';
            modalOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
            modalOverlay.style.display = 'flex';
            modalOverlay.style.justifyContent = 'center';
            modalOverlay.style.alignItems = 'center';
            modalOverlay.style.zIndex = '1000';

            // Create modal content
            const modalContent = document.createElement('div');
            modalContent.style.backgroundColor = '#fff';
            modalContent.style.padding = '30px';
            modalContent.style.borderRadius = '10px';
            modalContent.style.boxShadow = '0 5px 15px rgba(0,0,0,0.3)';
            modalContent.style.width = '300px';
            modalContent.style.textAlign = 'center';
            modalContent.innerHTML = `
                <h3>Add Custom Element</h3>
                <input type="text" id="custom-element-name" placeholder="Element Name" style="width: 90%; padding: 10px; margin-top: 15px; border: 1px solid #ccc; border-radius: 5px;">
                <button id="save-element-btn" style="margin-top: 20px; padding: 10px 20px; background-color: #27ae60; color: #fff; border: none; border-radius: 5px; cursor: pointer;">Save</button>
                <button id="close-modal-btn" style="margin-top: 10px; padding: 5px 10px; background-color: #e74c3c; color: #fff; border: none; border-radius: 5px; cursor: pointer;">Cancel</button>
            `;

            modalOverlay.appendChild(modalContent);
            document.body.appendChild(modalOverlay);

            // Handle Save button
            document.getElementById('save-element-btn').addEventListener('click', () => {
                const nameInput = document.getElementById('custom-element-name').value.trim();
                if (nameInput) {
                    if (isElementExists(nameInput)) {
                        alert('Element already exists!');
                    } else {
                        addElementToSidebar(nameInput);
                        document.body.removeChild(modalOverlay);
                    }
                } else {
                    alert('Please enter a valid name.');
                }
            });

            // Handle Close button
            document.getElementById('close-modal-btn').addEventListener('click', () => {
                document.body.removeChild(modalOverlay);
            });
        }

        // Initialize the application
        initializeDraggableElements();

        // Prevent duplication when dragging elements within game area
        dropZone.addEventListener('dragstart', (e) => {
            if (e.target.classList.contains('dropped-element')) {
                draggedElement = e.target;
                e.dataTransfer.setData('text/plain', e.target.getAttribute('data-element'));
                e.dataTransfer.effectAllowed = 'move';
                setTimeout(() => {
                    e.target.classList.add('dragging');
                }, 0);
            }
        });

        dropZone.addEventListener('dragend', (e) => {
            if (e.target.classList.contains('dropped-element')) {
                e.target.classList.remove('dragging');
                draggedElement = null;
            }
        });
    </script>
</body>
</html>

I can't put elements together, and make it using a google gemini api key one file.