javascript:(function() {
    // Add styles for the cool font and midnight color theme for the GUI
    var style = document.createElement('style');
    style.innerHTML = `
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .draggable {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #000000; /* Midnight black background for the GUI */
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
            z-index: 999999;
            cursor: move;
            width: 600px;  /* Horizontal layout (wider than tall) */
            height: 400px; /* Adjust height to fit content */
            overflow: hidden;
        }
        .title {
            font-family: 'Roboto', sans-serif;
            font-size: 32px;
            font-weight: bold;
            color: #ffffff;
            text-align: center;
            margin-bottom: 15px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-style: italic;
        }
        .draggable .controls {
            background-color: #1e1e2f; /* Slightly lighter midnight color for controls */
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            flex-wrap: wrap; /* Allow controls to wrap for smaller spaces */
        }
        .draggable .controls input,
        .draggable .controls button {
            background-color: #2b2b46; /* Midnight dark blue for buttons */
            color: white;
            font-family: 'Roboto', sans-serif;
            border: none;
            border-radius: 10px;
            padding: 8px;
            margin-right: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .draggable .controls button {
            width: 120px;
        }
        .draggable .controls input {
            width: 60px;
        }
        .draggable .controls button:hover {
            background-color: #506176; /* Darker blue for hover effect */
            transform: scale(1.05);
        }
        .draggable .controls button:active {
            background-color: #3e4f65; /* Even darker blue for active state */
            transform: scale(0.95);
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(5, 40px); /* Smaller tile size */
            grid-template-rows: repeat(5, 40px);    /* Smaller tile size */
            gap: 5px;
            justify-content: center;
            margin-top: 10px;
            overflow: hidden;
        }
        .grid div {
            background-color: #1f2333; /* Deep dark blue tile background */
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px; /* Smaller font size for the tiles */
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .grid div:hover {
            background-color: #2b2f46; /* Slightly lighter shade for hover */
        }
    `;
    document.head.appendChild(style);

    // Variables for storing grid data and the number of safe spots
    var gridData = [];
    var gridSize = 25;
    var numSafeSpots = 20; // Default number of safe spots

    // Function to generate and render the grid with bombs
    function generateGrid() {
        // If the grid already exists, remove it first
        var existingGrid = document.getElementById('minesGrid');
        if (existingGrid) {
            existingGrid.remove();
        }

        // Create the grid container
        var grid = document.createElement('div');
        grid.id = 'minesGrid';
        grid.classList.add('grid');

        // Array to store tile data (true for mine, false for safe)
        gridData = new Array(gridSize).fill(false);

        // Calculate number of mines based on the number of safe spots
        var numMines = gridSize - numSafeSpots;

        // Randomly place bombs (mines)
        for (var i = 0; i < numMines; i++) {
            var randomIndex = Math.floor(Math.random() * gridSize);
            while (gridData[randomIndex] === true) { // Ensure unique random spots for mines
                randomIndex = Math.floor(Math.random() * gridSize);
            }
            gridData[randomIndex] = true; // Mark as a mine
        }

        // Create and add tiles to the grid
        for (var i = 0; i < gridSize; i++) {
            var tile = document.createElement('div');
            tile.dataset.index = i; // Store the index for each tile

            // Set tile content based on whether it's a mine or safe
            tile.innerText = gridData[i] ? '❓' : '⭐'; // Question marks as '❓' for safe spots and stars as '⭐' for bombs

            grid.appendChild(tile);
        }

        // Append the grid to the draggable container
        document.getElementById('draggableContainer').appendChild(grid);
    }

    // Function to update the number of safe spots and regenerate the grid
    function updateSafeSpots() {
        // Get the number of safe spots from the input
        var inputSafeSpots = document.getElementById('safeSpotsInput').value;
        numSafeSpots = Math.min(Math.max(inputSafeSpots, 1), gridSize - 1); // Ensure the value is between 1 and 24

        // Regenerate the grid with the updated number of safe spots
        generateGrid();
    }

    // Function to refresh the bomb locations randomly
    function refreshBombs() {
        // Reset the grid data
        gridData = new Array(gridSize).fill(false);

        // Calculate number of mines based on the number of safe spots
        var numMines = gridSize - numSafeSpots;

        // Randomly place bombs (mines)
        for (var i = 0; i < numMines; i++) {
            var randomIndex = Math.floor(Math.random() * gridSize);
            while (gridData[randomIndex] === true) { // Ensure unique random spots for mines
                randomIndex = Math.floor(Math.random() * gridSize);
            }
            gridData[randomIndex] = true; // Mark as a mine
        }

        // Update the tile content based on new bomb positions
        var gridTiles = document.querySelectorAll('#minesGrid div');
        gridTiles.forEach(function(tile, index) {
            tile.innerText = gridData[index] ? '❓' : '⭐'; // Question marks as '❓' for safe spots and stars as '⭐' for bombs
        });
    }

    // Function to make the box draggable
    function makeDraggable(el) {
        var offsetX, offsetY;
        el.onmousedown = function(e) {
            offsetX = e.clientX - el.getBoundingClientRect().left;
            offsetY = e.clientY - el.getBoundingClientRect().top;
            document.onmousemove = function(e) {
                el.style.left = e.clientX - offsetX + 'px';
                el.style.top = e.clientY - offsetY + 'px';
            };
            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    }

    // Create and display the draggable container and controls
    function createControls() {
        // Create the draggable container
        var draggableContainer = document.createElement('div');
        draggableContainer.id = 'draggableContainer';
        draggableContainer.classList.add('draggable');
        document.body.appendChild(draggableContainer);

        // Create a title at the top of the container
        var title = document.createElement('div');
        title.classList.add('title');
        title.innerText = 'RadarX';
        draggableContainer.appendChild(title);

        // Create a controls panel inside the draggable container
        var controls = document.createElement('div');
        controls.classList.add('controls');

        // Label and input for selecting number of safe spots
        var label = document.createElement('label');
        label.innerText = 'Number of Safe Spots: ';
        controls.appendChild(label);

        var input = document.createElement('input');
        input.type = 'number';
        input.id = 'safeSpotsInput';
        input.min = 1;
        input.max = gridSize - 1;
        input.value = numSafeSpots;
        controls.appendChild(input);

        // Button to update safe spots
        var updateButton = document.createElement('button');
        updateButton.innerText = 'Update Safe Spots';
        updateButton.addEventListener('click', updateSafeSpots);
        controls.appendChild(updateButton);

        // Button to refresh bomb locations (changed text to "Refresh")
        var refreshButton = document.createElement('button');
        refreshButton.innerText = 'Refresh'; // Updated text
        refreshButton.addEventListener('click', refreshBombs);
        controls.appendChild(refreshButton);

        // Append controls to the draggable container
        draggableContainer.appendChild(controls);

        // Make the draggable container movable
        makeDraggable(draggableContainer);
    }

    // Initialize the game
    createControls();
    generateGrid();
})();