{% if p.award_count("croag", v) %}
	{{ stackable_award('croag', '/i/PCM/croag.webp', 'croag') }}
{% endif %}

{% if p.award_count("toe", v) %}
	{{ stackable_award('toe', '/i/PCM/toe.webp', "Blade's toe") }}
{% endif %}

{% if p.award_count("crab", v) %}
	<script nonce="{{g.nonce}}">
		let audio = new Audio('/assets/media/crab.mp3');
		audio.loop=true;

		audio.play();
		window.addEventListener('click', () => {
			if (audio.paused) audio.play(); 
		}, {once : true});

		prepare_to_pause(audio)
	</script>
{% endif %}

<style nonce="{{g.nonce}}">
	.toe img {
		width: 100px !important;
		height: auto !important;
	}
	@media (max-width: 992px) {
		.toe img {
			width: 30px !important;
			height: auto !important;
		}
	}

	.toe {animation: sealX 8s alternate; animation-delay: -1s}
	.toe img {animation: sealY 11s alternate-reverse; animation-delay: -1s}

	.toe:nth-child(even) {animation-direction: alternate-reverse}
	.toe:nth-child(n+2):nth-child(n+3) img {animation-direction: alternate}

	.croag img {
		width: 169px !important;
		height: 68px !important;
	}
	@media (max-width: 992px) {
		.croag img {
			width: 100px !important;
			height: 40px !important;
		}
	}

	.croag:nth-child(1) {top:2%}
	.croag:nth-child(2) {top:27%}
	.croag:nth-child(3) {top:52%}
	.croag:nth-child(4) {top:77%}

	.croag {margin-top:10vh; animation-delay:-1s !important}

	.croag {animation: train 14s;}
	.croag:nth-child(odd) {animation-direction: reverse;}
	.croag:nth-child(odd) img {transform: scaleX(-1);}

</style>