/* =========================================================
   canvas.css — fixed 1920×1080 canvas frame + letterbox
   (canvas layout; css/flow.css restyles all of this for the
   stacked mobile layout)
   The body becomes pure black (the letterbox). The canvas is
   a 1920×1080 absolutely-positioned frame that JS scales and
   centers. Everything else in the site lives inside .canvas.
   ========================================================= */

/* The body IS the letterbox. Pure black, no scroll, no margin. */
html, body {
  background: #000;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

/* The canvas viewport fills the window. The inner .canvas is
   transformed inside it by JS. */
#canvas-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

/* The canvas itself — fixed 1920×1080. JS applies
   transform: translate(Xpx, Ypx) scale(S). transform-origin
   is top-left so translate + scale compose predictably. */
#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  /* Hidden until JS initializes — prevents a flash of giant unscaled
     content before the first applyLayout() runs */
  opacity: 0;
  animation: canvas-fade-in 0.3s ease 0.1s forwards;
}

@keyframes canvas-fade-in {
  to { opacity: 1; }
}