.hud {

	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 1024px;
	height: 143px;
	background-image: url('../images/hud/hud-overlay.png');
	pointer-events: none;
	transition: transform 0.5s ease-in-out;
	transform: translateY( 0px );
	
	&.down {
		transform: translateY( 160px );
	}
	
	.credit-score {
		font-weight: bold;
		font-size: 35px;
		position: absolute;
		right: 10px;
		bottom: 52px;
		width: 120px;
		text-align: center;
	}
	
	.credit-score-label {
		font-weight: bold;
		font-size: 10px;
		position: absolute;
		right: 10px;
		bottom: 32px;
		width: 120px;
		text-align: center;
		color: #20ac8b;
	}

	.round-track {
		font-weight: bold;
		font-size: 10px;
		position: absolute;
		right: 148px;
		bottom: 63px;
		width: 149px;
		height: 30px;
		text-align: left;
		color: #20ac8b;
		display: flex;
		gap: 4px;
		justify-content: space-between;
		align-items: center;
		
		.round-number {
			opacity: 0.5;
		}
		:nth-child(1) {
			flex-grow: 2;
		}
		
		.current {
			color: white;
			ztext-decoration: underline;
			opacity: 1.0;
		}
	}
	
	.energy-track {
		position: absolute;
		right: 160px;
		bottom: 18px;
		width: 110px;
		height: 30px;
		text-align: left;
		color: #20ac8b;
		display: flex;
		gap: 4px;
		justify-content: space-around;
		align-items: center;
		
		.energy-on {
			width: 8px;
			height: 16px;
			background-image: url( '../images/hud/energy-symbol-on.png' );
			background-size: cover;
		}
		.energy-off {
			width: 8px;
			height: 16px;
			background-image: url( '../images/hud/energy-symbol-off.png' );
			background-size: cover;
		}
		
	}
	
	.hud-number {
		position: absolute;
		bottom: 18px;
		width: 90px;
		height: 30px;
		text-align: center;
		color: #20ac8b;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		
		&.supplies {
			right: 340px;
		}
		&.balance {
			right: 500px;
		}
		&.savings {
			right: 670px;
		}
		&.cash {
			right: 840px;
		}
	}
	

}

.credit-score-modification {
	font-size: 48px;
	font-weight: bold;
	position: absolute;
	width: 115px;
	height: 115px;
	border-radius: 58px;
	right: 14px;
	bottom: 7px;
	background-color: rgba( 0,0,0,0.5 );
	display: grid;
	align-items: center;
	justify-items: center;
}

.hud-notify {
	position: absolute;
	border-style: ridge;
	border-width: 20px;
	border-image-source: url('../images/hud/hud-notify-lr.png');
	border-image-slice: 30% fill;
	border-image-repeat: repeat; 
	color:  var(--body-color);
    font-style:italic;
	width: 300px;
	transform-origin: 100% 100%;
	pointer-events: none;

    align-items: center;
	&.point-at-round {
		right: 277px;
		bottom: 83px;
	}
	
	&.point-at-energy {
		right: 290px;
		bottom: 40px;
	}
	
	&.point-at-home-0 {
		border-image-source: url('../images/hud/hud-notify-lr.png');
		transform-origin: 100% 100%;
		left: 100px;
		top: 30px;
	}
	
	&.point-at-school {
		border-image-source: url('../images/hud/hud-notify-lr.png');
		transform-origin: 100% 100%;
		left: 480px;
		top: 200px;
	}
	
	&.point-at-site-0 {
		border-image-source: url('../images/hud/hud-notify-ll.png');
		transform-origin: 0% 100%;
		left: 220px;
		top: 220px;
	}
	
	&.point-at-trading-post {
		border-image-source: url('../images/hud/hud-notify-lr.png');
		transform-origin: 100% 100%;
		left: 380px;
		top: 10px;
	}
	
	&.point-at-exchange {
		left: 210px;
		top: 320px;
		width: 225px;
		border-image-source: url('../images/hud/hud-notify-ll.png');
		transform-origin: 0% 100%;
	}
	
	&.point-at-education {
		border-image-source: url('../images/hud/hud-notify-ll.png');
		transform-origin: 0% 100%;
		left: 1410px;
		top: 240px;
	}
	
	&.point-at-realty {
		left: 880px;
		top: 190px;
		width: 250px;
	}
	
	&.point-at-insurance {
		border-image-source: url('../images/hud/hud-notify-ll.png');
		transform-origin: 0% 100%;
		max-width: 250px;
		left: 480px;
		top: 330px;
	}
	
	&.point-at-automart {
		border-image-source: url('../images/hud/hud-notify-lr.png');
		transform-origin: 100% 100%;
		width: 300px;
		right: 70px;
		top: 310px;
	}
	
	&.point-at-help {
		border-image-source: url('../images/hud/hud-notify-ur.png');
		transform-origin: 100% 100%;
		width: 300px;
		right: 50px;
		top: -600px;
	}
	
}


.bubble-in {
	animation-duration: 0.5s;
	animation-iteration-count: once;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	animation-name: bubble-in-animation;
}
@keyframes bubble-in-animation {
	0% {
		transform: scale( 0 );
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	50% {
		transform: scale( 1.1 );
	}
	100% {
		transform: scale( 1.0 );
	}
}