/* The square board must fit both the available column and the viewport height. */
main > *, .play { min-width: 0; min-height: 0; }
.frame {
  width: min(100%, calc(100dvh - 112px));
  margin-inline: auto;
}
.status { margin: 20px 0 0; }

@media (min-width: 801px) {
  main { height: 100dvh; min-height: 0; padding-block: 24px; }
  .play { padding-right: 48px; }
}

/* Short desktop/laptop windows need compact side panels as well as a smaller board. */
@media (min-width: 801px) and (max-height: 850px) {
  .left nav { margin-bottom: 22px; }
  .icon { width: 58px; height: 54px; font-size: 37px; }
  .logo { font-size: 39px; }
  .logo em { font-size: 51px; }
  .logo b { font-size: 45px; }
  .intro { font-size: 16px; margin: 22px 0 16px; }
  hr { margin-bottom: 18px; }
  .goal { padding: 13px; }
  .goal h2 { font-size: 21px; margin-bottom: 10px; }
  .goal p { font-size: 14px; }
  .tip { margin-top: 15px; }
  .right { gap: 12px; }
  .stage-panel { padding: 12px 8px 9px; }
  .stage-panel h1 { font-size: 22px; margin-bottom: 4px; }
  .stars { font-size: 34px; }
  .counter { padding: 10px 8px; }
  .counter h2 { font-size: 16px; margin-bottom: 5px; }
  .counter strong { font-size: 29px; }
  .exit-sign { font-size: 25px; margin-block: 4px 12px; }
  .actions { gap: 9px; }
  .actions button { min-height: 50px; padding: 7px 5px; font-size: 17px; }
  .actions span { font-size: 30px; }
  .actions small { font-size: 15px; }
}

@media (min-width: 801px) and (max-height: 620px) {
  main { padding-block: 16px; }
  .frame { width: min(100%, calc(100dvh - 88px)); }
  .left nav { margin-bottom: 12px; }
  .icon { width: 44px; height: 42px; font-size: 29px; }
  .logo { font-size: 30px; }
  .logo em { font-size: 40px; }
  .logo b { font-size: 35px; }
  .intro { font-size: 13px; margin: 14px 0 10px; }
  .tip { display: none; }
  .goal { padding: 10px; }
  .goal h2 { font-size: 18px; margin-bottom: 6px; }
  .right { gap: 8px; }
  .stage-panel { padding-block: 7px; }
  .stage-panel h1 { font-size: 18px; }
  .stars { font-size: 27px; }
  .counter { padding-block: 7px; }
  .counter h2 { font-size: 14px; }
  .counter strong { font-size: 23px; }
  .counter p { display: none; }
  .exit-sign { font-size: 21px; margin-block: 0 4px; }
  .actions button { min-height: 42px; font-size: 14px; padding-block: 5px; }
  .actions span { font-size: 25px; }
}

@media (max-width: 800px) {
  main { min-height: 100dvh; padding-block: 14px; gap: 12px; }
  .frame { width: min(100%, calc(100dvh - 290px)); }
  .status { margin-top: 18px; line-height: 18px; min-height: 18px; }
}