<html><head><base href="." /><title>EMOJI ROLL!</title><style>
body {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.roll-button {
    font-size: 4rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
    margin: 20px;
}

.roll-button:hover {
    transform: scale(1.2);
}

.current-emoji {
    font-size: 8rem;
    margin: 20px;
    text-align: center;
}

.emoji-name {
    font-size: 4rem;
    text-shadow: 2px 2px 2px black;
}

.rarity {
    font-size: 1.2rem;
    margin-top: 5px;
}

.inventory {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 800px;
    justify-content: center;
    margin-top: 20px;
}

.inventory-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    min-width: 120px;
}

.common { color: #ffffff; }
.uncommon { color: #00ff00; }
.rare { color: #0099ff; }
.epic { color: #ff00ff; }
.legendary { color: #ffd700; }
.mythical { color: #ff0000; }

.emoji-text {
    -webkit-text-stroke: 2px black;
    text-stroke: 2px black;
}

.shop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    max-width: 300px;
}

.shop.visible {
    transform: translateX(0);
}

.toggle-shop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 100;
}

.toggle-shop:hover {
    background: rgba(255, 255, 255, 0.3);
}

.coins {
    font-size: 1.5rem;
    margin: 10px;
    color: gold;
}

.stats {
    font-size: 1.2rem;
    margin: 10px;
    color: #0099ff;
}

.reset-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #ff4444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.reset-button:hover {
    background: #ff6666;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

.roll-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.inventory-item {
    color: white;
}

@keyframes dropEmoji {
    0% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.emoji-pop {
    animation: dropEmoji 0.2s ease-out;
}

@keyframes fadeOut {
    0% {
        opacity: 0.6;
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(200px) rotate(720deg);
    }
}

.emoji-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
}

.current-emoji > div:nth-child(2) {
    transition: filter 0.3s;
}

.common > div:nth-child(2) { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)); }
.uncommon > div:nth-child(2) { filter: drop-shadow(0 0 10px rgba(0, 255, 0, 0.7)); }
.rare > div:nth-child(2) { filter: drop-shadow(0 0 10px rgba(0, 153, 255, 0.7)); }
.epic > div:nth-child(2) { filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.7)); }
.legendary > div:nth-child(2) { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7)); }
.mythical > div:nth-child(2) { filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.7)); }

.inventory-name {
    font-size: 28px;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.luck-display-container {
    color: #00d26a;
}
</style></head><body>

<h1 class="emoji-text">🎲 EMOJI ROLL 🎲</h1>

<div class="stats">
    <div class="coins">🪙 <span id="coinDisplay">0</span></div>
  <div class="flex-container">
    <div class="luck-display-container">🍀<span id="luckDisplay">1.0</span>x</div>
  </div>
</div>

<div class="current-emoji">
    <div class="emoji-name emoji-text">Click the 🎲 to roll!</div>
    <div>😆</div>
    <div class="rarity">1/100,000,000</div>
</div>

<button class="roll-button" onclick="rollEmoji()">🎲</button>

<button class="toggle-shop" onclick="toggleShop()">🛍️ Shop</button>

<div class="shop">
    <h2>Upgrades</h2>
    <button class="shop-button" onclick="buyLuck()">Buy +0.1x Luck (1000 coins)</button>
    <button class="shop-button" onclick="buyAutoRoll()">Buy Auto-Roll (2000 coins)</button>
    <button class="shop-button" onclick="buyMultiRoll()">Buy Multi-Roll (5000 coins)</button>
    <button class="shop-button" onclick="buyLootBoost()">Buy Loot Boost (7500 coins)</button>
    <button class="shop-button" onclick="buyCoinBoost()">Buy Coin Boost (10000 coins)</button>
</div>

<h2>Inventory</h2>
<div class="inventory" id="inventory"></div>

<button class="reset-button" onclick="resetProgress()">Reset Progress</button>

<script>
const emojis = [
    { emoji: "🙂", name: "Smile", rarity: 2, class: "common" },
    { emoji: "😊", name: "Happy", rarity: 3, class: "common" },
    { emoji: "😃", name: "Grin", rarity: 4, class: "common" },
    { emoji: "😆", name: "Laugh", rarity: 5, class: "common" },
    { emoji: "😄", name: "Happy", rarity: 7, class: "common" },
    { emoji: "😅", name: "Sweat Smile", rarity: 10, class: "common" },
    { emoji: "🤣", name: "ROFL", rarity: 20, class: "common" },
    { emoji: "😎", name: "Cool", rarity: 30, class: "uncommon" },
    { emoji: "🍓", name: "Strawberry", rarity: 40, class: "uncommon" },
    { emoji: "😌", name: "Relieved", rarity: 50, class: "uncommon" },
    { emoji: "😏", name: "Smirk", rarity: 69, class: "epic" },
    { emoji: "🤓", name: "Nerd", rarity: 75, class: "uncommon" },
    { emoji: "😇", name: "Angel", rarity: 100, class: "uncommon" },
    { emoji: "👍", name: "Thumbs Up", rarity: 123, class: "uncommon" },
    { emoji: "✌️", name: "Peace", rarity: 150, class: "uncommon" },
    { emoji: "🤘", name: "Rock On", rarity: 200, class: "uncommon" },
    { emoji: "🤩", name: "Starstruck", rarity: 250, class: "uncommon" },
    { emoji: "🥳", name: "Party", rarity: 275, class: "rare" },
    { emoji: "🤪", name: "Crazy", rarity: 300, class: "rare" },
    { emoji: "👻", name: "Ghost", rarity: 325, class: "rare" },
    { emoji: "🦊", name: "Fox", rarity: 350, class: "rare" },
    { emoji: "🐉", name: "Dragon", rarity: 400, class: "rare" },
    { emoji: "🪴", name: "Weed", rarity: 420, class: "epic" },
    { emoji: "🦋", name: "Butterfly", rarity: 450, class: "rare" },
    { emoji: "🦄", name: "Unicorn", rarity: 500, class: "rare" },
    { emoji: "🌺", name: "Flower", rarity: 650, class: "epic" },
    { emoji: "🐲", name: "Devil", rarity: 666, class: "epic" },
    { emoji: "⭐", name: "Star", rarity: 700, class: "epic" },
    { emoji: "👽", name: "Alien", rarity: 750, class: "epic" },
    { emoji: "🎭", name: "Theater", rarity: 850, class: "epic" },
    { emoji: "🎪", name: "Circus", rarity: 999, class: "epic" },
    { emoji: "🌋", name: "Volcano", rarity: 1000, class: "epic" },
    { emoji: "🎇", name: "Sparkler", rarity: 1200, class: "epic" },
    { emoji: "🦈", name: "Shark", rarity: 1400, class: "epic" },
    { emoji: "🌈", name: "Rainbow", rarity: 1500, class: "epic" },
    { emoji: "🐲", name: "Dragon Face", rarity: 1600, class: "epic" },
    { emoji: "🍀", name: "Lucky Clover", rarity: 1750, class: "legendary" },
    { emoji: "🔮", name: "Crystal Ball", rarity: 1984, class: "legendary" },
    { emoji: "🎨", name: "Art", rarity: 2000, class: "legendary" },
    { emoji: "🦠", name: "Virus", rarity: 2020, class: "legendary" },
    { emoji: "🌙", name: "Moon", rarity: 2500, class: "legendary" },
    { emoji: "🏰", name: "Castle", rarity: 3333, class: "legendary" },
    { emoji: "💎", name: "Diamond", rarity: 5000, class: "legendary" },
    { emoji: "💀", name: "Skull", rarity: 6942, class: "legendary" },
    { emoji: "🎵", name: "Music", rarity: 7500, class: "legendary" },
    { emoji: "👑", name: "Crown", rarity: 10000, class: "legendary" },
    { emoji: "🌞", name: "Sun", rarity: 15000, class: "legendary" },
    { emoji: "🎆", name: "Fireworks", rarity: 25000, class: "mythical" },
    { emoji: "🌊", name: "Ocean Wave", rarity: 35000, class: "mythical" },
    { emoji: "✨", name: "Sparkles", rarity: 50000, class: "mythical" },
    { emoji: "☠️", name: "Pirate", rarity: 69420, class: "legendary" },
    { emoji: "🎡", name: "Ferris Wheel", rarity: 75000, class: "mythical" },
    { emoji: "🌟", name: "Shining Star", rarity: 100000, class: "mythical" },
    { emoji: "🎯", name: "Bullseye", rarity: 150000, class: "mythical" },
    { emoji: "🔱", name: "Trident", rarity: 250000, class: "mythical" },
    { emoji: "🎠", name: "Carousel", rarity: 350000, class: "mythical" },
    { emoji: "🌠", name: "Shooting Star", rarity: 500000, class: "mythical" },
    { emoji: "❤️", name: "Love", rarity: 750000, class: "mythical" },
    { emoji: "💫", name: "Sparkle", rarity: 1000000, class: "mythical" }
];

let inventory = {};
let coins = 0;
let luck = 1.0;
let isRolling = false;
let lastRollTime = 0;
const ROLL_COOLDOWN = 250; // ms

let autoRollEnabled = false;
let multiRollCount = 1;
let lootBoostLevel = 1;
let coinBoostLevel = 1;

function toggleShop() {
    document.querySelector('.shop').classList.toggle('visible');
}

function loadProgress() {
    const savedData = localStorage.getItem('emojiRollData');
    if (savedData) {
        const data = JSON.parse(savedData);
        inventory = data.inventory || {};
        coins = data.coins || 0;
        luck = data.luck || 1.0;
        lastRollTime = data.lastRollTime || 0;
        autoRollEnabled = data.autoRollEnabled || false;
        multiRollCount = data.multiRollCount || 1;
        lootBoostLevel = data.lootBoostLevel || 1;
        coinBoostLevel = data.coinBoostLevel || 1;
        updateInventory();
        updateStats();
        if (autoRollEnabled) {
            setInterval(rollEmoji, 2000);
        }
    }
}

function saveProgress() {
    localStorage.setItem('emojiRollData', JSON.stringify({
        inventory,
        coins,
        luck,
        lastRollTime,
        autoRollEnabled,
        multiRollCount,
        lootBoostLevel,
        coinBoostLevel
    }));
}

function buyLuck() {
    if (coins >= 1000) {
        coins -= 1000;
        luck += 0.1;
        updateStats();
        saveProgress();
    }
}

function buyAutoRoll() {
    if (coins >= 2000 && !autoRollEnabled) {
        coins -= 2000;
        autoRollEnabled = true;
        setInterval(rollEmoji, 2000);
        updateStats();
        saveProgress();
    }
}

function buyMultiRoll() {
    if (coins >= 5000) {
        coins -= 5000;
        multiRollCount++;
        updateStats();
        saveProgress();
    }
}

function buyLootBoost() {
    if (coins >= 7500) {
        coins -= 7500;
        lootBoostLevel += 0.2;
        updateStats();
        saveProgress();
    }
}

function buyCoinBoost() {
    if (coins >= 10000) {
        coins -= 10000;
        coinBoostLevel += 0.5;
        updateStats();
        saveProgress();
    }
}

function resetProgress() {
    if (confirm('Are you sure you want to reset all progress?')) {
        localStorage.removeItem('emojiRollData');
        inventory = {};
        coins = 0;
        luck = 1.0;
        lastRollTime = 0;
        autoRollEnabled = false;
        multiRollCount = 1;
        lootBoostLevel = 1;
        coinBoostLevel = 1;
        updateInventory();
        updateStats();
    }
}

function createParticles(emoji, x, y) {
    const NUM_PARTICLES = 15;
    const GRAVITY = 0.2;
    const container = document.body;

    for (let i = 0; i < NUM_PARTICLES; i++) {
        const particle = document.createElement('div');
        particle.className = 'emoji-particle';
        particle.textContent = emoji;
        particle.style.fontSize = '40px';
        particle.style.position = 'fixed';
        particle.style.left = `${x - 25}px`;
        particle.style.top = `${y - 25}px`;

        const angle = (Math.random() * Math.PI * 2);
        const speed = 5 + Math.random() * 10;
        let velocityX = Math.cos(angle) * speed;
        let velocityY = Math.sin(angle) * speed;
        let posX = 0;
        let posY = 0;

        let frame = 0;
        const animate = () => {
            frame++;

            velocityY += GRAVITY;
            posX += velocityX;
            posY += velocityY;

            particle.style.transform = `translate(${posX}px, ${posY}px) rotate(${frame * 2}deg)`;
            particle.style.opacity = 1 - (frame / 100);

            if (frame < 100) {
                requestAnimationFrame(animate);
            } else {
                container.removeChild(particle);
            }
        };

        container.appendChild(particle);
        requestAnimationFrame(animate);
    }
}

async function rollEmoji() {
    const now = Date.now();
    if (isRolling) return;

    // Define button at the start of function
    const button = document.querySelector('.roll-button');
    if (!button) return;  // Safety check

    for (let i = 0; i < multiRollCount; i++) {
        const boostedLuck = luck * lootBoostLevel;

        isRolling = true;
        lastRollTime = now;
        button.disabled = true;
        button.classList.add('spinning');

        const emojiElement = document.querySelector('.current-emoji > div:nth-child(2)');
        const emojiContainer = document.querySelector('.current-emoji');

        function getWeightedEmoji(currentLuck) {
            let roll = Math.random() * 1000000;
            let selected = null;

            for (let emoji of emojis) {
                if (roll > (1000000 / emoji.rarity)) {
                    selected = emoji;
                    if (Math.random() < currentLuck - 1) {
                        currentLuck -= 1;
                        continue;
                    }
                    break;
                }
            }

            return selected || emojis[0];
        }

        function updateEmojiWithAnimation(emoji) {
            document.querySelector('.emoji-name').textContent = emoji.name;
            emojiElement.textContent = emoji.emoji;
            document.querySelector('.rarity').textContent = `1/${emoji.rarity}`;
            document.querySelector('.current-emoji').className = `current-emoji ${emoji.class}`;

            emojiContainer.classList.remove('emoji-pop');
            void emojiContainer.offsetWidth;
            emojiContainer.classList.add('emoji-pop');
        }

        try {
            for (let j = 0; j < 5; j++) {
                const teasingEmoji = getWeightedEmoji(boostedLuck);
                updateEmojiWithAnimation(teasingEmoji);
                await new Promise(resolve => setTimeout(resolve, 200));
            }

            const selected = getWeightedEmoji(boostedLuck);
            updateEmojiWithAnimation(selected);

            const rect = emojiElement.getBoundingClientRect();
            createParticles(selected.emoji, rect.left + rect.width / 2, rect.top + rect.height / 2);

            inventory[selected.emoji] = (inventory[selected.emoji] || 0) + 1;
            updateInventory();
            saveProgress();
        } catch (error) {
            console.error('Error during roll:', error);
        }
    }

    button.classList.remove('spinning');
    setTimeout(() => {
        isRolling = false;
        button.disabled = false;
    }, ROLL_COOLDOWN);
}

function sellEmoji(emoji, sellAll = false) {
    if (inventory[emoji] > 0) {
        const emojiData = emojis.find(e => e.emoji === emoji);
        const count = sellAll ? inventory[emoji] : 1;
        const value = Math.floor((emojiData.rarity / 2) * coinBoostLevel) * count;
        coins += value;
        
        if (sellAll || inventory[emoji] === 1) {
            delete inventory[emoji];
        } else {
            inventory[emoji]--;
        }
        
        updateInventory();
        updateStats();
        saveProgress();
    }
}

function updateStats() {
    document.getElementById('coinDisplay').textContent = coins;
    document.getElementById('luckDisplay').textContent = luck.toFixed(1);
    const shopButtons = document.querySelectorAll('.shop-button');
    shopButtons[0].disabled = coins < 1000;
    shopButtons[1].disabled = coins < 2000 || autoRollEnabled;
    shopButtons[2].disabled = coins < 5000;
    shopButtons[3].disabled = coins < 7500;
    shopButtons[4].disabled = coins < 10000;
}

function updateInventory() {
    const inventoryDiv = document.getElementById('inventory');
    inventoryDiv.innerHTML = '';

    Object.entries(inventory).sort((a, b) => {
        const emojiA = emojis.find(e => e.emoji === a[0]);
        const emojiB = emojis.find(e => e.emoji === b[0]);
        return emojiA.rarity - emojiB.rarity;
    }).forEach(([emoji, count]) => {
        const emojiData = emojis.find(e => e.emoji === emoji);
        const value = Math.floor(emojiData.rarity / 2);
        const item = document.createElement('div');
        item.className = `inventory-item ${emojiData.class}`;
        
        const sellButton = document.createElement('button');
        sellButton.className = 'shop-button';
        sellButton.textContent = `Sell (${value} coins)`;
        sellButton.addEventListener('mouseover', (e) => {
            if (e.shiftKey) {
                sellButton.textContent = `Sell all (${value * count} coins)`;
            }
        });
        sellButton.addEventListener('mouseout', () => {
            sellButton.textContent = `Sell (${value} coins)`;
        });
        sellButton.onclick = (e) => sellEmoji(emoji, e.shiftKey);

        item.innerHTML = `
            <h3 class="inventory-name">${emojiData.name}</h3>
            <div style="font-size: 2rem">${emoji}</div>
            <div>x${count}</div>
            <div class="rarity">1/${emojiData.rarity}</div>
        `;
        item.appendChild(sellButton);
        inventoryDiv.appendChild(item);
    });
}

loadProgress();

setInterval(() => {
    const button = document.querySelector('.roll-button');
    const now = Date.now();
    if (now - lastRollTime < ROLL_COOLDOWN) {
        button.disabled = true;
    } else if (!isRolling) {
        button.disabled = false;
    }
}, 100);
</script>

</body></html>

improve the style of the website overall, add 10 improvements, make it smoother, add animations, add more features and just make it a better experience overall. but keep everything that's already there. just adjust the layout to be more like a modern website with a good design. respond with the full improved code