/* --------------- */
/* Replayer Wrapper */
/* --------------- */

#replay-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px auto;
}

#replay-wrapper p {
  margin: 0 auto;
}

/* --------------- */
/* Play/Board Wrapper 上書き */
/* --------------- */
/* board.cssの#play-wrapperのデフォルトはheight:90vmin(game/play.htmlの
   #main-wrapper内でボタンメニューと横並びになるレイアウト向け)だが、
   analysisページ(#main-wrapperを持たない縦積みレイアウト)でこれを適用すると、
   .content(static/common/css/base.css、width: min(80vw, 480px))の幅上限に
   阻まれて#play-wrapperの幅が480px前後で止まる一方、高さはビューポート高さ基準の
   90vminのまま大きくなり続けるため、タブレット・デスクトップ幅で盤面(正方形の
   はずの#board-wrapper)が縦長になっていた(blog/templates/blog/detail.htmlの
   リプレイ盤面はblog_detail.cssで同様に幅基準へ上書きしており、同じ問題への
   対応パターン)。幅基準(height:auto)に切り替え、aspect-ratio:1の
   #board-wrapperが幅から高さを導出するようにする。 */
#play-wrapper {
  height: auto;
}


/* 盤面の最善手ハイライト(highlightBestMove()が付け外しする)。色はassist(board.css)と同じ */
.square.best-move-highlight-to {
  background-color: var(--color-red-dark);
  border: 1px solid var(--color-red-dark);
}