<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 2048</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
        
        :root { --vh: 1vh; }

        body {
            margin: 0; padding: 0; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); font-family: 'Orbitron', monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; overflow: hidden; -webkit-user-select: none; user-select: none; min-height: calc(var(--vh, 1vh) * 100);
        }
        body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 219, 88, 0.2) 0%, transparent 50%); animation: floatingGradient 20s ease-in-out infinite; pointer-events: none; z-index: -1; }
        @keyframes floatingGradient { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } }
        
        h1 { margin: 10px 0; font-size: 48px; font-weight: 900; background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 3s ease-in-out infinite; text-shadow: 0 0 30px rgba(255, 255, 255, 0.5); text-align: center; }
        @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        
        #game-container { position: relative; width: 400px; height: 400px; perspective: 1000px; margin: 20px 0; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3)); }
        #game-cube { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transform: translateY(var(--translateY, 0px)) rotateX(var(--rotateX, -25deg)) rotateY(var(--rotateY, -35deg)); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); animation: floatCube 6s ease-in-out infinite; }
        @keyframes floatCube { 0%, 100% { --translateY: 0px; } 50% { --translateY: -10px; } }
        #game-cube.moving { animation: none; }
        
        .face { position: absolute; width: 300px; height: 300px; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 15px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 8px; padding: 15px; box-sizing: border-box; box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); }
        .front { transform: translateZ(150px); } .back { transform: rotateY(180deg) translateZ(150px); } .right { transform: rotateY(90deg) translateZ(150px); } .left { transform: rotateY(-90deg) translateZ(150px); } .top { transform: rotateX(90deg) translateZ(150px); } .bottom { transform: rotateX(-90deg) translateZ(150px); }
        
        .tile { background: rgba(255, 255, 255, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .tile-2 { background: linear-gradient(135deg, #eee4da, #f5f5f5); color: #776e65; box-shadow: 0 2px 10px rgba(238, 228, 218, 0.5); } .tile-4 { background: linear-gradient(135deg, #ede0c8, #f0e6d2); color: #776e65; box-shadow: 0 2px 10px rgba(237, 224, 200, 0.5); } .tile-8 { background: linear-gradient(135deg, #f2b179, #f5a623); color: #f9f6f2; box-shadow: 0 2px 15px rgba(242, 177, 121, 0.6); } .tile-16 { background: linear-gradient(135deg, #f59563, #f67c5f); color: #f9f6f2; box-shadow: 0 2px 15px rgba(245, 149, 99, 0.6); } .tile-32 { background: linear-gradient(135deg, #f67c5f, #e74c3c); color: #f9f6f2; box-shadow: 0 2px 15px rgba(246, 124, 95, 0.6); } .tile-64 { background: linear-gradient(135deg, #f65e3b, #c0392b); color: #f9f6f2; box-shadow: 0 3px 20px rgba(246, 94, 59, 0.7); } .tile-128 { background: linear-gradient(135deg, #edcf72, #f1c40f); color: #f9f6f2; font-size: 18px; box-shadow: 0 3px 20px rgba(237, 207, 114, 0.7); } .tile-256 { background: linear-gradient(135deg, #edcc61, #f39c12); color: #f9f6f2; font-size: 18px; box-shadow: 0 3px 20px rgba(237, 204, 97, 0.7); } .tile-512 { background: linear-gradient(135deg, #edc850, #e67e22); color: #f9f6f2; font-size: 18px; box-shadow: 0 4px 25px rgba(237, 200, 80, 0.8); } .tile-1024 { background: linear-gradient(135deg, #edc53f, #d35400); color: #f9f6f2; font-size: 16px; box-shadow: 0 4px 25px rgba(237, 197, 63, 0.8); } .tile-2048 { background: linear-gradient(135deg, #edc22e, #e74c3c); color: #f9f6f2; font-size: 16px; box-shadow: 0 5px 30px rgba(237, 194, 46, 0.9); animation: pulseGlow 2s ease-in-out infinite; }
        @keyframes pulseGlow { 0%, 100% { box-shadow: 0 5px 30px rgba(237, 194, 46, 0.9); } 50% { box-shadow: 0 5px 50px rgba(237, 194, 46, 1); } }
        
        .controls { margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
        button { padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 25px; cursor: pointer; font-size: 14px; font-family: 'Orbitron', monospace; font-weight: 700; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); position: relative; overflow: hidden; }
        button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; }
        button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); } button:hover::before { left: 100%; } button:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4); }
        
        .score-container { display: flex; gap: 30px; margin: 10px 0; font-size: 24px; font-weight: 700; }
        .score-box { background: rgba(255, 255, 255, 0.1); padding: 15px 25px; border-radius: 15px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; text-align: center; }
        .score-label { font-size: 14px; opacity: 0.8; margin-bottom: 5px; }
        .score-value { font-size: 28px; font-weight: 900; background: linear-gradient(45deg, #fff, #4ecdc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        
        .instructions { margin: 20px; text-align: center; max-width: 600px; line-height: 1.6; opacity: 0.9; font-size: 16px; }
        .key-hint { display: inline-block; background: rgba(255, 255, 255, 0.1); padding: 4px 8px; border-radius: 4px; font-family: 'Orbitron', monospace; margin: 0 2px; border: 1px solid rgba(255, 255, 255, 0.2); }
        
        .game-over { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 1000; animation: fadeIn 0.3s ease-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .game-over-content { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); padding: 40px; border-radius: 20px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(20px); animation: slideIn 0.5s ease-out; margin: 15px; }
        @keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .game-over h2 { font-size: 36px; margin-bottom: 20px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .game-over p { font-size: 20px; margin-bottom: 30px; opacity: 0.9; }

        /* --- АДАПТИВНОСТЬ --- */

        /* ПРАВИЛА ДЛЯ УЗКОГО ВЕРТИКАЛЬНОГО ЭКРАНА (ТЕЛЕФОНЫ В ПОРТРЕТНОМ РЕЖИМЕ) */
        @media (max-width: 600px) and (orientation: portrait) {
            body { justify-content: flex-start; padding-top: 3vh; padding-bottom: 3vh; }
            h1 { font-size: 28px; margin-bottom: 3vh; }
            .score-container { margin-bottom: 3vh; gap: 15px; }
            .score-box { padding: 10px 15px; } .score-label { font-size: 12px; } .score-value { font-size: 22px; }
            #game-container { width: 90vw; height: 90vw; margin: 0; }
            .face { width: 70vw; height: 70vw; margin-left: -35vw; margin-top: -35vw; gap: 6px; padding: 10px; }
            .front  { transform: translateZ(35vw); } .back { transform: rotateY(180deg) translateZ(35vw); } .right  { transform: rotateY(90deg) translateZ(35vw); } .left { transform: rotateY(-90deg) translateZ(35vw); } .top { transform: rotateX(90deg) translateZ(35vw); } .bottom { transform: rotateX(-90deg) translateZ(35vw); }
            .tile { font-size: 16px; }
            .controls { margin-top: 4vh; gap: 8px; }
            .controls button { width: 44px; height: 44px; padding: 0; font-size: 20px; line-height: 44px; text-align: center; }
            .controls button#new-game { width: auto; padding: 0 15px; font-size: 12px; }
            .instructions { font-size: 14px; }
            #zoom-toggle { display: none; } /* Кнопка зума не нужна в портретном режиме */
        }

        /* ПРАВИЛА ДЛЯ УЗКОГО ГОРИЗОНТАЛЬНОГО ЭКРАНА (ТЕЛЕФОНЫ В АЛЬБОМНОМ РЕЖИМЕ) */
        @media (max-height: 500px) and (orientation: landscape) {
            body { flex-direction: row; justify-content: center; gap: 2vw; padding: 0 2vw; }
            .header-group { display: flex; flex-direction: column; align-items: center; gap: 15px; }
            h1 { font-size: 28px; margin: 0; }
            .score-container { flex-direction: column; gap: 10px; margin: 0; }
            .score-box { padding: 8px 12px; } .score-label { font-size: 10px; } .score-value { font-size: 20px; }
            #game-container { width: 300px; height: 300px; margin: 0; }
            .face { width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; }
            .front { transform: translateZ(100px); } .back { transform: rotateY(180deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); }
            .controls { flex-direction: column; margin: 0; gap: 8px; }
            .controls button { width: 44px; height: 44px; padding: 0; font-size: 20px; line-height: 44px; text-align: center; }
            .instructions { display: none; }
            #zoom-toggle { display: none; }
        }
    </style>
</head>
<body>
    <div class="header-group">
        <h1>3D 2048</h1>
        <div class="score-container">
            <div class="score-box">
                <div class="score-label">СЧЁТ</div>
                <div class="score-value" id="score">0</div>
            </div>
            <div class="score-box">
                <div class="score-label">РЕКОРД</div>
                <div class="score-value" id="best-score">0</div>
            </div>
        </div>
    </div>
    <div id="game-container">
        <div id="game-cube">
            <div class="face front" id="front-face"></div>
            <div class="face back" id="back-face"></div>
            <div class="face right" id="right-face"></div>
            <div class="face left" id="left-face"></div>
            <div class="face top" id="top-face"></div>
            <div class="face bottom" id="bottom-face"></div>
        </div>
    </div>
    <div class="controls">
        <button id="new-game" title="Новая игра">Новая игра</button>
        <button id="rotate-left" title="Вращать влево">↶</button>
        <button id="rotate-right" title="Вращать вправо">↷</button>
        <button id="rotate-up" title="Вращать вверх">↥</button>
        <button id="rotate-down" title="Вращать вниз">↧</button>
    </div>
    <!-- <<< ИЗМЕНЕНИЕ >>> -->
    <div class="instructions">
        Движение: <span class="key-hint">свайпы</span> или <span class="key-hint">WASD</span>/<span class="key-hint">стрелки</span>. Вращение: <span class="key-hint">кнопки</span> или <span class="key-hint">Q</span>/<span class="key-hint">E</span>.
    </div>
    <div class="game-over" id="game-over">
        <div class="game-over-content">
            <h2 id="game-over-title">Игра окончена!</h2>
            <p>Ваш счёт: <span id="final-score">0</span></p>
            <button id="restart-button">Играть снова</button>
        </div>
    </div>
    
    <script>
        const SIZE = 4; let score = 0; let bestScore = localStorage.getItem('bestScore3D') || 0; let rotateX = -25; let rotateY = -35; let isMoving = false; const gameState = { front: [], back: [], left: [], right: [], top: [], bottom: [] }; const gameContainer = document.getElementById('game-container'); const gameCube = document.getElementById('game-cube'); const scoreElement = document.getElementById('score'); const bestScoreElement = document.getElementById('best-score'); const gameOverDiv = document.getElementById('game-over');
        function initGame() { for (const face in gameState) { gameState[face] = Array(SIZE * SIZE).fill(0); } score = 0; bestScoreElement.textContent = bestScore; scoreElement.textContent = score; gameOverDiv.style.display = 'none'; addRandomTile(); addRandomTile(); renderGame(); updateCubeRotation(); }
        function addRandomTile() { const availableTiles = []; for (const face of Object.keys(gameState)) { for (let i = 0; i < SIZE * SIZE; i++) { if (gameState[face][i] === 0) { availableTiles.push({ face, index: i }); } } } if (availableTiles.length > 0) { const randomTile = availableTiles[Math.floor(Math.random() * availableTiles.length)]; gameState[randomTile.face][randomTile.index] = Math.random() < 0.9 ? 2 : 4; } }
        function renderGame() { for (const face in gameState) { const faceElement = document.getElementById(`${face}-face`); faceElement.innerHTML = ''; for (let i = 0; i < SIZE * SIZE; i++) { const tile = document.createElement('div'); const value = gameState[face][i]; tile.className = 'tile'; if (value !== 0) { tile.textContent = value; tile.classList.add(`tile-${value}`); } faceElement.appendChild(tile); } } }
        function updateCubeRotation() { gameCube.style.setProperty('--rotateX', `${rotateX}deg`); gameCube.style.setProperty('--rotateY', `${rotateY}deg`); }
        function handleMove(direction) { if (isMoving) return; isMoving = true; let moved = move(direction); if (moved) { setTimeout(() => { addRandomTile(); renderGame(); updateScore(); checkGameStatus(); }, 100); } setTimeout(() => { isMoving = false; }, 300); }
        function checkGameStatus() { if (isGameOver()) { setTimeout(() => showGameOver(false), 500); } else if (hasWon()) { setTimeout(() => showGameOver(true), 500); } }
        function move(direction) { let moved = false; let currentScore = 0; for (const face in gameState) { const grid = []; for (let i = 0; i < SIZE; i++) { grid.push(gameState[face].slice(i * SIZE, (i + 1) * SIZE)); } const { newGrid, scoreIncrease } = processGrid(grid, direction); currentScore += scoreIncrease; const newFlatGrid = newGrid.flat(); if (JSON.stringify(gameState[face]) !== JSON.stringify(newFlatGrid)) { moved = true; gameState[face] = newFlatGrid; } } if(moved) { score += currentScore; } return moved; }
        function processGrid(grid, direction) { let scoreIncrease = 0; let tempGrid = JSON.parse(JSON.stringify(grid)); if (direction === 'up') tempGrid = transpose(tempGrid); if (direction === 'right') tempGrid = tempGrid.map(row => row.reverse()); if (direction === 'down') { tempGrid = transpose(tempGrid); tempGrid = tempGrid.map(row => row.reverse()); } for (let i = 0; i < SIZE; i++) { let row = tempGrid[i].filter(val => val !== 0); for (let j = 0; j < row.length - 1; j++) { if (row[j] === row[j + 1]) { row[j] *= 2; scoreIncrease += row[j]; row.splice(j + 1, 1); } } while (row.length < SIZE) row.push(0); tempGrid[i] = row; } if (direction === 'right') tempGrid = tempGrid.map(row => row.reverse()); if (direction === 'down') { tempGrid = tempGrid.map(row => row.reverse()); tempGrid = transpose(tempGrid); } if (direction === 'up') tempGrid = transpose(tempGrid); return { newGrid: tempGrid, scoreIncrease }; }
        function transpose(grid) { return grid[0].map((_, colIndex) => grid.map(row => row[colIndex])); }
        function isGameOver() { for (const face in gameState) { const grid = []; for (let i = 0; i < SIZE; i++) grid.push(gameState[face].slice(i * SIZE, (i + 1) * SIZE)); for (let i = 0; i < SIZE; i++) { for (let j = 0; j < SIZE; j++) { if (grid[i][j] === 0) return false; if (j < SIZE - 1 && grid[i][j] === grid[i][j + 1]) return false; if (i < SIZE - 1 && grid[i][j] === grid[i + 1][j]) return false; } } } return true; }
        function hasWon() { for (const face in gameState) { if (gameState[face].includes(2048)) return true; } return false; }
        function showGameOver(won) { const title = document.getElementById('game-over-title'); const finalScore = document.getElementById('final-score'); title.textContent = won ? 'Поздравляем!' : 'Игра окончена!'; finalScore.textContent = score; gameOverDiv.style.display = 'flex'; }
        function startNewGame() { if (isMoving) return; initGame(); }
        function updateScore() { scoreElement.textContent = score; if (score > bestScore) { bestScore = score; bestScoreElement.textContent = bestScore; localStorage.setItem('bestScore3D', bestScore); } }

        document.getElementById('new-game').addEventListener('click', startNewGame);
        document.getElementById('restart-button').addEventListener('click', startNewGame);
        document.getElementById('rotate-left').addEventListener('click', () => { rotateY -= 90; updateCubeRotation(); });
        document.getElementById('rotate-right').addEventListener('click', () => { rotateY += 90; updateCubeRotation(); });
        document.getElementById('rotate-up').addEventListener('click', () => { rotateX += 90; updateCubeRotation(); });
        document.getElementById('rotate-down').addEventListener('click', () => { rotateX -= 90; updateCubeRotation(); });
        
        document.addEventListener('keydown', (e) => { gameCube.classList.add('moving'); switch (e.key) { case 'ArrowUp': case 'w': handleMove('up'); break; case 'ArrowDown': case 's': handleMove('down'); break; case 'ArrowLeft': case 'a': handleMove('left'); break; case 'ArrowRight': case 'd': handleMove('right'); break; case 'q': case 'Q': rotateY -= 90; updateCubeRotation(); break; case 'e': case 'E': rotateY += 90; updateCubeRotation(); break; } setTimeout(() => gameCube.classList.remove('moving'), 500); });
        
        let touchStartX = 0, touchStartY = 0;
        gameContainer.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; touchStartY = e.touches[0].clientY; }, { passive: true });
        gameContainer.addEventListener('touchend', (e) => { if (isMoving) return; const touchEndX = e.changedTouches[0].clientX; const touchEndY = e.changedTouches[0].clientY; const deltaX = touchEndX - touchStartX; const deltaY = touchEndY - touchStartY; const minSwipeDist = 50; if (Math.abs(deltaX) > Math.abs(deltaY)) { if (Math.abs(deltaX) > minSwipeDist) handleMove(deltaX > 0 ? 'right' : 'left'); } else { if (Math.abs(deltaY) > minSwipeDist) handleMove(deltaY > 0 ? 'down' : 'up'); } });

        function setVhProperty() { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); }
        setVhProperty();
        window.addEventListener('resize', setVhProperty);
        
        initGame();
    </script>
</body>
</html>