html, body {
  background-color:lightyellow;
  margin: 0;
  padding: 0;
  text-align: center; /* 横中央配置 */
  font-family: sans-serif;
}

.title {
  margin: 20px 0;
  color: navy;
  font-size: 48px;
  margin-bottom: 0px;
}

#container {
  display: inline-block; /* 中央寄せのブロック */
  /* cursor: pointer; */
}

canvas {
  display: block;
}

div#board {
  position: relative;
  width: 295px;
  height: 295px;
  background-color: sienna;
  margin: 0 auto; /* 横中央に */
  margin-top: -25px;
  cursor: pointer;
}


div.sq {
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: green;
}

div.sq div.disc {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  background-color: white;
}

div#logarea {
  margin: 8px 0;
  padding: 4px;
  border: 1px solid black;
  white-space: pre;
  width: 248px;
  height: 120px;
  overflow-y: scroll;
  margin-left: auto;
  margin-right: auto; /* ログエリアも中央 */
}

/* #mode { */
  /* font-size: 26px;   お好みで大きさを調整 */
  /* cursor: pointer;   カーソルを手に */
  /* padding: 4px 8px;  ちょっと余白を追加して見やすく */
/*} */

/* #buton input[type="button"] { */
  /* font-size: 12px;   少し大きめ */
  /* font-weight: bold; */
  /* cursor: pointer;   カーソルを手に */
  /* padding: 4px 10px; ボタンの余白 */
  /* margin: 2px;       ボタン間の間隔 */
/* }

/* ボタンを大きめに */
#buton input[type="button"] {
  background-color: gold;
  font-size: 16px;
  padding: 0px 6px; 
  margin: 2px;
  border-radius: 6px;
}

#buton input[type="button"]:hover {
  background-color: lightblue;
  color: navy;
}

#buton input[type="button"] {
  transition: 0.3s;  /* 変化をなめらかに */
  border-radius: 8px; /* 角を丸く */
  border: 1px solid gray;
}

#buton input[type="button"]:hover {
  background-color: navy;
  color: white;
  transform: scale(1.1); /* 少し拡大して強調 */
}

/* 対戦モード設定 */
/* カスタムセレクト全体 */
.custom-select {
  position: relative;
  width: 95%;
  max-width: 270px;
  margin: 10px auto;
  font-size: 19px;
}

/* 選択されている部分 */
.select-selected {
  margin: 0px;
  padding: 8px;
  border-width: 2px;
  border-radius: 10px;
  cursor: pointer;
  background: #35e8d9;
}

/* 選択肢リスト（選択時に開く部分） */
.select-items {
  position: absolute;
  top: 100%;            /* 選択枠の真下に表示 */
  left: 0;              /* 左端を合わせる */
  width: 100%;          /* 親と同じ幅にする */
  background: #35e8d9;
  border: 1px solid #aaa;
  border-radius: 6px;
  display: none;
  z-index: 99;
}

.select-items div {
  padding: 8px;
  cursor: pointer;
}

.select-items div:hover {
  background: #f0f0f0;
}

/* vs の赤字 */
.vs {
    color: red;
    font-weight: bold;
}

#stone {
    text-align:center;
    font-size: 26px;  /* 追加 */
    margin-top: 10px;
}

#view_tarn {
    color: red;
    font-size: 26px;  
    margin-top: -25px;
}