.comic-panels-game {
	& .game-area {
		position: relative;
		background-color: #8c49c8;
	}
	& .comic-panel {
		position: absolute;
		left: calc( 50% - 400px * 0.5 );
		top: 60px;
		width: 400px;
		height: 400px;
		transition: transform 0.5s ease, opacity 0.5s ease;
		transform:
			translate(600px,0px) rotate(10deg) scale(120%);
		opacity: 1;
		&[location="ondeck"] {
			transform: translate( 0px, 0px );
			opacity: 1;
		}
		&[location="done"] {
			transform: translate( -600px, 0px );
			opacity: 0;
		}
		& img {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			&:nth-child(2) {
				animation:
				comic-panel-animator 2s step-end infinite;
			}
		}
	}
	& .comic-prompt {
		position: absolute;
		left: 50px;
		right: 50px;
		top: 460px;
		background-color: white;
		border-radius: 10px;
		padding: 20px;
		color: black;
		shape-inside: circle( 50% );
	}
	& .bubble {
		position: absolute;
		bottom: 40px;
		width: 280px;
		height: 206px;
		background-size: cover;
		&.bubble-left {
			left: 20px;
			background-image:
		url("../images/minigames/COMIC-PANELS-BUBBLE-LEFT.png");
		}
		&.bubble-right {
			right: 20px;
			background-image:
		url("../images/minigames/COMIC-PANELS-BUBBLE-RIGHT.png");
		}
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px;
		z-index: 1;
		transition: all 0.2s ease;
		&:not(.tab-highlighted) {
			transform: scale( 80% );
			bottom: 10;
			zfilter: brightness( 90% );
			z-index: 0;
		}
		&.tab-highlighted {
			outline: none;
		}
		font-weight: bold;
		font-size: 20px;
	}
}
@keyframes comic-panel-animator {
	0% { opacity: 1; }
	50% { opacity: 0; }
}