/* ===== PIECE SET OVERRIDES ===== Replaces chessground's default cburnett SVGs with our painted Warriors art. Toggled via `data-piece-set` attribute on . Folder layout (each set in its own folder under Pieces/cropped/): warriors/ - flat front-facing warrior set (default play). _f suffix. cinematic/ - hand-painted full statues. no suffix. "classical" piece set has no overrides - it falls through to chessground's built-in cburnett SVGs. 3D / Sculpted set is parked. Assets remain under Pieces/cropped/3d/ for when we revisit the angled-board look. */ /* ---- Warriors (default - flat playable) ---- */ body[data-piece-set="warriors"] .cg-wrap piece.king.white { background-image: url("../../Pieces/cropped/warriors/wk_f.png"); } body[data-piece-set="warriors"] .cg-wrap piece.queen.white { background-image: url("../../Pieces/cropped/warriors/wq_f.png"); } body[data-piece-set="warriors"] .cg-wrap piece.rook.white { background-image: url("../../Pieces/cropped/warriors/wr_f.png"); } body[data-piece-set="warriors"] .cg-wrap piece.bishop.white { background-image: url("../../Pieces/cropped/warriors/wb_f.png"); } body[data-piece-set="warriors"] .cg-wrap piece.knight.white { background-image: url("../../Pieces/cropped/warriors/wn_f.png"); } body[data-piece-set="warriors"] .cg-wrap piece.pawn.white { background-image: url("../../Pieces/cropped/warriors/wp_f_1.png"); } body[data-piece-set="warriors"] .cg-wrap piece.king.black { background-image: url("../../Pieces/cropped/warriors/bk_f.png"); } body[data-piece-set="warriors"] .cg-wrap piece.queen.black { background-image: url("../../Pieces/cropped/warriors/bq_f.png"); } body[data-piece-set="warriors"] .cg-wrap piece.rook.black { background-image: url("../../Pieces/cropped/warriors/br_f.png"); } body[data-piece-set="warriors"] .cg-wrap piece.bishop.black { background-image: url("../../Pieces/cropped/warriors/bb_f.png"); } body[data-piece-set="warriors"] .cg-wrap piece.knight.black { background-image: url("../../Pieces/cropped/warriors/bn_f.png"); } body[data-piece-set="warriors"] .cg-wrap piece.pawn.black { background-image: url("../../Pieces/cropped/warriors/bp_f_1.png"); } /* ---- Cinematic (painted statues) ---- */ body[data-piece-set="cinematic"] .cg-wrap piece.king.white { background-image: url("../../Pieces/cropped/cinematic/wk.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.queen.white { background-image: url("../../Pieces/cropped/cinematic/wq.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.rook.white { background-image: url("../../Pieces/cropped/cinematic/wr.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.bishop.white { background-image: url("../../Pieces/cropped/cinematic/wb.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.knight.white { background-image: url("../../Pieces/cropped/cinematic/wn.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.pawn.white { background-image: url("../../Pieces/cropped/cinematic/wp.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.king.black { background-image: url("../../Pieces/cropped/cinematic/bk.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.queen.black { background-image: url("../../Pieces/cropped/cinematic/bq.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.rook.black { background-image: url("../../Pieces/cropped/cinematic/br.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.bishop.black { background-image: url("../../Pieces/cropped/cinematic/bb.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.knight.black { background-image: url("../../Pieces/cropped/cinematic/bn.png"); } body[data-piece-set="cinematic"] .cg-wrap piece.pawn.black { background-image: url("../../Pieces/cropped/cinematic/bp.png"); } /* Warriors set: all 12 PNGs are normalized to a shared 175x264 canvas with each figure bottom-aligned. That means we can use `contain` (aspect-preserving) and the natural piece-height hierarchy is baked into the assets - kings fill most of the canvas, pawns leave transparent space above them. No per-piece overrides needed. The drop-shadow lifts the flat illustration off the painted board. */ body[data-piece-set="warriors"] .cg-wrap piece { background-size: contain; background-position: center center; background-repeat: no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); } /* Cinematic set: original canvases, so we still shrink + bottom-bias to keep the rook bases from kissing the floor. Two stacked drop-shadows give the painted statues real presence on the board: 1. A soft halo at 0 offset (1.5px blur) - acts as a thin rim that separates the piece silhouette from the painted square colours, important because the gold-toned white pieces otherwise blend into the cream squares. 2. A crisp cast shadow offset down-right - lifts the statue off the surface so it reads as standing on the board, not painted onto it. */ body[data-piece-set="cinematic"] .cg-wrap piece { background-size: 88% 88%; background-position: center 80%; background-repeat: no-repeat; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.7)) drop-shadow(0 4px 5px rgba(0, 0, 0, 0.55)); } /* Cinematic pawns sit centred (they're shorter, a bottom-anchor leaves them looking stranded on the floor). Slightly smaller than the major pieces. */ body[data-piece-set="cinematic"] .cg-wrap piece.pawn { background-position: center center; background-size: 80% 80%; } /* The piece movement tutorial board (How to Play modal) intentionally falls through to chessground's default cburnett SVGs - the painted PNG statues are great for the *picker* grid but on a tiny tutorial board you want clean, instantly readable classical pieces. The picker on the rules page still uses the description PNGs via plain tags. */