/* Center the puzzle page in the middle column and hide the site footer on this page */
.puzzle-page {
  max-width: 760px;                 /* match your site's content width */
  width: min(92vw, 760px);
  margin: 0 auto;                   /* centers the column */
  padding: 24px 16px;
}

/* Menu centered above the puzzle */
.puzzle-menu-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}

#menu {
  list-style: none;
  padding-left: 0;
  margin: 0;
  width: 420px;                     /* tidy width for the buttons */
  text-align: center;
  z-index: 1000;
}

#menu li {
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #e8e8e8;
  color: #000;                      /* black menu text */
  cursor: pointer;
}
#menu li:hover { background: #a3a3a3; }

/* The actual puzzle stage */
#forPuzzle {
  position: relative;               /* anchor absolute canvases inside */
  width: 100%;                      /* fill the centered column */
  height: calc(100vh - 220px);      /* tall stage, adapts to viewport */
  min-height: 520px;                /* reasonable minimum */
  overflow: hidden;                 /* keep pieces inside */
}

/* Canvases created by the script */
.polypiece,
.gameCanvas {
  position: absolute;
  display: block;
  overflow: hidden;
}
.moving {
  transition: top 1s linear, left 1s linear;
}

/* Optional: hide your global footer only on the puzzle page */
.puzzle-page footer { display: none; }