@charset "UTF-8";

.box30 {
  width: 100%;
}

/* BOX内の詰まり対策：ゲーム用だけ display:block に戻す */
.box30 .gameBox{
  display: block;
  padding: 18px 18px;
  margin: 0;
}

/* 上下がギチギチにならないスペース */
.gameControls{
  margin-bottom: 14px;
}

.firstChoice{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  user-select: none;
  margin-bottom: 10px;
}

.btnRow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* 既存 button-1 の矢印を消したい時用 */
.button-1.noArrow::after{
  display: none;
}

/* disabled 見た目（開始は押したら無効、リセットは開始後に有効） */
.button-1:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(25%);
}

.status{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ===== 盤面（CSSでカッコよく） ===== */
.boardWrap{
  margin-top: 14px;
  padding: 0 6px;      /* 端ギリ回避 */
}

.board{
  --size: min(calc(100% - 12px), 560px);
  width: var(--size);
  aspect-ratio: 1 / 1;

  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;

  padding: 10px;
  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(0,0,0,0.05)),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.25), rgba(0,0,0,0) 55%),
    #1b8a4b;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.20),
    inset 0 0 0 2px rgba(255,255,255,0.18);
}

.cell{
  position: relative;
  border-radius: 10px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.18), rgba(0,0,0,0) 55%),
    rgba(0,0,0,0.10);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    inset 0 0 0 2px rgba(0,0,0,0.08);

  cursor: pointer;
  display: grid;
  place-items: center;
}

.cell:active{
  transform: translateY(1px);
}

/* 置ける場所のヒント（開始後のみJSで付与） */
.cell.hint::after{
  content: "";
  width: 28%;
  height: 28%;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.10);
}

/* コマ（画像） */
.piece{
  width: 84%;
  height: 84%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}

.piece.black{
  background-image: url("./othello_kuro.png");
}

.piece.white{
  background-image: url("./othello_siro.png");
}

/* CPUが置いたセルを一瞬だけ強調 */
.cell.cpuMove{
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.25), rgba(0,0,0,0) 55%),
    rgba(255, 230, 120, 0.35);
  box-shadow:
    inset 0 0 0 2px rgba(255, 200, 60, 0.65),
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 0 0 2px rgba(0,0,0,0.08);
  transition: background 0.12s ease, box-shadow 0.12s ease;
}