/*  二個目*/
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
}

#board {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  border: 2px solid #333;
  background-color: #4caf50; /* 緑色のオセロ盤 */
}

.cell {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #aaa;
}

.cell.black {
  background-color: black;
}

.cell.white {
  background-color: white;
}

/* カーソルを乗せたときのスタイルを赤に統一 */
.cell:hover {
  background-color: #f0f0f0;
}

.cell.valid:hover {
  background-color: red; /* 有効な場所にカーソルを乗せたとき赤色 */
}

#status {
  margin-top: 10px;
}