/* The board's own styles: layout, animation and the piece set.
 *
 * Replaces chessground's base.css and its cburnett theme. The layout rules are
 * written for public/app/board.js; the square colours, the highlights and the
 * coordinate sizing live in styles.css, which owns the board's appearance and
 * always did.
 *
 * PIECE ARTWORK: none in this file. See public/pieces.css.
 *
 * This copy differs from the 960-chess-site original in exactly that way: the
 * embedded Cburnett images have been removed so nothing third-party ships.
 */

/* ---------- layout ---------- */
/* .cg-wrap gets its 1:1 box from styles.css, which is also where the square
   colours are painted. Everything here is geometry. */
.cg-wrap {
  box-sizing: content-box;
  position: relative;
  display: block;
}

cg-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}

cg-board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* touch-action is the only thing that stops a phone treating a drag as a scroll,
   and it has to be set before the gesture starts -- it cannot be turned on once
   a finger is already down. So it goes on the board only while that board is
   actually yours to move on.
   The alternative, setting it on every cg-board, would kill vertical scrolling
   on the 960 position pages, where the board is a picture in the middle of an
   article. A board you cannot move on is a board you can still scroll past. */
.cg-wrap.manipulable cg-board { cursor: pointer; touch-action: none; }

/* Squares exist only where something is drawn, and never eat a pointer event
   except on a destination, where hovering is meant to respond. */
cg-board square {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  pointer-events: none;
}
cg-board square.move-dest { pointer-events: auto; }

/* The transform is set per piece by board.js; the transition is what turns a
   change of square into a move you can watch. Duration is written inline so a
   reader's reduced-motion preference can flatten it to zero. */
.cg-wrap piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

cg-board piece.dragging { z-index: 11; cursor: grabbing; }
.cg-wrap piece.ghost { opacity: .3; z-index: 1; }

.cg-wrap coords {
  position: absolute;
  display: flex;
  pointer-events: none;
  opacity: .8;
  font-family: sans-serif;
  font-size: 9px;
}
.cg-wrap coords coord { flex: 1 1 auto; }

.cg-wrap coords.ranks {
  left: 4px;
  top: -20px;
  height: 100%;
  width: 12px;
  flex-flow: column-reverse;
}
.cg-wrap coords.ranks.black { flex-flow: column; }
.cg-wrap coords.ranks coord { transform: translateY(39%); }

.cg-wrap coords.files {
  bottom: -4px;
  /* 0, not 24px. This is a FULL-WIDTH row of eight equal cells laid over the
     board, so any offset shifts every letter out from under its own file and
     pushes H past the right edge -- which on a phone gave the whole page
     horizontal scroll. Found independently by two people building on top of it,
     each of whom worked around it locally; this is the fix at source. The rank
     digits do not need compensating for: they are absolutely positioned over
     the board's left edge, not laid out beside it. */
  left: 0;
  width: 100%;
  height: 16px;
  flex-flow: row;
  text-align: center;
  text-transform: uppercase;
}
.cg-wrap coords.files.black { flex-flow: row-reverse; }

@media (prefers-reduced-motion: reduce) {
  .cg-wrap piece { transition-duration: 0ms !important; }
}

/* ---------- pieces ----------
   Deliberately NOT here. The piece artwork lives in public/pieces.css, which is
   generated by tools/build_pieces.py and is original work.

   960-chess-site embeds the Cburnett set at this point under CC BY-SA 3.0. That
   set was removed rather than overridden: an overridden data URI is still
   served, so the obligation would still attach. See NOTICE.md. */