:root{
  --board-bg:#d9ab63;
  --board-bg2:#c8933f;
  --line:#5b3c12;
  --panel-bg:#1b1f1c;
  --accent:#c07a2b;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,#23180f,#120c07);
  font-family:"Hiragino Sans","Yu Gothic",system-ui,-apple-system,sans-serif;
  color:#f3ece2;
  padding:8px;
  padding-top:max(8px, env(safe-area-inset-top));
  -webkit-text-size-adjust:100%;
}
.app{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  max-width:560px;
  width:100%;
}

.topbar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.topbar-btns{display:flex;gap:6px;}
.match-info{
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.03em;
}

select, button{
  font-size:.9rem;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid #4a4038;
  background:#2a241e;
  color:#f3ece2;
  cursor:pointer;
  font-family:inherit;
}
button.primary{
  background:var(--accent);
  border-color:var(--accent);
  font-weight:600;
}
button.ghost-btn{
  background:transparent;
  padding:5px 10px;
  font-size:.8rem;
  opacity:.85;
}
button:hover{filter:brightness(1.12);}
button:disabled{opacity:.4;cursor:default;}

.status-bar{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:.85rem;
}
#statusText{font-weight:600;min-height:1.3em;}
.scores{display:flex;gap:8px;font-variant-numeric:tabular-nums;}
.score-chip{
  display:flex;align-items:center;gap:6px;
  background:#241e19;padding:3px 9px;border-radius:20px;
  white-space:nowrap;
}
.score-chip.turn{outline:2px solid var(--accent);}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none;}
.dot.black{background:radial-gradient(circle at 35% 30%,#5a5a5a,#000);}
.dot.white{background:radial-gradient(circle at 35% 30%,#fff,#cfcfcf);border:1px solid #999;}

.board-wrap{
  position:relative;
  width:min(94vw, 70dvh, 520px);
  height:min(94vw, 70dvh, 520px);
}

#board{
  position:relative;
  z-index:0;          /* 石(z-index)を盤の中に閉じ込め、結果表示より前に出さない */
  display:grid;
  grid-template-columns:repeat(15,1fr);
  grid-template-rows:repeat(15,1fr);
  width:100%;
  height:100%;
  background:linear-gradient(140deg,var(--board-bg),var(--board-bg2));
  border:6px solid #7a5320;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  touch-action:manipulation;
}
.cell{
  position:relative;
  cursor:default;
}
.cell.playable{cursor:pointer;}
/* 格子線（マスの中心を通す＝交点に石を置く） */
.cell::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;
  width:1px;margin-left:-.5px;background:var(--line);opacity:.75;
  z-index:0;
}
.cell::after{
  content:"";position:absolute;top:50%;left:0;right:0;
  height:1px;margin-top:-.5px;background:var(--line);opacity:.75;
  z-index:0;
}
.cell.edge-top::before{top:50%;}
.cell.edge-bottom::before{bottom:50%;}
.cell.edge-left::after{left:50%;}
.cell.edge-right::after{right:50%;}

/* 星 */
.star{
  position:absolute;left:39%;top:39%;width:22%;height:22%;border-radius:50%;
  background:var(--line);opacity:.85;pointer-events:none;
  z-index:1;
}

/* 石 */
.stone{
  position:absolute;
  left:7%;top:7%;
  width:86%;height:86%;
  border-radius:50%;
  pointer-events:none;
  box-shadow:0 2px 4px rgba(0,0,0,.45);
  animation:drop .16s ease-out;
  z-index:3;
}
.stone.black{background:radial-gradient(circle at 33% 28%,#6b6b6b,#151515 60%,#000);}
.stone.white{background:radial-gradient(circle at 33% 28%,#fff,#e2e2e2 55%,#b9b9b9);}
@keyframes drop{from{transform:scale(.5);opacity:.2;}to{transform:scale(1);opacity:1;}}

.cell.last .stone::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:26%;height:26%;border-radius:50%;
  background:#e04b2a;
}
.cell.win .stone{box-shadow:0 0 0 3px #ffd84d, 0 2px 6px rgba(0,0,0,.5);}

/* ホバープレビュー */
.cell.playable:hover .ghost{opacity:.4;}
.ghost{
  position:absolute;left:7%;top:7%;width:86%;height:86%;border-radius:50%;
  opacity:0;transition:opacity .1s;pointer-events:none;
  background:#111;z-index:2;
}
#board.turn-white .ghost{background:#fff;}
@media (hover:none){ .cell.playable:hover .ghost{opacity:0;} }

/* 禁じ手マーク */
.forbidden-mark{
  position:absolute;left:20%;top:20%;width:60%;height:60%;pointer-events:none;
  opacity:.85;z-index:4;
}
.forbidden-mark::before,.forbidden-mark::after{
  content:"";position:absolute;top:50%;left:0;right:0;height:2px;
  background:#d32020;border-radius:2px;
}
.forbidden-mark::before{transform:rotate(45deg);}
.forbidden-mark::after{transform:rotate(-45deg);}

.overlay{
  position:absolute;inset:0;
  z-index:5;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);
  border-radius:6px;
  font-size:1.5rem;font-weight:700;
  text-align:center;
  padding:16px;
  pointer-events:none;
}
.overlay.show{display:flex;}
.overlay .msg{
  background:rgba(20,16,12,.9);
  padding:14px 22px;border-radius:12px;
  border:1px solid #5a4a38;
  line-height:1.5;
}

/* 設定オーバーレイ */
.setup-overlay{
  position:fixed;inset:0;
  background:rgba(8,6,4,.8);
  display:none;
  align-items:center;justify-content:center;
  padding:16px;
  z-index:10;
}
.setup-overlay.show{display:flex;}
.setup-card{
  background:var(--panel-bg);
  border:1px solid #4a4038;
  border-radius:14px;
  padding:22px;
  width:100%;max-width:340px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
}
.setup-card h2{margin:0;font-size:1.15rem;text-align:center;}
.group{display:flex;flex-direction:column;gap:5px;}
.group label{font-size:.8rem;opacity:.8;}
.group select{width:100%;}
.note{margin:0;font-size:.72rem;opacity:.6;line-height:1.5;}
.setup-card .primary{padding:10px;font-size:1rem;}

@media (max-width:420px){
  .match-info{font-size:.85rem;}
  .status-bar{font-size:.78rem;}
}