/* Orli v3 site · a game page (play/luna.html, zeke.html, finn.html)
   ---------------------------------------------------------------------------
   The site's frame around the games lane's pages (../../games/lib/games.css,
   unchanged), loaded after it:
     - one column width for every game, on the page's content grid: as wide
       as a 16:10 stage can be in the window (Heart pop's own frame, the
       tallest), so all three line up the same and fit one laptop screen;
     - on a phone, the game's own two actions stay in its bar, and Sounds,
       Background and Less movement fold into one "Sound and movement"
       disclosure under it;
     - on a wider window they sit on the top row, across from "All games",
       so a long title never pushes them onto a row of their own, and the
       column is sized so the stage and the instruction bar under it fit one
       laptop screen (1366 × 768 and 1280 × 720: the bar above the fold).
   --chrome is everything in the column's height that isn't the stage: the
   header, the top row, the world label and title, the bar and a little air.
   ------------------------------------------------------------------------- */
.g-wrap {
  --chrome: calc(var(--o-header-h) + 310px);
  width: min(100% - 2 * var(--o-gutter), max(520px, (100svh - var(--chrome)) * 16 / 10), var(--o-max));
}
@media (min-width: 700px) {
  .g-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--o-space-4); }
  .g-top { grid-area: 1 / 1; }
  .g-head { display: contents; }
  .g-head__words { grid-area: 2 / 1 / 3 / -1; margin-block: var(--o-space-3) var(--o-space-5); }
  .g-settings { grid-area: 1 / 2; margin: 0; }
  .g-play { grid-area: 3 / 1 / 4 / -1; }
  /* the instruction on its own line, the game's actions under it */
  .g-howto { flex-basis: 100%; }
}

.g-settings { display: flex; flex-direction: column; align-items: flex-end; gap: var(--o-space-3); }
.g-settings__toggle { display: none; }
@media (max-width: 699.98px) {
  .g-wrap { width: min(100% - 2 * var(--o-gutter), var(--o-max)); }
  .g-settings { order: 3; align-items: stretch; margin-block-start: var(--o-space-4); }
  .g-settings .g-controls { order: initial; margin: 0; }
  .g-settings__toggle { display: inline-flex; align-self: flex-start; }
  html.js .g-settings:not([data-open]) .g-controls { display: none; }
  .g-settings .g-controls .o-btn { flex: 1 1 auto; }
}
/* the toggles need script */
html:not(.js) .g-settings { display: none; }

/* Very large text on a narrow screen: the world's name (outlined Figma Hand,
   which can't wrap) shrinks to fit, so the title column never runs past the
   edge either. */
.g-world .hand { --hand-size: min(calc(var(--o-text-heading) * 1.08), calc((100vw - 2 * var(--o-gutter) - 24px) / 9)); }
.g-head__words { min-width: 0; }