/* ==========================================================================
   The page-filling game panel.

   A game opts in with `'fill' => true` in app/games.php, which puts `data-fill` on
   #game-root. Nothing here reaches a game that has not opted in, and a game that has
   opted in gets no say in any of it: when the mode engages, and how big the panel is,
   are settled here once for every game. What goes INSIDE the panel is the game's own
   stylesheet's business.

   ⚠️ A game's own rules must never ask the window how big it is. They ask
   `html.fills-window` / `html.fills-split`, which app.js sets from the flags below, so
   the three numbers in this file are the only copies of them anywhere.

   ⚠️ Loaded AFTER site.css. A media query adds no specificity, so the base .game-root
   card wins on source order otherwise.
   ========================================================================== */

:root {
  /* The header bar plus the gap the anchor leaves above a board. */
  --fill-band: 68px;
  /* What the page keeps either side of the panel while the bar is whole. */
  --fill-bar-gutter: 40px;
  /* The two 190px gutters the split header's pills ride in. */
  --fill-split-gutter: 380px;
}

/* Both boxes are the window minus the menu, and only the menu differs: a bar across the
   top costs 68px of height, two pill gutters cost 380px of width.

   The height is exact and is never capped — a cap leaves a strip of page showing under a
   panel that claims to be the window, which is the one thing this mode is for. So the
   panel does not choose its size, and the window height is what the mode is left at. */
@media (min-width: 1000px) and (max-height: 943px) {
  /* The panel's box, published on :root rather than on the panel itself: a topic page's
     how-to button is a SIBLING of the panel and would not inherit it from there. */
  :root {
    --fill-w: calc(100vw - var(--fill-bar-gutter));
    --fill-h: calc(100svh - var(--fill-band));
  }
  .game-root[data-fill] {
    /* Read by app.js, and by any game script fitting a fixed-ratio board: the panel is a
       box of the window's shape, so the board has to be measured and set in pixels
       rather than sized from its own aspect-ratio. */
    --fill: 1;
    width: var(--fill-w); height: var(--fill-h);
    min-height: 0; padding: 8px 10px; margin: 0 0 26px;
    /* Wider than .container: an auto margin collapses to 0 once the child outgrows its
       parent, so the centring is done by hand. */
    margin-left: calc(50% - var(--fill-w) / 2);
    scroll-margin-top: var(--fill-band);
  }
  /* That button is positioned against the page column, which the panel is wider than, so the
     sitewide 22px corner lands somewhere in the middle of the board. Put back on the panel's
     own corner here, where the width is known, rather than once per game. */
  .game-root[data-fill] ~ .topic-howto {
    top: 12px; right: calc(50% - var(--fill-w) / 2 + 22px); height: auto; z-index: 2;
  }
}

/* The split buys the panel 68px of height and costs it 340px of width, so on a board wider
   than it is tall it is a trade, not a gain. ⚠️ This number is chosen, not derived: the split
   only stops costing board width above about 1.95, and a 16:9 board pays about 2.5% of its
   width here and about 15% at 16:10. Don't "correct" it to the break-even — it is set where
   it is on purpose. Real windows sit at 1.6 (16:10) and 1.778 (16:9) with next to nothing
   between, so any line between the two sorts the same windows; 5/3 is also where the boards
   built before this file split, so both kinds agree on one page. Only the variables change;
   the properties above read them. */
@media (min-width: 1000px) and (max-height: 943px) and (min-aspect-ratio: 5/3) {
  :root {
    --fill-w: calc(100vw - var(--fill-split-gutter));
    --fill-h: 100svh;
  }
  .game-root[data-fill] {
    --fill-split: 1;
    /* With the bar gone the band is the panel's own space, and a panel one window tall
       loses as much off the bottom as any nudge takes off the top. */
    scroll-margin-top: 0;
  }
}