/* 请在此文件中给出你的 CSS 代码 */
.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    background-color: #252525;
    color: white;
    margin: 0;
}
h1 {
    margin-bottom: 0px;/* 标题下方的间距 */
    font-size: 50px;/* 标题字体大小 */
    text-align: center;/* 文本居中 */
}
#leftGuessTime{
    margin-top: 5px;/* 标题上方的间距 */
    margin-bottom: 10px;/* 标题下方的间距 */
    font-size: 20px;/* 标题字体大小 */
    text-align: center;/* 文本居中 */
    border-radius: 5px;/* 圆角 */
    background-color: #555555ac;/* 背景颜色 */
    padding: 10px;/* 内边距 */
}
.grid {
    display: inline-block;
}
/* 行样式 */
.row {
    display: flex;/* 使用 Flexbox 布局 */
    justify-content: center;/* 水平居中 */
    margin-bottom: 8px;/* 行之间的间距 */
}
/* 单元格样式 */
.cell {
    width: 60px;/* 单元格宽度 */
    height: 60px;/* 单元格高度 */
    border: 2px solid #555;/* 单元格边框 */
    margin: 0 4px;/* 单元格之间的水平间距 */
    display: flex;/* 使用 Flexbox 布局 */
    justify-content: center;/* 水平居中 */
    align-items: center;/* 垂直居中 */
    font-size: 24px;/* 字体大小 */
    font-weight: bold;/* 字体加粗 */
    text-transform: uppercase;/* 字母大写 */
}
.cell.filled {
    border-color: burlywood;/* 填充单元格的边框颜色 */
    color: white;/* 填充单元格的文字颜色 */
}
/* 正确位置的单元格样式 */
.cell.correct {
    background-color: #6aaa64;/* 绿色背景 */
    border-color: #6aaa64;/* 绿色边框 */
    color: white;/* 白色文字 */
}
/* 错误位置但存在的单元格样式 */
.cell.present {
    background-color: #c9b458;/* 黄色背景 */
    border-color: #c9b458;/* 黄色边框 */
    color: white;/* 白色文字 */
}
/* 不存在的单元格样式 */
.cell.absent {
    background-color: #787c7e;/* 灰色背景 */
    border-color: #787c7e;/* 灰色边框 */
    color: white;/* 白色文字 */
}
.keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.keyboard-row1,
.keyboard-row2,
.keyboard-row3 {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.longkey {
    width: 90px;
    height: 45px;
    margin: 0 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #555555ac;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.longkey:hover {
    background-color: #777777ac;/* 键盘按键悬停时的背景颜色 */
}

.key {
    width: 35px;
    height: 45px;
    margin: 0 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #555555ac;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;

}
.key:hover {
    background-color: #777777ac;/* 键盘按键悬停时的背景颜色 */
}
.key.correct{

    background-color: #6aaa64;/* 绿色背景 */
    color: white;/* 白色文字 */
}
.key.correct:hover {
    background-color: #5a9954;/* 键盘按键悬停时的背景颜色 */
}
.key.present{
    background-color: #c9b458;/* 黄色背景 */
    color: white;/* 白色文字 */ 
}
.key.present:hover {
    background-color: #b8a74d;/* 键盘按键悬停时的背景颜色 */
}
.key.absent{
    background-color: rgba(128, 128, 128, 0);/* 灰色背景 */
    color: white;/* 白色文字 */
}
.key.absent:hover {
    background-color: rgba(128, 128, 128, 0);/* 键盘按键悬停时的背景颜色 */
}
.setting{
    width: 120px;/* 设置按钮宽度 */
    height: 40px;/* 设置按钮高度 */
    margin: 5px;/* 设置按钮之间的间距 */
    display: inline-flex;/* 使用 Flexbox 布局 */
    justify-content: center;/* 水平居中 */
    align-items: center;/* 垂直居中 */
    font-size: 14px;/* 设置按钮字体大小 */
    font-weight: bold;/* 设置按钮字体加粗 */
    text-transform: uppercase;/* 设置按钮字母大写 */
    border: none;/* 去除设置按钮边框 */
    border-radius: 5px;/* 设置按钮圆角 */
    cursor: pointer;/* 鼠标悬停时显示为指针 */
}
#showAnswer {
    background-color: #6aaa64;/* 按钮背景颜色 */
    color: white;/* 按钮文字颜色 */
}
#showAnswer:hover {
    background-color: #5a9954;/* 按钮悬停时的背景颜色 */
}
#refresh {
    background-color: #c9b458;/* 按钮背景颜色 */
    color: white;/* 按钮文字颜色 */
}
#refresh:hover {
    background-color: #b8a74d;/* 按钮悬停时的背景颜色 */
}