/*
 * Styling required by WebGlBoardRenderer (src/renderers/webgl-board-renderer.ts),
 * which creates this DOM structure programmatically around its canvas inside
 * whatever host element it is mounted into. Every page that hosts the board
 * must link this stylesheet.
 *
 * The wrapper's explicit width/height are required: WebGlBoardRenderer
 * observes the wrapper's own size with a ResizeObserver to decide the
 * canvas's pixel dimensions. Without an explicit height, the wrapper would
 * shrink-to-fit its canvas child, creating a runaway resize loop (canvas
 * grows, wrapper grows to match, ResizeObserver fires, canvas grows again).
 */
.encirque-webgl-board {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #001a26;
}

.encirque-webgl-board canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.encirque-webgl-board .webgl-accessibility-grid {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.encirque-webgl-board .webgl-renderer-message {
  position: absolute;
  inset: 1rem;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1rem;
  background: rgb(0 0 0 / 75%);
  color: white;
  text-align: center;
}

.encirque-webgl-board .webgl-renderer-message[hidden] {
  display: none;
}