#board {
  display: block;
  width: 100%;
  max-width: 550px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: visible;
}
@supports not (aspect-ratio: 1 / 1) {
  #board { height: min(96vw, 550px); }
}
@media (max-height: 820px), (max-width: 480px) {
  main { padding-top: 9px; }
  h1 { margin-bottom: 2px; }
  .intro { margin-top: 7px; margin-bottom: 7px; }
}

/* iPads and similar tablets lose a surprising amount of landscape height to
   browser chrome. Size the mechanism from the usable height so the south seal
   remains visible without changing the puzzle or its proportions. */
@media (min-width: 700px) and (max-height: 900px) {
  main { padding-top: 7px; }
  h1 { font-size: 27px; line-height: 1; margin-bottom: 2px; }
  .sub { font-size: 13px; }
  .intro { margin: 5px auto; line-height: 1.35; }
  #board {
    width: min(100%, 550px, calc(100vh - 220px));
    width: min(100%, 550px, calc(100dvh - 220px));
    max-height: calc(100vh - 220px);
    max-height: calc(100dvh - 220px);
  }
  .status { min-height: 34px; }
}