html,
body {
  min-height: 100vh;
  height: auto;
  width: auto;
  overflow: auto;
  user-select: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

/* 外层容器 */
#minesweeper-box {
  display: flex;
  flex-direction: column;
  /* size */
  padding: 1rem;
  border: 1px solid #000;
  width: max-content;
  height: max-content;
}

#control > div:first-child {
  display: flex;
}
#control > div:first-child > div {
  flex: 1;
}
#control > div:first-child > div:last-child {
  text-align: right;
}

/* label */
#control label {
  display: inline-block;
  height: inherit;
  height: 30px;
}
/* input */
#control input {
  border: 1px solid #d3d3d3;
  height: 26px;
  width: 50px;
  text-align: center;
  outline: none;
}

/* 重置按钮 */
#reset {
  border: 1px solid #d3d3d3;
  height: 30px;
  width: 30px;
  background-image: url('../image/emoji-.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#minesweeper-box.fail #reset {
  background-image: url('../image/emoji-_1.png');
}
#reset:active {
  border: 1px inset #d3d3d3;
}

/* 难度选择器 */
#game-level {
  margin-top: 1rem;
}
#game-level select {
  border: 1px solid #d3d3d3;
  height: 30px;
  width: 90px;
}

/* 雷区 */
#field {
  flex: 1;
  margin-top: 1rem;
  border: 1px inset transparent;
  height: 200px;
  cursor: pointer;
}
#field {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

/* 方块 */
.square {
  border: 1px outset #d3d3d3;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #c1c1b8;
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
  color: transparent;
}
.square:hover {
  background-color: #9acd32;
}
.square:active {
  border: 1px inset #d3d3d3;
}

/* 打开的方块 */
.square.opened {
  background-color: #fff;
  color: #457b4c;
  cursor: default;
}

/* 标记的地雷 */
.square.marked {
  background-image: url('../image/mark.png');
}

.fail .square.mine {
  background-image: url('../image/boom.png');
}
/* 标记错误的 */
.fail .square.marked {
  background-image: url('../image/mark.png');
  background-color: #f00;
}

/* 标记正确的 */
.fail .square.marked.mine {
  background-image: url('../image/mark.png');
  background-color: #c1c1b8;
}

/* 踩的雷 */
.fail .square.mine.stepon {
  background-image: url('../image/boom.png');
  background-color: #f00 !important;
}