/* =========================
   RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =========================
   BODY
========================= */

body{
  background:black;
  overflow-x:hidden;
  font-family:Arial, sans-serif;
  cursor:url("cursor/normal-select.cur") 32 32, auto;
}

.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* =========================
   STAGE OUTER
   Scroll/crop container. Its height is set by js/scale.js to
   exactly match the scaled stage, so the page only scrolls when
   the stage is genuinely taller than the viewport (typically
   desktop), and never shows empty space around the art.
========================= */

.stage-outer{
  position:relative;
  width:100%;
  overflow-x:hidden;
}

/* =========================
   WRAPPER (STAGE)
========================= */

.wrapper{
  position:absolute;
  top:0;
  left:50%;

  /* Fixed design-canvas size. Transform (not zoom) scales it as
     one unit, driven by --bg-scale (see js/scale.js) — this is
     the more reliable choice across browsers, including Safari. */
  width:824px;
  height:1310px;

  margin-left:-412px; /* half of 824px, keeps the stage centered */

  transform-origin:top center;
  transform:scale(var(--bg-scale, 1));
}

.wrapper img{
  width:100%;
  height:auto;
  display:block;
}