ui/buyphaseitem.razor.scss
BuyPhaseItem {
	width: 280px;
	min-height: 220px;
	//background-color: #ffffff08;
	flex-shrink: 0;
	border-radius: 10px;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 8px;
	gap: 8px;
	position: relative;
	//border: 4px solid #000000ee;
	//background-color: #000000aa;
	//backdrop-filter: blur(12px);
	pointer-events: all;
	transform: scale( 0.99 );
	transition: all 0.05s ease-out;
	box-shadow: 0px 8px 4px #00000099;
	//background-color: #000000aa;
	backdrop-filter: blur(12px);
	border: 4px solid #000000aa;
	border-radius: 15px;

	&:hover {
		transform: scale( 1.01 );
		box-shadow: 0px 12px 4px #00000088;
	}

	&:active {
		transform: scale( 1.05 );
		box-shadow: 0px 16px 4px #00000077;
	}

	.name {
		width: 100%;
		font-size: 22px;
		color: #fff;
		height: 30px;
		padding-left: 3px;
		//padding-bottom: 10px;
		pointer-events: none;
		justify-content: flex-start;
		//background-color: #0000ffaa;
	}

	.price_container {
		position: absolute;
		right: 8px;
		top: 5px;
		flex-direction: row;
		//justify-content: flex-end;
		align-items: flex-end;
		pointer-events: none;
	}

	.hp_symbol {
		//position: absolute;
		//right: 8px;
		//top: 8px;
		font-size: 22px;
		text-stroke: 5px #000000ee;
		font-family: W10Emoji;
		pointer-events: none;
	}

	.price {
		//position: absolute;
		//right: 8px;
		//top: 8px;
		font-size: 24px;
		text-stroke: 10px #000000ee;
		pointer-events: none;
	}

	.icon {
		width: 90px;
		height: 90px;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		//padding-top: 8px;
		pointer-events: none;
		filter: drop-shadow(0px 8px 3px #00000055);
	}

	.level {
		position: absolute;
		//left: 8px;
		//bottom: 8px;
		left: 11px;
		top: 15%;
		font-size: 20px;
		//height: 5px;
		color: #666;
		//padding-top: -10px;
		pointer-events: none;
	}

	.description {
		font-size: 16px;
		color: #bbb;
		white-space: pre-wrap;
		width: 100%;
		flex-shrink: 0;
		//display: flex;
		//flex-wrap: wrap;
		//gap: 3px;
		//justify-content: center;
		//align-items: center;
		pointer-events: none;
	}

	.buy_button {
		width: 90px;
		height: 30px;
		font-size: 22px;
		color: #ffffff88;
		justify-content: center;
		align-items: center;
		pointer-events: all;
		border-radius: 8px;
		transform: scale( 1 );
		transition: all 0.05s ease-out;
		background-color: #ffffff11;

		&:hover {
			color: #ffffffbb;
			//background-color: #153582;
			//color: #eee;
			//opacity: 0.8;
			transform: scale( 1.03 );
		}

		&:active {
			color: #ffffff;
			//background-color: #3555d2;
			//color: #fff;
			//opacity: 1;
			transform: scale( 1.06 );
		}

		.button_text {
			pointer-events: none;
		}
	}

	.sold {
		position: absolute;
		top: 30px;
		font-size: 65px;
		color: #ff8888cc;
		//text-shadow: 2px 2px 1px #00000055;
		text-stroke: 18px #000000;
		transform: rotate(-30deg);
		white-space: pre;
		pointer-events: none;
	}
}