/* 全局样式设置 */
body {
    font-family: 'Microsoft YaHei', sans-serif;  /* 使用微软雅黑字体，提升中文显示效果 */
    background-color: #fff5e6;                   /* 浅黄色背景，营造温暖学习氛围 */
    margin: 0;                                   /* 移除默认外边距 */
    padding: 20px;                               /* 设置内边距，避免内容贴边 */
    display: flex;                               /* 使用弹性布局 */
    justify-content: center;                     /* 水平居中内容 */
}

/* 主容器样式 */
.container {
    display: flex;                               /* 使用弹性布局 */
    width: 100%;                                 /* 占满可用宽度 */
    max-width: 1200px;                           /* 限制最大宽度，避免在大屏幕上过宽 */
    gap: 20px;                                   /* 设置子元素间距 */
}

/* 左侧面板样式 */
.left-panel {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* 确保内部元素垂直排列 */
    gap: 20px; /* 统一间距 */
    width: 280px;
    align-items: center; /* 使内部块级元素居中 */
}

.upload-section, .timer-section, .progress-bar-container {
    width: 100%; /* 让这些区域占满左侧面板宽度 */
}

/* 新增计时器区域样式 */
.timer-section {
    text-align: center; /* 文本居中 */
    background-color: #fff; /* 可选：给计时器区域一个背景 */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}

.timer-title {
    font-size: 16px;
    color: #555;
    margin-bottom: 8px;
}

.timer {
    font-size: 28px; /* 调整计时器字体大小 */
    font-weight: bold;
    color: #333;
    background-color: #e9ecef; /* 轻微背景色 */
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block; /* 使背景适应内容 */
    min-width: 80px; /* 确保一个最小宽度 */
    margin-left: 0; /* 移除之前的左外边距 */
    margin-top: 0;  /* 移除之前的上外边距 */
}

.progress-bar-container {
    width: 100%;
    text-align: center; /* 进度条标题和百分比居中 */
}

.progress-title {
    font-size: 16px;
    color: #555;
    margin-bottom: 8px;
}

/* 右侧面板样式 */
.right-panel {
    flex: 3;                                     /* 弹性比例为3，占据较大空间 */
    background-color: white;                     /* 白色背景 */
    border-radius: 20px;                         /* 圆角边框 */
    padding: 20px;                               /* 内边距 */
    display: flex;                               /* 使用弹性布局 */
    flex-direction: column;                      /* 垂直排列子元素 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);    /* 添加阴影效果，增强立体感 */
}

/* 进度条外层样式 */
.progress-bar {
    width: 100%;                                 /* 占满容器宽度 */
    height: 30px;                                /* 设置高度 */
    background-color: #ffd280;                   /* 浅橙色背景 */
    border-radius: 8px;                          /* 圆角边框 */
    position: relative;                          /* 相对定位，为内部进度条提供参考 */
    overflow: hidden;                            /* 隐藏溢出内容 */
    margin-bottom: 10px;                         /* 底部外边距 */
}

/* 进度条内层样式（实际进度） */
.progress {
    position: absolute;                          /* 绝对定位 */
    left: 0;                                     /* 左对齐 */
    top: 0;                                      /* 顶部对齐 */
    height: 100%;                                /* 高度100%，填满容器 */
    width: 0%;                                   /* 初始宽度为0 */
    background-color: #ff9f1a;                   /* 深橙色，表示已完成部分 */
    transition: width 0.3s;                      /* 添加过渡效果，使进度变化平滑 */
    border-radius: 0 8px 8px 0;                  /* 右侧圆角 */
}

/* 进度文本样式 */
.progress-text {
    margin-top: 5px;                             /* 顶部外边距 */
    font-size: 16px;                             /* 字体大小 */
    font-weight: bold;                           /* 粗体 */
}

/* 计时器样式 */
.timer {
    font-size: 42px;                             /* 大字体，突出显示 */
    text-align: center;                          /* 文本居中 */
    font-weight: bold;                           /* 粗体 */
    background-color: #f8f8f8;                   /* 浅灰色背景 */
    border-radius: 10px;                         /* 圆角边框 */
    padding: 15px 25px;                          /* 内边距 */
    border: 2px solid #ddd;                      /* 边框 */
    margin-left: 10px;                           /* 左侧外边距 */
    min-width: 150px;                            /* 最小宽度 */
    height: 50px;                                /* 固定高度 */
    display: flex;                               /* 使用弹性布局 */
    justify-content: center;                     /* 水平居中内容 */
    align-items: center;                         /* 垂直居中内容 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);    /* 添加阴影效果 */
}

/* 进度条标题样式 */
.progress-title {
    font-size: 18px;                             /* 字体大小 */
    font-weight: bold;                           /* 粗体 */
    margin-bottom: 10px;                         /* 底部外边距 */
    color: #333;                                 /* 深灰色文本 */
    text-align: center;                          /* 文本居中 */
}

/* 游戏标题样式 */
.title {
    font-size: 36px;                             /* 大字体 */
    text-align: center;                          /* 文本居中 */
    margin-bottom: 20px;                         /* 底部外边距 */
    font-weight: bold;                           /* 粗体 */
    color: #4CAF50;                              /* 绿色，突出显示 */
}

/* 控制区域容器样式 */
.controls-container {
    display: flex;                               /* 使用弹性布局 */
    flex-direction: column;                      /* 垂直排列子元素 */
    gap: 15px;                                   /* 设置子元素间距 */
}

/* 游戏区域样式 */
.game-area {
    display: grid;                               /* 使用网格布局 */
    grid-template-columns: repeat(4, 1fr);       /* 4列等宽布局 */
    gap: 10px;                                   /* 设置网格间距 */
    margin-bottom: 20px;                         /* 底部外边距 */
    max-height: 60vh;                            /* 限制最大高度为视口高度的60% */
    overflow-y: auto;                            /* 垂直方向溢出时显示滚动条 */
    padding-right: 5px;                          /* 右侧内边距，为滚动条留出空间 */
}

/* 卡片基础样式 */
.card {
    height: 80px;                                /* 固定高度 */
    border-radius: 10px;                         /* 圆角边框 */
    display: flex;                               /* 使用弹性布局 */
    justify-content: center;                     /* 水平居中内容 */
    align-items: center;                         /* 垂直居中内容 */
    font-size: 20px;                             /* 字体大小 */
    font-weight: bold;                           /* 粗体 */
    cursor: pointer;                             /* 鼠标指针样式为手型 */
    transition: all 0.3s;                        /* 添加过渡效果 */
}

/* 英文卡片样式 */
.english-card {
    background-color: #b3ffb3;                   /* 浅绿色背景 */
}

/* 中文卡片样式 */
.chinese-card {
    background-color: #ffcc80;                   /* 浅橙色背景 */
}

/* 选中卡片样式 */
.selected {
    transform: scale(0.95);                      /* 缩小效果，提供视觉反馈 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);      /* 添加阴影效果 */
}

/* 错误匹配卡片样式 */
.wrong {
    background-color: #ff6666 !important;        /* 红色背景，表示错误 */
}

/* 控制区域样式 */
.controls {
    display: flex;                               /* 使用弹性布局 */
    justify-content: space-between;              /* 两端对齐 */
    align-items: center;                         /* 垂直居中 */
    margin-bottom: 15px;                         /* 底部外边距 */
}

/* 按钮组样式 */
.button-group {
    display: flex;                               /* 使用弹性布局 */
    gap: 10px;                                   /* 设置按钮间距 */
}

/* 时间输入框样式 */
.time-input {
    padding: 10px 15px;                          /* 内边距 */
    border: 1px solid #ddd;                      /* 边框 */
    border-radius: 10px;                         /* 圆角边框 */
    width: 150px;                                /* 固定宽度 */
    text-align: center;                          /* 文本居中 */
    margin-left: 10px;                           /* 左侧外边距 */
    color: #333;                                 /* 文本颜色 */
    height: auto;                                /* 自动高度 */
    box-sizing: border-box;                      /* 盒模型设置，使padding不增加元素宽度 */
}

/* 时间输入框占位符样式 */
.time-input::placeholder {
    color: #999;                                 /* 灰色文本 */
    opacity: 1;                                  /* 不透明度，确保在所有浏览器中都显示 */
}

/* 按钮基础样式 */
button {
    padding: 10px 20px;                          /* 内边距 */
    border: none;                                /* 无边框 */
    border-radius: 10px;                         /* 圆角边框 */
    background-color: #4CAF50;                   /* 绿色背景 */
    color: white;                                /* 白色文本 */
    font-size: 16px;                             /* 字体大小 */
    cursor: pointer;                             /* 鼠标指针样式为手型 */
    transition: background-color 0.3s;           /* 背景色过渡效果 */
}

/* 按钮悬停样式 */
button:hover {
    background-color: #45a049;                   /* 深绿色背景，提供视觉反馈 */
}

/* 禁用按钮样式 */
button:disabled {
    background-color: #cccccc;                   /* 灰色背景 */
    cursor: not-allowed;                         /* 禁用鼠标指针样式 */
}

/* 自定义文件上传按钮样式 */
.custom-file-upload {
    border: 2px dashed #4CAF50;                  /* 虚线边框 */
    border-radius: 10px;                         /* 圆角边框 */
    display: inline-block;                       /* 行内块元素 */
    padding: 10px 20px;                          /* 内边距 */
    cursor: pointer;                             /* 鼠标指针样式为手型 */
    background-color: #f8f8f8;                   /* 浅灰色背景 */
    color: #4CAF50;                              /* 绿色文本 */
    font-weight: bold;                           /* 粗体 */
    text-align: center;                          /* 文本居中 */
    transition: all 0.3s;                        /* 添加过渡效果 */
    width: 100%;                                 /* 占满容器宽度 */
    box-sizing: border-box;                      /* 盒模型设置 */
}

/* 自定义文件上传按钮悬停样式 */
.custom-file-upload:hover {
    background-color: #e8f5e9;                   /* 浅绿色背景 */
    border-color: #2e7d32;                       /* 深绿色边框 */
}

/* 文件图标样式 */
.custom-file-upload i {
    margin-right: 8px;                           /* 右侧外边距，与文本分隔 */
}

/* 隐藏原始文件输入框 */
input[type="file"] {
    display: none;                               /* 不显示原始文件输入框 */
}

/* 空卡片样式（游戏开始前的占位卡片） */
.empty-card {
    height: 80px;                                /* 固定高度 */
    border-radius: 10px;                         /* 圆角边框 */
    border: 2px dashed #ccc;                     /* 虚线边框 */
    background-color: #f9f9f9;                   /* 浅灰色背景 */
    display: flex;                               /* 使用弹性布局 */
    justify-content: center;                     /* 水平居中内容 */
    align-items: center;                         /* 垂直居中内容 */
    font-size: 16px;                             /* 字体大小 */
    color: #999;                                 /* 灰色文本 */
}

/* 模态框样式 */
.modal {
    display: none;                               /* 初始不显示 */
    position: fixed;                             /* 固定定位 */
    top: 0;                                      /* 顶部对齐 */
    left: 0;                                     /* 左侧对齐 */
    width: 100%;                                 /* 宽度100% */
    height: 100%;                                /* 高度100% */
    background-color: rgba(0, 0, 0, 0.6);        /* 半透明黑色背景，加深一点 */
    justify-content: center;                     /* 水平居中内容 */
    align-items: center;                         /* 垂直居中内容 */
    z-index: 1000;                               /* 层级设置，确保在最上层 */
    opacity: 0;                                  /* 初始透明 */
    transition: opacity 0.3s ease-in-out;        /* 添加淡入效果 */
}

/* 使模态框可见时的样式 */
.modal[style*="display: flex"] {
    opacity: 1; /* 淡入 */
}


/* 模态框内容样式 */
.modal-content {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    width: 80%;
    max-width: 450px;
    text-align: center; /* 保留，用于文本内容的居中 */
    position: relative;
    animation: fadeInModal 0.3s ease-out;
    /* --- 新增代码开始 --- */
    display: flex;
    flex-direction: column;
    align-items: center; /* 这会使其所有直接子元素（包括按钮）水平居中 */
    /* --- 新增代码结束 --- */
}

/* 使模态框内容可见时的样式 */
.modal[style*="display: flex"] .modal-content {
    transform: scale(1); /* 恢复正常大小 */
}


/* 模态框标题样式 (可以通用或单独设置) */
#modal-title, #upload-modal-title { /* 应用到两个标题 */
    font-size: 28px;
    font-weight: bold;
    color: #4CAF50; /* 保持绿色 */
    margin-bottom: 20px; /* 调整间距 */
}

/* 模态框结果文本样式 (可以通用或单独设置) */
#game-result, #upload-result { /* 应用到两个结果区域 */
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

/* 模态框按钮样式 (通用) */
.modal-button {
    margin-top: 30px;
    padding: 12px 25px;
    font-size: 18px;
}

/* 响应式设计 - 移动设备适配 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;                  /* 垂直排列面板 */
    }

    .game-area {
        grid-template-columns: repeat(2, 1fr);   /* 2列布局，适应窄屏 */
    }

    .controls {
        flex-direction: column;                  /* 垂直排列控制元素 */
        gap: 10px;                               /* 设置元素间距 */
    }

    .button-group {
        width: 100%;                             /* 占满容器宽度 */
        justify-content: center;                 /* 水平居中按钮 */
    }

    .timer {
        margin-left: 0;                          /* 移除左侧外边距 */
        margin-top: 10px;                        /* 添加顶部外边距 */
    }
}

.card {
    height: 80px;                                /* 固定高度 */
    border-radius: 10px;                         /* 圆角边框 */
    display: flex;                               /* 使用弹性布局 */
    justify-content: center;                     /* 水平居中内容 */
    align-items: center;                         /* 垂直居中内容 */
    font-size: 20px;                             /* 字体大小 */
    font-weight: bold;                           /* 粗体 */
    cursor: pointer;                             /* 鼠标指针样式为手型 */
    transition: all 0.3s;                        /* 添加过渡效果 */
    transition: transform 0.6s, background-color 0.3s, visibility 0s 0.6s; /* 添加 transform 和 visibility 过渡 */
    transform-style: preserve-3d; /* 允许子元素在3D空间定位 */
    position: relative; /* 用于绝对定位伪元素 */
    backface-visibility: hidden; /* 隐藏背面 */
}

.card.flipped {
    transform: rotateY(180deg); /* 翻转卡片 */
    background-color: #e8f5e9; /* 翻转后可以改变背景色 */
}

/* 隐藏已匹配的卡片（通过JS设置visibility: hidden） */
.card.matched {
   /* 可以保留这个类，但主要通过JS控制隐藏 */
}

/* 按钮组样式 */
.button-group {
    display: flex;                               /* 使用弹性布局 */
    gap: 10px;                                   /* 设置按钮间距 */
}

/* 时间输入框样式 */
.time-input {
    padding: 10px 15px;                          /* 内边距 */
    border: 1px solid #ddd;                      /* 边框 */
    border-radius: 10px;                         /* 圆角边框 */
    width: 150px;                                /* 固定宽度 */
    text-align: center;                          /* 文本居中 */
    margin-left: 10px;                           /* 左侧外边距 */
    color: #333;                                 /* 文本颜色 */
    height: auto;                                /* 自动高度 */
    box-sizing: border-box;                      /* 盒模型设置，使padding不增加元素宽度 */
}

/* 时间输入框占位符样式 */
.time-input::placeholder {
    color: #999;                                 /* 灰色文本 */
    opacity: 1;                                  /* 不透明度，确保在所有浏览器中都显示 */
}

/* 按钮基础样式 */
button {
    padding: 10px 15px;                          /* 内边距 */
    border: none;                                /* 无边框 */
    border-radius: 10px;                         /* 圆角边框 */
    background-color: #4CAF50;                   /* 绿色背景 */
    color: white;                                /* 白色文本 */
    font-size: 16px;                             /* 字体大小 */
    cursor: pointer;                             /* 鼠标指针样式为手型 */
    transition: background-color 0.3s;           /* 背景色过渡效果 */
}

/* 按钮悬停样式 */
button:hover {
    background-color: #45a049;                   /* 深绿色背景，提供视觉反馈 */
}

/* 禁用按钮样式 */
button:disabled {
    background-color: #cccccc;                   /* 灰色背景 */
    cursor: not-allowed;                         /* 禁用鼠标指针样式 */
}

/* 自定义文件上传按钮样式 */
.custom-file-upload {
    border: 2px dashed #4CAF50;                  /* 虚线边框 */
    border-radius: 10px;                         /* 圆角边框 */
    display: inline-block;                       /* 行内块元素 */
    padding: 10px 20px;                          /* 内边距 */
    cursor: pointer;                             /* 鼠标指针样式为手型 */
    background-color: #f8f8f8;                   /* 浅灰色背景 */
    color: #4CAF50;                              /* 绿色文本 */
    font-weight: bold;                           /* 粗体 */
    text-align: center;                          /* 文本居中 */
    transition: all 0.3s;                        /* 添加过渡效果 */
    width: 100%;                                 /* 占满容器宽度 */
    box-sizing: border-box;                      /* 盒模型设置 */
}

/* 自定义文件上传按钮悬停样式 */
.custom-file-upload:hover {
    background-color: #e8f5e9;                   /* 浅绿色背景 */
    border-color: #2e7d32;                       /* 深绿色边框 */
}

/* 文件图标样式 */
.custom-file-upload i {
    margin-right: 8px;                           /* 右侧外边距，与文本分隔 */
}

/* 隐藏原始文件输入框 */
input[type="file"] {
    display: none;                               /* 不显示原始文件输入框 */
}

/* 空卡片样式（游戏开始前的占位卡片） */
.empty-card {
    height: 80px;                                /* 固定高度 */
    border-radius: 10px;                         /* 圆角边框 */
    border: 2px dashed #ccc;                     /* 虚线边框 */
    background-color: #f9f9f9;                   /* 浅灰色背景 */
    display: flex;                               /* 使用弹性布局 */
    justify-content: center;                     /* 水平居中内容 */
    align-items: center;                         /* 垂直居中内容 */
    font-size: 16px;                             /* 字体大小 */
    color: #999;                                 /* 灰色文本 */
}

/* 模态框标题样式 */
#modal-title { /* 使用 ID 选择器 */
    font-size: 36px;                             /* 大幅增加字体大小 */
    font-weight: bold;                           /* 加粗 */
    color: #4CAF50;                              /* 统一的颜色*/
    margin-bottom: 15px;                         /* 调整与下方内容的间距 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);    /* 添加轻微文字阴影 */
}

/* 模态框结果文本样式 */
#game-result {
    font-size: 20px;                             /* 也可以适当增大结果字体 */
    line-height: 1.6;
    color: #555;                                 /* 调整颜色，与标题区分 */
    margin-top: 10px;                            /* 增加与标题的间距 */
}

/* 上传提示文字样式 */
.upload-tip {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin: 10px 0;
    text-align: left;
}

/* 下载范例按钮样式 */
.download-template-btn {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    border: 1px solid #4CAF50;
    border-radius: 10px;
    background-color: #ffffff;
    color: #4CAF50;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
}

.download-template-btn:hover {
    background-color: #e8f5e9;
    border-color: #2e7d32;
    color: #2e7d32;
}

/* 控制区域的每一行 */
.controls-row {
    display: flex;
    align-items: center; /* 垂直居中对齐行内元素 */
}

#controls-row1 {
    justify-content: space-evenly; /* 均匀分布第一行的元素，并在两端和元素间留有空间 */
    gap: 15px; /* 元素之间的间距，可以适当调整 */
}

/* #controls-row1 > * { 
    flex-basis: 0; 
} */ /* 移除这个，让flex-grow和min-width主导 */

#controls-row1 button {
    flex-grow: 1; /* 按钮参与空间分配 */
    flex-shrink: 1;
    min-width: 130px; /* 给按钮一个合适的最小宽度 */
    white-space: nowrap; /* 防止按钮文字换行 */
}

#controls-row2 {
    justify-content: flex-end; /* 右对齐第二行的按钮 */
    gap: 10px; /* 按钮之间的间距 */
}

/* 时间输入框和单词数量输入框样式调整 */
.time-input {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    flex-grow: 1.5; /* 让输入框比按钮占据更多空间 */
    flex-shrink: 1;
    min-width: 230px; /* 显著增加输入框的最小宽度以显示完整placeholder */
    text-align: center;
    color: #333;
    box-sizing: border-box;
    font-size: 15px; 
    height: 40px; 
    margin-left: 0; 
}

/* 按钮基础样式调整，确保与输入框高度协调 */
button {
    padding: 10px 15px; /* 调整padding以匹配输入框 */
    border: none;
    border-radius: 10px;
    background-color: #4CAF50;
    color: white;
    font-size: 15px; /* 调整字体大小 */
    cursor: pointer;
    transition: background-color 0.3s;
    height: 40px; /* 与输入框高度统一 */
    box-sizing: border-box; /* 重要：确保padding和border包含在height内 */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    /* white-space: nowrap; */ /* 如果按钮文字可能很长，可以考虑加入 */
}

/* 按钮悬停样式 */
button:hover {
    background-color: #45a049;                   /* 深绿色背景，提供视觉反馈 */
}

/* 禁用按钮样式 */
button:disabled {
    background-color: #cccccc;                   /* 灰色背景 */
    cursor: not-allowed;                         /* 禁用鼠标指针样式 */
}

/* 自定义文件上传按钮样式 */
.custom-file-upload {
    border: 2px dashed #4CAF50;                  /* 虚线边框 */
    border-radius: 10px;                         /* 圆角边框 */
    display: inline-block;                       /* 行内块元素 */
    padding: 10px 20px;                          /* 内边距 */
    cursor: pointer;                             /* 鼠标指针样式为手型 */
    background-color: #f8f8f8;                   /* 浅灰色背景 */
    color: #4CAF50;                              /* 绿色文本 */
    font-weight: bold;                           /* 粗体 */
    text-align: center;                          /* 文本居中 */
    transition: all 0.3s;                        /* 添加过渡效果 */
    width: 100%;                                 /* 占满容器宽度 */
    box-sizing: border-box;                      /* 盒模型设置 */
}

/* 自定义文件上传按钮悬停样式 */
.custom-file-upload:hover {
    background-color: #e8f5e9;                   /* 浅绿色背景 */
    border-color: #2e7d32;                       /* 深绿色边框 */
}

/* 文件图标样式 */
.custom-file-upload i {
    margin-right: 8px;                           /* 右侧外边距，与文本分隔 */
}

/* 隐藏原始文件输入框 */
input[type="file"] {
    display: none;                               /* 不显示原始文件输入框 */
}

/* 空卡片样式（游戏开始前的占位卡片） */
.empty-card {
    height: 80px;                                /* 固定高度 */
    border-radius: 10px;                         /* 圆角边框 */
    border: 2px dashed #ccc;                     /* 虚线边框 */
    background-color: #f9f9f9;                   /* 浅灰色背景 */
    display: flex;                               /* 使用弹性布局 */
    justify-content: center;                     /* 水平居中内容 */
    align-items: center;                         /* 垂直居中内容 */
    font-size: 16px;                             /* 字体大小 */
    color: #999;                                 /* 灰色文本 */
}

/* 模态框标题样式 */
#modal-title { /* 使用 ID 选择器 */
    font-size: 36px;                             /* 大幅增加字体大小 */
    font-weight: bold;                           /* 加粗 */
    color: #4CAF50;                              /* 统一的颜色*/
    margin-bottom: 15px;                         /* 调整与下方内容的间距 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);    /* 添加轻微文字阴影 */
}

/* 模态框结果文本样式 */
#game-result {
    font-size: 20px;                             /* 也可以适当增大结果字体 */
    line-height: 1.6;
    color: #555;                                 /* 调整颜色，与标题区分 */
    margin-top: 10px;                            /* 增加与标题的间距 */
}