*{
	/* --chip-size: 40px;
	--chip-top: 3px;
	--chip-left: 4px; */

	--chip-size: 30px;
	--chip-top: 6px;
	--chip-left: 8px;
}

.chip {
	width: var(--chip-size);
	height: var(--chip-size);
	background-color: #b67f19e0;
	box-shadow: 2px 10px 10px #171819bb;
	z-index: 2;
	position: absolute;
	top: var(--chip-top);
	left: var(--chip-left);
	border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
	border: 1px ridge rgba(70, 25, 25, 0.7);
	border-top: 1px solid #b67f19e0;
	border-right: 1px ridge rgba(32, 6, 6, 0.678);

	/* slide transition */
	transition: 
		top 0.2s ease, left 0.2s ease, 
		width 0.2s ease;
}
.chip::after{
	position: absolute;
	top: 18%;
	content: '';
	width: 100%;
	height: 82%;
	border-radius: inherit;
	background: linear-gradient(
		#b67f19,
		#171819aa
	);
    /* shadow */
	transition: 
		top 0.4s ease,
		height 0.4s ease;
}

/************/
/* shadowfx */

.roll-chip-vert{
	border-radius: 50%;
	height: calc(var(--chip-size) - 2px);

    /* slide transition */
	transition: 
		top 0.2s ease, left 0.2s ease, 
		height 0.2s ease;
}
.roll-chip-vert::after{
    top: 0%;
    height: 100%;
    background: linear-gradient(
        35deg,
		#171819bb,
		#b67f19
	);
	transition: 
		top 0.2s ease,
		height 0.2s ease;
}


.roll-chip-horz{
	width: calc(var(--chip-size) - 2px);
    border-radius: 50px;

    /* slide transition */
	transition: 
		top 0.2s ease, left 0.2s ease, 
		width 0.2s ease;
}
.roll-chip-horz::after{
    top: 0%;
    height: 100%;
    /* background: linear-gradient(
		#171819bb,
		#b67f19
	); */
	transition: 
		top 0.2s ease,
		height 0.2s ease;
}