/* Original reference artwork reused as a CSS sprite, without modifying it. */
.profile-avatar[data-profile-avatar="panda"] { --avatar-x:1.55%; }
.profile-avatar[data-profile-avatar="raccoon"] { --avatar-x:25.8%; }
.profile-avatar[data-profile-avatar="frog"] { --avatar-x:50%; }
.profile-avatar[data-profile-avatar="penguin"] { --avatar-x:74.15%; }
.profile-avatar[data-profile-avatar="lion"] { --avatar-x:98.4%; }
.profile-avatar[data-profile-avatar="owl"] { --avatar-x:1.4%; }
.profile-avatar[data-profile-avatar="tiger"] { --avatar-x:25.66%; }
.profile-avatar[data-profile-avatar="koala"] { --avatar-x:50%; }
.profile-avatar[data-profile-avatar="pig"] { --avatar-x:74.34%; }
.profile-avatar[data-profile-avatar="monkey"] { --avatar-x:98.75%; }
.profile-avatar:is([data-profile-avatar="owl"],[data-profile-avatar="tiger"],[data-profile-avatar="koala"],[data-profile-avatar="pig"],[data-profile-avatar="monkey"]) {
    --avatar-image:url("../images/profile-animals-extra.png");
    --avatar-size:529.114% auto;
    --avatar-y:45.44%;
}
.profile-avatar[data-profile-avatar="cat"] { --avatar-x:1.35%; }
.profile-avatar[data-profile-avatar="dog"] { --avatar-x:25.6%; }
.profile-avatar[data-profile-avatar="fox"] { --avatar-x:50%; }
.profile-avatar[data-profile-avatar="rabbit"] { --avatar-x:74.49%; }
.profile-avatar[data-profile-avatar="bear"] { --avatar-x:98.68%; }
.profile-avatar:is([data-profile-avatar="cat"],[data-profile-avatar="dog"],[data-profile-avatar="fox"],[data-profile-avatar="rabbit"],[data-profile-avatar="bear"]) {
    --avatar-image:url("../images/profile-animals-third.png");
    --avatar-size:536.126% auto;
    --avatar-y:46.84%;
}
.profile-avatar[data-profile-avatar]:not([data-profile-avatar=""]) {
    background-image:var(--avatar-image,url("../images/profile-animals.png")) !important;
    background-size:var(--avatar-size,532% auto) !important;
    background-position:var(--avatar-x,50%) var(--avatar-y,45%) !important;
    background-repeat:no-repeat !important;
    border-radius:50%;
    color:transparent !important;
    overflow:hidden;
    aspect-ratio:1;
    flex-shrink:0;
}
.profile-avatar-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; padding:8px 2px 16px; border:0; margin:0; }
.profile-avatar-options label { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; cursor:pointer; font-size:12px; color:var(--foreground); }
.profile-avatar-options .profile-avatar { display:block; width:100%; max-width:90px; outline:3px solid transparent; outline-offset:3px; }
.profile-avatar-options input { position:absolute; opacity:0; width:1px; height:1px; }
.profile-avatar-options input:checked + .profile-avatar { outline-color:var(--primary); }
.profile-avatar-options input:focus-visible + .profile-avatar { outline-color:var(--primary); outline-style:dashed; }
.profile-avatar-help { color:var(--muted-foreground); font-size:12px; margin-top:10px; }
@media(max-width:400px) { .profile-avatar-options { gap:8px; } .profile-avatar-options label { font-size:10px; } }