/* lux-body holds the play square. Engine owns #bg / #stage boxes and
   routes board hits to #stage. Body stays inert so chrome can sit on top
   without covering the draw listener. */

html[data-lux-shell] lux-body {
  pointer-events: none;
  background: transparent;
}

/* Lux lays the rails out as a body grid. #bg / #stage are not chrome, so they
   must leave that grid. In-flow, the canvas's own height becomes an extra row
   and the side rails collapse to a few pixels. Same idea as the older shell,
   which pinned non-rail chrome with position:fixed. */
html[data-lux-shell] #bg,
html[data-lux-shell] #stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  z-index: 0;
}
html[data-lux-shell] #bg {
  pointer-events: none;
}
html[data-lux-shell] #stage {
  z-index: 1;
}

html[data-lux-shell] #sand-spray {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}