/* FOCUS MODE -- full screen for a browser that will not do full screen.

   Loaded by js/games/arcade/fullscreen.js, which explains when and why. In
   short: an iPhone has no full screen for anything but video, so the game's
   shell is pinned over the visible screen instead and the page behind it is
   held still.

   Only position and size live here. What the shell looks like when it is
   the whole screen -- its padding, its background -- is each game's own, in
   the same rule as its :fullscreen look (`.X-shell:fullscreen,
   .X-shell.is-focus`), so the two can never drift apart. */

/* The page behind stays where it is. Without this a swipe on the board
   scrolls the site underneath, and on a phone that takes the toolbar with it. */
html.pcs-focus,
html.pcs-focus body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Over everything of ours; dialogs still open above it, in the top layer. dvh
   rather than vh, because on a phone vh is the height with the toolbar hidden,
   which puts the bottom bar under the toolbar. */
html.pcs-focus .is-focus {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: auto;
  height: 100dvh;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  overflow: auto;
}

/* A background for a game that never set one for full screen. Zero
   specificity, so any game's own rule wins. */
:where(.is-focus) {
  background: var(--ground, #fff);
}