.gomoku-game {
  display: grid;
  grid-template-areas:
    "score"
    "turn"
    "board"
    "restart";
  width: min(720px, 100%);
}

#gomokuScore { grid-area: score; }
.turn-line { grid-area: turn; }
.gomoku-board { grid-area: board; }
#restartRound { grid-area: restart; }
#undoMove{grid-area:undo}.rush-button{width:100%;margin-top:24px;min-height:56px;font-size:20px}#answer24{min-height:30px;color:#287be0;font-size:18px;font-weight:700}.gomoku-game{grid-template-areas:"score" "turn" "board" "undo" "restart"}

.gomoku-board {
  width: min(100%, calc(100vh - 245px));
  max-width: 720px;
  min-width: 0;
  justify-self: center;
  padding: 0;
  overflow: hidden;
  background: #e9b96c;
  background-image: none;
}

.gomoku-board button {
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.gomoku-board button::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent calc(50% - .5px), #9a652b calc(50% - .5px), #9a652b calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), #9a652b calc(50% - .5px), #9a652b calc(50% + .5px), transparent calc(50% + .5px));
  pointer-events: none;
}

@media (orientation: landscape) and (max-height: 820px) {
  .game-world main {
    width: min(1050px, calc(100% - 24px));
    padding: 12px 0 20px;
  }

  .gomoku-game {
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
    grid-template-areas:
      "score turn"
      "score board"
      "score undo"
      "score restart";
    align-items: center;
    gap: 4px 16px;
    width: 100%;
    max-width: 1000px;
  }

  .gomoku-game .game-scoreboard {
    grid-template-columns: 1fr;
    align-content: center;
  }

  .gomoku-board {
    width: min(calc(100vh - 145px), calc(100vw - 250px));
  }

  .turn-line {
    margin: 2px 0 6px;
  }

  #restartRound {
    margin-top: 8px;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  .gomoku-board {
    width: 100%;
  }
}