/*! board.css — スコア表示・盤・石・着手ヒント */
/* ---- ステータス ---- */
.status-bar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.8rem;}
#statusText{font-weight:600;min-height:1.3em;opacity:.9;}
.scores{display:flex;gap:8px;font-variant-numeric:tabular-nums;flex:0 0 auto;}
.score-chip{display:flex;align-items:center;gap:5px;background:#2a1620;padding:3px 9px;border-radius:20px;font-size:.78rem;}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;}
.dot.red{background:radial-gradient(circle at 35% 30%,#a02244,#42030f);}
.dot.white{background:radial-gradient(circle at 35% 30%,#fffdf2,#dcc98d);border:1px solid #a08b4e;}

/* ---- 盤 ---- */
.board-wrap{position:relative;width:min(94vw, 58dvh, 460px);height:min(94vw, 58dvh, 460px);}
#board{
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  width:100%;height:100%;
  background:var(--board-line);border:5px solid #3b2018;border-radius:8px;
  overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.6), inset 0 0 0 2px #0c3229;
}
.cell{
  background:var(--board-bg);border:1px solid var(--board-line);
  position:relative;display:flex;align-items:center;justify-content:center;cursor:default;
}
.cell.legal{cursor:pointer;}
.cell.legal:active{background:var(--cell-hover);}
.hint{
  min-width:44%;height:44%;padding:0 2px;
  border-radius:99px;
  background:rgba(255,255,255,.14);
  border:1px dashed rgba(255,255,255,.4);
  color:rgba(255,255,255,.85);
  font-size:min(2.6vw,13px);font-weight:800;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.cell.legal.big .hint{background:rgba(255,190,90,.25);border-color:rgba(255,200,110,.8);color:#ffe3ae;}
.disc{
  width:84%;height:84%;border-radius:50%;
  box-shadow:0 3px 6px rgba(0,0,0,.5);
  transform:scale(0);animation:pop .22s ease forwards;
}
@keyframes pop{to{transform:scale(1);}}
.disc.red{background:radial-gradient(circle at 32% 26%,#c53a58,#7b1230 45%,#3d0512 100%);}
.disc.white{background:radial-gradient(circle at 32% 26%,#fffdf3,#f0e2b4 55%,#c9b077 100%);}
.disc.flipping{animation:flipDisc .3s ease forwards;}
@keyframes flipDisc{0%{transform:scaleX(1);}50%{transform:scaleX(.05);}100%{transform:scaleX(1);}}