/* ==========================================================================
   board-3d.css
   Host styling for the WebGL board.

   There is very little here on purpose. Everything the player sees on this
   board — squares, pieces, highlights, coordinates — is drawn by the GPU from
   board-3d.js, not by CSS. This file only carves out the space the canvas
   lives in and keeps the accessibility layer invisible but usable.
   ========================================================================== */

/*
   The flat board is a CSS grid of 64 buttons; this one is a single canvas.
   Turning off the grid rather than overriding each of its properties keeps the
   two layouts from interfering when the player switches skins mid-game.
*/
.board.board--3d {
  display: block;
  position: relative;
  padding: 0;
  overflow: hidden;
  /*
     board.css gives .board `container-type: size` so pieces can scale from the
     board's size. That is a purely 2D concern here, and a size container also
     establishes containment that would stop the canvas from reading its own
     parent's height on the first layout pass. Off.
  */
  container-type: normal;
  background: transparent;
}

.board3d__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /*
     Fast taps without blocking page scroll, exactly as the flat squares do.
     `manipulation` also suppresses the double-tap-to-zoom delay, which on a
     board being tapped twice per move is very noticeable.
  */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/*
   The accessibility mirror: 64 real buttons over the canvas.

   Not `display: none` and not `visibility: hidden` — both would remove them
   from the accessibility tree and the tab order, which is the entire point of
   having them. They are transparent and non-interactive to the pointer
   instead, so a screen reader and a keyboard find a full 8x8 grid of labelled
   cells while pointer events fall through to the canvas to be raycast.
*/
.board3d__a11y {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  pointer-events: none;
}

.board3d__cell {
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font: inherit;
  cursor: default;
  pointer-events: none;
}

/*
   A visible focus ring is still drawn in the scene (see #redrawFocus), because
   a ring on a transparent button floating over a perspective board would sit
   in the wrong place. This one is the keyboard's anchor, deliberately subtle
   so the two do not fight; it is what tells a sighted keyboard user which
   element the browser actually considers focused.
*/
.board3d__cell:focus-visible {
  outline: 2px dashed rgba(232, 180, 76, 0.75);
  outline-offset: -3px;
  border-radius: 2px;
}

/*
   The style picker's preview swatch. The other two styles preview as a
   flat chequer; this one gets a tilted one, which is the honest one-glance
   summary of what choosing it does.
*/
.style-option__preview[data-style="board3d"] {
  background:
    linear-gradient(160deg, #2a3142 0%, #1a1f2b 100%);
  position: relative;
  overflow: hidden;
}

.style-option__preview[data-style="board3d"]::after {
  content: "";
  position: absolute;
  inset: 18% 8% 10%;
  background:
    repeating-conic-gradient(#ecd8b6 0% 25%, #b07d4f 0% 50%) 0 0 / 50% 50%;
  transform: perspective(60px) rotateX(34deg);
  transform-origin: center bottom;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/*
   The WebGL board cannot be drawn at all without a GPU context. If one is
   refused — a blocklisted driver, a hardened browser profile, too many live
   contexts — app.js falls back to the flat board and shows this notice, rather
   than leaving the player looking at an empty frame.
*/
.board3d-unavailable {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(229, 89, 77, 0.12);
  border: 1px solid rgba(229, 89, 77, 0.35);
  color: var(--text-dim, #9aa3b5);
  font-size: 0.85rem;
  line-height: 1.45;
}