.character-sprite { display: block; aspect-ratio: 1; background-repeat: no-repeat; background-size: 300% 100%; }
.cat-sprite { background-image: url('./public/assets/cats-atlas.png'); }
.cat-sprite[data-variant="mainecoon"] { background-image: url('./public/assets/mainecoon-companion-v1.png'); background-size: contain; background-position: center; }
.cat-sprite[data-variant="munchkin"] { background-image: url('./public/assets/munchkin-companion-v1.png'); background-size: contain; background-position: center; }
.mouse-sprite { background-image: url('./public/assets/mice-base-v3.png'); }
.character-sprite[data-variant="lime"], .character-sprite[data-variant="gray"] { background-position: 0 50%; }
.character-sprite[data-variant="violet"] { background-position: 50% 50%; }
.character-sprite[data-variant="gold"] { background-position: 100% 50%; }
.rig-character { position: relative; display: block; width: 100%; aspect-ratio: 1; pointer-events: none; }
.rig-shadow { position: absolute; left: 20%; right: 16%; bottom: 7%; height: 8%; border-radius: 50%; background: rgba(0,0,0,.36); filter: blur(3px); }
.character-canvas { position: relative; display: block; width: 100%; height: 100%; opacity: 0; }
.rig-fallback { position: absolute; inset: 10%; }
.rig-character .rig-fallback.character-sprite { width: auto; }
.rig-character.is-rendered .character-canvas { opacity: 1; }
.rig-character.is-rendered .rig-fallback { display: none; }
.rig-accessory { position: absolute; display: block; width: 38%; aspect-ratio: 1; background: url('./public/assets/mouse-rig.png') no-repeat; background-size: 400% 300%; }
.rig-fallback-hat { inset: auto; left: 35%; top: 1%; background-position: 33.333% 100%; }
.rig-fallback-jar { inset: auto; left: 69%; top: 54%; width: 26%; background-position: 66.667% 100%; }