/* 1180 以上は三欄。768〜1179 は盤の下に二列。767 以下は縦。 */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 274px var(--board-size) 274px;
  gap: 30px;
  justify-content: center;
  align-items: start;
}
.side-left, .side-right, .play-tools, .result-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.board-col { position: relative; }
.setup-actions {
  position: absolute;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: center;
  justify-self: center;
  z-index: 2;
}

body[data-phase="setup"] [data-play-only],
body[data-phase="result"] [data-play-only],
body[data-phase="playing"] [data-setup-only],
body[data-phase="result"] [data-setup-only],
body[data-phase="setup"] [data-result-only],
body[data-phase="playing"] [data-result-only] { display: none; }

body[data-phase="playing"] .nav,
body[data-phase="result"] .nav { display: none; }

@media (max-width: 1179px) and (min-width: 768px) {
  .stage { grid-template-columns: 1fr 1fr; }
  /* grid-row は 1 / 2 と終わりまで書く。絶対配置の .setup-actions は「1」だけだと
     終わりが格子の下端になり、盤ではなく stage 全体の中央に出る（1024×768 で盤からはみ出した）*/
  .board-col, .setup-actions { grid-column: 1 / -1; grid-row: 1 / 2; }
  .board-col { justify-self: center; }
  .side-left { grid-column: 1; grid-row: 2; }
  .side-right { grid-column: 2; grid-row: 2; }
}

@media (max-width: 767px) {
  .stage { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .side-left, .side-right, .play-tools { display: contents; }
  .board-col { order: 1; width: 100%; }
  body[data-phase="result"] .result-side { order: 2; }
  body[data-phase="result"] .record-result { order: 3; }
  .setup-tools { order: 2; }
  .setup-actions { order: 3; position: static; width: 100%; }
  .record-setup { order: 4; }
  body[data-phase="playing"] .seats-card { order: 0; }
  body[data-phase="playing"] .eval-card { order: 1; }
  body[data-phase="playing"] .board-col { order: 2; }
  body[data-phase="playing"] .wrap { min-height: 100vh; padding-bottom: 120px; }
  body[data-phase="result"] .wrap { min-height: 100vh; padding-bottom: 96px; }
  body[data-phase="setup"] .seats-card { display: none; }
  body[data-phase="result"] .seats-card { display: none; }
  body[data-phase="setup"] .nav-toggle { display: flex; }
  body[data-phase="playing"] .settings { display: none; }
  body[data-phase="playing"].menu-open .settings {
    display: flex;
    position: fixed;
    z-index: 5;
    left: 16px;
    right: 16px;
    bottom: 118px;
  }
}