.game-avatar-surface {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f3d89d;
    color: #24140a;
}

.game-avatar-surface svg {
    display: block;
    width: 100%;
    height: 100%;
}

.game-avatar-surface .retro-human-avatar {
    shape-rendering: crispEdges;
}

.game-avatar-surface .retro-human-avatar .retro-avatar-body {
    animation: sharedRetroAvatarBop 3.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 50% 72%;
}

.game-avatar-surface .retro-human-avatar .retro-avatar-pupil,
.game-avatar-surface .retro-human-avatar .retro-avatar-iris {
    animation: sharedRetroAvatarLook 5.8s steps(1, end) infinite;
}

.game-avatar-surface .retro-human-avatar .retro-avatar-eye-white {
    animation: sharedRetroAvatarBlink 4.8s steps(1, end) infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.game-avatar-surface .retro-human-avatar .retro-avatar-mouth {
    animation: sharedRetroAvatarMouth 5.2s steps(1, end) infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes sharedRetroAvatarBop {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-1.2px); }
    58% { transform: translateY(-1.2px) rotate(-1deg); }
    70% { transform: translateY(0.4px) rotate(0.8deg); }
}

@keyframes sharedRetroAvatarLook {
    0%, 28%, 100% { transform: translate(0, 0); }
    35%, 48% { transform: translate(1px, 0); }
    62%, 72% { transform: translate(-1px, 0); }
    82%, 88% { transform: translate(0, 1px); }
}

@keyframes sharedRetroAvatarBlink {
    0%, 45%, 49%, 100% { transform: scaleY(1); }
    47% { transform: scaleY(0.12); }
}

@keyframes sharedRetroAvatarMouth {
    0%, 40%, 100% { transform: scaleY(1); }
    43%, 46% { transform: scaleY(1.25); }
    68%, 71% { transform: translateX(0.5px) scaleY(0.85); }
}