<html><head>
    <title>GCSE and Secondary Resources - BBC Bitesize</title>
    <link rel="icon" type="image/x-icon" href="./favicon.svg">
    <script 
    disable-devtool-auto
    src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Press Start 2P', cursive;
    }
    
    body {
        background: linear-gradient(135deg, #1a1a2e, #16213e);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        color: #fff;
    }

    @keyframes fadeInOut {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

    @keyframes glow {
    from { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
    to { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); }
}

    .snow {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    animation: snowfall linear infinite;
}

    @keyframes snowfall {
        0% {
            transform: translateY(-10px) translateX(0) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(100vh) translateX(100px) rotate(360deg);
            opacity: 0;
    }
}
    
    .menu-screen, .game-screen, .shop-screen {
        text-align: center;
        position: relative;
    }
    
    .title {
        font-size: 4em;
        margin-bottom: 50px;
        color: #4ecca3;
        text-shadow: 0 0 10px rgba(78, 204, 163, 0.5);
        animation: glow 2s ease-in-out infinite alternate;
    }
    
    @keyframes glow {
        from { text-shadow: 0 0 10px rgba(78, 204, 163, 0.5); }
        to { text-shadow: 0 0 20px rgba(78, 204, 163, 0.8); }
    }
    
    .btn {
        padding: 15px 40px;
        font-size: 1.2em;
        margin: 20px;
        background: #2d7b00;
        border: none;
        border-radius: 5px;
        color: #1a1a2e;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(78, 204, 163, 0.4);
    }
    
    .btn.locked {
        background: #666;
        cursor: not-allowed;
    }
    
    .coin-display {
        position: fixed;
        bottom: 20px;
        left: 20px;
        font-size: 1.2em;
        color: red;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
    
    .shop-item {
        background: rgba(78, 204, 163, 0.1);
        padding: 20px;
        margin: 15px;
        border-radius: 10px;
        border: 2px solid #4ecca3;
        transition: transform 0.3s ease;
    }
    
    .shop-item:hover {
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(78, 204, 163, 0.3);
    }
    
    .shop-section {
        margin: 40px 0;
    }
    
    .shop-section h3 {
        color: #4ecca3;
        margin-bottom: 20px;
        font-size: 1.5em;
    }
    
    .shop-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        max-width: 1000px;
        margin: 20px auto;
        padding: 0 20px;
    }
    
    .score-display {
        margin: 20px 0;
    }
    
    .score-display p {
        margin: 15px 0;
        font-size: 1.2em;
    }
    
    .score-container {
        position: fixed;
        top: 10px;
        right: 10px;
        text-align: right;
        padding: 10px;
    }
    
    .score-container p {
        margin-bottom: 20px;
        font-size: 1.2em;
    }
    
    .game-over {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(26, 26, 46, 0.95);
        padding: 30px;
        border-radius: 10px;
        border: 2px solid #4ecca3;
        text-align: center;
    }
    
    .game-over h2 {
        margin-bottom: 20px;
        color: #4ecca3;
    }
    
    .game-over p {
        margin: 15px 0;
    }
    
    .shop-item p {
        margin: 10px 0;
        letter-spacing: 2px;
        line-height: 1.8;
    }
    
    .canvas-container {
        position: relative;
        border: 4px solid #4ecca3;
        margin: 20px;
    }
    
    .credits-popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(26, 26, 46, 0.95);
        padding: 30px;
        border-radius: 10px;
        border: 2px solid #4ecca3;
        text-align: center;
        z-index: 1000;
    }
    
    .credits-popup h2 {
        color: #4ecca3;
        margin-bottom: 30px;
    }
    
    .credits-popup p {
        margin: 15px 0;
        line-height: 1.8;
    }
    
    .credits-popup .btn {
        margin-top: 30px;
    }
    
    .btn.equip {
        background: #2a9d8f;
        font-size: 0.9em;
        padding: 10px 20px;
        margin: 10px 0;
    }
    
    .btn.equipped {
        background: #264653;
        cursor: default;
    }
    
    .kill-switch {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1000;
        background: #ff4757;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        color: white;
        font-family: 'Press Start 2P', cursive;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    
    .kill-switch:hover {
        background: #ff6b6b;
    }
    
    @keyframes rainbow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    
        .rainbow-btn {
            background: linear-gradient(90deg, 
                red, orange, yellow, green, blue, indigo, violet);
            background-size: 400% 400%;
            animation: rainbow 3s infinite;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
    
        .red {
            color:red
        }
    
        .green {
            color:greenyellow
        }

        #mobileControls {
            z-index: 1000;
        }

        .control-btn {
            width: 60px;
            height: 60px;
            font-size: 24px;
            font-family: 'Press Start 2P', cursive;
            margin: 5px;
            border: 2px solid #ffffff;
            border-radius: 8px;
            background-color: #ff0000;
            color: #00ff00;
            text-shadow: 1px 1px #ffffff;
            box-shadow: 0px 4px #660000;
}

.control-btn:hover {
    background-color: #00ff00;
    color: #ff0000;
    border-color: #00ff00;
    box-shadow: 0px 4px #003300;
}

.control-btn:active {
    box-shadow: 0px 2px #003300;
    transform: translateY(2px);
}

    </style>
    </head>
    <body>
        <button class="kill-switch" onclick="window.location.href='https://www.bbc.co.uk/bitesize'"><span class="green">Kill Switch</span></button>
        <div class="coin-display">
            Coins: <span id="coinCount">0</span>
        </div>
        <div class="menu-screen" id="menuScreen">
            <h1 class="title"><span class="green">S</span><span class="red">N</span><span class="green">A</span><span class="red">K</span><span class="green">E</span></h1>
            <button class="btn" id="playBtn"><span class="green">P</span><span class="red">L</span><span class="green">A</span><span class="red">Y</span></button><br>
            <button class="btn" id="shopBtn"><span class="green">S</span><span class="red">H</span><span class="green">O</span><span class="red">P</span></button><br>
            <button class="btn" id="creditsBtn"><span class="green">C</span><span class="red">R</span><span class="green">E</span><span class="red">D</span><span class="green">I</span><span class="red">T</span><span class="green">S</span></button>
        </div>
        <div id="mobileControls" style="display: none; position: fixed; bottom: 20px; width: 100%; text-align: center;">
            <button id="up" class="control-btn">⬆️</button>
            <div style="display: flex; justify-content: center;">
                <button id="left" class="control-btn">⬅️</button>
                <button id="down" class="control-btn">⬇️</button>
                <button id="right" class="control-btn">➡️</button>
            </div>
        </div>        
    
        <div class="game-screen" id="gameScreen" style="display: none;">
            <div class="score-container" style="color: greenyellow;">
                <p>Score: <span id="currentScore">0</span></p>
                <p>High Score: <span id="highScore">0</span></p>
            </div>
            <div class="canvas-container">
                <canvas id="gameCanvas" width="600" height="600"></canvas>
            </div>
        </div>
    
        <div class="shop-screen" id="shopScreen" style="display: none;">
            <h1 class="title"><span class="green">SHOP</span></h1>
            <div class="shop-section">
                <h3><span class="red">Colours</span></h3>
                <div class="shop-grid" id="colorShop">
                    <div class="shop-item">
                        <p>CHRISTMAS  Snake</p>
                        <button class="rainbow-btn" data-color="#ff4757" data-price="0">Free!</button>
                        <button class="btn equip" data-color="#ff4757" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Blue  Snake</p>
                        <p>5  Coins</p>
                        <button class="btn" data-color="#0000ff" data-price="5">Buy</button>
                        <button class="btn equip" data-color="#0000ff" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Yellow  Snake</p>
                        <p>5  Coins</p>
                        <button class="btn" data-color="#ffff00" data-price="5">Buy</button>
                        <button class="btn equip" data-color="#ffff00" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Purple  Snake</p>
                        <p>10  Coins</p>
                        <button class="btn" data-color="#800080" data-price="10">Buy</button>
                        <button class="btn equip" data-color="#800080" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Green  Snake</p>
                        <p>10  Coins</p>
                        <button class="btn" data-color="#00ff00" data-price="10">Buy</button>
                        <button class="btn equip" data-color="#00ff00" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Pink  Snake</p>
                        <p>10  Coins</p>
                        <button class="btn" data-color="#ff69b4" data-price="10">Buy</button>
                        <button class="btn equip" data-color="#ff69b4" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Cyan  Snake</p>
                        <p>15  Coins</p>
                        <button class="btn" data-color="#00ffff" data-price="15">Buy</button>
                        <button class="btn equip" data-color="#00ffff" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Orange  Snake</p>
                        <p>15  Coins</p>
                        <button class="btn" data-color="#ffa500" data-price="15">Buy</button>
                        <button class="btn equip" data-color="#ffa500" style="display: none;">Equip</button>
                    </div>
                </div>
            </div>
            
            <div class="shop-section">
                <h3><span class="red">Fruits</span></h3>
                <div class="shop-grid" id="fruitShop">
                    <div class="shop-item">
                        <p>Banana</p>
                        <p>5  Coins</p>
                        <button class="btn" data-fruit="banana" data-price="5">Buy</button>
                        <button class="btn equip" data-fruit="banana" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Orange</p>
                        <p>5  Coins</p>
                        <button class="btn" data-fruit="orange" data-price="5">Buy</button>
                        <button class="btn equip" data-fruit="orange" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Plum</p>
                        <p>10  Coins</p>
                        <button class="btn" data-fruit="plum" data-price="10">Buy</button>
                        <button class="btn equip" data-fruit="plum" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Dragon  Fruit</p>
                        <p>15  Coins</p>
                        <button class="btn" data-fruit="dragonfruit" data-price="15">Buy</button>
                        <button class="btn equip" data-fruit="dragonfruit" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Strawberry</p>
                        <p>10  Coins</p>
                        <button class="btn" data-fruit="strawberry" data-price="10">Buy</button>
                        <button class="btn equip" data-fruit="strawberry" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Grape</p>
                        <p>10  Coins</p>
                        <button class="btn" data-fruit="grape" data-price="10">Buy</button>
                        <button class="btn equip" data-fruit="grape" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Watermelon</p>
                        <p>15  Coins</p>
                        <button class="btn" data-fruit="watermelon" data-price="15">Buy</button>
                        <button class="btn equip" data-fruit="watermelon" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Star  Fruit</p>
                        <p>20  Coins</p>
                        <button class="btn" data-fruit="starfruit" data-price="20">Buy</button>
                        <button class="btn equip" data-fruit="starfruit" style="display: none;">Equip</button>
                    </div>
                    <div class="shop-item">
                        <p>Christmas  Fruit</p>
                        <button class="rainbow-btn" data-fruit="crms" data-price="0">Free!</button>
                        <button class="btn equip" data-fruit="crms" style="display: none;">Equip</button>
                    </div>
                </div>
            </div>
            <button class="btn" id="backToMenu">Back to Menu</button>
        </div>
    
        <div class="game-over" id="gameOver">
            <h2>Game Over</h2>
            <p>Score: <span id="finalScore">0</span></p>
            <button class="btn" id="playAgain">Play Again</button>
            <button class="btn" onclick="window.location.reload()">Return To Main Menu</button>
        </div>
    
        <div class="credits-popup" id="creditsPopup">
            <h2><span class="red">CREDITS</span></h2>
            <p><span class = "green">Main Developer/CEO - AltzTechz</span></p>
            <p><span class = "green">Idea/Support/CEO - KetchupCat72_Dev</span></p>
            <p><span class = "green">Made with love and a couple energy drinks. - KetchupCat72_Dev & AltzTechz</span></p>
            <button class="btn" id="closeCredits">Close</button>
        </div>
    
    <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const gridSize = 20;
    let snake = [{x: 200, y: 200}];
    let food = {x: 0, y: 0};
    let direction = 'right';
    let gameLoop = null;
    let score = 0;
    let applesEaten = 0;
    let gameSpeed = 120;
    
    let coins = parseInt(localStorage.getItem('snakeCoins')) || 0;
    let snakeColor = localStorage.getItem('snakeColor') || '#4ecca3';
    let foodType = localStorage.getItem('foodType') || 'apple';
    let unlockedColors = JSON.parse(localStorage.getItem('unlockedColors')) || ['#4ecca3'];
    let unlockedFruits = JSON.parse(localStorage.getItem('unlockedFruits')) || ['apple'];
    let highScore = parseInt(localStorage.getItem('snakeHighScore')) || 0;
    
    document.getElementById('coinCount').textContent = coins;
    document.getElementById('highScore').textContent = highScore;
    
    function initializeShop() {
        document.querySelectorAll('#colorShop button').forEach(button => {
            if (button.classList.contains('equip')) {
                if (unlockedColors.includes(button.dataset.color)) {
                    button.style.display = 'inline-block';
                    if (snakeColor === button.dataset.color) {
                        button.classList.add('equipped');
                        button.textContent = 'Equipped';
                    }
                }
            } else {
                if (unlockedColors.includes(button.dataset.color)) {
                    button.style.display = 'none';
                } else {
                    if (coins < parseInt(button.dataset.price)) {
                        button.classList.add('locked');
                    }
                }
            }
        });
    
        document.querySelectorAll('#fruitShop button').forEach(button => {
            if (button.classList.contains('equip')) {
                if (unlockedFruits.includes(button.dataset.fruit)) {
                    button.style.display = 'inline-block';
                    if (foodType === button.dataset.fruit) {
                        button.classList.add('equipped');
                        button.textContent = 'Equipped';
                    }
                }
            } else {
                if (unlockedFruits.includes(button.dataset.fruit)) {
                    button.style.display = 'none';
                } else {
                    if (coins < parseInt(button.dataset.price)) {
                        button.classList.add('locked');
                    }
                }
            }
        });
    }
    
    initializeShop();
    
    document.querySelectorAll('#colorShop button:not(.equip)').forEach(button => {
        button.addEventListener('click', () => {
            if (!button.classList.contains('locked')) {
                const price = parseInt(button.dataset.price);
                coins -= price;
                localStorage.setItem('snakeCoins', coins);
                document.getElementById('coinCount').textContent = coins;
                unlockedColors.push(button.dataset.color);
                localStorage.setItem('unlockedColors', JSON.stringify(unlockedColors));
                button.style.display = 'none';
                const equipBtn = button.nextElementSibling;
                equipBtn.style.display = 'inline-block';
                
                const hasEquipped = Array.from(document.querySelectorAll('#colorShop .equip')).some(btn => btn.classList.contains('equipped'));
                if (!hasEquipped) {
                    equipBtn.classList.add('equipped');
                    equipBtn.textContent = 'Equipped';
                    snakeColor = button.dataset.color;
                    localStorage.setItem('snakeColor', snakeColor);
                }
                initializeShop();
            }
        });
    });
    
    document.querySelectorAll('#fruitShop button:not(.equip)').forEach(button => {
        button.addEventListener('click', () => {
            if (!button.classList.contains('locked')) {
                const price = parseInt(button.dataset.price);
                coins -= price;
                localStorage.setItem('snakeCoins', coins);
                document.getElementById('coinCount').textContent = coins;
                unlockedFruits.push(button.dataset.fruit);
                localStorage.setItem('unlockedFruits', JSON.stringify(unlockedFruits));
                button.style.display = 'none';
                const equipBtn = button.nextElementSibling;
                equipBtn.style.display = 'inline-block';
                
                const hasEquipped = Array.from(document.querySelectorAll('#fruitShop .equip')).some(btn => btn.classList.contains('equipped'));
                if (!hasEquipped) {
                    equipBtn.classList.add('equipped');
                    equipBtn.textContent = 'Equipped';
                    foodType = button.dataset.fruit;
                    localStorage.setItem('foodType', foodType);
                }
                
                initializeShop();
            }
        });
    });
    
    document.querySelectorAll('#colorShop .equip').forEach(button => {
        button.addEventListener('click', () => {
            if (!button.classList.contains('equipped')) {
                document.querySelectorAll('#colorShop .equip').forEach(btn => {
                    btn.classList.remove('equipped');
                    btn.textContent = 'Equip';
                });
                
                button.classList.add('equipped');
                button.textContent = 'Equipped';
                snakeColor = button.dataset.color;
                localStorage.setItem('snakeColor', snakeColor);
            }
        });
    });
    
    document.querySelectorAll('#fruitShop .equip').forEach(button => {
        button.addEventListener('click', () => {
            if (!button.classList.contains('equipped')) {
                document.querySelectorAll('#fruitShop .equip').forEach(btn => {
                    btn.classList.remove('equipped');
                    btn.textContent = 'Equip';
                });
                
                button.classList.add('equipped');
                button.textContent = 'Equipped';
                foodType = button.dataset.fruit;
                localStorage.setItem('foodType', foodType);
            }
        });
    });
    
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        endGame();
        document.getElementById('gameScreen').style.display = 'none';
        document.getElementById('menuScreen').style.display = 'block';
    }
    switch (e.key) {
        case 'ArrowUp':
        case 'w':
        case 'W':
            if (direction !== 'down') direction = 'up';
            break;
        case 'ArrowDown':
        case 's':
        case 'S':
            if (direction !== 'up') direction = 'down';
            break;
        case 'ArrowLeft':
        case 'a':
        case 'A':
            if (direction !== 'right') direction = 'left';
            break;
        case 'ArrowRight':
        case 'd':
        case 'D':
            if (direction !== 'left') direction = 'right';
            break;
    }
});

function isMobileDevice() {
    return /Mobi|Android/i.test(navigator.userAgent);
}

window.addEventListener('load', () => {
    if (isMobileDevice()) {
        document.getElementById('mobileControls').style.display = 'block';

        document.getElementById('up').addEventListener('touchstart', () => setDirection('up', 'down'));
        document.getElementById('down').addEventListener('touchstart', () => setDirection('down', 'up'));
        document.getElementById('left').addEventListener('touchstart', () => setDirection('left', 'right'));
        document.getElementById('right').addEventListener('touchstart', () => setDirection('right', 'left'));

        const buttons = document.querySelectorAll('#mobileControls button');
        buttons.forEach((button) => {
            button.addEventListener('touchstart', (e) => e.preventDefault());
        });
    }
});

function setDirection(newDirection, oppositeDirection) {
    if (typeof direction === 'undefined') {
        console.error('Direction is not defined!');
        return;
    }
    if (direction !== oppositeDirection) {
        direction = newDirection;
    }
}

function createSnowflakes() {
    const snowflake = document.createElement('div');
    snowflake.className = 'snow';
    snowflake.style.left = Math.random() * window.innerWidth + 'px';
    snowflake.style.opacity = Math.random();
    snowflake.style.animation = `snowfall ${Math.random() * 3 + 2}s linear infinite`;
    document.body.appendChild(snowflake);
    
    setTimeout(() => snowflake.remove(), 5000);
}

setInterval(createSnowflakes, 100);

document.getElementById('up').addEventListener('touchstart', () => setDirection('up', 'down'));
document.getElementById('down').addEventListener('touchstart', () => setDirection('down', 'up'));
document.getElementById('left').addEventListener('touchstart', () => setDirection('left', 'right'));
document.getElementById('right').addEventListener('touchstart', () => setDirection('right', 'left'));

document.querySelectorAll('.control-btn').forEach((btn) => {
    btn.addEventListener('touchstart', (e) => e.preventDefault());
});
        function startGame() {
        snake = [{x: 200, y: 200}];
        direction = 'right';
        score = 0;
        applesEaten = 0;
        document.getElementById('currentScore').textContent = '0';
        spawnFood();
        if (gameLoop) clearInterval(gameLoop);
        gameLoop = setInterval(gameStep, gameSpeed);
    }
    
    function spawnFood() {
        let margin = Math.min(2 + Math.floor(applesEaten / 4), 8);
        let minX = margin * gridSize;
        let maxX = canvas.width - margin * gridSize;
        let minY = margin * gridSize;
        let maxY = canvas.height - margin * gridSize;
        
        let validPosition = false;
        while (!validPosition) {
            food.x = Math.floor(Math.random() * ((maxX - minX) / gridSize)) * gridSize + minX;
            food.y = Math.floor(Math.random() * ((maxY - minY) / gridSize)) * gridSize + minY;
            
            validPosition = true;
            for (let segment of snake) {
                if (food.x === segment.x && food.y === segment.y) {
                    validPosition = false;
                    break;
                }
            }
        }
    }
    
    function gameStep() {
        const head = {x: snake[0].x, y: snake[0].y};
        
        switch(direction) {
            case 'up': head.y -= gridSize; break;
            case 'down': head.y += gridSize; break;
            case 'left': head.x -= gridSize; break;
            case 'right': head.x += gridSize; break;
        }
    
        if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
            endGame();
            return;
        }
    
        for (let i = 0; i < snake.length; i++) {
            if (head.x === snake[i].x && head.y === snake[i].y) {
                endGame();
                return;
            }
        }
    
        snake.unshift(head);
    
        if (head.x === food.x && head.y === food.y) {
            score += 10;
            const isNearEdge = food.x <= gridSize * 2 || food.x >= canvas.width - gridSize * 2 ||
                              food.y <= gridSize * 2 || food.y >= canvas.height - gridSize * 2;
            const coinReward = isNearEdge ? 15 : 5;
            coins += coinReward;
            localStorage.setItem('snakeCoins', coins);
            document.getElementById('coinCount').textContent = coins;
            
            applesEaten++;
            document.getElementById('currentScore').textContent = score;
            spawnFood();
        } else {
            snake.pop();
        }
    
        if (score > highScore) {
            highScore = score;
            localStorage.setItem('snakeHighScore', highScore);
            document.getElementById('highScore').textContent = highScore;
        }
    
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        snake.forEach((segment, index) => {
            ctx.fillStyle = index === 0 ? snakeColor : shadeColor(snakeColor, -20);
            ctx.fillRect(segment.x, segment.y, gridSize - 2, gridSize - 2);
        });
    
        ctx.fillStyle = getFoodColor();
        ctx.fillRect(food.x, food.y, gridSize - 2, gridSize - 2);
    }
    
    function endGame() {
        clearInterval(gameLoop);
        document.getElementById('finalScore').textContent = score;
        document.getElementById('gameOver').style.display = 'block';
    }
    
    function getFoodColor() {
        const foodColors = {
            apple: '#ff6b6b',
            banana: '#ffd700',
            orange: '#ffa500',
            plum: '#dda0dd',
            dragonfruit: '#ff69b4',
            strawberry: '#ff4757',
            grape: '#5352ed',
            watermelon: '#2ed573',
            starfruit: '#ffd32a',
            crms: '#AAFF00'
        };
        return foodColors[foodType] || '#ff6b6b';
    }
    
    function shadeColor(color, percent) {
        const num = parseInt(color.replace('#',''), 16),
        amt = Math.round(2.55 * percent),
        R = (num >> 16) + amt,
        G = (num >> 8 & 0x00FF) + amt,
        B = (num & 0x0000FF) + amt;
        return '#' + (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (G<255?G<1?0:G:255)*0x100 + (B<255?B<1?0:B:255)).toString(16).slice(1);
    }
    
    document.getElementById('playBtn').addEventListener('click', () => {
        document.getElementById('menuScreen').style.display = 'none';
        document.getElementById('gameScreen').style.display = 'block';
        document.getElementById('gameOver').style.display = 'none';
        startGame();
    });
    
    document.getElementById('shopBtn').addEventListener('click', () => {
        document.getElementById('menuScreen').style.display = 'none';
        document.getElementById('gameScreen').style.display = 'none';
        document.getElementById('shopScreen').style.display = 'block';
        document.getElementById('gameOver').style.display = 'none';
    });
    
    document.getElementById('backToMenu').addEventListener('click', () => {
        document.getElementById('shopScreen').style.display = 'none';
        document.getElementById('gameScreen').style.display = 'none';
        document.getElementById('menuScreen').style.display = 'block';
        document.getElementById('gameOver').style.display = 'none';
    });
    
    document.getElementById('playAgain').addEventListener('click', () => {
        document.getElementById('gameOver').style.display = 'none';
        startGame();
    });
    
    document.getElementById('creditsBtn').addEventListener('click', () => {
        document.getElementById('creditsPopup').style.display = 'block';
    });
    
    document.getElementById('closeCredits').addEventListener('click', () => {
        document.getElementById('creditsPopup').style.display = 'none';
    });
    </script>
    </body>
    </html>