/* Fill the screen on a tablet.
   Owner: "all games should be touch screen on mobile or tablet and the game
   should fill the screen on mobile and tablet."

   Touch was already fine and is measured working in all ten games. Screen fill
   was not: on a 820x1180 tablet the boards measured 50 to 67 percent of the
   width and floated in the middle of the screen. On a phone they already fill
   92 to 100 percent, so nothing here touches phone layout.

   The cause is that every board sizes from viewport HEIGHT minus a fixed chrome
   allowance of about 300px, which is right on a phone and wasteful on a tablet
   where the header and controls do not grow. These rules hand back most of that
   allowance from 700px up, keeping each game's own aspect ratio.

   Boards stay capped at 100% width, so nothing can overflow. */

@media (min-width: 700px) {
  /* The four that size from svh, each keeping its own ratio. */
  .board { min-width: 0; }

  body:has(#canvas) .board,
  .board { width: min(100%, calc((100svh - 170px) * var(--fill-ratio, .75))); }
}

/* Per game, because each board has its own shape. Values read from each game's
   own stylesheet rather than guessed. */
@media (min-width: 700px) {
  .cloudbreak-page .board      { --fill-ratio: .7692308; }
  .comet-page .board           { --fill-ratio: .75; }
  .meadow-page .board          { --fill-ratio: .75; }
  .river-page .board           { --fill-ratio: .75; }
  .stack-page .board           { --fill-ratio: .75; }
}

/* Pinball drives its table from a custom property rather than a board rule. */
@media (min-width: 700px) {
  .canvas-wrap { --table-width: min(100%, calc((100svh - 190px) * 0.6818)); }
}

/* Meadow Maze and Bubble Grove cap their own canvas; let them breathe too. */
@media (min-width: 700px) {
  .maze-board, .grove-board,
  main canvas { max-width: 100%; }
}