/* ---------- 盤面 ---------- */
#boardWrap {
  width: min(100%, 520px, 64dvh);
  aspect-ratio: 1;
  padding: 3%;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--board), var(--board-dark));
  box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.15);
  position: relative;
  transition: box-shadow .15s;
}

/* ---------- 盤面の縁のクールタイム表示 ----------
   縁を一周するバーが溜まっていき、満タンで緑に光る＝打てる */
/* 盤の外側（暗い背景の上）に描いてコントラストを確保する */
#frame {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  pointer-events: none;
  overflow: visible;
}
#frame path {
  fill: none;
  stroke-width: 2; /* viewBox(100)単位。盤は正方形なので歪まない */
  stroke-linecap: round;
}
#frame .frame-track { stroke: rgba(255,255,255,.08); }
#frame .frame-bar {
  stroke: var(--accent);
  stroke-dasharray: 100;
  transition: stroke .15s;
}
#boardWrap.cooling .frame-bar { stroke: var(--wait); }
#boardWrap.stunned .frame-bar { stroke: var(--win); }
#boardWrap.ready {
  box-shadow:
    0 8px 24px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(0,0,0,.15),
    0 0 28px rgba(79,195,138,.5);
}
/* 打てるようになった瞬間に一度だけ強く光らせる */
#boardWrap.ready-pulse { animation: readyPulse .35s ease-out; }
@keyframes readyPulse {
  0%   { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 rgba(79,195,138,.9); }
  40%  { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 44px rgba(79,195,138,.95); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 28px rgba(79,195,138,.5); }
}
#board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--N), 1fr);
  grid-template-rows: repeat(var(--N), 1fr);
  touch-action: manipulation;
}
.cell {
  position: relative;
  cursor: pointer;
}
/* 交点の十字線（端は内側だけ描く） */
.cell::before, .cell::after {
  content: "";
  position: absolute;
  background: var(--line);
  pointer-events: none;
}
.cell::before { /* 横線 */
  top: 50%; left: 0; right: 0; height: 1px;
  transform: translateY(-0.5px);
}
.cell::after { /* 縦線 */
  left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-0.5px);
}
.cell.c0::before { left: 50%; }
.cell.cL::before { right: 50%; }
.cell.r0::after  { top: 50%; }
.cell.rL::after  { bottom: 50%; }

/* 星 */
.star {
  position: absolute;
  left: 50%; top: 50%;
  width: 18%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--line);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.stone {
  position: absolute;
  left: 50%; top: 50%;
  width: 88%; aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 1;
  pointer-events: none;
  animation: drop .14s ease-out;
}
.stone.black {
  background: radial-gradient(circle at 35% 30%, #555 0%, var(--black) 55%);
  box-shadow: 1px 2px 3px rgba(0,0,0,.5);
}
.stone.white {
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--white) 50%, #cfcac0 100%);
  box-shadow: 1px 2px 3px rgba(0,0,0,.4);
}
/* パリィ受付終了後に drop アニメーションを再生させない */
.stone.settled { animation: none; }
.stone.win {
  outline: 3px solid var(--win);
  outline-offset: 1px;
  animation: pulse .8s ease-in-out infinite alternate;
}
@keyframes drop {
  from { transform: translate(-50%, -50%) scale(1.35); opacity: .3; }
  to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}
/* パリィ受付中の石は半透明 */
.stone.parryable {
  opacity: .45;
  animation: dropScale .14s ease-out;
}
@keyframes dropScale {
  from { transform: translate(-50%, -50%) scale(1.35); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

@keyframes pulse {
  from { outline-color: var(--win); }
  to   { outline-color: rgba(255,90,90,.25); }
}

/* クールダウン中にタップした時のフィードバック */
.cell.denied::before, .cell.denied::after { background: var(--win); }