dailygit: space watch redeploy

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,207 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[codz]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py.cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+#poetry.toml
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#   pdm recommends including project-wide configuration in pdm.toml, but excluding .pdm-python.
+#   https://pdm-project.org/en/latest/usage/project/#working-with-version-control
+#pdm.lock
+#pdm.toml
+.pdm-python
+.pdm-build/
+
+# pixi
+#   Similar to Pipfile.lock, it is generally recommended to include pixi.lock in version control.
+#pixi.lock
+#   Pixi creates a virtual environment in the .pixi directory, just like venv module creates one
+#   in the .venv directory. It is recommended not to include this directory in version control.
+.pixi
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.envrc
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+# Abstra
+# Abstra is an AI-powered process automation framework.
+# Ignore directories containing user credentials, local state, and settings.
+# Learn more at https://abstra.io/docs
+.abstra/
+
+# Visual Studio Code
+#  Visual Studio Code specific template is maintained in a separate VisualStudioCode.gitignore 
+#  that can be found at https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore
+#  and can be added to the global gitignore or merged into this file. However, if you prefer, 
+#  you could uncomment the following to ignore the entire vscode folder
+# .vscode/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+# Cursor
+#  Cursor is an AI-powered code editor. `.cursorignore` specifies files/directories to
+#  exclude from AI features like autocomplete and code analysis. Recommended for sensitive data
+#  refer to https://docs.cursor.com/context/ignore-files
+.cursorignore
+.cursorindexingignore
+
+# Marimo
+marimo/_static/
+marimo/_lsp/
+__marimo__/

Dockerfile

@@ -0,0 +1,5 @@
+FROM python:3.11-slim
+WORKDIR /app
+COPY . .
+EXPOSE 7860
+CMD ["python", "app.py"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 AMA Akuoko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,104 @@
+---
+title: Reality Swipe
+emoji: 🎮
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# 🎮 Reality Swipe
+
+**Match gems, create cascades, and crush levels!** A delightful match-3 puzzle game built with pure JavaScript. No frameworks, no fuss—just pure gaming fun! 🎯
+
+## ✨ What's This?
+
+Think Candy Crush, but **way cooler** because you built it! Drag and swap colorful gems to create matches of 3 or more. Watch the magic happen as pieces cascade down and new combos form automatically. 
+
+## 🚀 Play Now!
+
+Just open `index.html` in your browser and start swiping! No installation, no setup—it just works! 🎉
+
+## 🎯 How to Play
+
+1. **Drag or click** adjacent gems to swap them
+2. **Match 3+** gems in a row or column
+3. **Watch the cascade** as new pieces fall into place
+4. **Reach the target score** to level up!
+5. **Beat your best** and see how far you can go! 🏆
+
+## 🎨 Features
+
+- 🎲 **8×8 game board** with 6 colorful gem types
+- 💥 **Cascade system** - matches create more matches!
+- 📊 **Score tracking** with level progression
+- 🎯 **Move limits** for strategic gameplay
+- 💡 **Hint system** when you're stuck
+- ✨ **Smooth animations** and visual feedback
+- 📱 **Responsive design** - play anywhere!
+
+## 🛠️ Built With
+
+- **Pure JavaScript** - No dependencies, just vanilla JS
+- **CSS Grid** - Beautiful, responsive layout
+- **HTML5** - Modern web standards
+
+## 📁 Files
+
+```
+crushgame/
+├── index.html    # Game interface
+├── game.js        # Game logic & mechanics
+├── styles.css     # Styling & animations
+└── README.md      # You're reading it! 👋
+```
+
+## 🎓 For Developers
+
+Want to customize? The code is clean, well-commented, and easy to modify:
+
+- **Game logic**: Check out `Match3Game` class in `game.js`
+- **Styling**: Tweak colors and animations in `styles.css`
+- **Mechanics**: Adjust board size, gem types, or scoring in `game.js`
+
+## 🚀 What's Next?
+
+This is a **prototype** ready to become something bigger! Potential next steps:
+
+- 📱 Mobile app (Unity/React Native)
+- 🎨 Custom graphics & sprites
+- 🔊 Sound effects & music
+- 💰 Monetization features
+- 🌐 Multiplayer & leaderboards
+
+## 🤝 Contributing
+
+**We'd love your help!** This project is open to contributions of all kinds:
+
+- 🐛 **Bug fixes** - Found a bug? Report it or fix it!
+- ✨ **New features** - Got an idea? Let's make it happen!
+- 🎨 **Design improvements** - Better UI/UX? We're all ears!
+- 📝 **Documentation** - Help make the code more understandable
+- 🧪 **Testing** - Play the game and share feedback!
+
+### How to Contribute
+
+1. **Fork the repo** and clone it locally
+2. **Create a branch** for your changes (`git checkout -b feature/amazing-feature`)
+3. **Make your changes** and test them
+4. **Commit** with clear messages (`git commit -m 'Add amazing feature'`)
+5. **Push** to your fork (`git push origin feature/amazing-feature`)
+6. **Open a Pull Request** and describe your changes!
+
+**No contribution is too small!** Even fixing typos or improving comments helps! 🎉
+
+## 📝 License
+
+MIT License - Feel free to use, modify, and build upon this!
+
+---
+
+**Made with ❤️ and lots of 🎮**
+
+*Ready to level up? Start playing now!*

game.js

@@ -0,0 +1,1597 @@
+class Match3Game {
+    constructor() {
+        this.boardRows = 7;
+        this.boardCols = 8;
+        this.numGemTypes = 6;
+        this.board = [];
+        this.selectedCell = null;
+        this.score = 0;
+        this.totalScore = 0;
+        this.moves = 30;
+        this.level = 1;
+        this.levelTargetScore = 1000;
+        this.isProcessing = false;
+        this.dragStartCell = null;
+        this.isDragging = false;
+        this.visualSwapActive = false;
+        this.visualSwapTarget = null;
+        this.mouseX = 0;
+        this.mouseY = 0;
+        this.dragOffsetX = 0;
+        this.dragOffsetY = 0;
+        this.targetOffsetX = 0;
+        this.targetOffsetY = 0;
+        this.currentOffsetX = 0;
+        this.currentOffsetY = 0;
+        this.animationFrameId = null;
+        this.buttonClickCooldown = false;
+        this.renderPending = false;
+        this.lastBoardState = null;
+        
+        // Load best stats from localStorage
+        this.bestLevel = parseInt(localStorage.getItem('bestLevel') || '1');
+        this.bestScore = parseInt(localStorage.getItem('bestScore') || '0');
+        
+        // Initialize sound system
+        this.soundManager = new SoundManager();
+        
+        this.init();
+    }
+    
+    init() {
+        this.setupEventListeners();
+        this.setupTheme();
+        this.showHome();
+    }
+    
+    setupTheme() {
+        // Load saved theme or default to light
+        const savedTheme = localStorage.getItem('gameTheme') || 'light';
+        this.applyTheme(savedTheme);
+        
+        // Setup theme selector
+        const themeSelect = document.getElementById('theme-select');
+        if (themeSelect) {
+            themeSelect.value = savedTheme;
+            themeSelect.addEventListener('change', (e) => {
+                this.applyTheme(e.target.value);
+            });
+        }
+    }
+    
+    applyTheme(theme) {
+        const body = document.body;
+        if (theme === 'dark') {
+            body.classList.add('dark-theme');
+            body.classList.remove('light-theme');
+        } else {
+            body.classList.add('light-theme');
+            body.classList.remove('dark-theme');
+        }
+        localStorage.setItem('gameTheme', theme);
+    }
+    
+    showHome() {
+        document.getElementById('home-page').classList.remove('hidden');
+        const gameHeader = document.querySelector('.game-header');
+        const gameBoard = document.getElementById('game-board');
+        const gameControls = document.querySelector('.game-controls');
+        
+        if (gameHeader) gameHeader.classList.add('hidden');
+        if (gameBoard) gameBoard.classList.add('hidden');
+        if (gameControls) {
+            gameControls.classList.add('hidden');
+            gameControls.style.visibility = 'hidden';
+        }
+        
+        // Stop background music when going home
+        if (this.soundManager) {
+            this.soundManager.stopBackgroundMusic();
+        }
+        
+        this.updateHomeStats();
+    }
+    
+    showGame() {
+        document.getElementById('home-page').classList.add('hidden');
+        const gameHeader = document.querySelector('.game-header');
+        const gameBoard = document.getElementById('game-board');
+        const gameControls = document.querySelector('.game-controls');
+        
+        if (gameHeader) gameHeader.classList.remove('hidden');
+        if (gameBoard) gameBoard.classList.remove('hidden');
+        if (gameControls) {
+            gameControls.classList.remove('hidden');
+            gameControls.style.visibility = 'visible';
+            gameControls.style.display = 'flex';
+            gameControls.style.opacity = '1';
+        }
+        this.createBoard();
+        this.renderBoard();
+        this.updateUI();
+        
+        // Start background music
+        if (this.soundManager) {
+            this.soundManager.startBackgroundMusic();
+            this.soundManager.updateMusicButton();
+        }
+    }
+    
+    updateHomeStats() {
+        document.getElementById('best-level').textContent = this.bestLevel;
+        document.getElementById('best-score').textContent = this.bestScore.toLocaleString();
+    }
+    
+    saveBestStats() {
+        let updated = false;
+        if (this.level > this.bestLevel) {
+            this.bestLevel = this.level;
+            localStorage.setItem('bestLevel', this.bestLevel.toString());
+            updated = true;
+        }
+        if (this.totalScore > this.bestScore) {
+            this.bestScore = this.totalScore;
+            localStorage.setItem('bestScore', this.bestScore.toString());
+            updated = true;
+        }
+        // Update home stats display if we're on home page
+        if (updated && !document.querySelector('.game-header').classList.contains('hidden')) {
+            // Will update when going to home
+        }
+    }
+    
+    createBoard() {
+        // Initialize empty board
+        this.board = [];
+        for (let row = 0; row < this.boardRows; row++) {
+            this.board[row] = [];
+            for (let col = 0; col < this.boardCols; col++) {
+                this.board[row][col] = this.getRandomGem();
+            }
+        }
+        
+        // Remove initial matches
+        while (this.findMatches().length > 0) {
+            for (let row = 0; row < this.boardRows; row++) {
+                for (let col = 0; col < this.boardCols; col++) {
+                    if (this.isPartOfMatch(row, col)) {
+                        this.board[row][col] = this.getRandomGem();
+                    }
+                }
+            }
+        }
+    }
+    
+    getRandomGem() {
+        return Math.floor(Math.random() * this.numGemTypes);
+    }
+    
+    isPartOfMatch(row, col) {
+        const gem = this.board[row][col];
+        
+        // Check horizontal match
+        let horizontalCount = 1;
+        for (let c = col - 1; c >= 0 && this.board[row][c] === gem; c--) horizontalCount++;
+        for (let c = col + 1; c < this.boardCols && this.board[row][c] === gem; c++) horizontalCount++;
+        if (horizontalCount >= 3) return true;
+        
+        // Check vertical match
+        let verticalCount = 1;
+        for (let r = row - 1; r >= 0 && this.board[r][col] === gem; r--) verticalCount++;
+        for (let r = row + 1; r < this.boardRows && this.board[r][col] === gem; r++) verticalCount++;
+        if (verticalCount >= 3) return true;
+        
+        return false;
+    }
+    
+    renderBoard(forceUpdate = false) {
+        // Allow rendering during processing only if forceUpdate is true (for final render after matches)
+        if (this.isProcessing && !forceUpdate) {
+            this.renderPending = true;
+            return;
+        }
+        
+        // Don't render during active drag unless forced
+        if (this.isDragging && !forceUpdate) {
+            this.renderPending = true;
+            return;
+        }
+        
+        const boardElement = document.getElementById('game-board');
+        if (!boardElement) return;
+        
+        // Check if board already exists - update instead of recreate
+        const existingCells = boardElement.querySelectorAll('.cell');
+        const needsFullRender = existingCells.length !== this.boardRows * this.boardCols;
+        
+        if (needsFullRender) {
+            boardElement.innerHTML = '';
+        }
+        
+        // Create board state string for comparison
+        const currentState = JSON.stringify(this.board);
+        const stateChanged = currentState !== this.lastBoardState;
+        
+        // If state hasn't changed and we don't need full render, skip update completely
+        if (!needsFullRender && !stateChanged && !forceUpdate) {
+            return;
+        }
+        
+        this.lastBoardState = currentState;
+        
+        // Update cells directly without requestAnimationFrame to prevent flickering
+        for (let row = 0; row < this.boardRows; row++) {
+            for (let col = 0; col < this.boardCols; col++) {
+                    let cell = existingCells[row * this.boardCols + col];
+                    
+                    if (!cell || needsFullRender) {
+                        cell = document.createElement('div');
+                        cell.dataset.row = row;
+                        cell.dataset.col = col;
+                        
+                        // Click handler (fallback)
+                        cell.addEventListener('click', () => this.handleCellClick(row, col));
+                        
+                        // Drag handlers
+                        cell.addEventListener('mousedown', (e) => this.handleDragStart(e, row, col));
+                        cell.addEventListener('mouseenter', (e) => this.handleDragOver(e, row, col));
+                        
+                        // Prevent text selection during drag
+                        cell.addEventListener('selectstart', (e) => e.preventDefault());
+                        cell.addEventListener('dragstart', (e) => e.preventDefault());
+                        
+                        boardElement.appendChild(cell);
+                    }
+                    
+                    // Only update if gem type changed
+                    const gemType = this.board[row][col];
+                    const expectedClass = `cell gem-${gemType}`;
+                    const expectedEmoji = this.getGemEmoji(gemType);
+                    
+                    // Handle empty cells first
+                    if (gemType === -1) {
+                        // Hide empty cells
+                        if (!cell.classList.contains('empty-cell')) {
+                            cell.classList.add('empty-cell');
+                            cell.style.display = 'none';
+                        }
+                        continue;
+                    }
+                    
+                    // Remove empty-cell class and ensure visibility for non-empty cells
+                    if (cell.classList.contains('empty-cell')) {
+                        cell.classList.remove('empty-cell');
+                        cell.style.display = '';
+                        cell.style.opacity = '';
+                        cell.style.visibility = '';
+                    }
+                    
+                    // Check if cell needs update
+                    const currentGemClass = Array.from(cell.classList).find(c => c.startsWith('gem-'));
+                    const needsUpdate = needsFullRender || 
+                                       currentGemClass !== `gem-${gemType}` || 
+                                       cell.textContent !== expectedEmoji;
+                    
+                    if (needsUpdate) {
+                        // NEVER update cells that are in animation states
+                        const isMatched = cell.classList.contains('matched');
+                        const isMatchEnlarge = cell.classList.contains('match-enlarge');
+                        const hasActiveAnimation = isMatched || isMatchEnlarge;
+                        
+                        // Only update if not animating
+                        if (!hasActiveAnimation) {
+                            // Always ensure cell is visible for non-empty cells
+                            cell.style.display = '';
+                            cell.style.opacity = '';
+                            cell.style.visibility = '';
+                            
+                            cell.className = expectedClass;
+                            cell.textContent = expectedEmoji;
+                            
+                            // Only reset transform if cell is idle
+                            if (!cell.style.transform || cell.style.transform === '') {
+                                cell.style.transform = '';
+                                cell.style.transition = '';
+                            }
+                        }
+                    }
+                }
+            }
+        
+        // Add board-level mousemove for better drag tracking
+        boardElement.addEventListener('mousemove', (e) => {
+            if (this.isDragging && this.dragStartCell) {
+                // Update mouse position for smooth tracking
+                this.mouseX = e.clientX;
+                this.mouseY = e.clientY;
+                
+                const startCell = document.querySelector(
+                    `[data-row="${this.dragStartCell.row}"][data-col="${this.dragStartCell.col}"]`
+                );
+                if (startCell) {
+                    const rect = startCell.getBoundingClientRect();
+                    // Calculate target offset (where we want to go)
+                    this.targetOffsetX = (e.clientX - (rect.left + rect.width / 2)) * 0.6;
+                    this.targetOffsetY = (e.clientY - (rect.top + rect.height / 2)) * 0.6;
+                    this.dragOffsetX = this.targetOffsetX;
+                    this.dragOffsetY = this.targetOffsetY;
+                }
+                
+                const cell = e.target.closest('.cell');
+                if (cell && cell.dataset.row && cell.dataset.col) {
+                    const row = parseInt(cell.dataset.row);
+                    const col = parseInt(cell.dataset.col);
+                    this.handleDragOver(e, row, col);
+                }
+            }
+        });
+        
+        // Add global mouse up handler to handle drag end
+        document.addEventListener('mouseup', () => this.handleDragEnd());
+    }
+    
+    getGemEmoji(gemType) {
+        if (gemType === -1) return ''; // Empty cell
+        const emojis = ['🔴', '🔵', '🟡', '🟢', '🟠', '🟣'];
+        return emojis[gemType] || '⚪';
+    }
+    
+    handleDragStart(e, row, col) {
+        if (this.isProcessing) return;
+        if (this.moves <= 0) return; // No moves left
+        
+        e.preventDefault();
+        this.dragStartCell = { row, col };
+        this.isDragging = true;
+        
+        // Play swipe sound
+        if (this.soundManager) {
+            this.soundManager.playSwipeSound();
+        }
+        
+        const cell = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+        if (cell) {
+            const rect = cell.getBoundingClientRect();
+            const boardRect = document.getElementById('game-board').getBoundingClientRect();
+            
+            // Store initial mouse position relative to cell center
+            this.mouseX = e.clientX;
+            this.mouseY = e.clientY;
+            this.dragOffsetX = 0;
+            this.dragOffsetY = 0;
+            this.targetOffsetX = 0;
+            this.targetOffsetY = 0;
+            this.currentOffsetX = 0;
+            this.currentOffsetY = 0;
+            
+            cell.classList.add('selected', 'dragging');
+            cell.style.cursor = 'grabbing';
+            cell.style.transition = 'none'; // Disable transition during drag for smooth following
+            cell.style.willChange = 'transform';
+            
+            // Start smooth position tracking
+            this.startDragTracking();
+        }
+        
+        // Add dragging class to board for visual feedback
+        document.getElementById('game-board').classList.add('is-dragging');
+    }
+    
+    startDragTracking() {
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+        
+        const updateDragPosition = () => {
+            if (!this.isDragging || !this.dragStartCell) return;
+            
+            const cell = document.querySelector(
+                `[data-row="${this.dragStartCell.row}"][data-col="${this.dragStartCell.col}"]`
+            );
+            
+            if (cell) {
+                // Smooth interpolation using easing (ease-out cubic for fluid motion)
+                const smoothingFactor = 0.15; // Lower = smoother but slower response
+                this.currentOffsetX += (this.targetOffsetX - this.currentOffsetX) * smoothingFactor;
+                this.currentOffsetY += (this.targetOffsetY - this.currentOffsetY) * smoothingFactor;
+                
+                // Apply smooth transform with fluid motion
+                const scale = 1.12 + Math.min(Math.abs(this.currentOffsetX) + Math.abs(this.currentOffsetY), 30) / 200;
+                const rotationX = this.currentOffsetY * 0.1;
+                const rotationY = this.currentOffsetX * 0.1;
+                
+                cell.style.transform = `translate(${this.currentOffsetX}px, ${this.currentOffsetY}px) scale(${scale}) translateZ(20px) rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;
+            }
+            
+            this.animationFrameId = requestAnimationFrame(updateDragPosition);
+        };
+        
+        this.animationFrameId = requestAnimationFrame(updateDragPosition);
+    }
+    
+    handleDragOver(e, row, col) {
+        if (!this.isDragging || !this.dragStartCell) return;
+        if (this.isProcessing) return;
+        
+        e.preventDefault();
+        
+        // Don't update if hovering over the same cell
+        if (row === this.dragStartCell.row && col === this.dragStartCell.col) return;
+        
+        // Check if target is adjacent
+        const isAdjacent = 
+            (Math.abs(this.dragStartCell.row - row) === 1 && this.dragStartCell.col === col) ||
+            (Math.abs(this.dragStartCell.col - col) === 1 && this.dragStartCell.row === row);
+        
+        const startCell = document.querySelector(
+            `[data-row="${this.dragStartCell.row}"][data-col="${this.dragStartCell.col}"]`
+        );
+        
+        // If we have a visual swap active but target changed, revert it
+        if (this.visualSwapActive && this.visualSwapTarget) {
+            if (this.visualSwapTarget.row !== row || this.visualSwapTarget.col !== col) {
+                this.revertVisualSwap();
+            }
+        }
+        
+        if (isAdjacent) {
+            const targetCell = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+            
+            // If this is a new target or we don't have a visual swap, create one
+            if (!this.visualSwapActive || 
+                !this.visualSwapTarget || 
+                this.visualSwapTarget.row !== row || 
+                this.visualSwapTarget.col !== col) {
+                
+                // Revert any existing swap first
+                if (this.visualSwapActive) {
+                    this.revertVisualSwap();
+                }
+                
+                // Perform visual swap
+                this.performVisualSwap(this.dragStartCell.row, this.dragStartCell.col, row, col);
+                this.visualSwapTarget = { row, col };
+            }
+            
+            if (targetCell) {
+                targetCell.classList.add('drag-target');
+                if (startCell) {
+                    this.drawConnectionLine(startCell, targetCell);
+                }
+            }
+        } else {
+            // Not adjacent - revert visual swap if active
+            if (this.visualSwapActive) {
+                this.revertVisualSwap();
+            }
+            
+            // Remove target from all cells
+            document.querySelectorAll('.cell').forEach(c => {
+                c.classList.remove('drag-target');
+            });
+            
+            // Remove connection line if not adjacent
+            this.removeConnectionLine();
+        }
+    }
+    
+    performVisualSwap(row1, col1, row2, col2) {
+        const cell1 = document.querySelector(`[data-row="${row1}"][data-col="${col1}"]`);
+        const cell2 = document.querySelector(`[data-row="${row2}"][data-col="${col2}"]`);
+        
+        if (!cell1 || !cell2) return;
+        
+        // Get cell positions for smooth swap animation
+        const rect1 = cell1.getBoundingClientRect();
+        const rect2 = cell2.getBoundingClientRect();
+        
+        // Calculate relative positions in pixels for smoother animation
+        const deltaX = rect2.left - rect1.left;
+        const deltaY = rect2.top - rect1.top;
+        
+        // Actually swap in the board array so match checking works correctly
+        [this.board[row1][col1], this.board[row2][col2]] = 
+        [this.board[row2][col2], this.board[row1][col1]];
+        
+        // Get the gem types (now swapped)
+        const gem1 = this.board[row1][col1];
+        const gem2 = this.board[row2][col2];
+        
+        // Enable ultra-smooth transitions for swap animation
+        cell1.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+        cell2.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+        
+        // Animate swap with fluid position interpolation
+        cell1.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(1.08) translateZ(15px)`;
+        cell2.style.transform = `translate(${-deltaX}px, ${-deltaY}px) scale(1.08) translateZ(15px)`;
+        
+        // Update the visual appearance mid-animation for seamless transition
+        setTimeout(() => {
+            cell1.className = `cell gem-${gem1}`;
+            cell1.textContent = this.getGemEmoji(gem1);
+            cell1.classList.add('selected', 'dragging');
+            
+            cell2.className = `cell gem-${gem2}`;
+            cell2.textContent = this.getGemEmoji(gem2);
+            cell2.classList.add('drag-target');
+        }, 175); // Halfway through animation for smooth visual swap
+        
+        // Reset transforms after animation completes
+        setTimeout(() => {
+            cell1.style.transform = '';
+            cell2.style.transform = '';
+        }, 350);
+        
+        this.visualSwapActive = true;
+    }
+    
+    revertVisualSwap() {
+        if (!this.visualSwapActive || !this.dragStartCell || !this.visualSwapTarget) return;
+        
+        const cell1 = document.querySelector(
+            `[data-row="${this.dragStartCell.row}"][data-col="${this.dragStartCell.col}"]`
+        );
+        const cell2 = document.querySelector(
+            `[data-row="${this.visualSwapTarget.row}"][data-col="${this.visualSwapTarget.col}"]`
+        );
+        
+        if (cell1 && cell2) {
+            // Smooth revert animation
+            cell1.style.transition = 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)';
+            cell2.style.transition = 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)';
+            
+            // Animate back to original positions
+            cell1.style.transform = 'translate(0, 0) scale(1.1) translateZ(15px)';
+            cell2.style.transform = 'translate(0, 0) scale(1.1) translateZ(15px)';
+            
+            // Revert the board array swap after animation
+            setTimeout(() => {
+                [this.board[this.dragStartCell.row][this.dragStartCell.col], 
+                 this.board[this.visualSwapTarget.row][this.visualSwapTarget.col]] = 
+                [this.board[this.visualSwapTarget.row][this.visualSwapTarget.col], 
+                 this.board[this.dragStartCell.row][this.dragStartCell.col]];
+                
+                // Restore original appearance
+                const gem1 = this.board[this.dragStartCell.row][this.dragStartCell.col];
+                const gem2 = this.board[this.visualSwapTarget.row][this.visualSwapTarget.col];
+                
+                cell1.className = `cell gem-${gem1}`;
+                cell1.textContent = this.getGemEmoji(gem1);
+                cell1.classList.add('selected', 'dragging');
+                cell1.style.transform = '';
+                
+                cell2.className = `cell gem-${gem2}`;
+                cell2.textContent = this.getGemEmoji(gem2);
+                cell2.style.transform = '';
+                
+                // Render board after revert animation completes
+                requestAnimationFrame(() => {
+                    this.renderBoard();
+                });
+            }, 300);
+        }
+        
+        this.visualSwapActive = false;
+        this.visualSwapTarget = null;
+    }
+    
+    drawConnectionLine(startCell, targetCell) {
+        // Remove existing line
+        this.removeConnectionLine();
+        
+        const board = document.getElementById('game-board');
+        const startRect = startCell.getBoundingClientRect();
+        const targetRect = targetCell.getBoundingClientRect();
+        const boardRect = board.getBoundingClientRect();
+        
+        // Calculate positions relative to board
+        const startX = startRect.left + startRect.width / 2 - boardRect.left;
+        const startY = startRect.top + startRect.height / 2 - boardRect.top;
+        const targetX = targetRect.left + targetRect.width / 2 - boardRect.left;
+        const targetY = targetRect.top + targetRect.height / 2 - boardRect.top;
+        
+        // Create SVG line
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('class', 'drag-connection');
+        svg.style.position = 'absolute';
+        svg.style.left = '0';
+        svg.style.top = '0';
+        svg.style.width = '100%';
+        svg.style.height = '100%';
+        svg.style.pointerEvents = 'none';
+        
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', startX);
+        line.setAttribute('y1', startY);
+        line.setAttribute('x2', targetX);
+        line.setAttribute('y2', targetY);
+        line.setAttribute('stroke', 'rgba(100, 150, 255, 0.9)');
+        line.setAttribute('stroke-width', '5');
+        line.setAttribute('stroke-dasharray', '8, 4');
+        line.setAttribute('marker-end', 'url(#arrowhead)');
+        
+        // Add arrow marker
+        const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+        const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+        marker.setAttribute('id', 'arrowhead');
+        marker.setAttribute('markerWidth', '10');
+        marker.setAttribute('markerHeight', '10');
+        marker.setAttribute('refX', '9');
+        marker.setAttribute('refY', '3');
+        marker.setAttribute('orient', 'auto');
+        
+        const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+        polygon.setAttribute('points', '0 0, 10 3, 0 6');
+        polygon.setAttribute('fill', 'rgba(100, 150, 255, 0.9)');
+        
+        marker.appendChild(polygon);
+        defs.appendChild(marker);
+        svg.appendChild(defs);
+        svg.appendChild(line);
+        
+        board.style.position = 'relative';
+        board.appendChild(svg);
+    }
+    
+    removeConnectionLine() {
+        const existingLine = document.querySelector('.drag-connection');
+        if (existingLine) {
+            existingLine.remove();
+        }
+    }
+    
+    handleDragEnd() {
+        if (!this.isDragging || !this.dragStartCell) return;
+        
+        // If we have a visual swap active, commit it to the game logic
+        if (this.visualSwapActive && this.visualSwapTarget) {
+            // The board array is already swapped from performVisualSwap
+            // Just check for matches and process
+            const matches = this.findMatches();
+            
+            if (matches.length > 0) {
+                // Valid swap
+                this.selectedCell = null;
+                this.updateCellSelection();
+                if (this.moves > 0) this.moves--;
+                
+                // Animate matched cells by enlarging them
+                this.animateMatchedCells(matches).then(() => {
+                    this.processMatches();
+                });
+            } else {
+                // Invalid swap - revert
+                this.revertVisualSwap();
+                // Don't call renderBoard here - revertVisualSwap handles it
+            }
+            
+            // Clear visual swap state
+            this.visualSwapActive = false;
+            this.visualSwapTarget = null;
+        } else {
+            // No visual swap was active, check if there's a target cell
+            const targetCell = document.querySelector('.drag-target');
+            if (targetCell) {
+                const targetRow = parseInt(targetCell.dataset.row);
+                const targetCol = parseInt(targetCell.dataset.col);
+                
+                this.swapCells(
+                    this.dragStartCell.row,
+                    this.dragStartCell.col,
+                    targetRow,
+                    targetCol
+                );
+            } else {
+                // No valid target - just clean up
+                if (this.visualSwapActive) {
+                    this.revertVisualSwap();
+                }
+            }
+        }
+        
+        // Remove connection line
+        this.removeConnectionLine();
+        
+        // Reset drag state first
+        this.isDragging = false;
+        const dragStart = this.dragStartCell;
+        this.dragStartCell = null;
+        
+        // Cancel animation frame
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+        
+        // Smoothly reset all drag-related styles using requestAnimationFrame for smoothness
+        requestAnimationFrame(() => {
+            document.querySelectorAll('.cell').forEach(c => {
+                // Only reset if not in an animation state
+                if (!c.classList.contains('matched') && !c.classList.contains('match-enlarge')) {
+                    c.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease';
+                    c.style.transform = '';
+                    c.style.willChange = '';
+                    c.classList.remove('selected', 'drag-target', 'dragging');
+                    c.style.cursor = '';
+                    
+                    // Remove inline styles after transition
+                    setTimeout(() => {
+                        if (!c.classList.contains('matched')) {
+                            c.style.transition = '';
+                        }
+                    }, 300);
+                }
+            });
+        });
+        
+        // Reset offsets
+        this.currentOffsetX = 0;
+        this.currentOffsetY = 0;
+        this.targetOffsetX = 0;
+        this.targetOffsetY = 0;
+        
+        // Remove board dragging class
+        document.getElementById('game-board').classList.remove('is-dragging');
+    }
+    
+    handleCellClick(row, col) {
+        // Clicking only allows visual selection, no matching allowed
+        // Matching is only allowed through drag and drop
+        if (this.isProcessing) return;
+        if (this.isDragging) return; // Ignore clicks during drag
+        
+        // Just allow visual selection for feedback, but don't perform swaps
+        this.selectedCell = { row, col };
+        this.updateCellSelection();
+    }
+    
+    updateCellSelection() {
+        const cells = document.querySelectorAll('.cell');
+        cells.forEach(cell => cell.classList.remove('selected'));
+        
+        if (this.selectedCell) {
+            const cell = document.querySelector(
+                `[data-row="${this.selectedCell.row}"][data-col="${this.selectedCell.col}"]`
+            );
+            if (cell) cell.classList.add('selected');
+        }
+    }
+    
+    swapCells(row1, col1, row2, col2) {
+        // If visual swap is already active, the board array is already swapped
+        // Otherwise, swap it now
+        if (!this.visualSwapActive) {
+            // Swap in board
+            [this.board[row1][col1], this.board[row2][col2]] = 
+            [this.board[row2][col2], this.board[row1][col1]];
+        }
+        
+        // Check if swap creates a match
+        const matches = this.findMatches();
+        
+        if (matches.length > 0) {
+            // Valid swap - visual swap already shows the correct state (or we just swapped)
+            this.selectedCell = null;
+            this.updateCellSelection();
+            if (this.moves > 0) this.moves--;
+            
+            // Play match sound
+            if (this.soundManager) {
+                this.soundManager.playMatchSound(matches.length);
+            }
+            
+            // Animate matched cells by enlarging them
+            this.animateMatchedCells(matches).then(() => {
+                this.processMatches();
+            });
+            } else {
+                // Invalid swap - revert both visual and logical
+                if (this.visualSwapActive) {
+                    // Visual swap will be reverted by revertVisualSwap, but we need to revert the array
+                    [this.board[row1][col1], this.board[row2][col2]] = 
+                    [this.board[row2][col2], this.board[row1][col1]];
+                } else {
+                    // Revert the swap we just made
+                    [this.board[row1][col1], this.board[row2][col2]] = 
+                    [this.board[row2][col2], this.board[row1][col1]];
+                }
+                // Don't call renderBoard here - revertVisualSwap handles visual update
+                // renderBoard will be called after revert completes
+        }
+    }
+    
+    async animateMatchedCells(matches) {
+        // No animation - skip immediately
+        // This function is kept for compatibility but does nothing now
+        await this.sleep(0);
+    }
+    
+    updateCellsAfterMatch() {
+        // This function is no longer needed - we use renderBoard(true) instead
+        // Keeping it for backwards compatibility but it's essentially a no-op now
+    }
+    
+    findMatches() {
+        const matches = [];
+        const visited = new Set();
+        
+        // Check horizontal matches
+        for (let row = 0; row < this.boardRows; row++) {
+            let count = 1;
+            let currentGem = this.board[row][0];
+            
+            for (let col = 1; col < this.boardCols; col++) {
+                if (this.board[row][col] === currentGem) {
+                    count++;
+                } else {
+                    if (count >= 3) {
+                        for (let c = col - count; c < col; c++) {
+                            const key = `${row},${c}`;
+                            if (!visited.has(key)) {
+                                matches.push({ row, col: c });
+                                visited.add(key);
+                            }
+                        }
+                    }
+                    count = 1;
+                    currentGem = this.board[row][col];
+                }
+            }
+            
+            // Check end of row
+            if (count >= 3) {
+                for (let c = this.boardCols - count; c < this.boardCols; c++) {
+                    const key = `${row},${c}`;
+                    if (!visited.has(key)) {
+                        matches.push({ row, col: c });
+                        visited.add(key);
+                    }
+                }
+            }
+        }
+        
+        // Check vertical matches
+        for (let col = 0; col < this.boardCols; col++) {
+            let count = 1;
+            let currentGem = this.board[0][col];
+            
+            for (let row = 1; row < this.boardRows; row++) {
+                if (this.board[row][col] === currentGem) {
+                    count++;
+                } else {
+                    if (count >= 3) {
+                        for (let r = row - count; r < row; r++) {
+                            const key = `${r},${col}`;
+                            if (!visited.has(key)) {
+                                matches.push({ row: r, col });
+                                visited.add(key);
+                            }
+                        }
+                    }
+                    count = 1;
+                    currentGem = this.board[row][col];
+                }
+            }
+            
+            // Check end of column
+            if (count >= 3) {
+                for (let r = this.boardRows - count; r < this.boardRows; r++) {
+                    const key = `${r},${col}`;
+                    if (!visited.has(key)) {
+                        matches.push({ row: r, col });
+                        visited.add(key);
+                    }
+                }
+            }
+        }
+        
+        return matches;
+    }
+    
+    async processMatches() {
+        this.isProcessing = true;
+        
+        while (true) {
+            const matches = this.findMatches();
+            
+            if (matches.length === 0) {
+                break;
+            }
+            
+            // Update score
+            this.score += matches.length * 10;
+            this.updateUI();
+            
+            // Animate matched cells - add matched class to trigger fade-out
+            matches.forEach(match => {
+                const cell = document.querySelector(
+                    `[data-row="${match.row}"][data-col="${match.col}"]`
+                );
+                if (cell) {
+                    cell.classList.add('matched');
+                    // Create random particles for each matched cell
+                    this.createExplosionParticles(cell);
+                }
+            });
+            
+            // No animation wait - tiles disappear immediately
+            await this.sleep(50);
+            
+            // Clean up particles
+            document.querySelectorAll('.explosion-particle').forEach(particle => {
+                particle.remove();
+            });
+            
+            // Remove matched cells from board and DOM
+            matches.forEach(match => {
+                this.board[match.row][match.col] = -1; // Mark as empty
+                
+                // Mark cell as empty - renderBoard will handle hiding it
+                // Don't manipulate DOM directly here to prevent flickering
+            });
+            
+            // Make pieces fall
+            await this.applyGravity();
+            
+            // Fill empty spaces with new random gems
+            this.fillEmptySpaces();
+            
+            // Re-render board to show new tiles - force update even during processing
+            this.renderBoard(true);
+            
+            // Small delay to let the new tiles appear before checking for new matches
+            await this.sleep(100);
+        }
+        
+        this.isProcessing = false;
+        
+        // Render any pending updates after processing completes - do it synchronously
+        if (this.renderPending) {
+            this.renderPending = false;
+            this.renderBoard(true);
+        }
+        
+        this.checkGameOver();
+    }
+    
+    async applyGravity() {
+        for (let col = 0; col < this.boardCols; col++) {
+            let writeIndex = this.boardRows - 1;
+            
+            for (let row = this.boardRows - 1; row >= 0; row--) {
+                if (this.board[row][col] !== -1) {
+                    if (writeIndex !== row) {
+                        this.board[writeIndex][col] = this.board[row][col];
+                        this.board[row][col] = -1;
+                    }
+                    writeIndex--;
+                }
+            }
+        }
+    }
+    
+    fillEmptySpaces() {
+        for (let row = 0; row < this.boardRows; row++) {
+            for (let col = 0; col < this.boardCols; col++) {
+                if (this.board[row][col] === -1) {
+                    this.board[row][col] = this.getRandomGem();
+                }
+            }
+        }
+    }
+    
+    checkGameOver() {
+        // Check if level is complete (reached target score)
+        if (this.score >= this.levelTargetScore) {
+            this.completeLevel();
+            return;
+        }
+        
+        // Check if moves are exhausted and target not reached - game over
+        if (this.moves <= 0 && this.score < this.levelTargetScore) {
+            this.gameOver();
+        }
+    }
+    
+    gameOver() {
+        // Pause the game
+        this.isProcessing = true;
+        
+        // Save best stats
+        this.saveBestStats();
+        
+        // Play game over sound
+        if (this.soundManager) {
+            this.soundManager.playGameOverSound();
+        }
+        
+        // Show game over modal
+        document.getElementById('final-level').textContent = this.level;
+        document.getElementById('final-score').textContent = this.totalScore.toLocaleString();
+        document.getElementById('game-over').classList.remove('hidden');
+    }
+    
+    retryLevel() {
+        // Hide game over modal
+        document.getElementById('game-over').classList.add('hidden');
+        
+        // Reset level score (keep total score and level)
+        this.score = 0;
+        
+        // Reset moves for current level
+        this.moves = this.getLevelMoves(this.level);
+        
+        // Reset game state
+        this.selectedCell = null;
+        this.isProcessing = false;
+        
+        // Create new board
+        this.createBoard();
+        this.renderBoard();
+        this.updateUI();
+    }
+    
+    completeLevel() {
+        // Pause the game
+        this.isProcessing = true;
+        
+        // Update total score
+        this.totalScore += this.score;
+        
+        // Play level complete sound
+        if (this.soundManager) {
+            this.soundManager.playLevelCompleteSound();
+        }
+        
+        // Show level complete modal
+        document.getElementById('completed-level').textContent = this.level;
+        document.getElementById('level-score').textContent = this.score;
+        document.getElementById('total-score').textContent = this.totalScore;
+        document.getElementById('level-complete').classList.remove('hidden');
+    }
+    
+    continueToNextLevel() {
+        // Hide level complete modal
+        document.getElementById('level-complete').classList.add('hidden');
+        
+        // Increment level
+        this.level++;
+        
+        // Save best stats
+        this.saveBestStats();
+        
+        // Increase difficulty: more score needed, but also more moves
+        this.levelTargetScore = this.level * 1000;
+        this.moves = this.getLevelMoves(this.level); // Use correct calculation
+        
+        // Reset level score (keep total score)
+        this.score = 0;
+        
+        // Create new board
+        this.createBoard();
+        this.renderBoard();
+        this.updateUI();
+        
+        // Resume game
+        this.isProcessing = false;
+    }
+    
+    goToHome() {
+        // Save best stats before going home
+        this.saveBestStats();
+        
+        // Hide all modals
+        document.getElementById('level-complete').classList.add('hidden');
+        document.getElementById('game-over').classList.add('hidden');
+        
+        // Show home page
+        this.showHome();
+    }
+    
+    endGame() {
+        // Go to home from game over screen
+        this.goToHome();
+    }
+    
+    getLevelMoves(level) {
+        // Level 1: 30 moves, Level 2+: 25 + (level * 2)
+        return level === 1 ? 30 : 25 + (level * 2);
+    }
+    
+    updateUI() {
+        document.getElementById('score').textContent = this.score;
+        document.getElementById('moves').textContent = Math.max(0, this.moves);
+        document.getElementById('level').textContent = this.level;
+        document.getElementById('target-score').textContent = this.levelTargetScore.toLocaleString();
+        
+        // Calculate and display the correct level moves
+        const levelMoves = this.getLevelMoves(this.level);
+        document.getElementById('level-moves').textContent = levelMoves;
+        
+        // Show progress to next level (optional visual indicator)
+        const progress = Math.min(100, (this.score / this.levelTargetScore) * 100);
+        // Could add a progress bar here if desired
+    }
+    
+    setupEventListeners() {
+        // Helper function to prevent rapid clicks
+        const preventRapidClicks = (callback) => {
+            return (e) => {
+                if (this.buttonClickCooldown) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return;
+                }
+                
+                this.buttonClickCooldown = true;
+                const button = e.currentTarget;
+                
+                // Play click sound
+                if (this.soundManager) {
+                    this.soundManager.playClickSound();
+                }
+                
+                // Add visual feedback
+                button.style.transform = 'scale(0.95)';
+                setTimeout(() => {
+                    button.style.transform = '';
+                }, 150);
+                
+                // Execute callback
+                callback();
+                
+                // Reset cooldown after a short delay
+                setTimeout(() => {
+                    this.buttonClickCooldown = false;
+                }, 300);
+            };
+        };
+        
+        document.getElementById('start-game-btn').addEventListener('click', preventRapidClicks(() => {
+            this.startNewGame();
+        }));
+        
+        document.getElementById('home-btn').addEventListener('click', preventRapidClicks(() => {
+            this.goToHome();
+        }));
+        
+        document.getElementById('reset-btn').addEventListener('click', preventRapidClicks(() => {
+            this.resetGame();
+        }));
+        
+        document.getElementById('retry-btn').addEventListener('click', preventRapidClicks(() => {
+            this.retryLevel();
+        }));
+        
+        document.getElementById('quit-game-btn').addEventListener('click', preventRapidClicks(() => {
+            this.goToHome();
+        }));
+        
+        document.getElementById('hint-btn').addEventListener('click', preventRapidClicks(() => {
+            this.showHint();
+        }));
+        
+        document.getElementById('continue-btn').addEventListener('click', preventRapidClicks(() => {
+            this.continueToNextLevel();
+        }));
+        
+        document.getElementById('quit-btn').addEventListener('click', preventRapidClicks(() => {
+            this.goToHome();
+        }));
+        
+        // Music toggle button
+        const musicToggleBtn = document.getElementById('music-toggle-btn');
+        if (musicToggleBtn) {
+            musicToggleBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this.soundManager) {
+                    this.soundManager.toggleMusic();
+                    this.soundManager.playClickSound();
+                }
+            });
+        }
+    }
+    
+    startNewGame() {
+        this.score = 0;
+        this.totalScore = 0;
+        this.moves = 30;
+        this.level = 1;
+        this.levelTargetScore = 1000;
+        this.selectedCell = null;
+        this.isProcessing = false;
+        this.showGame();
+    }
+    
+    resetGame() {
+        // Reset current game but stay on game screen
+        this.score = 0;
+        this.totalScore = 0;
+        this.moves = 30;
+        this.level = 1;
+        this.levelTargetScore = 1000;
+        this.selectedCell = null;
+        this.isProcessing = false;
+        document.getElementById('game-over').classList.add('hidden');
+        document.getElementById('level-complete').classList.add('hidden');
+        this.createBoard();
+        this.renderBoard();
+        this.updateUI();
+    }
+    
+    showHint() {
+        // Find a valid move
+        for (let row = 0; row < this.boardRows - 1; row++) {
+            for (let col = 0; col < this.boardCols; col++) {
+                // Try swapping down
+                [this.board[row][col], this.board[row + 1][col]] = 
+                [this.board[row + 1][col], this.board[row][col]];
+                
+                if (this.findMatches().length > 0) {
+                    // Valid move found - highlight it
+                    [this.board[row][col], this.board[row + 1][col]] = 
+                    [this.board[row + 1][col], this.board[row][col]];
+                    
+                    const cell1 = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+                    const cell2 = document.querySelector(`[data-row="${row + 1}"][data-col="${col}"]`);
+                    
+                    if (cell1 && cell2) {
+                        cell1.style.boxShadow = '0 0 0 4px #00ff00';
+                        cell2.style.boxShadow = '0 0 0 4px #00ff00';
+                        
+                        setTimeout(() => {
+                            cell1.style.boxShadow = '';
+                            cell2.style.boxShadow = '';
+                        }, 2000);
+                    }
+                    return;
+                }
+                
+                [this.board[row][col], this.board[row + 1][col]] = 
+                [this.board[row + 1][col], this.board[row][col]];
+            }
+        }
+        
+        for (let row = 0; row < this.boardRows; row++) {
+            for (let col = 0; col < this.boardCols - 1; col++) {
+                // Try swapping right
+                [this.board[row][col], this.board[row][col + 1]] = 
+                [this.board[row][col + 1], this.board[row][col]];
+                
+                if (this.findMatches().length > 0) {
+                    // Valid move found
+                    [this.board[row][col], this.board[row][col + 1]] = 
+                    [this.board[row][col + 1], this.board[row][col]];
+                    
+                    const cell1 = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+                    const cell2 = document.querySelector(`[data-row="${row}"][data-col="${col + 1}"]`);
+                    
+                    if (cell1 && cell2) {
+                        cell1.style.boxShadow = '0 0 0 4px #00ff00';
+                        cell2.style.boxShadow = '0 0 0 4px #00ff00';
+                        
+                        setTimeout(() => {
+                            cell1.style.boxShadow = '';
+                            cell2.style.boxShadow = '';
+                        }, 2000);
+                    }
+                    return;
+                }
+                
+                [this.board[row][col], this.board[row][col + 1]] = 
+                [this.board[row][col + 1], this.board[row][col]];
+            }
+        }
+        
+        alert('No valid moves found! Shuffling board...');
+        this.createBoard();
+        this.renderBoard();
+    }
+    
+    createExplosionParticles(cell) {
+        const particleEmojis = ['✨', '⭐', '💫', '🌟', '⚡', '💥'];
+        const numParticles = 4 + Math.floor(Math.random() * 3); // 4-6 particles per cell
+        
+        for (let i = 0; i < numParticles; i++) {
+            const particle = document.createElement('div');
+            particle.className = 'explosion-particle';
+            particle.textContent = particleEmojis[Math.floor(Math.random() * particleEmojis.length)];
+            
+            // Generate random nonlinear path
+            const angle = (Math.PI * 2 * i) / numParticles + (Math.random() - 0.5) * 0.8; // Spread around circle with randomness
+            const distance = 20 + Math.random() * 15; // 20-35px distance (scaled down)
+            const curveAmount = 7 + Math.random() * 10; // Curve variation (scaled down)
+            
+            // Create curved path with 3 control points
+            const x1 = Math.cos(angle) * (distance * 0.3) + (Math.random() - 0.5) * curveAmount;
+            const y1 = Math.sin(angle) * (distance * 0.3) + (Math.random() - 0.5) * curveAmount;
+            
+            const x2 = Math.cos(angle) * (distance * 0.6) + (Math.random() - 0.5) * curveAmount * 1.5;
+            const y2 = Math.sin(angle) * (distance * 0.6) + (Math.random() - 0.5) * curveAmount * 1.5;
+            
+            const x3 = Math.cos(angle) * distance + (Math.random() - 0.5) * curveAmount * 2;
+            const y3 = Math.sin(angle) * distance + (Math.random() - 0.5) * curveAmount * 2;
+            
+            // Random rotation
+            const rotation = (Math.random() > 0.5 ? 1 : -1) * (720 + Math.random() * 720); // 720-1440 degrees
+            
+            // Random scale variation
+            const scale = 0.05 + Math.random() * 0.03; // 0.05-0.08
+            
+            // Set CSS custom properties for animation
+            particle.style.setProperty('--particle-x1', `${x1}px`);
+            particle.style.setProperty('--particle-y1', `${y1}px`);
+            particle.style.setProperty('--particle-x2', `${x2}px`);
+            particle.style.setProperty('--particle-y2', `${y2}px`);
+            particle.style.setProperty('--particle-x3', `${x3}px`);
+            particle.style.setProperty('--particle-y3', `${y3}px`);
+            particle.style.setProperty('--particle-rotate', `${rotation}deg`);
+            particle.style.setProperty('--particle-scale', scale.toString());
+            
+            // Random delay for staggered effect
+            particle.style.animationDelay = `${Math.random() * 0.2}s`;
+            
+            cell.appendChild(particle);
+        }
+    }
+    
+    sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+}
+
+// Sound Manager Class
+class SoundManager {
+    constructor() {
+        this.audioContext = null;
+        this.musicEnabled = localStorage.getItem('musicEnabled') !== 'false';
+        this.soundsEnabled = localStorage.getItem('soundsEnabled') !== 'false';
+        this.musicVolume = parseFloat(localStorage.getItem('musicVolume') || '0.5');
+        this.sfxVolume = parseFloat(localStorage.getItem('sfxVolume') || '0.7');
+        this.musicOscillator = null;
+        this.musicGainNode = null;
+        this.isMusicPlaying = false;
+        this.initAudioContext();
+        this.setupVolumeControls();
+    }
+    
+    setupVolumeControls() {
+        // Setup music volume control
+        const musicVolumeSlider = document.getElementById('music-volume');
+        if (musicVolumeSlider) {
+            musicVolumeSlider.value = this.musicVolume * 100;
+            musicVolumeSlider.addEventListener('input', (e) => {
+                this.musicVolume = e.target.value / 100;
+                localStorage.setItem('musicVolume', this.musicVolume);
+            });
+        }
+        
+        // Setup SFX volume control
+        const sfxVolumeSlider = document.getElementById('sfx-volume');
+        if (sfxVolumeSlider) {
+            sfxVolumeSlider.value = this.sfxVolume * 100;
+            sfxVolumeSlider.addEventListener('input', (e) => {
+                this.sfxVolume = e.target.value / 100;
+                localStorage.setItem('sfxVolume', this.sfxVolume);
+            });
+        }
+    }
+    
+    initAudioContext() {
+        try {
+            this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        } catch (e) {
+            console.warn('Web Audio API not supported');
+        }
+    }
+    
+    // Start background music (looping, fun upbeat melody)
+    startBackgroundMusic() {
+        if (!this.audioContext || !this.musicEnabled || this.isMusicPlaying) return;
+        
+        try {
+            this.isMusicPlaying = true;
+            this.playMusicLoop();
+        } catch (e) {
+            console.warn('Could not start music:', e);
+        }
+    }
+    
+    playMusicLoop() {
+        if (!this.audioContext || !this.musicEnabled) return;
+        
+        const notes = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25]; // C major scale
+        let noteIndex = 0;
+        
+        const playNote = () => {
+            if (!this.musicEnabled || !this.isMusicPlaying) return;
+            
+            const frequency = notes[noteIndex % notes.length];
+            const oscillator = this.audioContext.createOscillator();
+            const gainNode = this.audioContext.createGain();
+            
+            oscillator.connect(gainNode);
+            gainNode.connect(this.audioContext.destination);
+            
+            oscillator.type = 'sine';
+            oscillator.frequency.value = frequency;
+            
+            const baseGain = this.musicVolume * 0.1;
+            gainNode.gain.setValueAtTime(baseGain, this.audioContext.currentTime);
+            gainNode.gain.exponentialRampToValueAtTime(baseGain * 0.5, this.audioContext.currentTime + 0.3);
+            gainNode.gain.exponentialRampToValueAtTime(baseGain * 0.1, this.audioContext.currentTime + 0.6);
+            
+            oscillator.start(this.audioContext.currentTime);
+            oscillator.stop(this.audioContext.currentTime + 0.6);
+            
+            noteIndex++;
+            
+            setTimeout(() => {
+                if (this.musicEnabled && this.isMusicPlaying) {
+                    playNote();
+                }
+            }, 300);
+        };
+        
+        playNote();
+    }
+    
+    stopBackgroundMusic() {
+        this.isMusicPlaying = false;
+        if (this.musicOscillator) {
+            this.musicOscillator.stop();
+            this.musicOscillator = null;
+        }
+    }
+    
+    toggleMusic() {
+        this.musicEnabled = !this.musicEnabled;
+        localStorage.setItem('musicEnabled', this.musicEnabled);
+        
+        if (this.musicEnabled) {
+            this.startBackgroundMusic();
+        } else {
+            this.stopBackgroundMusic();
+        }
+        
+        this.updateMusicButton();
+    }
+    
+    updateMusicButton() {
+        const btn = document.getElementById('music-toggle-btn');
+        if (btn) {
+            btn.textContent = this.musicEnabled ? '🔊' : '🔇';
+        }
+    }
+    
+    // Play swipe sound (whoosh)
+    playSwipeSound() {
+        if (!this.audioContext || !this.soundsEnabled) return;
+        
+        const oscillator = this.audioContext.createOscillator();
+        const gainNode = this.audioContext.createGain();
+        
+        oscillator.connect(gainNode);
+        gainNode.connect(this.audioContext.destination);
+        
+        oscillator.type = 'sine';
+        oscillator.frequency.setValueAtTime(400, this.audioContext.currentTime);
+        oscillator.frequency.exponentialRampToValueAtTime(200, this.audioContext.currentTime + 0.1);
+        
+        const volume = this.sfxVolume * 0.2;
+        gainNode.gain.setValueAtTime(volume, this.audioContext.currentTime);
+        gainNode.gain.exponentialRampToValueAtTime(volume * 0.05, this.audioContext.currentTime + 0.1);
+        
+        oscillator.start(this.audioContext.currentTime);
+        oscillator.stop(this.audioContext.currentTime + 0.1);
+    }
+    
+    // Play match sound (successful match - cheerful chime)
+    playMatchSound(count = 1) {
+        if (!this.audioContext || !this.soundsEnabled) return;
+        
+        const frequencies = [523.25, 659.25, 783.99]; // C, E, G chord
+        const delay = 0.05;
+        
+        frequencies.forEach((freq, index) => {
+            setTimeout(() => {
+                const oscillator = this.audioContext.createOscillator();
+                const gainNode = this.audioContext.createGain();
+                
+                oscillator.connect(gainNode);
+                gainNode.connect(this.audioContext.destination);
+                
+                oscillator.type = 'sine';
+                oscillator.frequency.value = freq * (1 + count * 0.1);
+                
+                const volume = this.sfxVolume * 0.15;
+                gainNode.gain.setValueAtTime(volume, this.audioContext.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(volume * 0.07, this.audioContext.currentTime + 0.3);
+                
+                oscillator.start(this.audioContext.currentTime);
+                oscillator.stop(this.audioContext.currentTime + 0.3);
+            }, index * delay);
+        });
+    }
+    
+    // Play level complete sound (victory fanfare)
+    playLevelCompleteSound() {
+        if (!this.audioContext || !this.soundsEnabled) return;
+        
+        const melody = [523.25, 659.25, 783.99, 1046.50, 783.99, 1046.50];
+        melody.forEach((freq, index) => {
+            setTimeout(() => {
+                const oscillator = this.audioContext.createOscillator();
+                const gainNode = this.audioContext.createGain();
+                
+                oscillator.connect(gainNode);
+                gainNode.connect(this.audioContext.destination);
+                
+                oscillator.type = 'sine';
+                oscillator.frequency.value = freq;
+                
+                const volume = this.sfxVolume * 0.2;
+                gainNode.gain.setValueAtTime(volume, this.audioContext.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(volume * 0.05, this.audioContext.currentTime + 0.4);
+                
+                oscillator.start(this.audioContext.currentTime);
+                oscillator.stop(this.audioContext.currentTime + 0.4);
+            }, index * 150);
+        });
+    }
+    
+    // Play game over sound (sad tone)
+    playGameOverSound() {
+        if (!this.audioContext || !this.soundsEnabled) return;
+        
+        const frequencies = [392.00, 349.23, 293.66, 261.63];
+        frequencies.forEach((freq, index) => {
+            setTimeout(() => {
+                const oscillator = this.audioContext.createOscillator();
+                const gainNode = this.audioContext.createGain();
+                
+                oscillator.connect(gainNode);
+                gainNode.connect(this.audioContext.destination);
+                
+                oscillator.type = 'sine';
+                oscillator.frequency.value = freq;
+                
+                const volume = this.sfxVolume * 0.15;
+                gainNode.gain.setValueAtTime(volume, this.audioContext.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(volume * 0.07, this.audioContext.currentTime + 0.5);
+                
+                oscillator.start(this.audioContext.currentTime);
+                oscillator.stop(this.audioContext.currentTime + 0.5);
+            }, index * 200);
+        });
+    }
+    
+    // Play button click sound
+    playClickSound() {
+        if (!this.audioContext || !this.soundsEnabled) return;
+        
+        const oscillator = this.audioContext.createOscillator();
+        const gainNode = this.audioContext.createGain();
+        
+        oscillator.connect(gainNode);
+        gainNode.connect(this.audioContext.destination);
+        
+        oscillator.type = 'sine';
+        oscillator.frequency.value = 800;
+        
+        const volume = this.sfxVolume * 0.1;
+        gainNode.gain.setValueAtTime(volume, this.audioContext.currentTime);
+        gainNode.gain.exponentialRampToValueAtTime(volume * 0.1, this.audioContext.currentTime + 0.05);
+        
+        oscillator.start(this.audioContext.currentTime);
+        oscillator.stop(this.audioContext.currentTime + 0.05);
+    }
+}
+
+// Initialize game when page loads
+let game;
+window.addEventListener('DOMContentLoaded', () => {
+    game = new Match3Game();
+});
+

index.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reality Swipe</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- Home Page -->
+    <div id="home-page" class="home-page">
+        <div class="home-content">
+            <h1 class="home-title">Reality Swipe</h1>
+            <p class="home-subtitle">Match gems and create cascades!</p>
+            
+            <div class="home-stats" id="home-stats">
+                <div class="stat-item">
+                    <span class="stat-label">Best Level</span>
+                    <span class="stat-value" id="best-level">1</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-label">Best Score</span>
+                    <span class="stat-value" id="best-score">0</span>
+                </div>
+            </div>
+            
+            <div class="home-buttons">
+                <button id="start-game-btn" class="btn btn-primary btn-large">Start Game</button>
+            </div>
+            
+            <div class="theme-selector">
+                <label for="theme-select">Theme:</label>
+                <select id="theme-select" class="theme-select">
+                    <option value="light">Light</option>
+                    <option value="dark">Dark</option>
+                </select>
+            </div>
+            
+            <div class="home-instructions">
+                <h3>How to Play</h3>
+                <ul>
+                    <li>Drag or click adjacent gems to swap them</li>
+                    <li>Match 3 or more gems in a row or column</li>
+                    <li>Reach the target score to complete each level</li>
+                    <li>Levels are infinite - see how far you can go!</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Game Screen -->
+    <div class="game-header hidden">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 7.5px;">
+                <h1 style="margin: 0;">Reality Swipe</h1>
+                <div style="display: flex; gap: 10px; align-items: center;">
+                    <div style="display: flex; flex-direction: column; align-items: center; gap: 2px;">
+                        <label style="font-size: 0.6em; color: #666;">Music</label>
+                        <input type="range" id="music-volume" min="0" max="100" value="50" style="width: 60px; height: 4px;">
+                    </div>
+                    <div style="display: flex; flex-direction: column; align-items: center; gap: 2px;">
+                        <label style="font-size: 0.6em; color: #666;">SFX</label>
+                        <input type="range" id="sfx-volume" min="0" max="100" value="70" style="width: 60px; height: 4px;">
+                    </div>
+                    <button id="music-toggle-btn" class="music-toggle-btn" title="Toggle Music">🔊</button>
+                </div>
+            </div>
+            <div class="score-panel">
+                <div class="score-item">
+                    <span class="label">Score:</span>
+                    <span id="score" class="value">0</span>
+                </div>
+                <div class="score-item">
+                    <span class="label">Target:</span>
+                    <span id="target-score" class="value">1000</span>
+                </div>
+                <div class="score-item">
+                    <span class="label">Moves:</span>
+                    <span id="moves" class="value">30</span>
+                    <span class="moves-info">/ <span id="level-moves">30</span></span>
+                </div>
+                <div class="score-item">
+                    <span class="label">Level:</span>
+                    <span id="level" class="value">1</span>
+                </div>
+            </div>
+        </div>
+        
+        <div id="game-board" class="game-board"></div>
+        
+        <div class="game-controls">
+            <button id="home-btn" class="btn btn-secondary">Home</button>
+            <button id="reset-btn" class="btn btn-primary">New Game</button>
+            <button id="hint-btn" class="btn btn-secondary">Hint</button>
+        </div>
+        
+        <div id="game-over" class="game-over hidden">
+            <div class="game-over-content">
+                <h2>Game Over!</h2>
+                <p>Level Reached: <span id="final-level">1</span></p>
+                <p>Final Score: <span id="final-score">0</span></p>
+                <div class="game-over-buttons">
+                    <button id="retry-btn" class="btn btn-primary">Retry Level</button>
+                    <button id="quit-game-btn" class="btn btn-secondary">Quit</button>
+                </div>
+            </div>
+        </div>
+        
+        <div id="level-complete" class="level-complete hidden">
+            <div class="level-complete-content">
+                <h2>🎉 Level Complete!</h2>
+                <p>Level <span id="completed-level">1</span> Completed!</p>
+                <p>Score: <span id="level-score">0</span></p>
+                <p>Total Score: <span id="total-score">0</span></p>
+                <div class="level-complete-buttons">
+                    <button id="continue-btn" class="btn btn-primary">Continue to Next Level</button>
+                    <button id="quit-btn" class="btn btn-secondary">Quit</button>
+                </div>
+            </div>
+        </div>
+    
+    <script src="game.js"></script>
+</body>
+</html>
+

styles.css

@@ -0,0 +1,1155 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: white;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 20px;
+}
+
+.hidden {
+    display: none !important;
+    visibility: hidden !important;
+}
+
+/* Ensure game-controls stays visible when not hidden */
+.game-controls:not(.hidden) {
+    display: flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Home Page Styles */
+.home-page {
+    width: 100%;
+    max-width: 600px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80vh;
+}
+
+.home-content {
+    text-align: center;
+    width: 100%;
+    animation: fadeIn 0.5s ease-in;
+}
+
+.home-title {
+    font-size: 4em;
+    color: #333;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.home-subtitle {
+    font-size: 1.5em;
+    color: #666;
+    margin-bottom: 40px;
+}
+
+.home-stats {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    margin: 40px 0;
+    padding: 30px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    border-radius: 15px;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.stat-label {
+    font-size: 0.9em;
+    color: #666;
+    margin-bottom: 10px;
+    font-weight: 600;
+}
+
+.stat-value {
+    font-size: 2.5em;
+    color: #ff6b9d;
+    font-weight: bold;
+}
+
+.home-buttons {
+    margin: 40px 0;
+}
+
+.btn-large {
+    padding: 18px 50px;
+    font-size: 1.3em;
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+
+.home-instructions {
+    margin-top: 50px;
+    padding: 30px;
+    background: #f8f9fa;
+    border-radius: 15px;
+    text-align: left;
+}
+
+.home-instructions h3 {
+    color: #333;
+    margin-bottom: 20px;
+    text-align: center;
+    font-size: 1.5em;
+}
+
+.home-instructions ul {
+    list-style: none;
+    padding: 0;
+}
+
+.home-instructions li {
+    padding: 10px 0;
+    padding-left: 30px;
+    position: relative;
+    color: #555;
+    font-size: 1.1em;
+}
+
+.home-instructions li:before {
+    content: "✓";
+    position: absolute;
+    left: 0;
+    color: #ff6b9d;
+    font-weight: bold;
+    font-size: 1.2em;
+}
+
+.theme-selector {
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.theme-selector label {
+    font-size: 1em;
+    color: #666;
+    font-weight: 600;
+}
+
+.theme-select {
+    padding: 8px 15px;
+    border: 2px solid #ff6b9d;
+    border-radius: 8px;
+    background: white;
+    color: #333;
+    font-size: 1em;
+    font-weight: 500;
+    cursor: pointer;
+    outline: none;
+    transition: all 0.2s ease;
+}
+
+.theme-select:hover {
+    background: #fff5f8;
+    border-color: #ff8fab;
+}
+
+.theme-select:focus {
+    border-color: #ff6b9d;
+    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2);
+}
+
+/* Dark theme */
+body.dark-theme {
+    background: #1a1a2e;
+    color: #e0e0e0;
+}
+
+body.dark-theme .home-title {
+    background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+body.dark-theme .home-subtitle {
+    color: #b0b0b0;
+}
+
+body.dark-theme .home-stats {
+    background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
+    border: 1px solid rgba(255, 107, 157, 0.3);
+}
+
+body.dark-theme .stat-label {
+    color: #b0b0b0;
+}
+
+body.dark-theme .stat-value {
+    color: #ff6b9d;
+}
+
+body.dark-theme .home-instructions {
+    background: #16213e;
+    border: 1px solid rgba(255, 107, 157, 0.2);
+}
+
+body.dark-theme .home-instructions h3 {
+    color: #e0e0e0;
+}
+
+body.dark-theme .home-instructions li {
+    color: #b0b0b0;
+}
+
+body.dark-theme .home-instructions li:before {
+    color: #ff6b9d;
+}
+
+body.dark-theme .theme-select {
+    background: #16213e;
+    color: #e0e0e0;
+    border-color: #ff6b9d;
+}
+
+body.dark-theme .theme-select:hover {
+    background: #1a2742;
+}
+
+body.dark-theme .game-header {
+    background: #16213e;
+    border-color: #ff6b9d;
+    color: #e0e0e0;
+}
+
+body.dark-theme .game-header h1 {
+    color: #e0e0e0;
+}
+
+body.dark-theme .score-panel {
+    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
+}
+
+body.dark-theme .score-item .label {
+    color: #b0b0b0;
+}
+
+body.dark-theme .score-item .value {
+    color: #e0e0e0;
+}
+
+body.dark-theme .game-board {
+    background: #0f3460;
+    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+body.dark-theme .game-controls .btn {
+    background: #16213e;
+    color: #e0e0e0;
+    border-color: #ff6b9d;
+}
+
+body.dark-theme .game-controls .btn:hover {
+    background: #1a2742;
+    border-color: #ff8fab;
+}
+
+body.dark-theme .game-over-content {
+    background: #16213e;
+    color: #e0e0e0;
+}
+
+body.dark-theme .game-over-content h2 {
+    color: #e0e0e0;
+}
+
+body.dark-theme .game-over-content p {
+    color: #b0b0b0;
+}
+
+body.dark-theme .level-complete-content {
+    background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
+}
+
+.game-header {
+    text-align: center;
+    margin: 0 auto 20px;
+    background: white;
+    border: 3px solid #D4AF37;
+    border-radius: 15px;
+    padding: 10px;
+    transform-style: preserve-3d;
+    transform: translateZ(10px) rotateX(2deg);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2),
+                0 4px 8px rgba(0, 0, 0, 0.15),
+                inset 0 2px 0 rgba(255, 255, 255, 0.5),
+                inset 0 -2px 4px rgba(212, 175, 55, 0.3),
+                0 0 0 1px rgba(212, 175, 55, 0.5);
+    position: relative;
+    overflow: hidden;
+    width: calc(8 * 97.2px + 7 * 2px + 4px); /* Match grid width: 8 cells + 7 gaps + padding */
+    max-width: 100%;
+    perspective: 1200px;
+    perspective-origin: center top;
+    display: block;
+}
+
+.game-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+.game-header > * {
+    position: relative;
+    z-index: 1;
+}
+
+.game-header h1 {
+    color: #333;
+    font-size: 1.25em;
+    margin: 0;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.music-toggle-btn {
+    background: rgba(102, 126, 234, 0.1);
+    border: 2px solid rgba(102, 126, 234, 0.3);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    font-size: 1.2em;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    padding: 0;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.music-toggle-btn:hover {
+    background: rgba(102, 126, 234, 0.2);
+    border-color: rgba(102, 126, 234, 0.5);
+    transform: scale(1.1);
+}
+
+.music-toggle-btn:active {
+    transform: scale(0.95);
+}
+
+/* Volume slider styles */
+#music-volume,
+#sfx-volume {
+    -webkit-appearance: none;
+    appearance: none;
+    background: rgba(102, 126, 234, 0.2);
+    border-radius: 5px;
+    outline: none;
+    cursor: pointer;
+}
+
+#music-volume::-webkit-slider-thumb,
+#sfx-volume::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    background: #667eea;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+#music-volume::-webkit-slider-thumb:hover,
+#sfx-volume::-webkit-slider-thumb:hover {
+    background: #764ba2;
+    transform: scale(1.2);
+}
+
+#music-volume::-moz-range-thumb,
+#sfx-volume::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    background: #667eea;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s ease;
+}
+
+#music-volume::-moz-range-thumb:hover,
+#sfx-volume::-moz-range-thumb:hover {
+    background: #764ba2;
+    transform: scale(1.2);
+}
+
+.score-panel {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 5px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    padding: 7.5px;
+    border-radius: 15px;
+    margin-bottom: 5px;
+}
+
+.score-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.score-item .label {
+    font-size: 0.7em;
+    color: #666;
+    margin-bottom: 2.5px;
+    font-weight: 600;
+}
+
+.score-item .value {
+    font-size: 1.2em;
+    color: #333;
+    font-weight: bold;
+}
+
+.score-item .moves-info {
+    font-size: 0.9em;
+    color: #999;
+    margin-left: 3px;
+    font-weight: normal;
+}
+
+.game-board {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-template-rows: repeat(7, 1fr);
+    gap: 2px;
+    background: white;
+    padding: 2px;
+    border-radius: 10px;
+    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    transform-style: preserve-3d;
+    margin: 20px auto;
+    perspective: 1000px;
+    perspective-origin: center center;
+    width: calc(8 * 97.2px + 7 * 2px + 4px); /* 8 cells + 7 gaps + padding */
+    max-width: 100%;
+}
+
+.game-board.is-dragging {
+    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1),
+                0 0 30px rgba(100, 150, 255, 0.3);
+}
+
+.cell {
+    width: 97.2px;
+    height: 97.2px;
+    border-radius: 12.96px;
+    cursor: pointer;
+    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
+                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                opacity 0.3s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.cell.empty-cell {
+    display: none !important;
+}
+    font-size: 3.24em;
+    padding: 0;
+    position: relative;
+    transform-style: preserve-3d;
+    transform: translateZ(0);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3),
+                0 2px 4px rgba(0, 0, 0, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3),
+                inset 0 -2px 4px rgba(0, 0, 0, 0.2);
+    will-change: transform;
+}
+
+.cell:hover {
+    transform: scale(1.1) translateY(0) translateZ(10px) rotateX(5deg) rotateY(5deg);
+    z-index: 10;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4),
+                0 4px 8px rgba(0, 0, 0, 0.3),
+                inset 0 2px 0 rgba(255, 255, 255, 0.4),
+                inset 0 -3px 6px rgba(0, 0, 0, 0.3);
+    animation: none;
+}
+
+.cell.selected {
+    transform: scale(1.25) translateZ(20px) rotateX(8deg) rotateY(8deg);
+    box-shadow: 0 0 0 6px rgba(255, 255, 255, 1), 
+                0 0 20px rgba(100, 150, 255, 0.8),
+                0 0 40px rgba(100, 150, 255, 0.6),
+                0 12px 24px rgba(0, 0, 0, 0.5),
+                inset 0 3px 0 rgba(255, 255, 255, 0.5),
+                inset 0 -4px 8px rgba(0, 0, 0, 0.4);
+    z-index: 30;
+    animation: dragPulse 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    border: 3px solid rgba(100, 150, 255, 1);
+    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.cell.drag-target {
+    transform: scale(1.2) translateZ(15px) rotateX(-4deg) rotateY(-4deg);
+    box-shadow: 0 0 0 6px rgba(0, 255, 100, 1),
+                0 0 25px rgba(0, 255, 100, 0.9),
+                0 0 50px rgba(0, 255, 100, 0.7),
+                0 10px 20px rgba(0, 0, 0, 0.5),
+                inset 0 2px 0 rgba(255, 255, 255, 0.4),
+                inset 0 -3px 6px rgba(0, 0, 0, 0.3);
+    z-index: 25;
+    animation: targetPulse 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    border: 3px solid rgba(0, 255, 100, 1);
+    background-blend-mode: overlay;
+    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.cell.dragging {
+    opacity: 0.9;
+    z-index: 35;
+    transition: opacity 0.2s ease;
+}
+
+.cell {
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: grab;
+}
+
+.cell:active {
+    cursor: grabbing;
+}
+
+@keyframes dragPulse {
+    0%, 100% {
+        transform: scale(1.25) translateZ(20px) rotateX(8deg) rotateY(8deg);
+        box-shadow: 0 0 0 6px rgba(255, 255, 255, 1), 
+                    0 0 20px rgba(100, 150, 255, 0.8),
+                    0 0 40px rgba(100, 150, 255, 0.6),
+                    0 12px 24px rgba(0, 0, 0, 0.5),
+                    inset 0 3px 0 rgba(255, 255, 255, 0.5),
+                    inset 0 -4px 8px rgba(0, 0, 0, 0.4);
+    }
+    50% {
+        transform: scale(1.28) translateZ(22px) rotateX(9deg) rotateY(9deg);
+        box-shadow: 0 0 0 7px rgba(255, 255, 255, 1), 
+                    0 0 25px rgba(100, 150, 255, 0.9),
+                    0 0 50px rgba(100, 150, 255, 0.7),
+                    0 13px 26px rgba(0, 0, 0, 0.5),
+                    inset 0 3.5px 0 rgba(255, 255, 255, 0.55),
+                    inset 0 -4.5px 9px rgba(0, 0, 0, 0.45);
+    }
+}
+
+@keyframes targetPulse {
+    0%, 100% {
+        transform: scale(1.2) translateZ(15px) rotateX(-4deg) rotateY(-4deg);
+        box-shadow: 0 0 0 6px rgba(0, 255, 100, 1),
+                    0 0 25px rgba(0, 255, 100, 0.9),
+                    0 0 50px rgba(0, 255, 100, 0.7),
+                    0 10px 20px rgba(0, 0, 0, 0.5),
+                    inset 0 2px 0 rgba(255, 255, 255, 0.4),
+                    inset 0 -3px 6px rgba(0, 0, 0, 0.3);
+    }
+    50% {
+        transform: scale(1.23) translateZ(17px) rotateX(-5deg) rotateY(-5deg);
+        box-shadow: 0 0 0 7px rgba(0, 255, 100, 1),
+                    0 0 30px rgba(0, 255, 100, 0.95),
+                    0 0 60px rgba(0, 255, 100, 0.8),
+                    0 11px 22px rgba(0, 0, 0, 0.5),
+                    inset 0 2.5px 0 rgba(255, 255, 255, 0.45),
+                    inset 0 -3.5px 7px rgba(0, 0, 0, 0.35);
+    }
+}
+
+/* Drag connection line */
+.drag-connection {
+    position: absolute;
+    pointer-events: none;
+    z-index: 20;
+    stroke: rgba(100, 150, 255, 0.8);
+    stroke-width: 4;
+    fill: none;
+    stroke-dasharray: 5, 5;
+    animation: dashMove 0.5s linear infinite;
+}
+
+@keyframes dashMove {
+    0% {
+        stroke-dashoffset: 0;
+    }
+    100% {
+        stroke-dashoffset: 10;
+    }
+}
+
+.cell.match-enlarge {
+    animation: none;
+    z-index: 15;
+}
+
+.cell.matched {
+    animation: none;
+    z-index: 20;
+    pointer-events: none;
+    position: relative;
+    overflow: visible;
+    opacity: 0;
+    display: none !important;
+    visibility: hidden !important;
+}
+
+/* Particle styles - dynamically created */
+.explosion-particle {
+    position: absolute;
+    font-size: 8px;
+    top: 50%;
+    left: 50%;
+    z-index: 21;
+    pointer-events: none;
+    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 1))
+            drop-shadow(0 0 6px rgba(255, 165, 0, 0.9))
+            drop-shadow(0 0 9px rgba(255, 100, 0, 0.7));
+    text-shadow: 0 0 5px rgba(255, 255, 255, 1),
+                 0 0 9px rgba(255, 215, 0, 1),
+                 0 0 13px rgba(255, 165, 0, 0.9);
+    animation: particleExplode 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+    --particle-x1: 0px;
+    --particle-y1: 0px;
+    --particle-x2: 0px;
+    --particle-y2: 0px;
+    --particle-x3: 0px;
+    --particle-y3: 0px;
+    --particle-rotate: 0deg;
+    --particle-scale: 1;
+}
+
+@keyframes particleExplode {
+    0% {
+        transform: translate(-50%, -50%) scale(0) rotate(0deg);
+        opacity: 1;
+        filter: brightness(1);
+    }
+    15% {
+        opacity: 1;
+        transform: translate(-50%, -50%) translate(var(--particle-x1), var(--particle-y1)) scale(1.3) rotate(calc(var(--particle-rotate) * 0.25));
+        filter: brightness(2);
+    }
+    40% {
+        opacity: 1;
+        transform: translate(-50%, -50%) translate(var(--particle-x2), var(--particle-y2)) scale(1.5) rotate(calc(var(--particle-rotate) * 0.6));
+        filter: brightness(3);
+    }
+    70% {
+        opacity: 0.8;
+        transform: translate(-50%, -50%) translate(var(--particle-x3), var(--particle-y3)) scale(calc(var(--particle-scale) * 1.7)) rotate(calc(var(--particle-rotate) * 0.9));
+        filter: brightness(2);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(-50%, -50%) translate(var(--particle-x3), var(--particle-y3)) scale(calc(var(--particle-scale) * 1.8)) rotate(var(--particle-rotate));
+        filter: brightness(0);
+    }
+}
+
+.cell.falling {
+    animation: none;
+}
+
+@keyframes enlargeMatch {
+    0% {
+        transform: scale(1) translateZ(0) rotateX(0deg) rotateY(0deg);
+    }
+    50% {
+        transform: scale(1.25) translateZ(10px) rotateX(6deg) rotateY(6deg);
+        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8),
+                    0 6px 12px rgba(0, 0, 0, 0.4),
+                    inset 0 2px 0 rgba(255, 255, 255, 0.4);
+    }
+    100% {
+        transform: scale(1) translateZ(0) rotateX(0deg) rotateY(0deg);
+    }
+}
+
+@keyframes matchAnimation {
+    0% {
+        transform: scale(1) rotate(0deg) translateZ(0) rotateX(0deg) rotateY(0deg);
+        opacity: 1;
+        filter: brightness(1) saturate(1);
+    }
+    20% {
+        transform: scale(1.3) rotate(60deg) translateZ(15px) rotateX(20deg) rotateY(20deg);
+        opacity: 1;
+        filter: brightness(2.5) saturate(2);
+        box-shadow: 0 0 25px rgba(255, 255, 255, 1),
+                    0 0 40px rgba(255, 215, 0, 1),
+                    0 0 55px rgba(255, 165, 0, 0.9),
+                    0 8px 16px rgba(0, 0, 0, 0.4);
+    }
+    40% {
+        transform: scale(1.4) rotate(120deg) translateZ(20px) rotateX(30deg) rotateY(30deg);
+        opacity: 0.9;
+        filter: brightness(3) saturate(2.2);
+        box-shadow: 0 0 30px rgba(255, 255, 255, 0.95),
+                    0 0 50px rgba(255, 215, 0, 0.95),
+                    0 0 70px rgba(255, 165, 0, 0.85),
+                    0 9px 18px rgba(0, 0, 0, 0.45);
+    }
+    60% {
+        transform: scale(1.2) rotate(180deg) translateZ(15px) rotateX(40deg) rotateY(40deg);
+        opacity: 0.7;
+        filter: brightness(2) saturate(1.5);
+        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
+                    0 0 35px rgba(255, 215, 0, 0.8),
+                    0 0 50px rgba(255, 165, 0, 0.7),
+                    0 7px 14px rgba(0, 0, 0, 0.4);
+    }
+    80% {
+        transform: scale(0.8) rotate(240deg) translateZ(8px) rotateX(50deg) rotateY(50deg);
+        opacity: 0.4;
+        filter: brightness(1.5) saturate(1);
+        box-shadow: 0 0 15px rgba(255, 255, 255, 0.6),
+                    0 0 25px rgba(255, 215, 0, 0.6),
+                    0 0 35px rgba(255, 165, 0, 0.5),
+                    0 5px 10px rgba(0, 0, 0, 0.3);
+    }
+    100% {
+        transform: scale(0.3) rotate(300deg) translateZ(0) rotateX(60deg) rotateY(60deg);
+        opacity: 0;
+        filter: brightness(0.5) saturate(0.5);
+        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
+    }
+}
+
+@keyframes fallAnimation {
+    0% {
+        transform: translateY(-100%) translateZ(0) rotateX(0deg);
+    }
+    100% {
+        transform: translateY(0) translateZ(0) rotateX(0deg);
+    }
+}
+
+/* Gem colors with slow idle animations */
+.gem-0 { 
+    background: white;
+    animation: gemFloat 4s ease-in-out infinite;
+    animation-delay: 0s;
+}
+.gem-1 { 
+    background: white;
+    animation: none;
+}
+.gem-2 { 
+    background: white;
+    animation: none;
+}
+.gem-3 { 
+    background: white;
+    animation: none;
+}
+.gem-4 { 
+    background: white;
+    animation: none;
+}
+.gem-5 { 
+    background: white;
+    animation: none;
+}
+
+/* Slow floating animation for gems with 3D rotation */
+@keyframes gemFloat {
+    0%, 100% {
+        transform: translateY(0) scale(1) translateZ(0) rotateX(0deg) rotateY(0deg);
+        opacity: 1;
+    }
+    25% {
+        transform: translateY(-2px) scale(1.01) translateZ(2px) rotateX(2deg) rotateY(-2deg);
+        opacity: 0.98;
+    }
+    50% {
+        transform: translateY(-3px) scale(1.02) translateZ(3px) rotateX(0deg) rotateY(0deg);
+        opacity: 0.95;
+    }
+    75% {
+        transform: translateY(-2px) scale(1.01) translateZ(2px) rotateX(-2deg) rotateY(2deg);
+        opacity: 0.98;
+    }
+}
+
+/* Pause gemFloat animation when cell is in certain states */
+.cell.selected.gem-0,
+.cell.selected.gem-1,
+.cell.selected.gem-2,
+.cell.selected.gem-3,
+.cell.selected.gem-4,
+.cell.selected.gem-5,
+.cell.dragging.gem-0,
+.cell.dragging.gem-1,
+.cell.dragging.gem-2,
+.cell.dragging.gem-3,
+.cell.dragging.gem-4,
+.cell.dragging.gem-5,
+.cell.drag-target.gem-0,
+.cell.drag-target.gem-1,
+.cell.drag-target.gem-2,
+.cell.drag-target.gem-3,
+.cell.drag-target.gem-4,
+.cell.drag-target.gem-5,
+.cell.matched.gem-0,
+.cell.matched.gem-1,
+.cell.matched.gem-2,
+.cell.matched.gem-3,
+.cell.matched.gem-4,
+.cell.matched.gem-5 {
+    animation: none !important;
+}
+
+/* Match enlarge animation - paused */
+.cell.match-enlarge {
+    animation: none !important;
+}
+
+.cell.match-enlarge.gem-0,
+.cell.match-enlarge.gem-1,
+.cell.match-enlarge.gem-2,
+.cell.match-enlarge.gem-3,
+.cell.match-enlarge.gem-4,
+.cell.match-enlarge.gem-5 {
+    animation: none !important;
+}
+
+.game-controls {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin: 20px auto;
+    width: calc(8 * 97.2px + 7 * 2px + 4px); /* Match grid width: 8 cells + 7 gaps + padding */
+    max-width: 100%;
+    position: relative;
+    z-index: 100;
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.game-controls .btn {
+    background: white;
+    color: #333;
+    border: 2px solid #D4AF37;
+    border-radius: 8px;
+    font-weight: 500;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s ease, 
+                box-shadow 0.2s ease,
+                transform 0.15s ease;
+    user-select: none;
+    -webkit-user-select: none;
+    pointer-events: auto;
+    position: relative;
+    outline: none;
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: inline-flex !important;
+    z-index: 101;
+}
+
+.game-controls .btn:hover {
+    background: #f9f9f9;
+    box-shadow: 0 3px 6px rgba(212, 175, 55, 0.4);
+    transform: translateY(-1px);
+}
+
+.game-controls .btn:active {
+    background: #f0f0f0;
+    box-shadow: 0 1px 2px rgba(212, 175, 55, 0.3);
+    transform: translateY(0);
+}
+
+.game-controls .btn:focus {
+    outline: 2px solid rgba(212, 175, 55, 0.5);
+    outline-offset: 2px;
+}
+
+.btn {
+    padding: 12px 30px;
+    font-size: 1em;
+    border: none;
+    border-radius: 25px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: background-color 0.2s ease,
+                box-shadow 0.2s ease,
+                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    pointer-events: auto;
+    position: relative;
+    outline: none;
+    touch-action: manipulation;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.btn:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.btn:focus {
+    outline: 2px solid rgba(102, 126, 234, 0.5);
+    outline-offset: 2px;
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+    transform: none !important;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    color: white;
+}
+
+.game-over {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 20px;
+    z-index: 1000;
+}
+
+.game-over.hidden {
+    display: none;
+}
+
+.game-over-content {
+    background: white;
+    padding: 40px;
+    border-radius: 20px;
+    text-align: center;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+
+.game-over-content h2 {
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 2.5em;
+}
+
+.game-over-content p {
+    color: #666;
+    font-size: 1.2em;
+    margin-bottom: 30px;
+}
+
+#final-score {
+    color: #667eea;
+    font-weight: bold;
+    font-size: 1.5em;
+}
+
+.game-over-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-top: 30px;
+}
+
+.game-over-buttons .btn {
+    width: 100%;
+    padding: 15px;
+    font-size: 1.1em;
+    transition: background-color 0.2s ease,
+                box-shadow 0.2s ease,
+                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.level-complete {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.85);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 20px;
+    z-index: 1000;
+    animation: fadeIn 0.3s ease-in;
+}
+
+.level-complete.hidden {
+    display: none;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.level-complete-content {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 50px;
+    border-radius: 20px;
+    text-align: center;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+    color: white;
+    max-width: 400px;
+    width: 90%;
+    animation: slideUp 0.4s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(50px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.level-complete-content h2 {
+    color: white;
+    margin-bottom: 20px;
+    font-size: 2.5em;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.level-complete-content p {
+    color: rgba(255, 255, 255, 0.95);
+    font-size: 1.3em;
+    margin-bottom: 15px;
+    font-weight: 500;
+}
+
+.level-complete-content span {
+    font-weight: bold;
+    font-size: 1.2em;
+    color: #ffe66d;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.level-complete-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-top: 30px;
+}
+
+.level-complete-buttons .btn {
+    width: 100%;
+    padding: 15px;
+    font-size: 1.1em;
+    transition: background-color 0.2s ease,
+                box-shadow 0.2s ease,
+                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.level-complete-buttons .btn-primary {
+    background: white;
+    color: #667eea;
+}
+
+.level-complete-buttons .btn-primary:hover {
+    background: #f0f0f0;
+    transform: translateY(-2px);
+}
+
+.level-complete-buttons .btn-secondary {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    border: 2px solid white;
+}
+
+.level-complete-buttons .btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+/* Responsive design */
+@media (max-width: 600px) {
+    .cell {
+        width: 40px;
+        height: 40px;
+        font-size: 1.5em;
+    }
+    
+    .game-header h1 {
+        font-size: 2em;
+    }
+    
+    .score-panel {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 15px;
+    }
+    
+    .score-item .value {
+        font-size: 1.5em;
+    }
+    
+    .score-item .label {
+        font-size: 0.8em;
+    }
+}
+