<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 lighting-1 {
  50% {
    background-color: rgba(var(--color-1), 0.25);
    box-shadow: 0 5px 24px 3px rgba(var(--color-1), 0.25);
  }
}

@keyframes lighting-2 {
  50% {
    background-color: rgba(var(--color-2), 0.4);
    box-shadow: 0 5px 24px 3px rgba(var(--color-2), 0.3);
  }
}

@keyframes lighting-3 {
  50% {
    background-color: rgba(var(--color-3), 0.25);
    box-shadow: 0 5px 24px 3px rgba(var(--color-3), 0.25);
  }
}

    @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); }
}

    .bottomright {
        position: absolute;
        bottom: 8px;
        right: 16px;
        font-size: 14px;
    }
    
    .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;
    }

    .shoptitle {
        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;
        margin-top: 20px;
    }
    
    @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: rgb(55, 255, 0);
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }

    .coin-display span {
        margin-left: 10px;
    }
    
    .lights {
        display: flex;
        justify-content: center;
        flex-flow: wrap;
        gap: 30px 33px;
        font-size: 0.87em;
        padding: 30px 0;
        overflow: hidden;
        pointer-events: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    .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;
    }

    .top-right {
      position: fixed;
      top: 20px;
      right: 20px;
      box-shadow: none !important;
    }

    .top-right button {
      background: #00c975;
      border: 2px solid #8080806d;
      font-family: 'Press Start 2P', cursive;
      color: rgb(55, 90, 146);
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 8px;
      box-shadow: none !important;
    }

    .top-right button:hover {
      background: #12a769;
      box-shadow: none !important;
    }

    .top-right button:active {
      background: #12a769;
      box-shadow: none !important;
  }
    
    .kill-switch {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1000;
        background: #ff0808;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        color: rgb(255, 18, 18);
        font-family: 'Press Start 2P', cursive;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    
    .kill-switch:hover {
        background: #696b05;
    }
    
    @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
        }

        .orange {
            color:orange
        }

        .white {
            color:rgba(255, 255, 255, 0.707)
        }

        #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>
        <p class="bottomright" style="color: red">Happy Christmas, and have an amazing New Year ;)</p>

        <!-- <p class="lights" style="color: red">Happy Christmas, and have an amazing New Year ;) - KetchupCat72_Dev & AltzTechz</p> -->

        <div class="top-right">
            <button id="thankyou-button" onclick="window.location.href='changelog.html' ">Changelog!</button>
        </div>

        <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">SNAKE</span></h1>
            <button class="btn" id="playBtn"><span class="white">PLAY</span></button><br>
            <button class="btn" id="shopBtn"><span class="white">SHOP</span></button><br>
            <button class="btn" id="creditsBtn"><span class="white">CREDITS</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="550"></canvas>
            </div>
        </div>
    
        <div class="shop-screen" id="shopScreen" style="display: none;">
            <h1 class="shoptitle"><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>
                        <p style="color: red"><u>UNAVAILABLE</u></p>
                    </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>
                        <p style="color: red"><u>UNAVAILABLE</u></p>
                    </div>
                </div>
            </div>
            <button class="btn" id="backToMenu" onclick="window.location.reload()">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"><u>CREDITS</u>:</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>
//         document.getElementById("shopBtn").addEventListener("click", function () {
//   const lights = document.querySelector(".lights");
//   if (lights) {
//     lights.remove();
//   }
// });

document.getElementById("shopBtn").addEventListener("click", function() {
    const textfix = document.querySelector(".bottomright");
    if (textfix) {
        textfix.remove();
    }
});

document.getElementById("playBtn").addEventListener("click", function () {
  const topright = document.querySelector(".top-right");
  if (topright) {
    topright.remove();
  }
});

    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';
    }

    if (keyLock) return;
    keyLock = true;

    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;
    }
}

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;
    keyLock = false;
    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;
    }

    keyLock = false;

    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>