/* A SPRITE AND A FACE, THEIR ONE RULE (lib/growlmaster/sprites.js draws them: avatarFace, spriteVars; spriteSheetCss its
   sheets' classes). Loaded by the lobby's frame for every page in it (LobbyFrame.astro: the rail's and the phone bar's
   Profile face, a person's page), and by the dice (dice.css imports it): so a face is never a grey circle waiting for
   a page that happens to load the dice (Maayan, 2026-11-08: "i saw profile gray ... make sure it's always there"). */
/* A SPRITE'S FRAME (lib/growlmaster/sprites.js): the sheet, its frame at (--col, --row) of --cols × --rows, the box at the
   frame's own shape. The one drawing of every sprite, set by spriteVars (the server) or the same properties (diceBadge.js). */
.gm-sprite { display: block; aspect-ratio: var(--ratio, 1); background-image: var(--src); background-repeat: no-repeat;
  background-size: calc(var(--cols) * 100%) calc(var(--rows) * 100%);
  background-position: calc(var(--col) / max(1, var(--cols) - 1) * 100%) calc(var(--row) / max(1, var(--rows) - 1) * 100%); }
/* A PICTURE FROM THE PRESETS (sprites.js avatarFace): its frame on its own colour, round. Here, beside the sprites', so
   every page that shows one draws it the same (a table, the dice page's badges). */
/* FILLED TO THE CIRCLE'S BOTTOM EDGE (Maayan, 2026-10-24: "the character picture is cut flat at the bottom… the coloured
   circle shows below the cut"): each preset is a bust cut out of its frame, ending a little above the frame's bottom
   (up to 27px of 256). The picture is drawn 12% larger from its top, so the cut always falls below the circle, and the
   circle (this, round, overflow hidden) clips it: every avatar, every size, every place. */
.gm-avatar--preset { background: none; border-radius: 50%; overflow: hidden; }   /* the clip only: each place keeps its own size */
.gm-av { display: block; width: 100%; height: 100%; border-radius: 50%; background-color: var(--av); transform: scale(1.12); transform-origin: 50% 0; }