/* ===== 基础样式 ===== */
body {
    font-family: "MS Sans Serif", Tahoma, sans-serif; /* 更改为经典字体 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #c0c0c0; /* 经典的 Windows 灰色背景 */
}

/* ===== 字体定义 ===== */
@font-face {
    font-family: 'Digital-7';
    src: local('Digital-7'),
         url('fonts/digital-7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 难度选择器 */
.difficulty-selector {
    margin-bottom: 20px;
    text-align: center;
}

.difficulty-selector .difficulty-btn {
    padding: 8px 15px;
    margin: 0 5px;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    background-color: #c0c0c0;
    cursor: pointer;
    font-size: 14px;
}

.difficulty-selector .difficulty-btn:hover {
    background-color: #d0d0d0;
}

.difficulty-selector .difficulty-btn:active {
    border-color: #808080 #ffffff #ffffff #808080;
}

.difficulty-selector .difficulty-btn.selected {
    background-color: #b0b0b0;
    border-color: #808080 #ffffff #ffffff #808080;
}

/* ===== 游戏容器 ===== */
.game-container {
    background-color: #bdbdbd;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 10px;
    /* box-shadow: 5px 5px 10px rgba(0,0,0,0.3); */ /* 移除现代阴影 */
    width: fit-content; /* 添加这行确保容器宽度适应内容 */
    margin: 0 auto; /* 确保容器在页面中居中 */
}

/* ===== 头部区域 ===== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #c0c0c0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 8px;
    margin-bottom: 10px;
}

/* 计数器样式 */
.mine-counter,
.timer {
    background-color: #000000;
    color: #ff0000;
    font-family: 'Digital-7', monospace;
    font-size: 28px;
    padding: 3px 6px;
    border: 1px solid #808080;
    min-width: 60px;
    text-align: center;
}

/* 重置按钮 */
.reset-button button {
    font-size: 24px;
    width: 40px;
    height: 40px;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    background-color: #c0c0c0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reset-button button:active {
    border-color: #808080 #ffffff #ffffff #808080;
}

/* ===== 游戏网格 ===== */
.grid-container {
    display: grid;
    /* grid-template-columns and grid-template-rows will be set by JavaScript */
    border: 3px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background-color: #c0c0c0;
    padding: 1px; /* 添加内边距，避免边缘单元格的边框被裁剪 */
    /* Prevent text selection on grid */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    width: fit-content; /* 添加这行确保容器宽度适应内容 */
}

/* 网格单元格基础样式 */
.grid-cell {
    width: 25px; /* 默认格子大小 */
    height: 25px;
    background-color: #c0c0c0;
    border-width: 3px; /* 增加边框宽度以增强立体感 */
    border-style: solid;
    border-color: #ffffff #7b7b7b #7b7b7b #ffffff; /* 加深边框颜色以增强对比度 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    cursor: default; /* 默认光标 */
    margin: 0.5px; /* 添加间距避免边框重叠 */
    box-sizing: border-box; /* 确保边框和间距不会影响整体大小 */
    flex-shrink: 0; /* 防止单元格被压缩 */
}

/* 网格单元格状态样式 */
.grid-cell.opened {
    background-color: #bdbdbd;
    border-width: 1px; /* 打开后边框变细 */
    border-style: solid;
    border-color: #7b7b7b; /* 统一的边框颜色 */
    padding: 1px; /* 补偿边框宽度变化，保持内容位置稳定 */
}

.grid-cell.mine {
    background-color: red;
    color: black;
}

.grid-cell.pressed-down {
    background-color: #bdbdbd;
    border-width: 3px; /* 保持与未按下状态相同的边框宽度 */
    border-style: solid;
    border-color: #7b7b7b #ffffff #ffffff #7b7b7b; /* 加深的内凹效果 */
    padding: 0; /* 移除内边距以保持尺寸一致 */
}

/* 标记样式 */
.grid-cell.flagged::after {
    content: "🚩";
    font-size: 16px;
}

.grid-cell.question::after {
    content: "❓";
    font-size: 16px;
}

/* 数字颜色 */
.grid-cell[data-mines="1"] { color: blue; }
.grid-cell[data-mines="2"] { color: green; }
.grid-cell[data-mines="3"] { color: red; }
.grid-cell[data-mines="4"] { color: darkblue; }
.grid-cell[data-mines="5"] { color: brown; }
.grid-cell[data-mines="6"] { color: cyan; }
.grid-cell[data-mines="7"] { color: black; }
.grid-cell[data-mines="8"] { color: grey; }