:root {
            --primary: #43e97b;
            --bg: #f5f7fa;
            --text: #2d3436;
            --success: #00b894;
            --error-bg: #ffebee;
            --error-text: #c62828;
            --warn-bg: #fff8e1;
            --warn-text: #f57f17;
            
            --box-width: 36px;
            --base-height: 42px;
            --ext-height: 20px;
        }

        body {
            font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
            background-color: var(--bg);
            display: flex; flex-direction: column; align-items: center;
            min-height: 100vh; margin: 0; 
            padding: 40px 10px 10px 10px;
            box-sizing: border-box; touch-action: manipulation; overflow-x: hidden;
        }

        #confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; }

        /* 顶部展示区 */
        .top-display-area { 
            width: 100%; 
            min-height: 50px;
            padding-bottom: 0px;
            display: flex; flex-direction: column; justify-content: center; align-items: center; 
            margin-bottom: 10px; transition: opacity 0.3s; z-index: 10; 
        }
        .block-view { display: flex; gap: 8px; transition: all 0.5s; margin-bottom: 8px; }
        .full-word-sub { font-size: 18px; color: #b2bec3; font-weight: 600; letter-spacing: 0.5px; transition: opacity 0.3s; margin-bottom: 5px; }
        .hide-top { opacity: 0; pointer-events: none; }

        .separator-line {
            width: 90%;
            max-width: 500px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #dfe6e9, transparent);
            margin-top: 8px;
            border-radius: 2px;
        }

        /* 卡片样式 */
        .syllable-card {
            background: linear-gradient(135deg, #11998e, #38ef7d); 
            padding: 8px 14px; border-radius: 10px; text-align: center; min-width: 45px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.15); color: white; cursor: pointer;
            transition: transform 0.1s;
        }
        .syllable-card:active { transform: scale(0.95); }
        
        .letters { font-size: 24px; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
        
        /* 单个字母的样式，用于独立高亮 */
        .letters span {
            display: inline-block;
            transition: color 0.1s, transform 0.1s;
        }
        /* 字母正在被拼读时的高亮样式 */
        .active-letter {
            color: #ffff76; /* 亮黄色 */
            transform: scale(1.3);
            text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
        }

        .ipa { font-size: 12px; color: #f0fdf4; opacity: 0.9; }
        .stress { color: #ffff76; font-weight: bold; }
        
        .active-part { background: linear-gradient(135deg, #ff9a9e, #fad0c4); transform: scale(1.1); z-index: 10; }
        .block-view.merged { gap: 0; }
        .block-view.merged .syllable-card { border-radius: 0; background: linear-gradient(135deg, #f093fb, #f5576c); }
        .block-view.merged .syllable-card:first-child { border-radius: 10px 0 0 10px; }
        .block-view.merged .syllable-card:last-child { border-radius: 0 10px 10px 0; }
        .block-view.merged .syllable-card:only-child { border-radius: 10px; }
        .speaking-whole .syllable-card { filter: brightness(1.1); box-shadow: 0 0 20px rgba(245, 87, 108, 0.5); }

        /* 拼写区 */
        .spelling-section {
            background: white; padding: 20px 15px; border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.06); width: 95%; max-width: 400px;
            text-align: center; display: flex; flex-direction: column; align-items: center; z-index: 10;
        }
        .meaning-cn { font-size: 16px; color: #636e72; margin-bottom: 20px; font-weight: bold; }
        
        /* 输入框区域 */
        .input-grid { 
            display: flex; gap: 4px; justify-content: center; margin-bottom: 15px; 
            align-items: flex-start; height: 138px; 
            /*flex-wrap: nowrap; */
            /* ✅ 新增：允许换行，这样太长的单词会自动折行显示 不会溢出框架*/
            flex-wrap: wrap; 
            /* ✅ 新增：保证换行后依然居中对齐使用center */
            justify-content: flex-start; /*靠左*/
        }

        .char-input {
            width: var(--box-width); 
            font-size: 24px; font-family: 'Segoe UI', sans-serif; font-weight: bold; text-align: center;
            border: 2px solid #e1e1e1; border-radius: 6px; color: var(--text);
            background: #fafafa; outline: none; caret-color: var(--success);
            transition: all 0.2s; box-sizing: border-box; padding: 0; line-height: normal;
            display: flex; align-items: center; justify-content: center;
        }
        
        /* 禁止键盘输入模式 */
        .char-input.no-keyboard {
            cursor: pointer;
            caret-color: transparent; 
        }
        .char-input.no-keyboard:focus {
            background: #f0fdf4 !important; 
            border-color: #b2bec3;
        }

        .char-input:focus { border-color: var(--success); background: white !important; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 2; }

        .shape-mid { height: var(--base-height); margin-top: var(--ext-height); }
        .shape-tall { height: calc(var(--base-height) + var(--ext-height)); margin-top: 0; padding-top: var(--ext-height); }
        .shape-low { height: calc(var(--base-height) + var(--ext-height)); margin-top: var(--ext-height); padding-bottom: var(--ext-height); }

        .success-locked { border-color: var(--success) !important; background-color: #e0f2f1 !important; color: var(--success) !important; }
        .input-error { background-color: var(--error-bg) !important; color: var(--error-text) !important; border-color: var(--error-text) !important; animation: shake 0.3s ease-in-out; }
        .input-warn { background-color: var(--warn-bg) !important; color: var(--warn-text) !important; border-color: var(--warn-text) !important; }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-4px); }
            75% { transform: translateX(4px); }
        }

        .combo-guide-0 { background-color: #fff9c4; border-color: #f0f4c3; } 
        .combo-guide-1 { background-color: #e1f5fe; border-color: #b3e5fc; } 
        .combo-guide-2 { background-color: #fce4ec; border-color: #f8bbd0; } 
        .combo-guide-3 { background-color: #f3e5f5; border-color: #e1bee7; } 

        .combo-final-0 { background-color: #fff176 !important; color: #e65100 !important; border-color: #fbc02d !important; }
        .combo-final-1 { background-color: #81d4fa !important; color: #01579b !important; border-color: #039be5 !important; }
        .combo-final-2 { background-color: #f48fb1 !important; color: #880e4f !important; border-color: #d81b60 !important; }
        .combo-final-3 { background-color: #ce93d8 !important; color: #4a148c !important; border-color: #8e24aa !important; }

        .combo-hint-line-0 { border-bottom: 4px solid #fbc02d !important; }
        .combo-hint-line-1 { border-bottom: 4px solid #039be5 !important; }
        .combo-hint-line-2 { border-bottom: 4px solid #d81b60 !important; }
        .combo-hint-line-3 { border-bottom: 4px solid #8e24aa !important; }

        .status-text { height: 18px; font-size: 13px; color: #b2bec3; margin-bottom: 12px; font-weight: 600; }
        
        .btn-group { display: flex; gap: 8px; width: 100%; justify-content: center; margin-bottom: 12px; }
        button {
            border: none; padding: 10px 0; width: 32%; border-radius: 50px;
            font-size: 13px; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 4px;
            transition: transform 0.1s;
        }
        button:active { transform: scale(0.96); }

        .btn-hint { background: #e3f2fd; color: #1565c0; cursor: pointer; }
        .btn-hint:disabled { background: #f1f2f6; color: #b2bec3; cursor: not-allowed; }
        .btn-play { background: #2d3436; color: white; cursor: pointer; }
        .btn-reset { background: #ffecb3; color: #d35400; cursor: pointer; }

        /* 紧凑型字母输入框 (Letter Bank) - 钛金灰高级版 */
        .letter-bank-area {
            width: 100%;
            display: flex;
            flex-wrap: wrap; 
            justify-content: center;
            gap: 4px; 
            margin-bottom: 10px;
            
            /* --- 修改开始：更深邃的质感 --- */
            padding: 10px; /* 增加内边距，让它看起来像一个托盘 */
            
            /* 1. 背景：冷色调的银灰色渐变，沉稳大气 */
            background: linear-gradient(180deg, #ebedef 0%, #dde3e8 100%);
            
            /* 2. 边框：颜色加深，增强轮廓感 */
            border: 1px solid #cdd6e0;
            
            /* 3. 阴影：增加内发光(顶部高光)和底部阴影，营造立体凹槽感 */
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 8px rgba(0,0,0,0.06);
            /* --- 修改结束 --- */

            box-sizing: border-box;
            border-radius: 12px;
            transition: opacity 0.3s;
        }
        
        /* 当没有内容时隐藏 */
        .letter-bank-area.empty-bank {
            display: none !important;
        }

        .bank-btn {
            background: white;
            border: 1px solid #b2bec3;
            border-bottom: 2px solid #b2bec3; /* 减小阴影高度 */
            color: #2d3436;
            padding: 4px 10px; /* 减小内边距 */
            border-radius: 6px;
            font-size: 17px; /* 字体适度调整 */
            font-weight: bold;
            cursor: pointer;
            min-width: 28px;
            transition: all 0.1s;
            user-select: none;
            margin: 0;
            font-family: 'Segoe UI', sans-serif;
            touch-action: manipulation;
        }

        .bank-btn:active {
            transform: translateY(1px);
            border-bottom-width: 1px;
        }

        .bank-btn.used {
            display: none; /* 直接隐藏已使用的 */
        }

        /* 导航栏 (在 Spelling Section 下方) */
        .nav-bar { 
            width: 100%; display: flex; justify-content: space-between; align-items: center; 
            padding-top: 10px; border-top: 1px solid #f0f0f0; 
        }
        .nav-btn { background: white; border: 1px solid #dfe6e9; color: var(--text); padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.2s; }
        .btn-finish-round { background-color: var(--text) !important; color: white !important; border-color: var(--text) !important; }

        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6); z-index: 2000;
            display: none; justify-content: center; align-items: center;
            opacity: 0; transition: opacity 0.3s;
        }
        .modal-content {
            background: white; width: 85%; max-width: 350px;
            border-radius: 20px; padding: 30px 20px;
            text-align: center; transform: scale(0.8); transition: transform 0.3s;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }
        .modal-score { font-size: 48px; font-weight: 800; color: var(--success); margin: 10px 0; }
        .modal-title { font-size: 20px; color: #2d3436; font-weight: bold; }
        .modal-desc { color: #636e72; margin-bottom: 25px; font-size: 15px; }
        .btn-modal { width: 80%; margin: 0 auto; background: var(--primary); color: white; padding: 12px; font-size: 16px; }