html, body {
  margin: 0; padding: 0; height: 100%;
  background: #07050a;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100vw; height: 100vh;
}
#game {
  position: relative;
  z-index: 2;
  background: #000;
  /* JS letterboxes via inline width/height to preserve 16:10 */
  image-rendering: pixelated;
  cursor: default;
}
/* 3D battle WebGL canvas: sits UNDER #game, hidden until a 3D battle is active.
   B3DScene.resize() matches its CSS rect to #game's computed rect. */
#gl {
  position: absolute;
  z-index: 1;
  display: none;
  pointer-events: none;
}
body.b3d #gl { display: block; }
body.b3d #game { background: transparent; }