/* Microsoft Fluent 3D PNGs only. No native emoji overlay or fallback. */
.fluent-glyph{position:relative;display:inline-grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;line-height:1;isolation:isolate;vertical-align:middle}
.fluent-glyph img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;color:transparent}
.bl-avatar{--av-size:72px;display:inline-grid;place-items:center;position:relative;width:var(--av-size);height:var(--av-size);min-width:var(--av-size);flex:none;isolation:isolate;line-height:1;overflow:visible;vertical-align:middle;user-select:none}
.bl-avatar-body{position:relative;z-index:2;display:grid;place-items:center;width:100%;height:100%;border:2px solid #c3e4d8;border-radius:30%;background:linear-gradient(160deg,#ecfaf5,#dcecfb);font-family:'Segoe UI Emoji',system-ui,sans-serif;font-size:calc(var(--av-size)*.72);filter:drop-shadow(0 2px 1px #133b4111)}
.bl-avatar-body .fluent-glyph{width:90%;height:90%}
.bl-avatar-hat,.bl-avatar-accessory{position:absolute;display:block;line-height:1;filter:drop-shadow(0 1px 2px #0030402a);transform-origin:center center}
.bl-avatar-hat{z-index:4;top:-5%;left:50%;width:39%;height:39%;transform:translateX(-50%) rotate(-7deg);font-size:calc(var(--av-size)*.35)}
.bl-avatar-accessory{z-index:3;width:32%;height:32%;font-size:calc(var(--av-size)*.30)}
.bl-avatar-accessory-headphones{z-index:3;top:1%;left:50%;width:61%;height:61%;transform:translateX(-50%);font-size:calc(var(--av-size)*.57)}
.bl-avatar-accessory-face{top:31%;left:50%;transform:translateX(-50%);width:43%;height:31%;font-size:calc(var(--av-size)*.30)}
.bl-avatar-accessory-collar{top:67%;left:50%;transform:translateX(-50%);width:31%;height:31%}
.bl-avatar-accessory-collar-guitar{top:64%;left:50%;transform:translateX(-50%) rotate(-8deg);width:33%;height:33%}
.bl-avatar-accessory-hair-left{top:1%;left:8%;width:28%;height:28%;transform:rotate(-14deg)}
.bl-avatar-accessory-backpack{z-index:1;top:24%;left:-10%;width:48%;height:48%;transform:rotate(-3deg)}
.bl-avatar-accessory-chest{top:58%;left:50%;width:24%;height:24%;transform:translateX(-50%)}
.bl-avatar-accessory-bowtie{top:70%;left:50%;width:29%;height:25%;transform:translateX(-50%)}
.bl-avatar-accessory-held{top:46%;right:-12%;width:35%;height:35%;transform:rotate(10deg)}

.bl-avatar-hat-tall{top:-6%;width:40%;height:40%}
.bl-avatar-hat-cap{top:2%;width:38%;height:38%;left:51%;transform:translateX(-50%) rotate(-8deg)}
.bl-avatar-hat-crown{top:-1%;width:35%;height:35%}
.bl-avatar-hat-flat{top:-2%;width:35%;height:35%}
.bl-avatar-hat-sun{top:0%;width:40%;height:40%}
.bl-avatar-hat-safety{top:1%;width:39%;height:39%}
.bl-avatar-hat-bowhat{top:3%;left:19%;width:26%;height:26%;transform:rotate(-10deg)}
.bl-avatar-hat-bucket{top:0%;width:42%;height:42%;transform:translateX(-50%) rotate(-8deg)}
.bl-avatar-hat-basket{top:0%;width:45%;height:43%;transform:translateX(-50%) rotate(7deg)}
.bl-avatar-small{--av-size:39px}.bl-avatar-medium{--av-size:80px}.bl-avatar-large{--av-size:144px}
.avatar-choice-symbol{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;font-size:30px}
.avatar-choice-symbol .fluent-glyph{width:100%;height:100%}

/* v2.9.4: veel meer diertjes, maar een compacte, goed scrollbare keuzelijst. */
.avatar-editor .avatar-choice-list{max-height:330px;overflow-y:auto;overscroll-behavior:contain;padding:3px;align-content:start;scrollbar-gutter:stable}
.avatar-editor .avatar-choice{min-height:74px}