<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>21: 3D Minesweeper</title>
    <style>
        :root {
            --primary: #0f1923;
            --secondary: #1a2a3a;
            --accent: #00f2ff;
            --accent-dark: #007a80;
            --text: #e0e0e0;
            --text-dim: #a0a0a0;
            --danger: #ff3860;
            --success: #2ecc71;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            background-color: var(--primary);
            color: var(--text);
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            overflow-x: hidden;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 300;
            letter-spacing: 1px;
            margin-bottom: 10px;
            background: linear-gradient(90deg, var(--accent), var(--accent-dark));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
        }

        h1::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        label {
            margin-bottom: 5px;
            color: var(--text-dim);
            font-size: 0.9rem;
        }

        select, button {
            background-color: var(--secondary);
            color: var(--text);
            border: 1px solid var(--accent-dark);
            border-radius: 4px;
            padding: 8px 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

        select {
            min-width: 100px;
        }

        button:hover {
            background-color: var(--accent-dark);
            color: white;
        }

        .game-info {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 500px;
            margin-bottom: 20px;
            background-color: var(--secondary);
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .info-item {
            text-align: center;
        }

        .info-label {
            font-size: 0.8rem;
            color: var(--text-dim);
            margin-bottom: 5px;
        }

        .info-value {
            font-size: 1.2rem;
            font-weight: bold;
        }

        .mines-left {
            color: var(--accent);
        }

        .timer {
            color: var(--success);
        }

        .game-container {
            perspective: 1000px;
            margin-bottom: 30px;
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(var(--cols, 10), 1fr);
            grid-template-rows: repeat(var(--rows, 10), 1fr);
            gap: 2px;
            transform-style: preserve-3d;
            transform: rotateX(10deg) rotateY(-5deg);
            box-shadow: 0 10px 30px rgba(0, 242, 255, 0.1);
        }

        .cell {
            width: 30px;
            height: 30px;
            background-color: var(--secondary);
            border: 1px solid var(--accent-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            transition: all 0.2s ease;
            transform-style: preserve-3d;
        }

        .cell:hover {
            background-color: #223344;
        }

        .cell.revealed {
            background-color: #1a1a2e;
            transform: translateZ(-5px);
        }

        .cell.mine {
            background-color: var(--danger);
        }

        .cell.flagged::after {
            content: 'ðŸš©';
            position: absolute;
            font-size: 16px;
        }

        .cell.mine::after {
            content: 'ðŸ’£';
            position: absolute;
            font-size: 16px;
        }

        .adjacent-1 { color: #00a8ff; }
        .adjacent-2 { color: #00ff9d; }
        .adjacent-3 { color: #f6ff00; }
        .adjacent-4 { color: #ff9500; }
        .adjacent-5 { color: #ff2d00; }
        .adjacent-6 { color: #ff00d4; }
        .adjacent-7 { color: #b700ff; }
        .adjacent-8 { color: #7b00ff; }  
        .adjacent-9 { color: #00fffb; }  
        .adjacent-10 { color: #00ff80; }  
        .adjacent-11 { color: #bfff00; }  
        .adjacent-12 { color: #ffcc00; }  
        .adjacent-13 { color: #ff6600; }  
        .adjacent-14 { color: #ff0066; } 
        .adjacent-15 { color: #cc00ff; }  
        .adjacent-16 { color: #0066ff; }  
        .adjacent-17 { color: #00ffcc; }  
        .adjacent-18 { color: #66ff00; }  
        .adjacent-19 { color: #ffea00; }  
        .adjacent-20 { color: #ff8800; }
        .adjacent-21 { color: #ff0055; }  
        .adjacent-22 { color: #aa00ff; } 
        .adjacent-23 { color: #0099ff; }  
        .adjacent-24 { color: #00ffaa; }  
        .adjacent-25 { color: #eeff00; }
        .adjacent-26 { color: #ffffff; }
        .adjacent-27 { color: #000000; }

        .game-over {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(15, 25, 35, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .game-over.active {
            opacity: 1;
            pointer-events: all;
        }

        .game-over-content {
            background-color: var(--primary);
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            border: 1px solid var(--accent);
            box-shadow: 0 0 30px rgba(0, 242, 255, 0.3);
            max-width: 400px;
            width: 90%;
        }

        .game-over h2 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: var(--accent);
        }

        .game-over p {
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        .game-over button {
            padding: 10px 25px;
            font-size: 1rem;
            background-color: var(--accent-dark);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .game-over button:hover {
            background-color: var(--accent);
            transform: translateY(-2px);
        }

        .layer-controls {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .layer-btn {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--secondary);
            border: 1px solid var(--accent-dark);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .layer-btn:hover {
            background-color: var(--accent-dark);
        }

        .current-layer {
            font-size: 0.9rem;
            min-width: 60px;
            text-align: center;
        }

        @media (max-width: 600px) {
            .cell {
                width: 25px;
                height: 25px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .controls {
                flex-direction: column;
                align-items: center;
            }
        }
        
        .lives {
            color: #ff3860; /* Danger red */
        }
                    
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10000;
            border: none;
            overflow: visible;
        }
        
        #reveal-board {
          background: linear-gradient(90deg, #ff0000, #ff6600);
          color: white;
          border: none;
          animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
          0% { opacity: 0.7; }
          50% { opacity: 1; }
          100% { opacity: 0.7; }
        }
    </style>
</head>
<body>
    <iframe src="/navbar3.1" width="100%" height="100" class="navbar"></iframe>
    <header style="margin-top: 120px;">
        <h1>21<br>3D Minesweeper</h1>
        <p>Navigate the depths to uncover the truth</p>
    </header>
    
    

    <div class="controls">
        <div class="control-group">
            <label for="difficulty">Difficulty</label>
            <select id="difficulty">
                <option value="easy">Easy</option>
                <option value="medium" selected>Medium</option>
                <option value="hard">Hard</option>
                <option value="custom">Custom</option>
            </select>
        </div>

        <div class="control-group" id="custom-controls" style="display: none;">
            <label for="width">Width</label>
            <select id="width">
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10" selected>10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
            </select>
        </div>

        <div class="control-group" id="custom-controls2" style="display: none;">
            <label for="height">Height</label>
            <select id="height">
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10" selected>10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
            </select>
        </div>

        <div class="control-group" id="custom-controls3" style="display: none;">
            <label for="depth">Depth</label>
            <select id="depth">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3" selected>3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
            </select>
        </div>

        <div class="control-group" id="custom-controls4" style="display: none;">
            <label for="mines">Mines %</label>
            <select id="mines">
                <option value="3">3%</option>
                <option value="5">5%</option>
                <option value="10">10%</option>
                <option value="15" selected>15%</option>
                <option value="20">20%</option>
                <option value="25">25%</option>
                <option value="30">30%</option>
                <option value="85">85% (joke, might crash the game entirely)</option>
                <option value="95">95% (stop)</option>
            </select>
        </div>

        <div class="control-group">
            <button id="new-game">New Game</button>
        </div>
    </div>

    <div class="game-info">
        <div class="info-item">
            <div class="info-label">MINES LEFT</div>
            <div class="info-value mines-left" id="mines-count">0</div>
        </div>
        <div class="info-item">
            <div class="info-label">TIME</div>
            <div class="info-value timer" id="timer">0</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">LIVES</div>
          <div class="info-value lives" id="lives">999</div>
        </div>
    </div>

    <div class="layer-controls">
        <div class="layer-btn" id="prev-layer">â—€</div>
        <div class="current-layer" id="current-layer">Layer 1/3</div>
        <div class="layer-btn" id="next-layer">â–¶</div>
    </div>

    <div class="game-container" id="game-container">
        <!-- Game board will be generated here -->
    </div>
    
    <p>For the real deal, click <a href="/content/programs/21" style="color: yellow;">here</a></p>

    <div class="game-over" id="game-over">
        <div class="game-over-content">
            <h2 id="game-result">VICTORY</h2>
            <p id="game-message">You've successfully cleared all mines!</p>
            <button id="play-again">Play Again</button>
        </div>
    </div>
    
    <div class="control-group">
      <button id="reveal-board">Reveal Board (CHEAT)</button>
    </div>

    <script>
        // Game state
        let gameState = {
            board: [],
            mineCount: 0,
            flaggedCount: 0,
            revealedCount: 0,
            totalCells: 0,
            isGameOver: false,
            isFirstClick: true,
            startTime: 0,
            timerInterval: null,
            currentLayer: 0,
            layers: 3,
            width: 10,
            height: 10,
            lives: 999
        };

        // DOM elements
        const gameContainer = document.getElementById('game-container');
        const gameBoard = document.createElement('div');
        gameBoard.className = 'game-board';
        gameContainer.appendChild(gameBoard);
        
        const difficultySelect = document.getElementById('difficulty');
        const widthSelect = document.getElementById('width');
        const heightSelect = document.getElementById('height');
        const depthSelect = document.getElementById('depth');
        const minesSelect = document.getElementById('mines');
        const customControls = document.getElementById('custom-controls');
        const customControls2 = document.getElementById('custom-controls2');
        const customControls3 = document.getElementById('custom-controls3');
        const customControls4 = document.getElementById('custom-controls4');
        const newGameBtn = document.getElementById('new-game');
        const minesCount = document.getElementById('mines-count');
        const timerDisplay = document.getElementById('timer');
        const gameOverScreen = document.getElementById('game-over');
        const gameResult = document.getElementById('game-result');
        const gameMessage = document.getElementById('game-message');
        const playAgainBtn = document.getElementById('play-again');
        const prevLayerBtn = document.getElementById('prev-layer');
        const nextLayerBtn = document.getElementById('next-layer');
        const currentLayerDisplay = document.getElementById('current-layer');

        // Difficulty presets
        const difficulties = {
            easy: { width: 8, height: 8, layers: 3, mines: 5 },
            medium: { width: 10, height: 10, layers: 3, mines: 5 },
            hard: { width: 12, height: 12, layers: 5, mines: 5 },
            custom: { width: 10, height: 10, layers: 3, mines: 5 }
        };

        // Initialize game
        function initGame() {
            const maxPossibleMines = (gameState.width * gameState.height * gameState.layers) - 9; // 9 = first click + adjacent 3D cells
            if (gameState.mineCount > maxPossibleMines) {
                alert(`DIABOLICAL ERROR: Max mines for this board is ${maxPossibleMines}. Lower your mine % or grow the board.`);
                return;
            }
            
            const difficulty = difficultySelect.value;
            
            gameState.lives = 999;
            document.getElementById('lives').textContent = '999';
            
            if (difficulty === 'custom') {
                gameState.width = parseInt(widthSelect.value);
                gameState.height = parseInt(heightSelect.value);
                gameState.layers = parseInt(depthSelect.value);
                gameState.minePercentage = parseInt(minesSelect.value);
            } else {
                const preset = difficulties[difficulty];
                gameState.width = preset.width;
                gameState.height = preset.height;
                gameState.layers = preset.layers;
                gameState.minePercentage = preset.mines;
            }
            
            gameState.currentLayer = 0;
            updateLayerDisplay();
            
            resetGameState();
            generateBoard();
            renderBoard();
        }

        // Reset game state
        function resetGameState() {
            gameState.board = [];
            gameState.isGameOver = false;
            gameState.isFirstClick = true;
            gameState.flaggedCount = 0;
            gameState.revealedCount = 0;
            gameState.totalCells = gameState.width * gameState.height * gameState.layers;
            gameState.mineCount = Math.floor(gameState.totalCells * (gameState.minePercentage / 100));
            
            // Initialize 3D board
            for (let z = 0; z < gameState.layers; z++) {
                gameState.board[z] = [];
                for (let x = 0; x < gameState.width; x++) {
                    gameState.board[z][x] = [];
                    for (let y = 0; y < gameState.height; y++) {
                        gameState.board[z][x][y] = {
                            isMine: false,
                            isRevealed: false,
                            isFlagged: false,
                            adjacentMines: 0
                        };
                    }
                }
            }
            
            minesCount.textContent = gameState.mineCount;
            stopTimer();
            timerDisplay.textContent = '0';
        }

        // Generate board with mines
        function generateBoard() {
            // Mines will be placed after first click to ensure first click is safe
        }

        // Place mines (after first click)
        function placeMines(firstX, firstY, firstZ) {
            let minesPlaced = 0;
            
            while (minesPlaced < gameState.mineCount) {
                const z = Math.floor(Math.random() * gameState.layers);
                const x = Math.floor(Math.random() * gameState.width);
                const y = Math.floor(Math.random() * gameState.height);
                
                // Don't place mine on first click position or adjacent cells
                const isFirstClickArea = 
                    Math.abs(z - firstZ) <= 1 && 
                    Math.abs(x - firstX) <= 1 && 
                    Math.abs(y - firstY) <= 1;
                
                if (!gameState.board[z][x][y].isMine && !isFirstClickArea) {
                    gameState.board[z][x][y].isMine = true;
                    minesPlaced++;
                }
            }
            
            // Calculate adjacent mines for all cells
            for (let z = 0; z < gameState.layers; z++) {
                for (let x = 0; x < gameState.width; x++) {
                    for (let y = 0; y < gameState.height; y++) {
                        if (!gameState.board[z][x][y].isMine) {
                            gameState.board[z][x][y].adjacentMines = countAdjacentMines(z, x, y);
                        }
                    }
                }
            }
        }

        // Count adjacent mines
        function countAdjacentMines(z, x, y) {
            let count = 0;
            
            for (let dz = -1; dz <= 1; dz++) {
                for (let dx = -1; dx <= 1; dx++) {
                    for (let dy = -1; dy <= 1; dy++) {
                        // Skip the cell itself
                        if (dz === 0 && dx === 0 && dy === 0) continue;
                        
                        const nz = z + dz;
                        const nx = x + dx;
                        const ny = y + dy;
                        
                        // Check bounds
                        if (nz >= 0 && nz < gameState.layers &&
                            nx >= 0 && nx < gameState.width &&
                            ny >= 0 && ny < gameState.height) {
                            if (gameState.board[nz][nx][ny].isMine) {
                                count++;
                            }
                        }
                    }
                }
            }
            
            return count;
        }

        // Render board
        function renderBoard() {
            gameBoard.innerHTML = '';
            gameBoard.style.setProperty('--cols', gameState.width);
            gameBoard.style.setProperty('--rows', gameState.height);
            
            const currentLayer = gameState.currentLayer;
            
            for (let y = 0; y < gameState.height; y++) {
                for (let x = 0; x < gameState.width; x++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    
                    const cellData = gameState.board[currentLayer][x][y];
                    
                    if (cellData.isRevealed) {
                        cell.classList.add('revealed');
                        
                        if (cellData.isMine) {
                            cell.classList.add('mine');
                        } else if (cellData.adjacentMines > 0) {
                            cell.textContent = cellData.adjacentMines;
                            cell.classList.add(`adjacent-${cellData.adjacentMines}`);
                        }
                    } else if (cellData.isFlagged) {
                        cell.classList.add('flagged');
                    }
                    
                    cell.dataset.x = x;
                    cell.dataset.y = y;
                    cell.dataset.z = currentLayer;
                    
                    cell.addEventListener('click', () => handleCellClick(x, y, currentLayer));
                    cell.addEventListener('contextmenu', (e) => {
                        e.preventDefault();
                        handleRightClick(x, y, currentLayer);
                    });
                    
                    gameBoard.appendChild(cell);
                }
            }
        }

        // Handle cell click
        function handleCellClick(x, y, z) {
            if (gameState.isGameOver) return;
            
            const cell = gameState.board[z][x][y];
            
            if (cell.isRevealed || cell.isFlagged) return;
            
            if (gameState.isFirstClick) {
                gameState.isFirstClick = false;
                placeMines(x, y, z);
                startTimer();
            }
            
            revealCell(z, x, y);
            renderBoard();
            checkGameStatus();
        }

        // Handle right click (flag)
        function handleRightClick(x, y, z) {
            if (gameState.isGameOver) return;
            
            const cell = gameState.board[z][x][y];
            
            if (cell.isRevealed) return;
            
            if (cell.isFlagged) {
                cell.isFlagged = false;
                gameState.flaggedCount--;
            } else {
                cell.isFlagged = true;
                gameState.flaggedCount++;
            }
            
            minesCount.textContent = gameState.mineCount - gameState.flaggedCount;
            renderBoard();
        }

        // Reveal cell (with recursive reveal for empty cells)
        function revealCell(z, x, y) {
            if (z < 0 || z >= gameState.layers || 
                x < 0 || x >= gameState.width || 
                y < 0 || y >= gameState.height) {
                return;
            } 
          
            const cell = gameState.board[z][x][y];
          
            if (cell.isRevealed || cell.isFlagged) return;
          
            cell.isRevealed = true;
            gameState.revealedCount++;
          
            if (cell.isMine) {
                gameState.lives--;
                document.getElementById('lives').textContent = gameState.lives;
            
                if (gameState.lives <= 0) {
                    gameOver(false);
                } else {
                // Just reveal this mine but continue playing
                    renderBoard();
                }
                return;
            }
            
            // If empty cell, reveal adjacent cells
            if (cell.adjacentMines === 0) {
                for (let dz = -1; dz <= 1; dz++) {
                    for (let dx = -1; dx <= 1; dx++) {
                        for (let dy = -1; dy <= 1; dy++) {
                            // Skip the cell itself
                            if (dz === 0 && dx === 0 && dy === 0) continue;
                            
                            revealCell(z + dz, x + dx, y + dy);
                        }
                    }
                }
            }
        }

        // Check game status
        function checkGameStatus() {
            // Check for win
            if (gameState.revealedCount === gameState.totalCells - gameState.mineCount) {
                gameOver(true);
            }
        }

        // Game over
        function gameOver(isWin) {
          gameState.isGameOver = true;
          stopTimer();
          
          if (!isWin) {
            // Only reveal all mines if game is truly over (no lives left)
            if (gameState.lives <= 0) {
              for (let z = 0; z < gameState.layers; z++) {
                for (let x = 0; x < gameState.width; x++) {
                  for (let y = 0; y < gameState.height; y++) {
                    if (gameState.board[z][x][y].isMine) {
                      gameState.board[z][x][y].isRevealed = true;
                    }
                  }
                }
              }
            }
          }
          
          renderBoard();
          
          if (isWin) {
            gameResult.textContent = 'VICTORY';
            gameMessage.textContent = `You cleared all mines in ${timerDisplay.textContent} seconds with ${gameState.lives} lives left!`;
          } else if (gameState.lives <= 0) {
            gameResult.textContent = 'GAME OVER';
            gameMessage.textContent = 'You triggered too many mines!';
          } else {
            // Don't show game over screen if there are lives left
            return;
          }
          
          gameOverScreen.classList.add('active');
        }

        // Timer functions
        function startTimer() {
            gameState.startTime = Date.now();
            gameState.timerInterval = setInterval(updateTimer, 1000);
        }

        function updateTimer() {
            const elapsed = Math.floor((Date.now() - gameState.startTime) / 1000);
            timerDisplay.textContent = elapsed;
        }

        function stopTimer() {
            clearInterval(gameState.timerInterval);
        }

        // Layer navigation
        function updateLayerDisplay() {
            currentLayerDisplay.textContent = `Layer ${gameState.currentLayer + 1}/${gameState.layers}`;
        }

        // Event listeners
        newGameBtn.addEventListener('click', initGame);
        playAgainBtn.addEventListener('click', () => {
            gameOverScreen.classList.remove('active');
            initGame();
        });

        difficultySelect.addEventListener('change', () => {
            const isCustom = difficultySelect.value === 'custom';
            customControls.style.display = isCustom ? 'flex' : 'none';
            customControls2.style.display = isCustom ? 'flex' : 'none';
            customControls3.style.display = isCustom ? 'flex' : 'none';
            customControls4.style.display = isCustom ? 'flex' : 'none';
        });

        prevLayerBtn.addEventListener('click', () => {
            if (gameState.currentLayer > 0) {
                gameState.currentLayer--;
                updateLayerDisplay();
                renderBoard();
            }
        });

        nextLayerBtn.addEventListener('click', () => {
            if (gameState.currentLayer < gameState.layers - 1) {
                gameState.currentLayer++;
                updateLayerDisplay();
                renderBoard();
            }
        });
        
        document.getElementById('reveal-board').addEventListener('click', function() {
          if (gameState.isGameOver) return;
          
          // For normal reveal (just show everything)
          for (let z = 0; z < gameState.layers; z++) {
            for (let x = 0; x < gameState.width; x++) {
              for (let y = 0; y < gameState.height; y++) {
                gameState.board[z][x][y].isRevealed = true;
              }
            }
          }
          
          renderBoard();
        });

        // Initialize first game
        initGame();
    </script>
</body>
</html>