* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #2c2c2c;
            --primary-light: #4a4a4a;
            --primary-dark: #1a1a1a;
            --secondary: #ede8df;
            --accent: #a08060;
            --bg: #f4efe6;
            --bg-dark: #e8e3da;
            --text: #2b2b2b;
            --text-light: #8a8a8a;
            --gold: #c23a30;
            --gold-dark: #a02820;
            --success: #4a6b5a;
            --error: #8b3a3a;
            --shadow: rgba(0, 0, 0, 0.08);
            --ink-light: #d5d0c8;
            --ink-mid: #a0a0a0;
            --paper: #faf8f3;
            --radius-xs: 2px;
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 10px;
            --radius-xl: 12px;
            --radius-round: 50%;
        }
        
        body {
            font-family: 'Noto Serif SC', serif;
            background:
                radial-gradient(ellipse 80% 50% at 20% 40%, rgba(160,140,120,0.04) 0%, transparent 50%),
                radial-gradient(ellipse 60% 40% at 80% 60%, rgba(140,130,110,0.03) 0%, transparent 50%),
                radial-gradient(ellipse 100% 30% at 50% 0%, rgba(180,170,150,0.03) 0%, transparent 40%),
                var(--bg);
            min-height: 100vh;
            color: var(--text);
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        /* 顶部导航 */
        .header {
            background: var(--paper);
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--ink-light);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
            font-size: 1.6em;
            font-weight: 400;
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            gap: 10px;
            letter-spacing: 2px;
        }

        .logo::before {
            content: "";
            width: 2px;
            height: 1.2em;
            background: var(--gold);
            display: inline-block;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            color: var(--text);
        }

        .xp-badge {
            background: transparent;
            color: var(--text);
            padding: 4px 10px;
            border: 1px solid var(--ink-light);
            font-size: 0.9em;
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
        }

        .level-badge {
            background: var(--gold);
            color: #fff;
            padding: 4px 10px;
            font-size: 0.9em;
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
        }

        .xp-badge, .level-badge {
            border-radius: var(--radius-xs);
        }
        
        /* 主容器 */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 游戏模块选择 */
        .game-modules, .level-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        .module-card {
            background: var(--paper);
            border-radius: var(--radius-sm);
            padding: 25px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px var(--shadow);
            border: 1px solid var(--ink-light);
        }

        .module-card:hover {
            border-color: var(--ink-mid);
            box-shadow: 0 4px 12px var(--shadow);
        }

        .module-card:active, .btn:active, .option:active {
            transform: scale(0.98);
        }

        .module-icon {
            font-family: 'Zhi Mang Xing', 'Ma Shan Zheng', serif;
            font-size: 2.4em;
            margin-bottom: 10px;
            color: var(--primary);
            opacity: 0.85;
        }

        .module-title {
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
            font-size: 1.4em;
            font-weight: 400;
            color: var(--primary-dark);
            margin-bottom: 8px;
            letter-spacing: 2px;
        }

        .module-desc {
            font-size: 0.9em;
            color: var(--text-light);
        }
        
        /* 隐藏页面 */
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 游戏界面 */
        .game-header {
            text-align: center;
            padding: 20px;
            background: var(--paper);
            color: var(--text);
            border-radius: var(--radius-sm);
            margin-bottom: 20px;
            border: 1px solid var(--ink-light);
            border-bottom: 2px solid var(--ink-light);
        }

        .game-title {
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
            font-size: 1.6em;
            font-weight: 400;
            margin-bottom: 10px;
            letter-spacing: 3px;
            color: var(--primary-dark);
        }

        .game-progress {
            display: flex;
            justify-content: center;
            gap: 20px;
            font-size: 1em;
            color: var(--text-light);
        }

        .progress-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* 题目区域 */
        .question-box {
            background: var(--paper);
            border-radius: var(--radius-sm);
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px var(--shadow);
            border: 1px solid var(--ink-light);
        }

        .question-type {
            display: inline-block;
            background: var(--secondary);
            color: var(--primary-dark);
            padding: 3px 10px;
            border-radius: var(--radius-xs);
            font-size: 0.9em;
            margin-bottom: 15px;
            border: 1px solid var(--ink-light);
        }

        .question-text {
            font-size: 1.2em;
            line-height: 1.8;
            color: var(--text);
            margin-bottom: 20px;
        }

        /* 选项 */
        .options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .option[role="button"], .module-card[role="button"], .jiugong-char[role="button"], .dianzi-char[role="button"] { cursor: pointer; }
.option:focus-visible, .module-card:focus-visible, .jiugong-char:focus-visible, .dianzi-char:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.option {
            background: var(--bg);
            border: 1px solid var(--ink-light);
            border-radius: var(--radius-sm);
            padding: 15px 20px;
            min-height: 44px;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 12px;
            box-sizing: border-box;
        }

        .option:hover:not(.disabled) {
            border-color: var(--ink-mid);
            background: linear-gradient(90deg, var(--bg) 0%, var(--paper) 100%);
        }

        .option.selected {
            border-color: var(--primary);
            background: var(--paper);
        }

        .option.correct {
            border-color: var(--success);
            background: #f0ede8;
        }

        .option.wrong {
            border-color: var(--error);
            background: #f5f0ec;
        }

        .option.disabled {
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        /* 填空题输入框 */
        .fill-input-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 20px;
        }

        .fill-input {
            width: 100%;
            padding: 15px 20px;
            font-size: 1.2em;
            border: 1px solid var(--ink-light);
            border-radius: var(--radius-sm);
            background: var(--bg);
            color: var(--text);
            font-family: inherit;
            transition: all 0.2s;
            margin-bottom: 10px;
        }

        .fill-input:focus {
            outline: none;
            border-color: var(--ink-mid);
            background: var(--paper);
            box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
        }

        .fill-input:disabled {
            background: #eee;
            cursor: not-allowed;
        }

        .option-letter {
            width: 30px;
            height: 30px;
            border-radius: var(--radius-xs);
            background: var(--secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            flex-shrink: 0;
            border: 1px solid var(--ink-light);
        }

        /* 答案解析 */
        .explanation {
            background: var(--paper);
            border-left: 3px solid var(--gold);
            padding: 15px 20px;
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            margin-top: 15px;
            display: none;
        }

        .explanation.show {
            display: block;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-10px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .explanation-title {
            font-weight: 600;
            color: var(--gold-dark);
            margin-bottom: 8px;
        }

        #nextQuestionBtn {
            background: var(--success);
            font-size: 1.1em;
            padding: 12px 40px;
        }

        #nextQuestionBtn:hover {
            background: #3d5c4a;
        }

        /* 按钮 */
        .btn-primary {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}
.btn-primary:hover {
    opacity: 0.9;
}
.btn-small {
    font-size: 0.85em;
    padding: 6px 12px;
}
.btn {
            background: var(--primary);
            color: #fff;
            border: 1px solid var(--primary-dark);
            padding: 14px 30px;
            min-height: 44px;
            font-size: 1em;
            font-family: inherit;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.3s;
            box-sizing: border-box;
        }

        .btn:hover {
            background: var(--primary-dark);
        }


        .btn-secondary {
            background: var(--secondary);
            color: var(--primary-dark);
            border: 1px solid var(--ink-light);
        }

        .btn-secondary:hover {
            background: var(--bg-dark);
        }
        
        /* 答案/提示按钮 */
        .hint-btn {
            background: var(--secondary);
            border: 1px solid var(--ink-light);
            padding: 8px 16px;
            border-radius: var(--radius-xs);
            font-size: .9rem;
            color: var(--primary-dark);
            margin: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .hint-btn:hover {
            background: var(--primary-dark);
            color: #fff;
            border-color: var(--primary-dark);
        }
        
        /* 结果页面 */
        .result-box {
            background: var(--paper);
            border-radius: var(--radius-sm);
            padding: 30px;
            text-align: center;
            box-shadow: 0 2px 8px var(--shadow);
            border: 1px solid var(--ink-light);
        }

        .result-icon, .login-icon {
            font-family: 'Zhi Mang Xing', serif;
            font-size: 3em;
            margin-bottom: 15px;
            color: var(--primary);
        }

        .result-title {
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
            font-size: 1.8em;
            font-weight: 400;
            color: var(--primary-dark);
            margin-bottom: 10px;
            letter-spacing: 3px;
        }

        .result-score {
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
            font-size: 2.6em;
            font-weight: 400;
            color: var(--gold-dark);
            margin: 20px 0;
        }

        .result-stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 20px 0;
            padding: 20px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            border: 1px solid var(--ink-light);
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-size: 1.8em;
            font-weight: 700;
            color: var(--primary);
        }
        
        .stat-label {
            font-size: 1em;
            color: var(--text-light);
        }
        
        /* 用户菜单 */
        .user-menu {
            position: absolute;
            top: 60px;
            right: 20px;
            background: var(--paper);
            border-radius: var(--radius-sm);
            box-shadow: 0 4px 20px var(--shadow);
            overflow: hidden;
            display: none;
            z-index: 200;
            border: 1px solid var(--ink-light);
        }

        .user-menu.show {
            display: block;
            animation: slideDown 0.2s ease;
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 登录模态框 */
        .login-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }

        .login-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        .login-content {
            position: relative;
            background: var(--paper);
            border-radius: var(--radius-sm);
            padding: 40px 30px;
            text-align: center;
            max-width: 320px;
            width: 90%;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            animation: modalPop 0.3s ease;
            z-index: 2;
            border: 1px solid var(--ink-light);
        }

        @keyframes modalPop {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }


        .login-title {
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
            font-size: 1.5em;
            font-weight: 400;
            color: var(--primary-dark);
            margin-bottom: 10px;
            letter-spacing: 2px;
        }

        .login-subtitle {
            font-size: 1em;
            color: var(--text-light);
            margin-bottom: 25px;
        }

        .login-input {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid var(--ink-light);
            border-radius: var(--radius-sm);
            font-size: 1em;
            margin-bottom: 15px;
            box-sizing: border-box;
            transition: all 0.3s;
            background: var(--bg);
            color: var(--text);
        }

        .login-input:focus {
            outline: none;
            border-color: var(--ink-mid);
        }

        .login-btn {
            width: 100%;
            padding: 16px;
            min-height: 44px;
            font-size: 1.1em;
            border-radius: var(--radius-sm);
        }

        .login-skip-btn {
            width: 100%;
            padding: 14px;
            min-height: 44px;
            font-size: 1em;
            border-radius: var(--radius-sm);
            margin-top: 10px;
            background: transparent;
            color: var(--text-light);
            border: 1px solid var(--ink-light);
            box-shadow: none;
        }

        .login-skip-btn:hover {
            background: var(--bg);
            color: var(--text);
            transform: none;
            box-shadow: none;
        }

        /* 新手引导卡片 */
        .onboarding-cards {
            text-align: left;
            margin-bottom: 20px;
        }

        .onboarding-card {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px dashed var(--ink-light);
        }

        .onboarding-card:last-child {
            border-bottom: none;
        }

        .onboarding-card-icon {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 50%;
            background: var(--primary-dark);
            color: var(--paper);
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
        }

        .onboarding-card-text {
            font-size: 0.95em;
            color: var(--text);
            line-height: 1.6;
        }

        /* 答错安抚语 */
        .explanation-comfort {
            padding: 8px 10px;
            margin-bottom: 10px;
            border-radius: var(--radius-sm);
            background: var(--bg);
            color: var(--text-light);
            font-size: 0.95em;
            text-align: left;
        }

        .menu-item {
            padding: 12px 25px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .menu-item:hover {
            background: var(--bg);
        }

        .menu-item.danger {
            color: var(--error);
        }
        
        /* 成就徽章 */
        .achievement-badge {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--paper);
            color: var(--primary-dark);
            padding: 30px 50px;
            border-radius: var(--radius-sm);
            text-align: center;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            z-index: 1000;
            display: none;
            border: 1px solid var(--ink-light);
        }

        .achievement-badge.show {
            display: block;
            animation: popIn 0.5s ease;
        }

        @keyframes popIn {
            0% { transform: translate(-50%, -50%) scale(0); }
            70% { transform: translate(-50%, -50%) scale(1.1); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }

        .achievement-icon {
            font-family: 'Zhi Mang Xing', serif;
            font-size: 2.5em;
            margin-bottom: 10px;
            color: var(--gold);
        }

        .achievement-title {
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
            font-size: 1.5em;
            font-weight: 400;
            letter-spacing: 2px;
        }

        /* 加载动画 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 200px;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 2px solid var(--ink-light);
            border-top-color: var(--primary);
            border-radius: var(--radius-round);
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 40px;
            color: var(--text-light);
        }

        .empty-icon {
            font-family: 'Zhi Mang Xing', serif;
            font-size: 3em;
            margin-bottom: 15px;
            opacity: 0.4;
            color: var(--primary);
        }

        /* Toast提示 */
        .toast {
            position: fixed;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary-dark);
            color: #fff;
            padding: 12px 25px;
            border-radius: var(--radius-sm);
            font-size: 1em;
            z-index: 500;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            max-width: 300px;
            max-height: 200px;
            overflow-y: auto;
            text-align: center;
            border: 1px solid var(--ink-light);
        }

        .toast.show {
            opacity: 1;
        }
        
        /* ==================== 响应式设计 ==================== */
        
        /* 平板竖屏 (600px - 768px) */
        @media (max-width: 768px) {
            .game-modules {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .game-header {
                padding: 12px 15px;
            }

            .game-title {
                font-size: 1.2em;
            }

            .module-card {
                padding: 15px;
            }

            .module-icon {
                font-size: 2em;
            }

            .module-title {
                font-size: 1.1em;
            }

            .question-box {
                padding: 15px;
            }

            .option {
                padding: 14px 16px;
                min-height: 44px;
                font-size: 1em;
            }

            /* 九宫格调整 */
            .jiugong-char {
                font-size: 1.5em;
            }

            /* 点字成诗调整 */
            .dianzi-char {
                width: 44px;
                height: 44px;
                font-size: 1.3em;
            }

            .selected-char {
                width: 44px;
                height: 44px;
                font-size: 1.1em;
            }
        }

        /* 手机竖屏 (≤600px) */
        @media (max-width: 600px) {
            .game-modules {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .logo {
                font-size: 1.2em;
            }

            .game-header {
                padding: 10px 12px;
                flex-wrap: wrap;
                gap: 8px;
            }

            .game-title {
                font-size: 1.1em;
            }

            .game-progress {
                gap: 10px;
            }

            .progress-item {
                font-size: 1em;
                padding: 4px 8px;
            }

            .module-card {
                padding: 12px;
            }

            .module-icon {
                font-size: 1.8em;
            }

            .module-title {
                font-size: 1em;
            }

            .module-desc {
                font-size: 0.9em;
            }

            .question-box {
                padding: 12px;
                margin: 10px;
            }

            .question-text {
                font-size: 1em;
            }

            .option {
                padding: 14px 16px;
                min-height: 44px;
                font-size: 1em;
                margin-bottom: 8px;
            }

            .option-letter {
                width: 24px;
                height: 24px;
                font-size: 1em;
            }

            .result-stats {
                flex-direction: column;
                gap: 10px;
            }

            /* 九宫格调整 */
            #jiugonggeGrid {
                gap: 6px;
            }

            .jiugong-char {
                font-size: 1.3em;
            }

            /* 点字成诗调整 */
            #dianziGrid {
                gap: 5px;
            }

            .dianzi-char {
                width: 44px;
                height: 44px;
                font-size: 1.2em;
            }

            .selected-char {
                width: 44px;
                height: 44px;
                font-size: 1em;
            }

            .selected-poem {
                min-height: 40px;
                padding: 8px;
            }

            /* 飞花令调整 */
            #feihuaKeyword {
                font-size: 2.5em;
            }

            .feihua-poem {
                font-size: 1em;
                padding: 6px 12px;
            }

            /* 用户菜单调整 */
            .user-menu {
                right: 5px;
                top: 50px;
                min-width: 160px;
            }

            /* 成就弹窗调整 */
            .achievement-badge {
                width: 90%;
                max-width: 300px;
            }

            /* Toast调整 */
            .toast {
                top: auto;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                max-width: 280px;
                max-height: 150px;
                overflow-y: auto;
            }

            .btn {
                padding: 14px 24px;
                min-height: 44px;
                font-size: 1em;
            }

            /* 登录模态框手机适配 */
            .login-content {
                padding: 30px 20px;
            }

            .login-icon {
                font-size: 2.5em;
            }

            .login-title {
                font-size: 1.2em;
            }
        }
        
        /* 手机横屏 (≤850px landscape) */
        @media (max-height: 500px) and (orientation: landscape) {
            .game-modules {
                grid-template-columns: repeat(2, 1fr);
            }

            .question-box {
                margin: 5px;
                padding: 10px;
            }

            .question-text {
                font-size: 1em;
            }

            .options-container {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }

            .option {
                margin-bottom: 0;
            }
        }

        /* iPad 横屏 (768px - 1024px) */
        @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
            .game-modules {
                grid-template-columns: repeat(2, 1fr);
            }

            .question-box {
                max-width: 700px;
                margin: 0 auto;
            }
        }
        
        /* 安全区域适配 (iPhone X 及以上) */
        @supports (padding: max(0px)) {
            .game-container {
                padding-left: max(0px, env(safe-area-inset-left));
                padding-right: max(0px, env(safe-area-inset-right));
            }
            
            .toast {
                bottom: max(20px, env(safe-area-inset-bottom));
            }
        }
        
        /* 触摸设备优化 */
        @media (hover: none) and (pointer: coarse) {
            .option:hover {
                transform: none;
                box-shadow: 0 2px 8px var(--shadow);
            }
            
            .option:active, .module-card:active {
                transform: scale(0.98);
            }

            .module-card:hover {
                transform: none;
            }
            
            .jiugong-char:hover {
                transform: none;
            }
            
            .jiugong-char:active {
                transform: scale(0.95);
            }
        }

        /* 飞花令样式 */
        .feihua-poem {
            padding: 8px 15px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            margin: 5px;
            display: inline-block;
            font-size: 1em;
            border: 1px solid var(--ink-light);
        }

        .feihua-poem.correct {
            background: #f0ede8;
            color: var(--success);
            border-color: var(--success);
        }

        .feihua-poem.wrong {
            background: #f5f0ec;
            color: var(--error);
            border-color: var(--error);
        }

        /* 印章 */
        .seal {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: var(--gold);
            color: #fff;
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
            font-size: 1.2em;
            transform: rotate(-5deg);
            border-radius: var(--radius-sm);
            box-shadow: 0 2px 6px rgba(194, 58, 48, 0.3);
        }

        .seal-sm {
            width: 40px;
            height: 40px;
            font-size: 0.9em;
        }

        .seal-lg {
            width: 80px;
            height: 80px;
            font-size: 1.6em;
        }

        /* 九宫格样式 */
        .jiugong-char {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8em;
            font-weight: 600;
            background: var(--paper);
            border: 1px solid var(--ink-light);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.2s;
            user-select: none;
        }

        .jiugong-char:hover, .dianzi-char:hover {
            background: var(--bg);
            border-color: var(--ink-mid);
        }

        .jiugong-char.selected, .dianzi-char.selected {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary-dark);
        }

        .jiugong-char.correct, .dianzi-char.correct {
            background: var(--success);
            color: #fff;
            border-color: #3d5c4a;
        }

        .jiugong-char.wrong, .dianzi-char.wrong {
            background: var(--error);
            color: #fff;
            border-color: #7a2a2a;
        }

        .jiugong-char.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 点字成诗样式 */
        .dianzi-char {
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
            font-weight: 600;
            background: var(--paper);
            border: 1px solid var(--ink-light);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.2s;
        }

        .dianzi-char.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            transform: none;
        }

        /* 飞花令输入框样式 */
        #feihuaInput {
            width: 100%;
            padding: 15px 20px;
            font-size: 1.2em;
            border: 1px solid var(--ink-light);
            border-radius: var(--radius-sm);
            background: var(--bg);
            color: var(--text);
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            pointer-events: auto;
            touch-action: manipulation;
            font-family: inherit;
        }

        #feihuaInput:focus {
            border-color: var(--ink-mid);
            box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
        }

        #feihuaSubmitBtn {
            pointer-events: auto;
            touch-action: manipulation;
        }

        /* 选中诗句展示 */
        .selected-poem {
            display: flex;
            gap: 5px;
            justify-content: center;
            flex-wrap: wrap;
            margin: 15px 0;
            min-height: 50px;
            padding: 10px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            border: 1px solid var(--ink-light);
        }

        .selected-char {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3em;
            font-weight: 600;
            background: var(--primary);
            color: #fff;
            border-radius: var(--radius-sm);
        }

        .answer-display {
            font-size: 1.3em;
            padding: 15px;
            background: var(--bg);
            border-radius: var(--radius-sm);
            text-align: center;
            color: var(--success);
            margin: 10px 0;
            border: 1px solid var(--ink-light);
        }
    
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }

/* Dictionary and user component placeholders */
.dict-list { list-style: none; padding: 0; }
.user-avatar { width: 40px; height: 40px; border-radius: var(--radius-round); background: var(--ink-light); cursor: pointer; }

/* ===== P2 Inline Style Replacements ===== */
.section-footer { text-align: center; margin-top: 20px; }
.version-info { text-align: center; margin-top: 24px; font-size: 0.75em; color: #aaa; letter-spacing: 0.5px; }
.menu-item-disabled { opacity: 0.5; }
.dev-tag { font-size: 0.8em; color: #999; }
.search-input { width: 100%; padding: 12px 15px; border: 2px solid var(--secondary); border-radius: var(--radius-round); font-size: 1em; font-family: inherit; }
.empty-state-hint { font-size: 0.9em; margin-top: 10px; }
.result-button-row { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.centered-btn-row { text-align: center; margin-top: 15px; }
.feihua-keyword-section { text-align: center; margin-bottom: 20px; }
.feihua-keyword-text { font-size: 3em; font-weight: 700; color: var(--primary); }
.feihua-keyword-hint { color: var(--text-light); margin-top: 5px; }
.feihua-prompt-box { text-align: center; font-size: 1.2em; padding: 20px; background: var(--bg); border-radius: var(--radius-xl); margin-bottom: 20px; }
.feihua-history-box { max-height: 150px; overflow-y: auto; margin-bottom: 15px; }
.feihua-learning-area { text-align: center; }
.feihua-learning-keyword { font-size: 2.5em; font-weight: 700; color: var(--primary); margin: 15px 0; }
.feihua-learning-poems { max-height: 400px; overflow-y: auto; text-align: left; padding: 10px; }
.feihua-challenge-area { text-align: center; }
.feihua-mode-toggle-row { text-align: center; margin: 10px 0; }
.btn-small-toggle { font-size: 0.85em; padding: 6px 12px; }
/* Grid display handled by ID selectors in base styles */
.jiugongge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.selected-chars-display { min-height: 50px; padding: 15px; background: #f0f0f0; border-radius: var(--radius-md); margin: 15px 0; text-align: center; }
.selected-chars-text { font-size: 1.3em; font-weight: bold; color: #333; letter-spacing: 5px; }
.selected-chars-actions { margin-top: 10px; }
.dianzi-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px 0; }
/* match.js — result feedback */
.match-result { text-align: center; padding: 15px; }
.match-feedback-correct { color: var(--success); font-size: 1.2em; }
.match-feedback-wrong { color: var(--error); font-size: 1.2em; }
.match-feedback-sub { margin-top: 5px; color: #666; }
.match-complete-title { color: var(--success); font-size: 1.5em; }
.match-complete-info { margin-top: 10px; }
.match-complete-actions { margin-top: 10px; }
.match-answer-btn-row { text-align: center; margin-top: 10px; }
/* match.js — showMatchAnswer detail view */
.match-answer-container { text-align: left; max-width: 500px; margin: 0 auto; }
.match-answer-header { text-align: center; margin-bottom: 20px; }
.match-answer-title { font-size: 1.4em; font-weight: bold; color: var(--primary-dark); }
.match-answer-author { color: #666; margin-top: 5px; }
.match-answer-section { border-radius: var(--radius-xl); padding: 15px; margin-bottom: 15px; }
.match-answer-section-light { background: #f9f9f9; text-align: center; }
.match-answer-section-green { background: #e8f4e8; }
.match-answer-section-orange { background: #fff3e0; }
.match-answer-section-success { background: var(--success); color: #fff; text-align: center; }
.match-answer-text { font-size: 1.1em; line-height: 1.8; color: #333; }
.match-answer-interp-text { color: #555; line-height: 1.6; }
.match-answer-section-title { font-weight: bold; margin-bottom: 8px; }
.match-answer-section-title-green { color: #2e7d32; }
.match-answer-section-title-orange { color: #e65100; }
.match-answer-section-title-gray { color: #666; }
.match-answer-key-text { color: #333; }
.match-answer-knowledge-wrap { margin-bottom: 15px; }
.match-answer-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.match-answer-tag { background: #e3f2fd; color: #1565c0; padding: 4px 10px; border-radius: var(--radius-xl); font-size: 0.85em; }
.match-answer-correct-label { font-weight: bold; margin-bottom: 5px; }
.match-answer-correct-text { font-size: 1.3em; font-weight: bold; letter-spacing: 3px; }
.match-answer-footer { text-align: center; margin-top: 20px; }
.dianzi-submit-btn { margin-top: 15px; }
.dianzi-clear-btn { margin-top: 10px; }
/* dict.js — modals (shared: showDictPoemDetail + showPoemModal) */
.dict-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.dict-modal-body { background: var(--paper); border-radius: var(--radius-sm); padding: 30px; max-width: 560px; width: 90%; max-height: 85vh; overflow-y: auto; font-family: 'Noto Serif SC',serif; border: 1px solid var(--ink-light); }
.dict-modal-body-sm { max-width: 500px; max-height: 80vh; }
.dict-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dict-modal-title { margin: 0; color: var(--gold-dark); }
.dict-modal-close { background: none; border: none; font-size: 1.5em; cursor: pointer; }
.dict-modal-info { text-align: center; margin-bottom: 15px; }
.dict-modal-poem-title { font-size: 1.3em; font-weight: bold; color: #333; }
.dict-modal-poem-title-sm { font-size: 1.4em; }
.dict-modal-poem-content { background: #fff; padding: 20px; border-radius: var(--radius-lg); text-align: center; line-height: 2.2; font-size: 1.15em; color: #222; margin-bottom: 15px; }
.dict-modal-classic-badge { margin-top: 4px; }
.dict-modal-interp-box { margin-bottom: 15px; padding: 15px; background: #fff; border-radius: var(--radius-md); }
.dict-modal-interp-title { color: var(--gold-dark); }
.dict-modal-interp-text { color: #555; margin: 10px 0 0 0; line-height: 1.8; }
.dict-modal-footer { text-align: center; margin-top: 20px; }
/* dict.js — same-author section */
.dict-same-author { margin-top: 20px; padding-top: 20px; border-top: 1px dashed #ddd; }
.dict-same-author-title { font-weight: bold; color: var(--gold-dark); margin-bottom: 10px; }
.dict-same-author-list { display: flex; flex-direction: column; gap: 8px; }
.dict-same-author-item { cursor: pointer; color: #555; padding: 8px; background: #f8f8f8; border-radius: var(--radius-md); }
.dict-same-author-item:hover { background: #eee; }
/* dict.js — author index */
.dict-header-nav { display: flex; gap: 10px; margin-bottom: 15px; }
.dict-nav-btn { flex: 1; }
.dict-dynasty-group { margin-bottom: 20px; }
.dict-dynasty-title { font-weight: bold; color: var(--gold-dark); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--gold-light); cursor: pointer; }
.dict-dynasty-authors { display: flex; flex-wrap: wrap; gap: 8px; }
.dict-author-count { color: #888; }
/* dict.js — search results */
.dict-result-summary { margin-bottom: 12px; color: #888; font-size: 0.9em; }
.dict-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dict-classic-star { color: var(--gold-dark); margin-left: 4px; }
.dict-result-item { margin-bottom: 15px; cursor: pointer; }
.dict-result-title { font-size: 1.15em; }
.dict-result-meta { color: #666; font-size: 0.9em; }
.dict-result-preview { color: #555; font-size: 0.95em; line-height: 1.6; }
.dict-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
.dict-pagination-btn { padding: 6px 14px; }
.dict-author-btn { font-size: 0.85em; padding: 5px 10px; }
.dict-source { margin-bottom: 15px; color: #888; font-size: 0.9em; }
/* dict.js — enhanced explanation (in wrong-notes) */
.dict-enhanced-poem { color: #333; font-size: 1.1em; line-height: 1.8; padding: 10px; background: #f8f8f8; border-radius: var(--radius-md); }
.dict-enhanced-section { margin-bottom: 15px; }
.dict-enhanced-label { color: #666; }
.dict-enhanced-label-sm { color: #555; }
/* shared stat/ranking cards */
.stat-card { margin-bottom: 20px; padding: 15px; background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--ink-light); }
.stat-card-white { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: none; }
.stat-grid { display: flex; justify-content: space-around; text-align: center; flex-wrap: wrap; gap: 10px; }
.stat-value { font-size: 1.5em; font-weight: bold; color: var(--gold-dark); }
.stat-value-lg { font-size: 2em; }
.stat-value-score { font-size: 1.3em; font-weight: bold; color: var(--gold-dark); }
.stat-label { font-size: 0.85em; color: #888; }
.stat-label-sm { font-size: 0.8em; color: #888; }
.section-title { font-weight: bold; color: var(--gold-dark); margin-bottom: 12px; font-size: 1.1em; }
.section-title-row { font-weight: bold; color: var(--gold-dark); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--gold-light); display: flex; justify-content: space-between; align-items: center; }
.section-count { font-size: 0.85em; color: #888; }
.tab-row { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn { flex: 1; }
.empty-hint { font-size: 0.9em; margin-top: 10px; color: #888; }
/* ranking.js */
.rank-list-item { display: flex; align-items: center; padding: 12px; margin-bottom: 8px; background: #fff; border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.rank-badge { width: 32px; height: 32px; border-radius: var(--radius-round); display: flex; align-items: center; justify-content: center; margin-right: 12px; font-weight: bold; }
.rank-info { flex: 1; }
.rank-mode { font-weight: bold; color: #333; }
.rank-meta { font-size: 0.8em; color: #888; }
/* achievements.js */
.ach-category-group { margin-bottom: 20px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ach-card { padding: 15px; text-align: center; border-radius: var(--radius-lg); }
.ach-card-icon { width: 50px; height: 50px; font-size: 1.5em; margin: 0 auto; }
.ach-card-title { font-size: 0.95em; margin: 8px 0 4px; }
.ach-card-desc { font-size: 0.8em; color: #888; }
.ach-card-status { margin-top: 8px; }
.ach-status-unlocked { color: #4CAF50; font-size: 0.8em; }
.ach-status-locked { color: #999; font-size: 0.8em; }
.ach-progress-card { margin-bottom: 20px; padding: 15px; background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--ink-light); text-align: center; }
.ach-progress-title { font-size: 1.3em; font-weight: bold; color: var(--gold-dark); margin-bottom: 8px; }
.ach-progress-count { font-size: 2em; font-weight: bold; color: var(--gold-dark); }
.ach-progress-bar-bg { margin-top: 10px; height: 8px; background: #eee; border-radius: var(--radius-sm); overflow: hidden; }
.ach-progress-bar-fill { height: 100%; background: var(--gold-dark); transition: width 0.5s; }
.ach-progress-text { font-size: 0.85em; color: #888; margin-top: 5px; }
/* wrong-notes.js */
.wn-weakness-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wn-weakness-tag { font-size: 0.85em; padding: 6px 12px; }
.wn-weakness-count { color: #e74c3c; font-weight: bold; }
.wn-hint { font-size: 0.8em; color: #888; margin-top: 10px; }
.wn-review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.wn-review-count { font-weight: bold; color: #333; }
.wn-kp-tag { display: inline-block; background: var(--gold-light); color: var(--gold-dark); padding: 2px 8px; border-radius: var(--radius-xl); font-size: 0.75em; margin-right: 4px; }
.wn-note-card { margin-bottom: 20px; padding: 15px; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.wn-q-text { font-size: 1em; margin-bottom: 15px; color: #333; }
.wn-answer-section { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #eee; }
.wn-answer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.wn-answer-meta { color: #888; font-size: 0.85em; }
.hint-btn-answer { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); }
.loading-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--paper); padding: 30px 40px; border-radius: var(--radius-sm); text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2); border: 1px solid var(--ink-light); z-index: 10000; }
.loading-icon { font-family: 'Ma Shan Zheng', serif; font-size: 2em; margin-bottom: 15px; color: var(--gold); }
.loading-text { font-size: 1.1em; margin-bottom: 10px; }
.loading-bar-track { width: 200px; height: 6px; background: #eee; border-radius: var(--radius-xs); margin: 15px auto; overflow: hidden; }
.loading-bar-fill { width: 0%; height: 100%; background: var(--gold-dark); transition: width 0.3s; }
.hidden { display: none !important; }
#nextQuestionBtn, #showPoemBtn { display: inline-block; }
#feihuaStartBtn { display: inline-block; }
#feihuaChallengeArea { display: block; }
#feihuaProgress { display: flex; }
#jiugonggeGrid { display: grid; }
#dianziGrid { display: flex; }
#selectedCharsDisplay { display: block; }
#matchResult { display: block; }
#loadingMsg { display: block; }
#loadErrorMsg { display: block; }
/* Fill-input feedback state classes */
.fill-input.correct-state { border-color: var(--success) !important; background: #E8F5E9 !important; }
.fill-input.wrong-state { border-color: var(--error) !important; background: #FFEBEE !important; color: var(--error) !important; }

/* ===== P2 Step 5: JS Template-Literal Inline Styles → CSS Classes ===== */
/* feihua.js — shared patterns */
.poem-source-box { margin: 15px 0; padding: 15px; border-radius: var(--radius-lg); border-left: 4px solid; }
.poem-source-box.correct-source { background: rgba(46,204,113,0.15); border-left-color: #2ecc71; }
.poem-source-box.wrong-source { background: rgba(231,76,60,0.15); border-left-color: #e74c3c; }
.poem-source-box.skip-source { background: rgba(52,152,219,0.15); border-left-color: #3498db; }
.poem-source-label { font-weight: bold; margin-bottom: 10px; }
.poem-source-text { font-size: 1.2em; color: var(--text); margin-bottom: 8px; line-height: 1.6; }
.poem-source-attribution { color: #666; font-size: 0.9em; }
.poem-source-hint-attribution { color: #666; font-size: 0.95em; margin-bottom: 5px; }
.poem-source-hint-keyword { color: #888; font-size: 0.85em; }
.poem-source-keyword { color: var(--primary); font-size: 1.2em; font-weight: bold; }

/* feihua.js — learning section (3× repeated) */
.feihua-learning-section { margin-top: 20px; padding-top: 20px; border-top: 1px dashed #ddd; }
.feihua-learning-title { color: #e67e22; font-weight: bold; margin-bottom: 12px; }
.feihua-learning-list { max-height: 200px; overflow-y: auto; }
.feihua-learning-item { margin-bottom: 10px; padding: 8px; background: rgba(230,126,34,0.1); border-radius: var(--radius-md); }
.feihua-learning-item-text { color: var(--text); }
.feihua-learning-item-attribution { color: #888; font-size: 0.85em; }

/* feihua.js — stat grid (3× repeated) */
.feihua-stat-grid { display: flex; justify-content: space-around; text-align: center; }
.feihua-stat-value { font-size: 1.8em; font-weight: bold; }
.feihua-stat-value-success { color: #27ae60; }
.feihua-stat-value-warning { color: #e67e22; }
.feihua-stat-value-info { color: #3498db; }
.feihua-stat-value-sm { font-size: 1.5em; }
.feihua-stat-label { color: #888; font-size: 0.85em; }

/* feihua.js — result screens */
.feihua-result-container { text-align: center; padding: 20px; }
.feihua-result-icon { font-size: 2.5em; margin-bottom: 10px; }
.feihua-result-title { color: #27ae60; font-size: 1.5em; font-weight: bold; }
.feihua-result-title-error { color: var(--error); font-size: 1.3em; font-weight: bold; }
.feihua-result-subtitle { color: #888; margin-top: 5px; }
.feihua-result-stats { background: rgba(39,174,96,0.15); border-radius: var(--radius-lg); padding: 15px; margin-top: 15px; }
.feihua-result-stats-timeout { background: rgba(149,165,166,0.2); border-radius: var(--radius-lg); padding: 15px; margin-top: 10px; }
.feihua-result-footer { text-align: center; color: #888; font-size: 0.9em; margin-top: 10px; }
.feihua-result-actions { text-align: center; margin-top: 20px; }
.feihua-btn-primary { padding: 15px 40px; font-size: 1.1em; background: var(--primary); }
.feihua-btn-restart { padding: 12px 30px; margin-right: 10px; }
.feihua-btn-next { padding: 12px 30px; background: var(--primary); }

/* feihua.js — input area */
.feihua-input-area { margin-bottom: 15px; }
.feihua-input-hint { text-align: center; margin-bottom: 15px; color: #666; font-size: 0.95em; }
.feihua-input-field { width: 100%; padding: 15px 20px; font-size: 1.2em; border: 2px solid var(--primary); border-radius: var(--radius-lg); background: var(--bg-dark); color: var(--text); }
.feihua-submit-btn { margin-top: 15px; padding: 12px 30px; font-size: 1.1em; width: 100%; }
.feihua-skip-link-area { text-align: center; margin-top: 12px; }
.feihua-skip-link { color: #888; font-size: 14px; text-decoration: underline; cursor: pointer; }
.skip-link-area { text-align: center; margin-top: 15px; }
.skip-link { color: #666; font-size: 14px; text-decoration: underline; cursor: pointer; }
.timer-warning { color: #e74c3c; }

/* feihua.js — learning poem card */
.feihua-poem-card { background: var(--card); border-radius: var(--radius-xl); padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.feihua-poem-row { padding: 12px 0; display: flex; align-items: flex-start; gap: 10px; }
.feihua-poem-row-content { flex: 1; }
.feihua-poem-row-text { font-size: 1.1em; color: var(--text); margin-bottom: 5px; line-height: 1.5; }
.feihua-poem-row-author { color: #666; font-size: 0.85em; }
.feihua-poem-row-keyword { color: #999; font-size: 0.75em; margin-top: 3px; }
.feihua-poem-card-footer { text-align: center; color: #888; font-size: 0.85em; padding: 10px; }
.feihua-poem-loading { color: #888; text-align: center; padding: 20px; }