/* ============================================================
   Floating chess field - shared full-viewport background.
   Fixed across the whole viewport (z-index:-1) so the pieces drift
   behind the page content, above the body's cream background.
   Pair with /assets/chess-field.js and the .chess-field markup block.
   ============================================================ */
.chess-field{
  position:fixed;inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.chess-field .cp{
  position:absolute;top:0;left:0;
  width:var(--cp-size);height:var(--cp-size);
  background-color:var(--cp-color);
  transform:translate3d(-9999px,-9999px,0);
  -webkit-mask:var(--cp-mask) center / contain no-repeat;
          mask:var(--cp-mask) center / contain no-repeat;
  will-change:transform,opacity;
  opacity:0;
}
.chess-field.is-active .cp{
  opacity:var(--cp-op);
  transition:opacity 1.1s ease-out;
}
.chess-field .cp.king   { --cp-mask:url("/assets/chess/king.svg"); }
.chess-field .cp.queen  { --cp-mask:url("/assets/chess/queen.svg"); }
.chess-field .cp.bishop { --cp-mask:url("/assets/chess/bishop.svg"); }
.chess-field .cp.rook   { --cp-mask:url("/assets/chess/rook.svg"); }
.chess-field .cp.pawn   { --cp-mask:url("/assets/chess/pawn.svg"); }

/* On phones the fixed-px pieces are huge relative to the viewport and clutter
   text-dense pages (legal, contact). Shrink them and fade them further back. */
@media (max-width:600px){
  .chess-field .cp{ width:calc(var(--cp-size) * 0.5); height:calc(var(--cp-size) * 0.5); }
  .chess-field.is-active .cp{ opacity:calc(var(--cp-op) * 0.5); }
}