/* The units' new art (scripts/artwork.js, "Units: New art" in More; .claude/docs/board.md). The img keeps the classic
   box (its width and height) and its div its left and top: the saved spot and the place under its centre don't change.
   In play (on the map or a side board: scripts/pool.js marks the piece's div data-pool="play"), on a card (a faction's
   column, an elder race's sheet, the Slave Pen and Moonburn Box: data-pool="card"; the user, 29.10.2026: "when units
   are on the faction's sheets ... keep them at the map size") and while it is carried (drag.js's
   .ui-draggable-dragging; "make the same to happen to buildings when dragging out of the pool") it is drawn --pg-sx
   times as wide and --pg-sy times as tall, around the box's centre; elsewhere (the pool's tray, the piece card, the
   log's icons) the new picture is fitted into that box.
   `scale` is a property of its own, so the div's `transform` (the pool's, the side cards') is untouched. A browser
   without it (Safari before 14.1, Chrome before 104) draws the piece in its classic box.
   The bigger picture only draws (pointer-events: none): the div, the classic box, is what a press, a drag, a tap and
   the piece card find (closest(".boardpiece")), so a piece is picked as with Classic, and a tap on the picture's outer
   ring goes to what lies under it. */
img[data-pg-unit] {
    object-fit: contain;
}
.boardpiece[data-pool="play"] > img[data-pg-unit],
.boardpiece[data-pool="card"] > img[data-pg-unit],
.boardpiece.ui-draggable-dragging > img[data-pg-unit] {
    object-fit: fill;
    scale: var(--pg-sx) var(--pg-sy);
    pointer-events: none;
}