/* Inside the page-filling panel: the rows keep their height and the stage takes the rest.
   jigsaw.js reads the stage's height back off it, so the stage's size comes from here. */
html.fills-window .game-root:not(.jg-fs) .jg { display: flex; flex-direction: column; height: 100%; }
html.fills-window .game-root:not(.jg-fs) .jg > :not(.jg-stage) { flex: none; }
html.fills-window .game-root:not(.jg-fs) .jg-stage { flex: 1 1 0; min-height: 0; }
/* Set by fitFoot() in jigsaw.js. Both items need grid-row: 1 — given only a column, an item
   placed left of the previous one starts a new row. */
.jg-foot-one {
  display: grid; grid-template-columns: minmax(max-content, 1fr) max-content minmax(max-content, 1fr);
  align-items: baseline; column-gap: 18px;
}
.jg-foot-one .jg-controls { grid-row: 1; grid-column: 2; flex-wrap: nowrap; }
.jg-foot-one .jg-opts { grid-row: 1; grid-column: 3; justify-self: start; flex-wrap: nowrap; }
/* The fit is measured when the timer is switched on, so the room for "9999 s" is reserved then. */
.jg-foot-one .jg-timer { min-width: 6ch; text-align: left; }
/* #game-root is itself the element that goes full screen. game-layout.css gives a [data-fill]
   panel an explicit width and height, which would beat the fixed-position fallback's inset. */
#game-root.jg-fs { width: auto; height: auto; }