.grid-scrap {
	grid-template-columns: repeat(8, 60px);
	display: grid;
	width: min-content;
}

.resource {
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	position: relative;
	user-select: none;
}


.resource .hp {
  background-color: #0008;
  padding: 0px 8px;
  color: #fff;
	font-size: 0.75em;
	position: absolute;
	bottom: 0px;
	pointer-events: none;
}

@keyframes wave {
	0%   { rotate: -45deg; }
	50%  { rotate: 45deg; }
	100% { rotate: -45deg; }
}

.resource span {
	animation: wave 15s cubic-bezier(.8,0,0,.8) infinite;
	transition: scale 0.3s;
	pointer-events: none;
}
.resource:hover span {
	color: white;
	scale: 1.2;
}

.none {
	font-size: 0.5em;
	color: #888;
}

.depth-controls {
	font-size: 4em;
}
.depth-controls button {
	font-size: 1em;
}