/* CSS Reset and Base Styles */
body, html { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f0f2f5; overflow: hidden; }
* { box-sizing: border-box; }
button { -webkit-tap-highlight-color: transparent; }

/* Keyframes for animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideInUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideOutDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { transform: scale(1.0); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

/* Start Screen Styles */
#start-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 20px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
#start-screen h1 { font-size: 2.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
#start-screen p { font-size: 1.2rem; margin-bottom: 30px; }
.level-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: 100%; max-width: 400px; }
.level-btn { padding: 15px; font-size: 1.1rem; cursor: pointer; border-radius: 12px; border: none; color: #333; background-color: rgba(255, 255, 255, 0.9); font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; }
.level-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

/* Main Word Card Screen Styles */
#card-screen { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; overflow: hidden; touch-action: none; background-color: #30505E; animation: slideInUp 0.4s forwards; }
#card-screen.closing { animation: slideOutDown 0.4s forwards; }

.card-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: transparent; border-radius: 24px; overflow: hidden; padding: 80px 20px 150px 20px; text-align: center; position: relative; }
.card-content { animation: fadeIn 0.3s; }
.pinyin { font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 1.5rem; color: #fcd34d; text-shadow: 0 1px 4px rgba(0,0,0,0.5); margin-bottom: 1.2rem; letter-spacing: 0.05em; }
.text-word-chinese { font-size: 3.2rem; font-weight: bold; color: #ffffff; line-height: 1.2; word-break: break-word; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.revealed-content { display: none; margin-top: 1rem; width: 100%; flex-direction: column; align-items: center; gap: 1.5rem; animation: fadeIn 0.5s; }
.revealed-content.visible { display: flex; }
.text-word-burmese { font-size: 2.0rem; color: #fce38a; font-family: "Padauk", "Myanmar Text", sans-serif; line-height: 1.8; word-break: break-word; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.mnemonic-box { color: #E0E0E0; text-align: center; font-size: 1.2rem; text-shadow: 0 1px 4px rgba(0,0,0,0.5); background-color: rgba(0, 0, 0, 0.25); padding: 10px 18px; border-radius: 16px; max-width: 90%; border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(3px); }
.example-box { color: #fff; width: 100%; max-width: 400px; display: flex; align-items: center; justify-content: center; gap: 10px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); cursor: pointer; padding: 10px; border-radius: 12px; transition: background-color 0.2s; }
.example-pinyin { font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 1.1rem; color: #fcd34d; margin-bottom: 0.5rem; opacity: 0.9; letter-spacing: 0.05em; }
.example-text { font-size: 1.4rem; line-height: 1.5; }

/* Controls */
.right-controls { position: fixed; top: 15%; right: 10px; z-index: 100; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.right-icon-button { background: rgba(255,255,255,0.85); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 3px 10px rgba(0,0,0,0.15); transition: transform 0.2s, background 0.2s; color: #4a5568; backdrop-filter: blur(4px); }
.bottom-controls-container { position: fixed; bottom: 0; left: 0; right: 0; padding: 15px; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.bottom-center-counter { background: rgba(0, 0, 0, 0.3); color: white; padding: 8px 18px; border-radius: 20px; font-size: 1rem; font-weight: bold; backdrop-filter: blur(5px); user-select: none; }
.know-buttons-wrapper { display: flex; width: 100%; max-width: 400px; gap: 15px; }
.know-button-base { flex: 1; padding: 16px; border-radius: 16px; border: none; font-size: 1.2rem; font-weight: bold; color: white; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.dont-know-button { background: linear-gradient(135deg, #f59e0b, #d97706); }
.know-button { background: linear-gradient(135deg, #22c55e, #16a34a); }

/* Settings Panel */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 10001; backdrop-filter: blur(5px); padding: 15px; }
.modal-overlay.visible { display: flex; animation: fadeIn 0.3s; }
.settings-content { background: white; padding: 25px; border-radius: 15px; width: 100%; max-width: 450px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); max-height: 80vh; overflow-y: auto; position: relative; }
.close-button { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #aaa; line-height: 1; }
.setting-group { margin-bottom: 20px; }
.setting-label { display: block; font-weight: bold; margin-bottom: 8px; color: #333; }
.setting-control { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.setting-button { background: rgba(0,0,0,0.1); color: #4a5568; border: none; padding: 10px 14px; border-radius: 14px; cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; flex: 1; justify-content: center; min-width: 100px; }
.setting-button.active { background: #4299e1; color: white; }
.setting-select { width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc; }
.setting-slider { flex: 1; }
```4.  提交文件。

#### 第四步：创建 `script.js` (大脑)

这是最重要的文件，它现在会**动态加载**数据文件。

1.  再次回到仓库主页，创建新文件。
2.  文件名填写 `script.js`。
3.  把下面的**全部JS代码**复制粘贴进去：

```javascript
document.addEventListener('DOMContentLoaded', () => {
    // --- 全局状态变量 ---
    let currentWords = [];
    let currentIndex = 0;
    let isRevealed = false;
    let activeLevel = 1;
    let howlInstance;
    const defaultSettings = {
        order: 'sequential',
        autoPlayChinese: true,
        autoPlayBurmese: true,
    };
    let settings = { ...defaultSettings };

    // --- DOM 元素引用 ---
    const startScreen = document.getElementById('start-screen');
    const cardScreen = document.getElementById('card-screen');
    const cardWrapper = document.getElementById('card-content-wrapper');
    const counterEl = document.getElementById('counter');
    const favBtnIcon = document.querySelector('#favorite-btn i');
    const settingsPanel = document.getElementById('settings-panel');

    // --- 启动学习 ---
    async function startLevel(level) {
        activeLevel = level;
        loadSettings();
        
        try {
            // 这是关键：动态获取对应的 JSON 数据文件
            const response = await fetch(`./data/hsk${level}.json`);
            if (!response.ok) throw new Error(`HSK ${level} 数据文件加载失败!`);
            let wordsToLoad = await response.json();

            if (!wordsToLoad || wordsToLoad.length === 0) {
                alert(`HSK ${level} 数据为空!`);
                return;
            }

            if (settings.order === 'random') {
                for (let i = wordsToLoad.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [wordsToLoad[i], wordsToLoad[j]] = [wordsToLoad[j], wordsToLoad[i]];
                }
            }
            currentWords = wordsToLoad;

            const savedIndex = localStorage.getItem(`word_progress_hsk${level}`);
            currentIndex = savedIndex ? parseInt(savedIndex, 10) : 0;
            if (currentIndex >= currentWords.length) currentIndex = 0;
            
            isRevealed = false;
            renderCard();
            
            startScreen.style.display = 'none';
            cardScreen.style.display = 'flex';

        } catch (error) {
            console.error(error);
            alert(error.message);
        }
    }

    // --- 渲染卡片 ---
    function renderCard() {
        if (currentIndex >= currentWords.length) {
            cardWrapper.innerHTML = `<div style="color: white; text-align: center;"><h2>🎉 全部完成！</h2><p>你已学完本列表中的所有单词。</p></div>`;
            counterEl.textContent = "完成";
            return;
        }
        const word = currentWords[currentIndex];
        const pinyin = window.pinyinPro.pinyin(word.chinese, { toneType: 'symbol', separator: ' ' });
        
        cardWrapper.innerHTML = `
            <div class="card-content">
                <div class="pinyin">${pinyin}</div>
                <div class="text-word-chinese">${word.chinese}</div>
                <div class="revealed-content">
                    <div class="text-word-burmese">${word.burmese || ''}</div>
                    ${word.mnemonic ? `<div class="mnemonic-box">${word.mnemonic}</div>` : ''}
                    ${word.example ? `<div class="example-box"><div class="example-text">${word.example}</div></div>` : ''}
                </div>
            </div>`;
        
        updateUI();
        if (settings.autoPlayChinese) playSound('chinese');
    }

    // --- 更新界面 ---
    function updateUI() {
        counterEl.textContent = `${currentIndex + 1} / ${currentWords.length}`;
        cardWrapper.querySelector('.revealed-content').classList.toggle('visible', isRevealed);
        
        const favs = JSON.parse(localStorage.getItem('fav_words') || '[]');
        const word = currentWords[currentIndex];
        if (word && favs.includes(word.id)) {
            favBtnIcon.className = 'fas fa-heart';
            favBtnIcon.style.color = '#f87171';
        } else {
            favBtnIcon.className = 'far fa-heart';
            favBtnIcon.style.color = '';
        }
    }

    // --- 导航 ---
    function navigate(direction) {
        if (currentIndex >= currentWords.length -1 && direction > 0) {
            currentIndex++;
            renderCard();
            return;
        }
        currentIndex = (currentIndex + direction + currentWords.length) % currentWords.length;
        isRevealed = false;
        localStorage.setItem(`word_progress_hsk${activeLevel}`, currentIndex);
        renderCard();
    }
    
    // --- 音频播放 ---
    function playSound(type) {
        if (howlInstance) howlInstance.stop();
        const word = currentWords[currentIndex];
        if (!word) return;
        
        let textToSpeak = '';
        if (type === 'chinese') textToSpeak = word.chinese;
        else if (type === 'burmese') textToSpeak = word.burmese;
        else if (type === 'example') textToSpeak = word.example;

        if (!textToSpeak) return;

        // 注意：这里的 /api/google-tts 需要一个后端服务。如果没有，可以替换成浏览器TTS
        // 为了简单，我们先用一个公开的代理API
        const lang = type === 'burmese' ? 'my' : 'zh-CN';
        const url = `https://translate.google.com/translate_tts?ie=UTF-8&q=${encodeURIComponent(textToSpeak)}&tl=${lang}&client=tw-ob`;
        
        howlInstance = new Howl({ src: [url], html5: true, format: ['mp3'] });
        howlInstance.play();
    }

    // --- 收藏 ---
    function toggleFavorite() {
        const word = currentWords[currentIndex];
        if (!word) return;
        let favs = JSON.parse(localStorage.getItem('fav_words') || '[]');
        const favIndex = favs.indexOf(word.id);
        if (favIndex > -1) favs.splice(favIndex, 1);
        else favs.push(word.id);
        localStorage.setItem('fav_words', JSON.stringify(favs));
        updateUI();
    }

    // --- 设置 ---
    function renderSettingsPanel() {
        settingsPanel.innerHTML = `
            <div class="settings-content">
                <button class="close-button">&times;</button>
                <h2 style="margin-top: 0;">设置</h2>
                <div class="setting-group">
                    <label class="setting-label">学习顺序</label>
                    <div class="setting-control">
                        <button class="setting-button ${settings.order === 'sequential' ? 'active' : ''}" data-setting="order" data-value="sequential">顺序</button>
                        <button class="setting-button ${settings.order === 'random' ? 'active' : ''}" data-setting="order" data-value="random">随机</button>
                    </div>
                </div>
                <div class="setting-group">
                    <label class="setting-label">自动播放</label>
                    <div class="setting-control"><label><input type="checkbox" data-setting="autoPlayChinese" ${settings.autoPlayChinese ? 'checked' : ''}/> 自动朗读中文</label></div>
                    <div class="setting-control"><label><input type="checkbox" data-setting="autoPlayBurmese" ${settings.autoPlayBurmese ? 'checked' : ''}/> 自动朗读缅语</label></div>
                </div>
            </div>`;
    }

    function toggleSettingsPanel() {
        if (settingsPanel.classList.contains('visible')) {
            settingsPanel.classList.remove('visible');
        } else {
            renderSettingsPanel();
            settingsPanel.classList.add('visible');
        }
    }

    function loadSettings() {
        const saved = localStorage.getItem('wordCardSettings');
        settings = saved ? { ...defaultSettings, ...JSON.parse(saved) } : { ...defaultSettings };
    }
    
    function handleSettingChange(e) {
        const el = e.target.closest('[data-setting]');
        if (!el) return;
        const key = el.dataset.setting;
        const value = el.dataset.value;
        if (el.type === 'checkbox') {
            settings[key] = el.checked;
        } else if (value) {
            settings[key] = value;
            el.parentElement.querySelectorAll('.setting-button').forEach(btn => btn.classList.remove('active'));
            el.classList.add('active');
        }
        localStorage.setItem('wordCardSettings', JSON.stringify(settings));
    }

    // --- 事件绑定 ---
    document.querySelector('.level-buttons').addEventListener('click', e => {
        if (e.target.classList.contains('level-btn')) {
            startLevel(e.target.dataset.level);
        }
    });
    document.getElementById('know-btn').addEventListener('click', () => navigate(1));
    document.getElementById('dont-know-btn').addEventListener('click', () => {
        if (isRevealed) navigate(1);
        else { isRevealed = true; updateUI(); if(settings.autoPlayBurmese) playSound('burmese'); }
    });
    document.getElementById('close-btn').addEventListener('click', () => {
        cardScreen.classList.add('closing');
        setTimeout(() => {
            cardScreen.style.display = 'none';
            cardScreen.classList.remove('closing');
            startScreen.style.display = 'flex';
        }, 400);
    });
    document.getElementById('favorite-btn').addEventListener('click', toggleFavorite);
    document.getElementById('settings-btn').addEventListener('click', toggleSettingsPanel);
    settingsPanel.addEventListener('click', e => {
        if (e.target.classList.contains('modal-overlay') || e.target.classList.contains('close-button')) toggleSettingsPanel();
        else handleSettingChange(e);
    });
    cardWrapper.addEventListener('click', e => {
        if (e.target.closest('.example-box')) playSound('example');
    });
    document.getElementById('play-btn').addEventListener('click', () => isRevealed ? playSound('burmese') : playSound('chinese'));
});