/*
	Elements:
		<div class="well" id="well-1" position="1"></div>
		<div class="well" id="well-2" position="2"></div>
		<div class="well" id="well-3" position="3"></div>
		<div class="well" id="well-4" position="4"></div>
		<div class="well" id="well-5" position="5"></div>
		<div class="card" id="card-1"></div>
		<div class="card" id="card-2"></div>
		<div class="card" id="card-3"></div>
		<div class="card" id="card-4"></div>
		<div class="card" id="card-5"></div>
	
	Wells are placed as locations for cards to be played in order.
	Cards can be given positions of:
		offscreen, hand-[N], or well-[N]
	
*/


.roaster-game {
	background-color: #8ac3d3;
	overflow: hidden;
	isolation: isolate;
	position: relative;
	&.tab-highlighted {
		outline: none;
	}
}
.roaster {
	position: absolute;
	top: 40px;
	width: 560px;
	height: 546px;
	background-size: cover;
	background-image: url( '../images/minigames/ROASTER-0.png' );
	transform: scale( 0.84 );
	&[frame="1"] {
		background-image: url( '../images/minigames/ROASTER-1.png' );
	}
	&[frame="2"] {
		background-image: url( '../images/minigames/ROASTER-2.png' );
	}
}
.roaster-table {
	width: 560px;
	height: 800px;
	position: absolute;
	left: 0px;
	top: 0px;
	background-image: url( '../images/minigames/ROASTER-FOREGROUND.png' );
}
.roaster-chile {
	position: absolute;
	width: 400px;
	height: 400px;
	left: calc( (560px - 400px) * 0.5 );
	bottom: -400px;
	background-image: url( '../images/minigames/ROASTER-CHILE-RAW.png' );
	transition: all 0.5s ease;
	
	&[location="ready"] {
		bottom: 100px;
	}
	&[location="hopper"] {
		bottom: 400px;
		transform: scale( 0.5 );
		opacity: 0;
	}
	&[location="poised"] {
		bottom: 300px;
		left: -20px;
	}
	&[location="bag"] {
		bottom: -140px;
		left: -20px;
	}
	&[display="charred"] {
		background-image: url(
			'../images/minigames/ROASTER-CHILE-SEARED.png');
	}
	&[display="split"] {
		background-image: url(
			'../images/minigames/ROASTER-CHILE-SPLIT.png');
	}
}
.roaster-knife {
	position: absolute;
	width: 100px;
	height: 500px;
	background-image: url(
		'../images/minigames/ROASTER-KNIFE.png');
	transform-origin: 50% 75%;
	transform: rotate( 0deg );
	right: -120px;
	bottom: 200px;
	transition: all 0.5s ease;

	&[location="ready"] {
		transform: rotate( -10deg );
		right: -20px;
		bottom: 150px;
	}
	&[location="cut"] {
		transform: rotate( -90deg );
		right: 100px;
		bottom: 10px;
	}
	&[location="down"] {
		transform: rotate( -90deg );
		right: 100px;
		bottom: -300px;
	}
}
.roaster-bag {
	position: absolute;
	width: 512px;
	height: 512px;
	bottom: -512px;
	left: calc( (560px - 512px) * 0.5 );
	transition: all 0.5s ease;
	&.top {
		background-image: url(
		'../images/minigames/ROASTER-BAG.png');
	}
	&.bottom {
		background-image: url(
		'../images/minigames/ROASTER-BAG-CONTENTS.png');
	}
	&[location="ready"] {
		bottom: -200px;
	}
}
.roaster-bag[done="1"],
.roaster-chile[done="1"] {
	transform: translate( 0px, -200px );
}
.roaster-cage {
	width: 435px;
	height: 214px;
	background-color: clear;
	background-image: url(
	'../images/minigames/ROASTER-CAGE.png');
	position: absolute;
	left: 65px;
	top: 85px;
	background-size: 435px 107px;
	&.cage-back {
		transform: rotate( 180deg );
		filter: blur( 4px );
		opacity: 0.6;
	}
}
.small-chile {
	position: absolute;
	top: 120px;
	width: 200px;
	height: 50px;
	background-image: url(
	'../images/minigames/ROASTER-CHILE-SMALL.png');
	transition: rotation 1s ease;
	&.flipped {
		transform: scale( -1, 1 );
	}
	&#small-chile-1 {
		left: 60px;
	}
	&#small-chile-2 {
		left: 140px;
	}
	&#small-chile-3 {
		left: 220px;
	}
	&#small-chile-4 {
		left: 300px;
	}
	&#small-chile-5 {
		left: 60px;
	}
	&#small-chile-6 {
		left: 140px;
	}
	&#small-chile-7 {
		left: 220px;
	}
	&#small-chile-8 {
		left: 300px;
	}
}