/* Real PNGs inside the existing badges; transparent margins are part of each file. */
.character-art { display:inline-block; width:1.65em; height:1.65em; vertical-align:middle; line-height:1; flex-shrink:0; }
.character-art img { display:block; width:100%; height:100%; object-fit:contain; }
.character-art.ladybird-art { background:#e7dec8; border-radius:50%; }
/* the plate's portrait: a medallion masked to the disc (table.json plate.portraitShare, portraitDrop) */
.plate > .character-art { width:100%; height:100%; border-radius:50%; overflow:hidden; position:relative; }
.plate > .character-art img { position:absolute; width:calc(var(--plateportrait, 1) * 100%); height:calc(var(--plateportrait, 1) * 100%);
  left:calc((1 - var(--plateportrait, 1)) * 50%); top:calc((1 - var(--plateportrait, 1)) * 50% + var(--platedrop, 0.06) * 100%); }
.character-choice { display:inline-flex; align-items:center; gap:7px; min-width:0; }
.character-choice > .character-art { width:32px; height:32px; }
.character-choice > select { min-width:0; }
.av .character-art { width:24px; height:24px; }
.tile small .character-art { width:1.5em; height:1.5em; }
/* who took the opened trick: a gold ring and a glow round the face */
.spread .played .face.won .character-art, .spread .played .face.won:not(:has(.character-art)) { border-radius:50%; background:rgba(255,204,0,.22);
  box-shadow:0 0 0 2px #ffcc00, 0 0 10px 2px rgba(255,204,0,.75); }