编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>智能数独 - 小程序</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;
            --bg: #0f172a;
            --bg-light: #1e293b;
            --bg-card: #334155;
            --text: #f8fafc;
            --text-secondary: #94a3b8;
            --border: #475569;
            --cell-fixed: #6366f1;
            --cell-user: #fbbf24;
            --cell-error: #ef4444;
            --cell-selected: #3b82f6;
            --cell-related: #1e3a5f;
        }

        body {
            font-family: 'Inter', 'Noto Sans SC', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Header */
        .header {
            background: linear-gradient(135deg, var(--bg-light), var(--bg));
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-title {
            font-size: 20px;
            font-weight: 700;
            background: linear-gradient(90deg, var(--primary), #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .header-actions {
            display: flex;
            gap: 12px;
        }

        .icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            color: var(--text);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .icon-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
        }

        .icon-btn svg {
            width: 20px;
            height: 20px;
        }

        /* Main Container */
        .container {
            max-width: 500px;
            margin: 0 auto;
            padding: 16px;
        }

        /* Timer & Status */
        .game-status {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            background: var(--bg-light);
            border-radius: 16px;
            padding: 16px;
            border: 1px solid var(--border);
        }

        .timer {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .timer-icon {
            width: 36px;
            height: 36px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .timer-icon svg {
            width: 18px;
            height: 18px;
            fill: white;
        }

        .timer-text {
            font-size: 24px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .difficulty-badge {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .difficulty-badge.easy { background: #065f46; color: #34d399; }
        .difficulty-badge.medium { background: #92400e; color: #fbbf24; }
        .difficulty-badge.hard { background: #991b1b; color: #f87171; }

        /* Sudoku Grid */
        .sudoku-wrapper {
            background: var(--bg-light);
            border-radius: 20px;
            padding: 12px;
            margin-bottom: 16px;
            border: 1px solid var(--border);
        }

        .sudoku-grid {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            gap: 2px;
            background: var(--border);
            border-radius: 12px;
            overflow: hidden;
        }

        .cell {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
            background: var(--bg-card);
            position: relative;
            user-select: none;
        }

        .cell:nth-child(3n) {
            border-right: 2px solid var(--text-secondary);
        }

        .cell:nth-child(n+19):nth-child(-n+27),
        .cell:nth-child(n+46):nth-child(-n+54),
        .cell:nth-child(n+73):nth-child(-n+81) {
            border-bottom: 2px solid var(--text-secondary);
        }

        .cell.fixed {
            color: var(--cell-fixed);
            font-weight: 700;
        }

.cell.user-input {
            color: var(--cell-user);
        }

        .cell.selected {
            background: var(--cell-selected) !important;
            color: white !important;
        }

        .cell.related {
            background: var(--cell-related);
        }

        .cell.same-number {
            background: rgba(59, 130, 246, 0.3);
        }

        .cell.error {
            background: var(--cell-error) !important;
            color: white !important;
        }

        .cell .candidate {
            font-size: 8px;
            color: var(--text-secondary);
            position: absolute;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            width: 100%;
            height: 100%;
            padding: 2px;
        }

        .cell .candidate span {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cell.show-candidates .main-num {
            font-size: 12px;
            opacity: 0.5;
        }

        /* Number Pad */
        .number-pad {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            margin-bottom: 16px;
        }

        .num-btn {
            height: 56px;
            border-radius: 12px;
            background: var(--bg-light);
            border: 1px solid var(--border);
            color: var(--text);
            font-size: 24px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .num-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
        }

        .num-btn:active {
            transform: scale(0.95);
        }

        .num-btn.erase {
            background: var(--bg-card);
            color: var(--error);
        }

        .num-btn.notes {
            background: var(--bg-card);
            color: var(--primary);
        }

        .num-btn.notes.active {
            background: var(--primary);
            color: white;
        }

        .num-btn.hint {
            background: var(--bg-card);
            color: var(--warning);
        }

        /* Action Buttons */
        .action-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 16px;
        }

        .action-btn {
            padding: 12px;
            border-radius: 12px;
            background: var(--bg-light);
            border: 1px solid var(--border);
            color: var(--text);
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .action-btn svg {
            width: 20px;
            height: 20px;
        }

        .action-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
        }

        .action-btn.active {
            background: var(--primary);
            border-color: var(--primary);
        }

        /* New Game Modal */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .modal {
            background: var(--bg-light);
            border-radius: 20px;
            padding: 24px;
            width: 90%;
            max-width: 400px;
            transform: translateY(20px);
            transition: all 0.3s;
            border: 1px solid var(--border);
        }

        .modal-overlay.show .modal {
            transform: translateY(0);
        }

        .modal-title {
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 20px;
        }

        .difficulty-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }

        .difficulty-option {
            padding: 16px;
            border-radius: 12px;
            background: var(--bg-card);
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .difficulty-option:hover,
        .difficulty-option.selected {
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.1);
        }

        .difficulty-option .name {
            font-size: 16px;
            font-weight: 600;
        }

        .difficulty-option .desc {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .modal-actions {
            display: flex;
            gap: 12px;
        }

        .modal-btn {
            flex: 1;
            padding: 14px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }

        .modal-btn.cancel {
            background: var(--bg-card);
            color: var(--text);
        }

        .modal-btn.confirm {
            background: var(--primary);
            color: white;
        }

        .modal-btn:hover {
            opacity: 0.9;
        }

        /* Records Page */
        .records-page {
            display: none;
        }

        .records-page.show {
            display: block;
        }

        .records-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .records-title {
            font-size: 18px;
            font-weight: 700;
        }

        .record-card {
            background: var(--bg-light);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            border: 1px solid var(--border);
        }

        .record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .record-difficulty {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .record-date {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .record-stats {
            display: flex;
            gap: 24px;
        }

        .record-stat {
            text-align: center;
        }

        .record-stat .value {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary);
        }

        .record-stat .label {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .empty-records {
            text-align: center;
            padding: 40px;
            color: var(--text-secondary);
        }

        /* Success Modal */
        .success-content {
            text-align: center;
        }

        .success-icon {
            width: 80px;
            height: 80px;
            background: var(--success);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .success-icon svg {
            width: 40px;
            height: 40px;
            fill: white;
        }

        .success-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .success-time {
            font-size: 32px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 20px;
        }

        /* Back Button */
        .back-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: var(--bg-light);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            cursor: pointer;
            font-size: 14px;
            margin-bottom: 16px;
        }

        .back-btn:hover {
            background: var(--bg-card);
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        .cell {
            animation: fadeIn 0.2s ease;
        }

        /* Toast */
        .toast {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: var(--bg-card);
            color: var(--text);
            padding: 12px 24px;
            border-radius: 10px;
            font-size: 14px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            z-index: 2000;
            border: 1px solid var(--border);
        }

        .toast.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .toast.error {
            border-color: var(--error);
            color: var(--error);
        }

        .toast.success {
            border-color: var(--success);
            color: var(--success);
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="header-title">智能数独</div>
        <div class="header-actions">
            <button class="icon-btn" onclick="showRecords()" title="游戏记录">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
                </svg>
            </button>
            <button class="icon-btn" onclick="showNewGameModal()" title="新游戏">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                </svg>
            </button>
        </div>
    </header>

    <div class="container">
        <!-- Game Page -->
        <div class="game-page" id="gamePage">
            <!-- Timer & Status -->
            <div class="game-status">
                <div class="timer">
                    <div class="timer-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                        </svg>
                    </div>
                    <span class="timer-text" id="timer">00:00</span>
                </div>
                <div class="difficulty-badge easy" id="difficultyBadge" onclick="showNewGameModal()">简单</div>
            </div>

            <!-- Sudoku Grid -->
<div class="sudoku-wrapper">
                <div class="sudoku-grid" id="sudokuGrid"></div>
            </div>

            <!-- Number Pad -->
            <div class="number-pad">
                <button class="num-btn" onclick="inputNumber(1)">1</button>
                <button class="num-btn" onclick="inputNumber(2)">2</button>
                <button class="num-btn" onclick="inputNumber(3)">3</button>
                <button class="num-btn" onclick="inputNumber(4)">4</button>
                <button class="num-btn" onclick="inputNumber(5)">5</button>
                <button class="num-btn" onclick="inputNumber(6)">6</button>
                <button class="num-btn" onclick="inputNumber(7)">7</button>
                <button class="num-btn" onclick="inputNumber(8)">8</button>
                <button class="num-btn" onclick="inputNumber(9)">9</button>
                <button class="num-btn erase" onclick="eraseNumber()">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
                    </svg>
                </button>
            </div>

            <!-- Action Bar -->
            <div class="action-bar">
                <button class="action-btn" id="notesBtn" onclick="toggleNotes()">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                    </svg>
                    笔记
                </button>
                <button class="action-btn" onclick="showHint()">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/>
                    </svg>
                    提示
                </button>
                <button class="action-btn" onclick="checkSolution()">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                    </svg>
                    检查
                </button>
                <button class="action-btn" onclick="saveGame()">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
                    </svg>
                    存档
                </button>
            </div>
        </div>

        <!-- Records Page -->
        <div class="records-page" id="recordsPage">
            <button class="back-btn" onclick="hideRecords()">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                </svg>
                返回游戏
            </button>
            <div class="records-header">
                <span class="records-title">游戏记录</span>
            </div>
            <div id="recordsList"></div>
        </div>
    </div>

    <!-- New Game Modal -->
    <div class="modal-overlay" id="newGameModal">
        <div class="modal">
            <div class="modal-title">新游戏</div>
            <div class="difficulty-options">
                <div class="difficulty-option selected" data-difficulty="easy" onclick="selectDifficulty('easy')">
                    <div>
                        <div class="name">简单</div>
                        <div class="desc">38-45个已知数字</div>
                    </div>
                    <div class="difficulty-badge easy">简单</div>
                </div>
                <div class="difficulty-option" data-difficulty="medium" onclick="selectDifficulty('medium')">
                    <div>
                        <div class="name">中等</div>
                        <div class="desc">30-37个已知数字</div>
                    </div>
                    <div class="difficulty-badge medium">中等</div>
                </div>
                <div class="difficulty-option" data-difficulty="hard" onclick="selectDifficulty('hard')">
                    <div>
                        <div class="name">困难</div>
                        <div class="desc">22-29个已知数字</div>
                    </div>
                    <div class="difficulty-badge hard">困难</div>
                </div>
            </div>
            <div class="modal-actions">
                <button class="modal-btn cancel" onclick="hideNewGameModal()">取消</button>
                <button class="modal-btn confirm" onclick="startNewGame()">开始</button>
            </div>
        </div>
    </div>

    <!-- Success Modal -->
    <div class="modal-overlay" id="successModal">
        <div class="modal">
            <div class="success-content">
                <div class="success-icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                    </svg>
                </div>
                <div class="success-title">恭喜通关！</div>
                <div class="success-time" id="finalTime">00:00</div>
                <div class="modal-actions">
                    <button class="modal-btn cancel" onclick="hideSuccessModal()">继续</button>
                    <button class="modal-btn confirm" onclick="startNewGame()">再来一局</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast -->
    <div class="toast" id="toast"></div>

    <script>
        // Game State
        let board = [];
        let solution = [];
        let userBoard = [];
        let candidates = [];
        let selectedCell = null;
        let isNotesMode = false;
        let timer = 0;
        let timerInterval = null;
        let currentDifficulty = 'easy';
        let gameStarted = false;

        // Difficulty settings
        const difficulties = {
            easy: { min: 38, max: 45 },
            medium: { min: 30, max: 37 },
            hard: { min: 22, max: 29 }
        };

        // Initialize
        document.addEventListener('DOMContentLoaded', () => {
            loadSavedGame() || generateNewPuzzle();
            loadRecords();
        });

        // Sudoku Generator
        function generateSudoku() {
            // Generate a complete valid board
            solution = Array(9).fill(null).map(() => Array(9).fill(0));
            fillBoard(solution);
            
            // Copy to board and remove numbers based on difficulty
            board = solution.map(row => [...row]);
            const { min, max } = difficulties[currentDifficulty];
            const clues = Math.floor(Math.random() * (max - min + 1)) + min;
            const positions = [];
            
            for (let i = 0; i < 81; i++) positions.push(i);
            shuffleArray(positions);
            
            for (let i = 0; i < 81 - clues; i++) {
                const pos = positions[i];
                const row = Math.floor(pos / 9);
                const col = pos % 9;
                board[row][col] = 0;
            }
            
            userBoard = board.map(row => [...row]);
            candidates = Array(9).fill(null).map(() => 
                Array(9).fill(null).map(() => new Set())
            );
        }

        function fillBoard(grid) {
            const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            for (let i = 0; i < 81; i++) {
                const row = Math.floor(i / 9);
                const col = i % 9;
                if (grid[row][col] === 0) {
                    shuffleArray(numbers);
                    for (const num of numbers) {
                        if (isValidPlacement(grid, row, col, num)) {
                            grid[row][col] = num;
                            if (fillBoard(grid)) return true;
                            grid[row][col] = 0;
                        }
                    }
                    return false;
                }
            }
            return true;
        }

        function isValidPlacement(grid, row, col, num) {
            // Check row
            if (grid[row].includes(num)) return false;
            
            // Check column
            for (let i = 0; i < 9; i++) {
                if (grid[i][col] === num) return false;
            }
            
            // Check 3x3 box
            const boxRow = Math.floor(row / 3) * 3;
            const boxCol = Math.floor(col / 3) * 3;
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    if (grid[boxRow + i][boxCol + j] === num) return false;
                }
            }
            
            return true;
        }

        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        // Render
        function renderBoard() {
            const grid = document.getElementById('sudokuGrid');
            grid.innerHTML = '';
            
            for (let i = 0; i < 81; i++) {
                const row = Math.floor(i / 9);
                const col = i % 9;
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.dataset.row = row;
                cell.dataset.col = col;
                
                if (board[row][col] !== 0) {
                    cell.classList.add('fixed');
                    cell.innerHTML = `<span class="main-num">${board[row][col]}</span>`;
                } else if (userBoard[row][col] !== 0) {
                    cell.classList.add('user-input');
                    cell.innerHTML = `<span class="main-num">${userBoard[row][col]}</span>`;
                } else if (candidates[row][col].size > 0) {
                    cell.classList.add('show-candidates');
                    let candidatesHtml = '<div class="candidate">';
                    for (let n = 1; n <= 9; n++) {
                        candidatesHtml += `<span>${candidates[row][col].has(n) ? n : ''}</span>`;
                    }
                    candidatesHtml += '</div>';
                    cell.innerHTML = candidatesHtml;
                }
                
                if (selectedCell && selectedCell.row === row && selectedCell.col === col) {
                    cell.classList.add('selected');
                } else if (selectedCell) {
                    // Highlight related cells
                    if (row === selectedCell.row || col === selectedCell.col || 
                        (Math.floor(row / 3) === Math.floor(selectedCell.row / 3) && 
                         Math.floor(col / 3) === Math.floor(selectedCell.col / 3))) {
                        cell.classList.add('related');
                    }
                    // Highlight same numbers
                    if (userBoard[row][col] === userBoard[selectedCell.row][selectedCell.col] && 
                        userBoard[row][col] !== 0) {
                        cell.classList.add('same-number');
                    }
                }
                
                cell.addEventListener('click', () => selectCell(row, col));
                grid.appendChild(cell);
            }
        }

        // Cell Selection
        function selectCell(row, col) {
            selectedCell = { row, col };
            renderBoard();
        }

        // Input
        function inputNumber(num) {
            if (!selectedCell) return;
            const { row, col } = selectedCell;
            if (board[row][col] !== 0) return; // Can't modify fixed cells
            
            if (isNotesMode) {
                if (candidates[row][col].has(num)) {
                    candidates[row][col].delete(num);
                } else {
                    candidates[row][col].add(num);
                }
            } else {
                userBoard[row][col] = num;
                candidates[row][col].clear();
                clearRelatedErrors();
                
                // Check if correct
                if (num !== solution[row][col]) {
                    highlightError(row, col);
                }
            }
            
            renderBoard();
            checkWin();
        }

        function eraseNumber() {
            if (!selectedCell) return;
            const { row, col } = selectedCell;
            if (board[row][col] !== 0) return;
            
            userBoard[row][col] = 0;
            candidates[row][col].clear();
            clearRelatedErrors();
            renderBoard();
        }

        function toggleNotes() {
            isNotesMode = !isNotesMode;
            document.getElementById('notesBtn').classList.toggle('active', isNotesMode);
            showToast(isNotesMode ? '笔记模式已开启' : '笔记模式已关闭');
        }

        // Hints
        function showHint() {
            if (!selectedCell) {
                // Find first empty cell
                for (let i = 0; i < 81; i++) {
                    const row = Math.floor(i / 9);
                    const col = i % 9;
                    if (board[row][col] === 0 && userBoard[row][col] === 0) {
                        selectedCell = { row, col };
                        break;
                    }
                }
            }
            
            if (selectedCell) {
                const { row, col } = selectedCell;
                if (board[row][col] === 0) {
                    userBoard[row][col] = solution[row][col];
                    candidates[row][col].clear();
                    clearRelatedErrors();
                    renderBoard();
                    showToast('提示：' + solution[row][col]);
                    checkWin();
                }
            }
        }

        // Check Solution
        function checkSolution() {
            let hasErrors = false;
            clearRelatedErrors();
            
            for (let i = 0; i < 81; i++) {
                const row = Math.floor(i / 9);
                const col = i % 9;
                if (board[row][col] === 0 && userBoard[row][col] !== 0) {
                    if (userBoard[row][col] !== solution[row][col]) {
                        highlightError(row, col);
                        hasErrors = true;
                    }
                }
            }
            
            if (hasErrors) {
                showToast('检查完成：发现错误', 'error');
            } else {
                showToast('检查完成：暂无错误', 'success');
            }
        }

        function highlightError(row, col) {
            const cells = document.querySelectorAll('.cell');
            const index = row * 9 + col;
            cells[index].classList.add('error');
        }

        function clearRelatedErrors() {
            document.querySelectorAll('.cell.error').forEach(cell => {
                cell.classList.remove('error');
            });
        }

        // Timer
        function startTimer() {
            if (timerInterval) clearInterval(timerInterval);
            timerInterval = setInterval(() => {
                timer++;
                updateTimerDisplay();
            }, 1000);
            gameStarted = true;
        }

        function stopTimer() {
            if (timerInterval) {
                clearInterval(timerInterval);
                timerInterval = null;
            }
        }

        function updateTimerDisplay() {
            const minutes = Math.floor(timer / 60).toString().padStart(2, '0');
            const seconds = (timer % 60).toString().padStart(2, '0');
            document.getElementById('timer').textContent = `${minutes}:${seconds}`;
        }

        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }

        // Win Check
        function checkWin() {
            for (let i = 0; i < 81; i++) {
                const row = Math.floor(i / 9);
                const col = i % 9;
                if (board[row][col] === 0 && userBoard[row][col] === 0) {
                    return false;
                }
                if (board[row][col] === 0 && userBoard[row][col] !== solution[row][col]) {
                    return false;
                }
            }
            
            // Victory!
            stopTimer();
            saveRecord();
            showSuccessModal();
            return true;
        }

        // Modals
        function showNewGameModal() {
            document.getElementById('newGameModal').classList.add('show');
        }

        function hideNewGameModal() {
            document.getElementById('newGameModal').classList.remove('show');
        }

        function selectDifficulty(diff) {
            currentDifficulty = diff;
            document.querySelectorAll('.difficulty-option').forEach(opt => {
                opt.classList.toggle('selected', opt.dataset.difficulty === diff);
            });
        }

        function startNewGame() {
            hideNewGameModal();
            stopTimer();
            
            const difficultyNames = { easy: '简单', medium: '中等', hard: '困难' };
            document.getElementById('difficultyBadge').textContent = difficultyNames[currentDifficulty];
            document.getElementById('difficultyBadge').className = 'difficulty-badge ' + currentDifficulty;
            
            generateSudoku();
            renderBoard();
            timer = 0;
            updateTimerDisplay();
            selectedCell = null;
            startTimer();
            showToast('新游戏开始！');
        }

        function showSuccessModal() {
            document.getElementById('finalTime').textContent = formatTime(timer);
            document.getElementById('successModal').classList.add('show');
        }

        function hideSuccessModal() {
            document.getElementById('successModal').classList.remove('show');
        }

        // Save/Load Game
        function saveGame() {
            const gameData = {
                board: board,
                solution: solution,
                userBoard: userBoard,
                candidates: candidates.map(row => row.map(cell => [...cell])),
                timer: timer,
                difficulty: currentDifficulty
            };
            localStorage.setItem('sudoku_save', JSON.stringify(gameData));
            showToast('游戏已保存！', 'success');
        }

        function loadSavedGame() {
            const saved = localStorage.getItem('sudoku_save');
            if (saved) {
                try {
                    const gameData = JSON.parse(saved);
                    board = gameData.board;
                    solution = gameData.solution;
                    userBoard = gameData.userBoard;
                    candidates = gameData.candidates.map(row => 
                        row.map(cell => new Set(cell))
                    );
                    timer = gameData.timer || 0;
                    currentDifficulty = gameData.difficulty || 'easy';
                    
                    const difficultyNames = { easy: '简单', medium: '中等', hard: '困难' };
                    document.getElementById('difficultyBadge').textContent = difficultyNames[currentDifficulty];
                    document.getElementById('difficultyBadge').className = 'difficulty-badge ' + currentDifficulty;
                    
                    updateTimerDisplay();
                    renderBoard();
                    startTimer();
                    return true;
                } catch (e) {
                    console.error('Failed to load saved game:', e);
                }
            }
            return false;
        }

        function generateNewPuzzle() {
            generateSudoku();
            renderBoard();
            timer = 0;
            updateTimerDisplay();
            startTimer();
        }

        // Records
        function saveRecord() {
            const records = JSON.parse(localStorage.getItem('sudoku_records') || '[]');
            records.unshift({
                difficulty: currentDifficulty,
                time: timer,
                date: new Date().toISOString()
            });
            // Keep only last 20 records
            if (records.length > 20) records.pop();
            localStorage.setItem('sudoku_records', JSON.stringify(records));
            loadRecords();
        }

        function loadRecords() {
            const records = JSON.parse(localStorage.getItem('sudoku_records') || '[]');
            const list = document.getElementById('recordsList');
            
            if (records.length === 0) {
                list.innerHTML = '<div class="empty-records">暂无游戏记录</div>';
                return;
            }
            
            const difficultyNames = { easy: '简单', medium: '中等', hard: '困难' };
            const difficultyClasses = { easy: 'easy', medium: 'medium', hard: 'hard' };
            
            list.innerHTML = records.map((record, index) => `
                <div class="record-card">
                    <div class="record-header">
                        <span class="record-difficulty ${difficultyClasses[record.difficulty]}">${difficultyNames[record.difficulty]}</span>
                        <span class="record-date">${new Date(record.date).toLocaleDateString()}</span>
                    </div>
                    <div class="record-stats">
                        <div class="record-stat">
                            <div class="value">${formatTime(record.time)}</div>
                            <div class="label">用时</div>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        function showRecords() {
            document.getElementById('gamePage').style.display = 'none';
            document.getElementById('recordsPage').classList.add('show');
            loadRecords();
        }

        function hideRecords() {
            document.getElementById('recordsPage').classList.remove('show');
            document.getElementById('gamePage').style.display = 'block';
        }

        // Toast
        function showToast(message, type = '') {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.className = 'toast show' + (type ? ' ' + type : '');
            setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }

        // Keyboard support
        document.addEventListener('keydown', (e) => {
            if (e.key >= '1' && e.key <= '9') {
                inputNumber(parseInt(e.key));
            } else if (e.key === 'Backspace' || e.key === 'Delete') {
                eraseNumber();
            } else if (e.key === 'n') {
                toggleNotes();
            } else if (e.key === 'h') {
                showHint();
            } else if (e.key === 'ArrowUp' && selectedCell) {
                selectCell(Math.max(0, selectedCell.row - 1), selectedCell.col);
            } else if (e.key === 'ArrowDown' && selectedCell) {
                selectCell(Math.min(8, selectedCell.row + 1), selectedCell.col);
            } else if (e.key === 'ArrowLeft' && selectedCell) {
                selectCell(selectedCell.row, Math.max(0, selectedCell.col - 1));
            } else if (e.key === 'ArrowRight' && selectedCell) {
                selectCell(selectedCell.row, Math.min(8, selectedCell.col + 1));
            }
        });
    </script>
</body>
</html>