/* game-shell.css: overrides site layout to allow full-viewport canvas pages */

html, body {
  height: 100%;
  margin: 0;
}

body {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

/* Override the site’s fixed content column */
#content {
  width: 100% !important;
  margin: 0 !important;
  background: #bababa;
}

#mainContent {
  margin: 0 !important;
}

/* Stage needs a real height so JS sizing works */
#stage {
  width: 100%;
  height: calc(100vh - 4px); /* - 32px banner(32) + header/footer bars(2+2) */
  display: flex;
  align-items: center;
  justify-content: center;
}

#canvasFrame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#canvas {
  display: block;
}

#banner {
  height: 0px;
}

/* Ensure overlay positions relative to the canvas frame */
#canvasFrame {
  position: relative;
}

/* Full-frame overlay */
#loadingOverlay {
  position: absolute;
  inset: 0;                 /* top/right/bottom/left = 0 */
  display: none;            /* JS will set to flex */
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;     /* clicks go through */
}

/* Loading bar container */
#loadingBar {
  width: min(70%, 420px);
  height: 12px;
  border: 2px solid #000;
  background: #444;
  box-sizing: border-box;
}

/* Fill */
#loadingFill {
  height: 100%;
  width: 0%;
  background: #e2e2e2;
}