/* Angled "3-quarter overhead" camera as a CSS 3D transform applied on top
   of the flat, orthographic board art -- per Board + Digital Screen Brief
   v0.3 Section 10. The flat SVG stays the exact geometry source of truth;
   this is purely a render-pass tilt shared by the board layer and the
   piece layer, which is why both live inside one preserve-3d container. */

.board-3d-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ground);
  perspective: 3000px;
}

.board-3d-inner {
  position: relative;
  /* Bounded by whichever of viewport width or height is tighter, so a
     short viewport shrinks the board by height instead of letting the
     rotateX'd content spill past the container and get clipped -- 2.49
     is the board's own aspect ratio (2353/945), precomputed since CSS
     can't derive it inline for a vh-based term. */
  width: min(94vw, 2000px, 94vh * 2.49);
  aspect-ratio: 2353 / 945;
  transform-style: preserve-3d;
  transform: rotateX(18deg);
}

.board-base,
.board-pieces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.board-base {
  display: block;
  object-fit: contain;
}

.board-pieces {
  overflow: visible;
}