:root {
  --cellSize: 25px;
  --cellGap: 1px;
  --boardPadding: 9px;
  --sweeperInfoHeight: 34px;
  --buttonColor: #007bff;
  --buttonHoverColor: #0056b3;
  --TextColor: #fff;
}

html,
body {
  height: 100%;
  /* 确保 body 占满整个视口高度 */
  margin: 0;
}

body {
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  /* 禁用文本选择 */
}

#heading {
  margin-bottom: 10px;
  font-size: x-large;
}

#modeButtons {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

#modeButtons button {
  font-family: "Nunito", sans-serif;
  font-weight: bold;
  margin: 0 10px;
  padding: 2.5px 15px;
  font-size: 16px;
  background-color: var(--buttonColor);
  color: var(--TextColor);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#modeButtons button:hover {
  background-color: var(--buttonHoverColor);
}

#board {
  background-color: #ccc;
  padding: 9px;
  margin-top: 0.6rem;
  border-radius: 5px;
}

.pad {
  border: 2px solid #808080;
  border-right-color: #fff;
  border-bottom-color: #fff;
}

.sweeperInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Arial, sans-serif;
  height: 34px;
  font-size: 18px;
  padding: 10px;
  /* 增加内边距，使整体布局更美观 */
  background-color: #444;
  /* 深色背景 */
  border-radius: 5px;
  /* 圆角 */
  margin-bottom: 10px;
  /* 与游戏面板的间距 */
}

@font-face {
  font-family: "DSEG7Modern";
  src: url("DSEG7Modern-Bold.woff2") format("woff2"),
    url("DSEG7Modern-Bold.woff") format("woff"),
    url("DSEG7Modern-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

#timer,
#remainingMines {
  font-family: "DSEG7Modern", sans-serif;
  font-size: 20px;
  color: var(--TextColor);
  background-color: #333;
  border-radius: 5px;
  border: 2px solid #666;
  padding: 5px 10px;
  /* 增加内边距 */
  width: 40px;
  text-align: right;
}

#resetButton {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
  /* 增加左右间距 */
  width: 70px;
  height: 25px;
  padding: 5px 10px;
  background-color: var(--buttonColor);
  color: var(--TextColor);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#resetButton:hover {
  background-color: var(--buttonHoverColor);
}

#grid {
  margin-top: 6px;
  /* 水平居中 合并单元格边框*/
  border-collapse: collapse;
}

.cell {
  width: 25px;
  height: 25px;
  background-color: #b0b0b0;
  border: 1px solid #444;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 23px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  /* 添加阴影，模拟立体效果 */
  transform: translateY(-2px);
  /* 稍微向上移动，模拟凸起效果 */
  transition: all 0.2s ease;
  /* 添加过渡效果，使变化平滑 */
}

.cell.mine {
  background-color: red;
  font-size: 1.1em;
  box-shadow: none;
  transform: translateY(0);
}

.cell.wrong-flag {
  background-color: orange;
  font-size: 1.1em;
  box-shadow: none;
  transform: translateY(0);
}

.cell.revealed {
  background-color: #d0d0d0;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  box-shadow: none;
  /* 移除阴影，变为平面效果 */
  transform: translateY(0);
  /* 恢复到原始位置 */
}

.cell.revealed[data-mine-count="1"] {
  color: blue;
}
.cell.revealed[data-mine-count="2"] {
  color: green;
}
.cell.revealed[data-mine-count="3"] {
  color: red;
}
.cell.revealed[data-mine-count="4"] {
  color: darkblue;
}
.cell.revealed[data-mine-count="5"] {
  color: darkred;
}
.cell.revealed[data-mine-count="6"] {
  color: teal;
}
.cell.revealed[data-mine-count="7"] {
  color: black;
}
.cell.revealed[data-mine-count="8"] {
  color: gray;
}

.cell.lockclick {
  /* css禁用鼠标点击事件 */
  pointer-events: none;
}

#winMessage,
#loseMessage {
  display: none;
  position: fixed;
  top: 50%;
  color: var(--TextColor);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-size: 24px;
  z-index: 1000;
  /* 确保在最上层 */
}

#winMessage {
  background-color: green;
}
#loseMessage {
  background-color: red;
}

#loseMessage button.viewBoard {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  background-color: var(--TextColor);
  color: red;
  border: none;
  border-radius: 5px;
}

#loseMessage button.viewBoard:hover {
  background-color: #ddd;
}

#tipsContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f9f9f9;
  border-top: 2px solid #ccc;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

#toggleTipsButton {
  background-color: var(--buttonColor);
  color: var(--TextColor);
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
}

#toggleTipsButton:hover {
  background-color: var(--buttonHoverColor);
}

/* 操作提示内容样式 */
#tipsContent {
  display: none;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
#tipsContent h3 {
  margin-top: 0;
}
#tipsContent ul {
  margin: 0;
  padding-left: 20px;
}
#tipsContent li {
  margin-bottom: 5px;
}