/* The browser client's page (phase 5): two canvases over the whole
 * viewport — the game's, and the loading screen painted over it by
 * boot.js until the client's first frame is up — and one transparent
 * button laid over the painted one. No text and no styling of its own:
 * the loading screen's material is the game's, painted, so nothing here
 * can drift from the menu it turns into.
 *
 * `position: fixed; inset: 0` on the game's canvas is load-bearing, not
 * tidiness (the prototype's lesson): the client writes the canvas's size
 * as inline style, and a canvas in a grid sized by its children resolves
 * a percentage against itself and overflows the viewport. Out of flow,
 * the containing block is the viewport. */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background: #000;
  overflow: hidden;
}

canvas { display: block; outline: none; }
#stage { position: fixed; inset: 0; }

/* The cover: opaque and on top, sized to the viewport in device pixels by
 * boot.js and shown at CSS size, its pixels never smoothed. */
#boot {
  position: fixed; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  image-rendering: pixelated;
}

/* The real button over the painted one: invisible, focusable, clickable.
 * Its box is set by boot.js to the painted button's. */
#play {
  position: fixed; z-index: 3;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}
#play[hidden] { display: none; }

body.ready #boot, body.ready #play { display: none; }