body {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: var(--void-black);
  color: #ccc;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Fixed-size scene container — all scene elements position inside this
   so they never drift relative to each other on viewport resize. */
.scene {
  position: absolute;
  width: 1440px;
  height: 900px;
  left: 50%;
  top: 50%;
  margin-left: -720px;
  margin-top: -450px;
}

/* Mobile: allow native scroll (pan) and pinch-zoom */
@media (max-width: 1024px) {
  html, body {
    overflow: auto;
    width: auto;
    height: auto;
  }

  body {
    /* Ensure the full scene is scrollable */
    min-width: 1440px;
    min-height: 900px;
  }

  .scene {
    /* No centering trick — just place at origin so scroll works naturally */
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 0;
    margin-top: 0;
  }
}