/*
-----------------------------------------------------------	General, Engine
*/

html, body {
	margin: 0px;
	padding: 0px;
	background-color: #000;
	color: #222;
	font-family: sans-serif;
}
body {
	display: grid;
	grid-template-columns: 800px;
	width: 800px;
	height: 100vh;
	margin: auto;
	align-items: center;
	justify-items: center;
	font-size: 14px;
}
* {
	box-sizing: border-box;
}
#APP, #BrainPOPsnapArea {
	width: 800px;
	height: 600px;
	position: relative;
	background-color: #222;
	color: white;
	overflow: hidden;
	background: rgb(2,0,36);
	background: linear-gradient(-45deg, rgba(1,0,18,1) 0%, rgba(4,4,60,1) 50%, rgba(52,0,72,1) 100%);
	user-select: none;
}
#APP * {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none;
}
#APP > * {
	overflow: hidden;
	position: absolute;
	width: 800px;
	height: 600px;
}

/*	Styles for some of the utility classes.	*/
.CLICK-BLOCKER {
	background-color: red;
	opacity: 0.0;
	pointer-events: auto;
}
.DARKENING-OVERLAY {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
	background-color: black;
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 1s;
}

/*	Consistent button sizing */
button {
	background-color: transparent;
	font-family: 'Saira Extra Condensed', sans-serif;
    line-height:1;
    font-weight:600;
	letter-spacing: 1px;
	color: white;
	font-size: 24px;
    line-height:1;
	padding: 0px;
	padding-top: 2px;
	transition: all 0.1s ease;
	cursor: pointer;
/*	font-weight: normal;*/
	border: 15px solid transparent;
	border-image: url(ui/button.png);
	border-image-slice: 24 fill;
	border-image-repeat: fill;
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none;
}
button:hover {
	color: yellow !important;
	transform: scale( 1.1 );
}
button:active {
	color: white;
	transform: scale( 0.9 );
}
button[disabled] {
	opacity: 0.25;
	pointer-events: none;
}
button.tab-highlighted {
	border-image: url(ui/button-tab-highlighted.png);
	border-image-slice: 24 fill;
	border-image-repeat: fill;
}
a.tab-highlighted {
	outline: 3px solid yellow;
	outline-offset: 7px;
}

/*	Example container - used for the various tutorial steps
	and the credits / for teachers dialogs. */
.example-container {
	position: absolute;
	left: 100px;
	top: 50px;
	width: 600px;
	height: 450px;
	background-color: black;
	border-radius: 10px;
	border: 2px solid #999;
	overflow: hidden;
	transform-origin: 400px 300px;
}
.example-container-stepper {
	position: absolute;
	border-radius: 0px 0px 10px 10px;
	border: 2px solid #999;
	top: 498px;
	left: 200px;
	width: 400px;
	height: 50px;
	display: grid;
	align-items: center;
	justify-items: center;
	grid-template-columns: 50px 10fr 50px;
	background-color: black;
	grid-column-gap: 10px;
	color: #999;
}
.example-container-stepper .container-stepper-button {
	font-family:'Saira Extra Condensed', sans-serif;
    font-size:20px;
    color:#d0d0d0;
    line-height:1.3;
    border-bottom:1px solid #e0e0e0;
}
.example-container-stepper .container-stepper-button:hover {
    color:gold;
}
 

/*	A generic round button, used in many places in the game.	*/
.round-button {
	background-image: url(ui/round-button.png);
	width: 72px;
	height: 72px;
	cursor: pointer;
	display: grid;
	align-items: center;
	justify-items: center;
	color: white;
	font-size: 28px;
	font-family: 'Saira Extra Condensed', sans-serif;
	padding-top: 4px;
	text-decoration: none;
	transform: all 0.2s ease;
}
.round-button:hover {
	transform: scale( 1.1 );
}
.round-button:active {
	transform: scale( 0.9 );
	filter: brightness( 0.8 );
}
.round-button.tab-highlighted {
	outline: 3px solid yellow;
	outline-offset: 4px;
}
.round-button.tab-highlighted,
.round-button.active-selection {
	transform: scale(1.1);
	background-image: url(ui/round-button-tab-highlighted.png);
}


/*
-----------------------------------------------------------	Options Panel
*/

.option-button {
	position: relative;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: top right;
    width:26px;
    height:26px;
    background-size:cover;
    opacity:.8;
}
.option-button > div {
	position: absolute;
	right: 0px;
	top: -30px;
	color: white;
	width: 100px;
	text-align: center;
	background-color: #132228;
	border: 1px solid white;
	background-color: #230228;
	font-size: 15px;
	padding:5px;
	display: none;
	cursor: pointer;
}
.option-button:hover > div {
	display: block;
}
#music-button {
	background-image: url(ui/icons/music-off.svg);
}
#music-button.enabled {
	background-image: url(ui/icons/music.svg);
}
#quit-button {
	display: none;
	background-image: url(ui/icons/quit.svg);
}
#quit-button.enabled {
	display: inline-block;
}
#help-button {
	display: none;
	background-image: url(ui/icons/help.svg);
}
#help-button.enabled {
	display: inline-block;
}
#option-container {
	position: absolute;
	width: auto;
	height: auto;
	right: -1px;
	bottom: -1px;
	padding: 3px;
	padding-left: 10px;
	border-radius: 6px 0px 0px 0px;
	z-index: 10000;
	overflow: visible;
}



/*
-----------------------------------------------------------	Handy animations
*/

/*	.approach - Fade and zoom in when appearing.	*/
.approach {
	animation: approach-and-settle 0.35s ease-out;
}
@keyframes approach-and-settle {
	0% {
		opacity: 0;
		transform: scale( 0.8 );
	}
	50% {
		opacity: 1;
		transform: scale( 1.025 );
	}
	100% {
		opacity: 1;
		transform: scale( 1.0 );
	}
}

/*	.shake - Shake an element quickly, like it took a hit.	*/
.shake {
  animation: shake 0.5s;
  animation-iteration-count: infinite; 
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/*	.floating - wave from -5 to 5 degrees infinitely */
.floating {
	animation: float 3s;
	animation-iteration-count: infinite; 
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
@keyframes float {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

/*	.hovering - rise and fall slowly */
.hovering {
	animation: hover 3s;
	animation-iteration-count: infinite; 
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
@keyframes hover {
  0% { transform: translateY(-10px); }
  100% { transform: translateY(10px); }
}

/*	.levitating - rise and fall and rotate */
.levitating {
	animation: levitate 3s;
	animation-iteration-count: infinite; 
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
@keyframes levitate {
  0% { transform: translateY(10px) rotate( 10deg ); }
  100% { transform: translateY(-10px) rotate( -10deg ); }
}

/*	A radial glow.  If you want it to be rotating, add the rotating class. */
.radial-glow {
	position: absolute;
	width: 900px;
	height: 900px;
	opacity: 0.25;
	transform: scale( 1.5 );
	transition: opacity 0.25s ease;
	background-image: url(ui/faded-star.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.rotating {
	animation: eternally-rotate 20s infinite linear;
}
@keyframes eternally-rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}

/*
-----------------------------------------------------------	Arena
*/

#GameplayState .versus-bar {
	position: absolute;
	width: 800px;
	height: 100px;
}
#GameplayState .health-bar {
	background-color: #300;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) inset;
}
#GameplayState .health-bar-value {
	transition: all 0.5s ease;
	background-color: green;
	background-image:
	-webkit-linear-gradient(-45deg, 
					   transparent 33%, rgba(0, 0, 0, .3) 33%, 
					   rgba(0,0, 0, .3) 66%, transparent 66%),
	-webkit-linear-gradient(top, 
					   rgba(255, 255, 255, .25), 
					   rgba(0, 0, 0, .25));
	border-radius: 2px; 
	background-size: 35px 20px, 100% 100%, 100% 100%;
	box-shadow: 0 2px 5px rgba(255, 255, 255, 0.25) inset;
}
#GameplayState .level-display {
	position: absolute;
	width: 80px;
	left: 360px;
	top: 15px;
	height: 70px;
	border: 4px solid #603;
	background-color: #301;
	padding: 5px;
	text-align: center;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0) inset,
		0 2px 5px rgba(0, 0, 0, 1.0);
}
#GameplayState .level-display .level-label {
	color: #c08;
	color: #f8a;
	color: #DA85BE;
}
#GameplayState .level-display .level-number {
	font-weight: bold;
	font-size: 200%;
	color: #f6c;
	zcolor: #f8a;
}
#GameplayState .combatant-container {
	position: absolute;
	display: grid;
	width: 350px;
	height: 100px;
	align-items: center;
	transition: all 3s ease;
}
#GameplayState #combatant-0-container {
	grid-template-columns: 100px 1fr;
	left: 0px;
	top: 0px;
}
#GameplayState #combatant-0-container img {
	transform: scale( -1, 1 );
}
#GameplayState #combatant-1-container {
	grid-template-columns: 1fr 100px;
	right: 0px;
	top: 0px;
}
#GameplayState .health-bar {
	width: 250px;
	height: 20px;
	position: relative;
}
#GameplayState .health-bar-value {
	left: 0px;
	top: 0px;
	width: 100%;
	height: 20px;
}
#GameplayState .player-name {
	font-size: 20px;
	font-weight: bold;
	color: #ccc;
}
#GameplayState .enemy-name {
	font-size: 20px;
	font-weight: bold;
	color: #ccc;
	text-align: right;
}
#GameplayState .defeated {
	z-index: 100;
	transform: translate( 0px, 900px ) rotate( -100deg );
	opacity: 0;
}



.cached-images {
	opacity: 50%;
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 10px;
	height: 10px;
}
.path {
	position: absolute;
	width: 60px;
	height: 8px;
	transform-origin: left center;
	left: 30px;
	top: 30px;
	background-color: orange;
	border: 2px solid black;
	pointer-events: none;
}
.arena {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	overflow: hidden;
}
.arena > * {
	position: absolute;
}
.tile {
	background-image: url('potions/tile.png');
	width: 60px;
	height: 60px;
	position: absolute;
	background-position: center center;
	transition: all 0.5s ease-out;
	background-size: 60px 60px;
}
.tile > img {
	position: absolute;
}
.tile.highlighted {
	filter: brightness( 20% );
}
.potion {
	position: absolute;
	z-transition: all 0.75s ease-out;
	pointer-events: none;
	transform-origin: 0px 0px;
}
.potion img {
	transform: translate( -60px, -60px ) scale( 0.5 );
}
.thrown {
	animation: 1s ease 0s 1 tossed;
}
@keyframes tossed {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-150px);
	}
	100% {
		transform: translateY(0px);
	}
}
.tile.tab-highlighted {
	border: 2px solid yellow;
}
.tab-highlighted .arena-extents {
	border: 2px solid yellow;
}
.tab-highlighted .targeted-tile {
	width: 60px;
	height: 60px;
	position: absolute;
	background-color: white;
	opacity: 0.75;
	border-radius: 10px;
	pointer-events: none;
}
/*
-----------------------------------------------------------	LoadingState
*/
#LoadingState #loading-screen {
	display: grid;
	align-items: center;
	justify-items: center;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	transition: all 0.5s ease;
}
#LoadingState #loading-panel {
	padding: 2em;
	border-radius: 10px;
	background-color: #ccc;
	color: #222;
	width: 80%;
	transition: all 0.5s ease;
}
#LoadingState #loading-panel progress {
	width: 100%;
	height: 40px;
}
#LoadingState #loading-result {
	display: none;
}
#LoadingState #loading-panel h1 {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}
/*
#LoadingState progress[value] {
	width: 300px;
	height: 20px;
	-webkit-appearance: none;
	appearance: none;
	transition: all 1s ease;
}
#LoadingState progress[value]::-webkit-progress-bar {
	background-color: #300;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) inset;
}
#LoadingState progress[value]::-webkit-progress-value {
	background-image:
	-webkit-linear-gradient(-45deg, 
					   transparent 33%, rgba(0, 0, 0, .3) 33%, 
					   rgba(0,0, 0, .3) 66%, transparent 66%),
	-webkit-linear-gradient(top, 
					   rgba(255, 255, 255, .25), 
					   rgba(0, 0, 0, .25)),
	-webkit-linear-gradient(left, green, yellow, red);

	border-radius: 2px; 
	background-size: 35px 20px, 100% 100%, 100% 100%;
	box-shadow: 0 2px 5px rgba(255, 255, 255, 0.25) inset;
}
*/

/*
-----------------------------------------------------------	LogoState
*/
#LogoState .logo {
	position: absolute;
	left: 0px;
	width: 800px;
	top: 0px;
	height: 600px;
	display: grid;
	align-items: center;
	justify-items: center;
	transition: all 1s ease;
	color: white;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	font-family: Garamond, Georgia, serif;
}
#LogoState .logo-backdrop {
	position: absolute;
	left: 0px;
	top: 0px;
	background-image: url(ui/rumbler-select-background.png);
	width: 800px;
	height: 600px;
	filter: brightness( 0.5 );
}

/*
-----------------------------------------------------------	MainMenu
*/
#MainMenu #main-screen-title-logo {
	position: absolute;
	left: 20px;
	top: 20px;
	pointer-events: none;
}
#MainMenu .button-grid {
	position: absolute;
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 5px;
	width: 200px;
	left: 120px;
	top: 320px;
}
#MainMenu .mainscreen-rumbler {
	position: absolute;
	pointer-events: none;
}
#MainMenu .mainscreen-backdrop {
	position: absolute;
	left: 0px;
	top: 0px;
	background-image: url(ui/mainscreen-backdrop.png);
	width: 800px;
	height: 600px;
}
#MainMenu .revision-display {
	position: absolute;
	left: 2px;
	bottom: 2px;
	font-size: 12pt;
	color: #9cf;
}

/*
-----------------------------------------------------------	SelectRumblerScene
*/
#SelectRumblerScene .select-rumbler-backdrop {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	background-image: url(ui/rumbler-select-background.png)
}
#SelectRumblerScene .character-select-header {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	position: absolute;
	left: 30px;
	top: 30px;
	width: 320px;
	display: grid;
	background-color: black;
	padding: 10px;
	margin: 0px;
	text-align: center;
	font-family: 'Saira Extra Condensed', serif;
	font-weight: normal;
	font-size: 30px;
}
#SelectRumblerScene .rumbler-grid {
	position: absolute;
	left: 30px;
	top: 80px;
	width: 320px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#SelectRumblerScene .rumbler-grid.tab-highlighted {
	outline: 3px solid yellow;
	outline-offset: 7px;
}
#SelectRumblerScene .rumbler-portrait {
	width: 80px;
	height: 100px;
	background-size: 80px 100px;
	background-position: center center;
	background-color: #000;
	border: 3px solid black;
	filter: brightness( 60% );
	z-index: 1;
}
#SelectRumblerScene .rumbler-portrait.lower-left {
	border-bottom-left-radius: 10px;
}
#SelectRumblerScene .rumbler-portrait.lower-right {
	border-bottom-right-radius: 10px;
}
#SelectRumblerScene .rumbler-portrait:hover {
	border: 3px solid #F0F;
	box-shadow: inset 0 0 20px #f0f;
}
#SelectRumblerScene .rumbler-portrait.selected {
	background-size: 88px 110px;
	filter: brightness( 100% );
	border: 3px solid #FF0;
	box-shadow: inset 0 0 20px #ff0;
}
#SelectRumblerScene .selection-badge {
	position: relative;
	left: 3px;
	top: 75px;
	transform: scale( 0.7 );
}
#SelectRumblerScene .rumbler-portrait .selection-badge {
	display: none;
}
#SelectRumblerScene .rumbler-portrait.selected .selection-badge {
	display: block;
}
#SelectRumblerScene .selected-rumbler-name {
	text-align: center;
	font-family: 'Saira Extra Condensed', serif;
	font-weight: normal;
	font-size: 30px;
}
#SelectRumblerScene .select-a-rumbler-prompt {
	padding-top: 10px;
	text-align: center;
}
#SelectRumblerScene .radial-glow {
	left: 140px;
	top: -200px;
}
#SelectRumblerScene .pedestal {
	position: absolute;
	right: 90px;
	bottom: -10px;
}
#SelectRumblerScene .rumbler-display {
	position: absolute;
	right: 0px;
	bottom: 160px;
	transform-origin: center bottom;
	transform: scale( 0.95, 0.95 );
	pointer-events: none;
}
#SelectRumblerScene #rumbler-bio {
	position: absolute;
	background-color: rgba(0,0,0,0.85);
	padding: 20px;
	padding-top: 10px;
	border-radius: 10px;
	width: 350px;
	bottom: 20px;
	right: 70px;
	align-items: center;
	justify-items: center;
	border: 2px solid black;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
}
#SelectRumblerScene #select-a-rumbler {
	position: absolute;
	background-color: rgba(0,0,0,0.85);
	padding: 20px;
	border-radius: 10px;
	width: 300px;
	top: 150px;
	right: 70px;
	align-items: center;
	justify-items: center;
	border: 2px solid black;
	font-family: sans-serif;
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
}
#SelectRumblerScene .round-button {
	transition: transform 0.25s ease;
	transform: scale(0.9);
}
#SelectRumblerScene .round-button.tab-highlighted,
#SelectRumblerScene .round-button:hover {
	transform: scale(1.1);
}

#SelectRumblerScene .rumbler-portrait.tab-highlighted {
	background-color: yellow;
	border: 2px solid yellow;
}

/*
-----------------------------------------------------------	LevelSelect
*/

#LevelSelect .level-select-backdrop {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	background-image: url(ui/levelSelect/backdrop.png);
}
#LevelSelect .level-select-rumbler {
	position: absolute;
	left: -70px;
	bottom: 100px;
	transform: scale(-1,1);
}
#LevelSelect .level-select-interface {
	background-color: rgba( 0, 0, 0, 0.5 );
	display: grid;
	grid-template-rows: 100px 1fr 160px;
	height: 550px;
	width: 480px;
	right: 25px;
	top: 25px;
	position: absolute;
	border-radius: 20px;
	border: 2px solid black;
}
#LevelSelect .level-select-header {
	padding: 0px;
	margin: 0px;
	text-align: center;
	font-family: 'Saira Extra Condensed', serif;
	font-size: 60px;
	color: #f8d757; /*#FC0;*/
	font-style: italic;
	letter-spacing: 2px;
	display: grid;
	align-items: center;
	justify-items: center;
	background-color: black;
	background-color: rgba(0,0,0,0.8);
	border: 2px solid black;
	border-radius: 20px 20px 0px 0px;
}
#LevelSelect .button-rack {
	display: grid;
	grid-template-columns: repeat(6, 1fr );
	align-items: center;
	justify-items: center;
	padding: 10px;
}
#LevelSelect .level-info {
	border-radius: 0px 0px 20px 20px;
	background-color: black;
	font-family: 'Saira Extra Condensed', serif;
	font-size: 30px;
	color: white;
	position: relative;
	display: grid;
	align-items: stretch;
	justify-items: stretch;
}

#LevelSelect .select-a-level {
	display: grid;
	align-items: center;
	justify-items: center;
}

#LevelSelect .selected-level-info {
	display: grid;
	grid-template-rows: 45px 115px;
	align-items: stretch;
	justify-items: stretch;
}
#LevelSelect .selected-versus {
	display: grid;
	align-items: center;
	justify-items: center;
}

#LevelSelect .selected-detail {
	background-color: #030;
	text-align: center;
	border-radius: 0px 0px 20px 20px;
	overflow: hidden;
	position: relative;
	transform: translateZ(0);	/*	Needed for clipping */
}

.selected-detail .radial-star {
	position: absolute;
	left: -500px;
	bottom: -500px;
	opacity: 15%;
}
.go-button {
	position: absolute;
	right: 35px;
	bottom: 50px;
}
.selected-detail .description {
	position: absolute;
	right: 92px;
	top: 0px;
	height: 115px;
	display: grid;
	align-items: center;
	justify-items: stretch;
	text-align: right;
	max-width: 220px;
	font-size: 20px;
}

.selected-detail .description-potion {
	position: absolute;
	left: 80px;
	bottom: -20px;
}
.selected-detail .description-potion img {
	transform: scale( 0.75, 0.75 ) rotate( 10deg );
}
.selected-detail .description-coin {
	position: absolute;
	left: 100px;
	bottom: 10px;
}
.selected-detail .description-coin img {
	transform: rotate( 10deg );
}

.selected-detail .description b {
	color: #99f;
	white-space: nowrap;
}

#LevelSelect .for-level {
	transition: all 0.25s ease;
	position: relative;
}
#LevelSelect .for-level.undefeated {
	filter: brightness( 80% );
}
#LevelSelect .for-level.recommended {
	filter: brightness( 150% );
	animation: recommendation-animation 1.5s infinite linear;
}
@keyframes recommendation-animation {
	0% {
		filter: brightness( 80% );
	}
	50% {
		filter: brightness( 200% );
	}
	100% {
		filter: brightness( 80% );
	}
}
#LevelSelect .suggested-level {
	position: absolute;
	bottom: -20px;
	transform: scale( 0.5, 0.5 );
}
#LevelSelect .level-trophy {
	position: absolute;
	width: 72px;
	left: 0px;
	top: 5px;
}
#LevelSelect .trophy-text {
	color: black;
	position: absolute;
}
#LevelSelect .button-rack.tab-highlighted {
	outline: 4px solid yellow;
	outline-offset: -4px;
}
#LevelSelect .button-rack.tab-highlighted .for-level.active-selection {
	transform: scale( 1.2 );
	z-index: 100;
	opacity: 1.0;
}
#LevelSelect .nameplate {
	position: absolute;
	bottom: 75px;
	left: 30px;
	width: 225px;
	height: 49px;
	display: grid;
	align-items: center;
	justify-items: center;
	font-size: 30px;
	background-color: black;
	background-color: rgba(0,0,0,0.8);
	border: 2px solid black;
	border-radius: 10px;
	border: 2px solid #333;
	font-family: 'Saira Extra Condensed', sans-serif;
}
#LevelSelect .change-rumbler-button {
	position: absolute;
	bottom: 20px;
	left: 30px;
	width: 225px;
}
#LevelSelect .preview-placard {
	width: 285px;
	height: 197px;
	background-image: url(ui/levelSelect/all-rumblers-select-1.png);
	position: relative;
	padding: 20px;
	padding-right: 30px;
}
#LevelSelect .preview-placard-text {
	text-align: center;
	font-size: 34px;
    line-height:1;
	font-family: 'Saira Extra Condensed', sans-serif;
}
#LevelSelect .preview-placard-container {
	position: absolute;
	width: 480px;
	height: 197px;
	right: 20px;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#LevelSelect .preview-confirm {
	position: relative;
	left: -30px;
}
#LevelSelect .preview-confirm.tab-highlighted {
	position: relative;
	left: -30px;
	outline: 3px solid yellow;
}
#LevelSelect .back-button {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 100px;
	height: 100px;
	transform: scale( 0.75 );
	background-image: url(ui/home.png);
}
#LevelSelect .back-button:hover,
#LevelSelect .back-button.tab-highlighted {
	background-image: url(ui/home-over.png);
}
#LevelSelect .back-button.tab-highlighted {
	outline: 3px solid yellow;
}
#LevelSelect .back-button:active {
	background-image: url(ui/home-down.png);
}

/*
-----------------------------------------------------------	Introduction Styles
*/

.intro-textbox {
	position: absolute;
	background-color: black;
	padding: 20px;
	border-radius: 10px;
	width: 600px;
	height: 120px;
	left: 100px;
	bottom: 30px;
	align-items: center;
	justify-items: center;
	border: 2px solid black;
	font-family: sans-serif;
	font-size: 22px;
	line-height: 1.4;
	display: grid;
	grid-template-columns: 1fr 72px;
}
.lightning {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 80px;
	height: 324px;
	background-image: url(ui/lightning.png);
	animation: lightning-frames .4s infinite;
	animation-timing-function: steps(7, end);
}
@keyframes lightning-frames {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: -560px 0px;
	}
}

/*
-----------------------------------------------------------	Intro1
*/

#Intro1 .intro1-backdrop {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	background-image: url(ui/intro/intro-backdrop.png);
}
#Intro1 .potion-masters {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	background-image: url(ui/intro/potion-masters.png);
}

/*
-----------------------------------------------------------	Intro2
*/

#Intro2 .intro2-backdrop {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	background-image: url(ui/intro/intro-arena.png);
}
#Intro2 .tsuno-shocked {
	animation: tsuno-shocked-frames .1s infinite;
	animation-timing-function: steps(1, end);
}
@keyframes tsuno-shocked-frames {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*
-----------------------------------------------------------	Intro3
*/

#Intro3 .intro3-backdrop {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	background-image: url(ui/intro/intro-arena-defense.png);
}

/*
-----------------------------------------------------------	Intro4
*/

#Intro4 .spotlight {
	pointer-events: none;
	position: absolute;
	top: 0px;
}
#Intro4 .spotlight .plate {
	position: absolute;
	left: -190px;
	top: 400px;
}
#Intro4 .spotlight .light {
	position: absolute;
	left: -73px;
	top: 0px;
}
#Intro4 .spotlight .rumbler {
	position: absolute;
	left: -210px;
	top: 10px;
	transform: scale( 0.75 );
}
#Intro4 .spotlight .toright {
	transform: scale( -0.75, 0.75 );
}
#Intro4 .spotlight > img:not(.light) {
	animation: brighten 1s 1;
	animation-fill-mode: both;
}
#Intro4 .spotlight > .light {
	animation: spotlight-fadein 1s 1;
	animation-fill-mode: both;
}
@keyframes brighten {
	0% { filter: brightness( 0% ); }
	100% { filter: brightness( 100% ); }
}
@keyframes spotlight-fadein {
	0% { opacity: 0; }
	100% { opacity: 1.0; }
}
#Intro4 #bunn-spotlight > img {
	animation-delay: 0s;
}
#Intro4 #finch-spotlight > img {
	animation-delay: 0.5s;
}
#Intro4 #deadeye-spotlight > img {
	animation-delay: 1s;
}
#Intro4 #snail-princess-spotlight > img {
	animation-delay: 1.5s;
}
#Intro4 #daisy-spotlight > img {
	animation-delay: 2s;
}

/*
-----------------------------------------------------------	VersusState
*/

@keyframes versus-rumbler-flyin {
	0% {
		transform: scale( -1, 1 ) translateX( -1000px );
	}
	100% {
		transform: scale( -1, 1 );
	}
}
@keyframes versus-opponent-flyin {
	0% {
		transform: translateX( -1000px );
	}
	100% {
		transform: translateX( 0px );
	}
}
@keyframes chevron-flyin-rumbler {
	0% { transform: scale( 1.25 ) translateX( -1000px ); }
	100% { transform: scale( 1.25 ); }
}
@keyframes chevron-flyin-opponent {
	0% { transform: scale( -1.25, 1.25 ) translateX( -1000px ); }
	100% { transform: scale( -1.25, 1.25 ); }
}
.chevron {
	position: absolute;
	clip-path: polygon(75% 1%, 99% 50%, 75% 99%, 1% 99%, 25% 50%, 1% 1%);
	top: 10px;
	width: 300px;
	height: 300px;
	background-color: #7bdafc;
	background-color: #2aa9d7;
	overflow: hidden;
}
.chevron.for-rumbler {
	left: 10px;
	animation: chevron-flyin-rumbler 1s 1;
	transform: scale( 1.25 );
}
.chevron.for-rumbler img {
	mix-blend-mode: screen;
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0.75;
}
.versus-nameplate {
	position: absolute;
	bottom: 60px;
	width: 225px;
	height: 49px;
	display: grid;
	align-items: center;
	justify-items: center;
	font-size: 30px;
	background-color: black;
	background-color: rgba(0,0,0,0.8);
	border: 2px solid black;
	border-radius: 10px;
	border: 2px solid #333;
	font-family: 'Saira Extra Condensed', sans-serif;
}
.versus-nameplate.on-left {
	left: 65px;
}
.versus-nameplate.on-right {
	right: 65px;
}
#player-pedestal {
	animation: versus-rumbler-flyin 1s 1;
	position: absolute;
	left: 50px;
	bottom: -75px;
}
#player-rumbler {
	animation: versus-rumbler-flyin 1s 1;
	position: absolute;
	left: -50px;
	bottom: 95px;
	transform: scale( -1, 1 );
}
.chevron.for-opponent {
	animation: chevron-flyin-opponent 1s 1;
	right: 10px;
	transform: scale( -1.25, 1.25 );
}
.chevron.for-opponent img {
	mix-blend-mode: screen;
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0.75;
}
#opponent-pedestal {
	animation: versus-opponent-flyin 1s 1;
	position: absolute;
	right: 50px;
	bottom: -75px;
}
#opponent-rumbler {
	animation: versus-opponent-flyin 1s 1;
	position: absolute;
	right: -50px;
	bottom: 95px;
	transform: scale( 1, 1 );
}
#VersusState .round-button {
	position: absolute;
	left: 364px;
	top: 450px;
}



/*
-----------------------------------------------------------	Confirmation
*/

#confirmation-dialog {
	position: absolute;
	left: 150px;
	top: 160px;
	width: 500px;
	height: 280px;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 30px;
	padding-bottom: 30px;
	display: grid;
	align-items: stretch;
	justify-items: stretch;
	grid-template-columns: 1fr;
	grid-template-rows: 2fr 6fr 1fr;
	background-image: url(ui/confirmation-dialog.png);
	text-align: center;
}
#confirmation-dialog > h1 {
	font-family: 'Saira Extra Condensed', sans-serif;
	letter-spacing: 1px;
	font-size: 35px;
	padding: 0px;
	margin: 0px;
}
#confirmation-dialog > p {
	font-family: sans-serif;
	letter-spacing: 1px;
	font-size: 18px;
}
#confirmation-dialog .button-bar {
	display: grid;
	grid-template-columns: 2fr 2fr;
	grid-column-gap: 10px;
	align-items: center;
	justify-items: stretch;
}
.button-bar .cancel-button {
	border-image: url(ui/cancel-button.png) 16 fill;
}
.button-bar .confirm-button {
	border-image: url(ui/confirm-button.png) 16 fill;
}

/*
-----------------------------------------------------------	Notification
This is a subclass of Confirmation that removes the dual buttons.
*/

#Notification #confirmation-dialog .confirm-button { min-width:200px }
#Notification #confirmation-dialog .button-bar {
	grid-template-columns: 1fr;
	justify-items: center;
}

/*
-----------------------------------------------------------	FollowTheRecipeTutorial
*/

#FollowTheRecipeTutorial .tile.intended {
	animation: throb-glow 0.5s;
	animation-iteration-count: infinite; 
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
@keyframes throb-glow {
	0% { filter: brightness( 200% ); }
	100% { filter: brightness( 50% ); }
}
#tutorial-text-1 {
	position: absolute;
	left: 240px;
	top: 10px;
	width: 320px;
	height: 80px;
	font-size: 22px;
	text-align: center;
	display:flex;
	align-items: center;
	justify-content: center;
}
#tutorial-text-2 {
	position: absolute;
	left: 230px;
	bottom: 10px;
	width: 340px;
	height: 80px;
	font-size: 20px;
	display: flex;
    text-align:center;
	align-items: center;
	justify-content: space-around;
	opacity: 0;
	transition: opacity 0.5s ease;
}
#FollowTheRecipeTutorial .confirm-container {
	position: absolute;
	left: 35px;
	bottom: 25px;
	display: block;
}
#FollowTheRecipeTutorial .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}
#FollowTheRecipeTutorial .sidebar {
	top: 20px;
}
#FollowTheRecipeTutorial .change-recipe-button {
	display: none;
}

span.arrow-down, span.arrow-left {
    display:inline-block;
    width:40px;
    height:40px;
    background:url(ui/arrow.svg);
    background-repeat:no-repeat;
    background-size:cover;
}
span.arrow-down { 
    transform:rotate(270deg); 
}
/*
-----------------------------------------------------------	HowToAttackTutorial
*/

#HowToAttackTutorial .example-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	align-items: center;
	justify-items: center;
}
#HowToAttackTutorial .tutorial-text-1 {
	font-size: 24px;
	text-align: center;
}
#HowToAttackTutorial .image-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
#HowToAttackTutorial .tutorial-text-2 {
	font-size: 24px;
	text-align: center;
}
#HowToAttackTutorial .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}

/*
-----------------------------------------------------------	HowToHealTutorial
*/

#HowToHealTutorial .example-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	align-items: center;
	justify-items: center;
}
#HowToHealTutorial .tutorial-text-1 {
	font-size: 24px;
	text-align: center;
}
#HowToHealTutorial .image-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
#HowToHealTutorial .tutorial-text-2 {
	font-size: 24px;
	text-align: center;
}
#HowToHealTutorial .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}

/*
-----------------------------------------------------------	HalfPotionsTutorial
*/

#HalfPotionsTutorial .example-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	align-items: center;
	justify-items: center;
}
#HalfPotionsTutorial .tutorial-text-1 {
	font-size: 24px;
	text-align: center;
}
#HalfPotionsTutorial .image-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
#HalfPotionsTutorial .tutorial-text-2 {
	font-size: 24px;
	text-align: center;
}
#HalfPotionsTutorial .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}

/*
-----------------------------------------------------------	WatchOutForBombsTutorial
*/

#WatchOutForBombsTutorial .example-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	align-items: center;
	justify-items: center;
}
#WatchOutForBombsTutorial .example-container img {
	width: 100px;
}
#WatchOutForBombsTutorial .tutorial-text-1 {
	font-size: 24px;
	text-align: center;
}
#WatchOutForBombsTutorial .image-grid {
	display: grid;
	grid-template-columns: 3fr 1fr 3fr 1fr 3fr 1fr 3fr;
	align-items: center;
	justify-items: center;
}
#WatchOutForBombsTutorial .tutorial-text-2 {
	font-size: 24px;
	text-align: center;
}
#WatchOutForBombsTutorial .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}

/*
-----------------------------------------------------------	RatioExplanationTutorial
*/

#RatioExplanationTutorial .tutorial-text-1 {
	position: absolute;
	color: white;
	left: 100px;
	top: 20px;
	width: 350px;
	display: grid;
	align-items: center;
	justify-items: center;
	font-size: 20px;
}
#RatioExplanationTutorial .top-ratio-arrow {
	position: absolute;
	left: 50px;
	top: 50px;
}
#RatioExplanationTutorial .recipe-box {
	background-image: url(ui/recipe-backdrop.png);
	position: absolute;
	left: 90px;
	top: 100px;
	width: 173px;
	height: 124px;
}
#RatioExplanationTutorial .recipe-text {
	left: 0px;
	top: 15px;
}
#RatioExplanationTutorial .totals {
	left: -5px;
	top: 40px;
}
#tutorial-recipe-ratio-display {
	top: 95px;
	left: 35px;
}
#RatioExplanationTutorial .tutorial-text-2 {
	position: absolute;
	color: white;
	left: 20px;
	top: 250px;
	width: 200px;
	height: 135px;
	display: grid;
	align-items: end;
	justify-items: center;
	font-size: 20px;
	color: #FFCD4D;
	text-align: right;
}
#RatioExplanationTutorial .bottom-ratio-arrow {
	position: absolute;
	left: 160px;
	bottom: 10px;
	transform: rotate( -90deg );
}
#RatioExplanationTutorial .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}

/*
-----------------------------------------------------------	CoinExplanationTutorial
*/

#CoinExplanationTutorial .tutorial-text-1 {
	position: absolute;
	color: white;
	left: 50px;
	top: 50px;
	width: 500px;
	height: 70px;
	display: grid;
	align-items: center;
	justify-items: center;
	font-size: 22px;
	color: white;
}
#CoinExplanationTutorial .actions-grid {
	position: absolute;
	color: white;
	left: 50px;
	top: 120px;
	width: 500px;
	height: 280px;
	display: grid;
	grid-template-columns: 140px 1fr;
	grid-template-rows: repeat( 4, 1fr );
	grid-column-gap: 20px;
	align-items: center;
	justify-items: stretch;
	font-size: 18px;
	color: white;
}
#CoinExplanationTutorial .action-button {
	pointer-events: none;
    
}
#CoinExplanationTutorial .action-button>div {
    margin:auto 2px;
}
#CoinExplanationTutorial .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}

/*
-----------------------------------------------------------	DoubleRecipeTutorial
*/

#DoubleRecipeTutorial .tutorial-text-1 {
	position: absolute;
	left: 240px;
	top: 10px;
	width: 320px;
	height: 80px;
	font-size: 24px;
	text-align: center;
	display: grid;
	align-items: center;
	justify-items: center;
}
#DoubleRecipeTutorial .tutorial-text-2 {
	position: absolute;
	left: 240px;
	bottom: 10px;
	width: 320px;
	height: 80px;
	font-size: 24px;
	text-align: center;
	display: grid;
	align-items: center;
	justify-items: center;
	opacity: 0;
	transition: opacity 0.5s ease;
}
#DoubleRecipeTutorial .coin-readout {
	position: absolute;
	width: 132px;
	bottom: 30px;
	left: 40px;
}
#DoubleRecipeTutorial .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}

/*
-----------------------------------------------------------	ChampionDisplay
*/

#ChampionDisplay .selected-rumbler-name {
	text-align: center;
	font-family: 'Saira Extra Condensed', serif;
	font-weight: normal;
	font-size: 30px;
}
#ChampionDisplay .select-a-rumbler-prompt {
	padding-top: 10px;
	text-align: center;
}
#ChampionDisplay .radial-glow {
	left: -50px;
	top: -200px;
}
.champion-display-backdrop {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	background-image: url(ui/rumbler-select-background.png)
}
.champion-display-pedestal {
	position: absolute;
	left: 272px;
	bottom: -2px;
}
#ChampionDisplay .rumbler-display {
	position: absolute;
	left: 200px;
	bottom: 168px;
	transform-origin: center bottom;
	transform: scale( 0.95, 0.95 );
	pointer-events: none;
}
.rumbler-epilogue {
	position: absolute;
	background-color: rgba(0,0,0,0.85);
	padding: 20px;
	padding-top: 10px;
	border-radius: 10px;
	width: 600px;
	bottom: 20px;
	left: 100px;
	align-items: center;
	justify-items: center;
	border: 2px solid black;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
}
#ChampionDisplay .round-button {
	position: absolute;
	right: 15px;
	bottom: 15px;
}
							

/*
-----------------------------------------------------------	UnlockedCharacter
*/
.unlock-container {
	position: absolute;
	transform-origin: 400px 300px;
}
.unlock-content {
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items: stretch;
	position: absolute;
	right: 30px;
	top: 00px;
	height: 400px;
	width: 500px;
	padding: 20px;
}
.unlock-title {
	font-family: 'Saira Extra Condensed', serif;
	font-weight: normal;
	font-size: 40px;
    line-height:1;
	color: white;
	text-align: center;
    margin-top:0;
    margin-bottom:0;
}
.unlock-content p {
	font-size: 18px;
    width:40%;
    margin-right:0;
    margin-left:auto;
    margin-top:auto;
    margin-bottom:auto;
}
.unlock-content p em {
	font-weight: bold;
	color: gold;
    word-break: keep-all;
    white-space: nowrap;
    font-size:20px
}
.unlock-rumbler {
	transform: scale(-1,1);
    position:absolute;
    bottom:0;
    left:-10%;
}
#UnlockedCharacter .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}

/*
-----------------------------------------------------------	CreditsDisplay
*/

.credits-content {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 450px;
	padding: 40px 20px;
	overflow: hidden scroll;
	font-size: 20px;
	margin: 0em 2em;
	scrollbar-color: #369 #222;
	text-align: center;
}
.credits-content::-webkit-scrollbar {
  width: 12px;
}
.credits-content::-webkit-scrollbar-track {
  background: #222;
}
.credits-content::-webkit-scrollbar-thumb {
  background-color: #369;
  border-radius: 4px;
  z-border: 3px solid orange;
  width: 4px;
}
.credits-title {
	font-family: 'Saira Extra Condensed', serif;
	font-weight: normal;
	font-size: 48px;
	color: white;
	text-align: center;
}
#CreditsDisplay dt {
	padding: 0px;
	margin: 0px;
	margin-top: 1em;
	margin-bottom: 0.25em;
	font-family: 'Saira Extra Condensed', serif;
	font-size: 32px;
	color: gold;
	text-align: center;
}
#CreditsDisplay dd {
	padding: 0px;
	margin: 0px;
	margin-bottom: 1em;
	line-height: 1.4;
	text-align: center;
}
#CreditsDisplay .legalese {
	font-size: 14px;
	line-height: 1.2;
	color: #ccc;
	margin-top: 3em;
	text-align: left;
}
#CreditsDisplay .zoom-container {
	position: absolute;
	transform-origin: 400px 300px;
}
#CreditsDisplay .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}

/*
-----------------------------------------------------------	ForTeachersDisplay
*/

#ForTeachersDisplay .example-container {
	padding: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	align-items: center;
	justify-items: center;
	height: 450px;
	font-size: 18px;
}
#ForTeachersDisplay .teachers-title {
	font-family: 'Saira Extra Condensed', serif;
	font-weight: normal;
	font-size: 48px;
	color: white;
	text-align: center;
}
#ForTeachersDisplay .teachers-text {
	text-align: center;
	font-size: 18px;
}
#ForTeachersDisplay .teachers-text p {
	text-align: left;
}
#ForTeachersDisplay .teachers-text :nth-child( 2n ) {
	text-align: center;
}
#ForTeachersDisplay .teachers-text a {
	color: #7ed3e0;
	cursor: pointer;
	font-weight: bold;
}
#ForTeachersDisplay .zoom-container {
	position: absolute;
	transform-origin: 400px 300px;
}
#ForTeachersDisplay .round-button {
	position: absolute;
	left: 664px;
	top: 264px;
}

/*
-----------------------------------------------------------	GameplayState
*/

#arena-container,
#versus-container {
	position: absolute;
	left: 0px;
	top: 0px;
}

/*	Abilities Bar */

#abilities-bar {
	position: absolute;
	width: 670px;
	bottom: 25px;
	left: 50px;
	display: flex;
    align-items: center;
/*	justify-content:space-between;*/
	transition: bottom 0.5s ease;
}
.action-button {
    position:relative;
	background-repeat: no-repeat;
	background-position: center;
	padding-left: 20px;
    height:40px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
    display: flex;
	align-items: center;
	justify-items: center;
    align-content: center;
	font-size: 18px;
    line-height:.5;
	font-family: 'Saira Extra Condensed', sans-serif;
	border: 12px solid transparent;
    border-image: url(ui/button.png);
	border-image-slice: 24 fill;
	border-image-repeat: fill;
    border-radius:10px;
    margin-left:25px;
}
.action-button:before {
    display:block;
    position:absolute;
    content:'';
    left:-23px; 
    width:40px;
    height:40px;
    background-color:#333;
    border-radius:20px;
    background-repeat: no-repeat;
    background-size: cover;
}
.action-button.tab-highlighted {
	outline: 2px solid yellow;
}
#GameplayState .action-button:hover {
	transform: scale( 1.1 );
}
#GameplayState .action-button:active {
	transform: scale( 1.0 );
	filter: brightness( 50% );
}
#GameplayState .action-button[disabled] {
	opacity: 0.5;
	pointer-events: none;
}
#GameplayState .action-button > * {
	pointer-events: none;
    margin:auto 3px;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none;
}
.coin-readout {
/*	background-image: url( 'ui/action-coin-readout.png');*/
    position:relative;
	display: flex;
	align-items: center;
	justify-items: center;
	font-size: 22px;
    line-height: 12px;
    height:46px;
    min-width:80px;
    padding-left:15px;
	pointer-events: none;
	user-select: none;
    font-family:'Saira Extra Condensed' , sans-serif;
    border: 12px solid transparent;
    border-image: url(ui/button.png);
	border-image-slice: 24 fill;
	border-image-repeat: fill;
    border-radius:10px;
}
.coin-readout:before {
    position:absolute;
    content:'';
    display:block;
    left:-40px;
    width:50px;
    height:50px;
    background:url(ui/icons/coin-circle.png);
    background-size:cover;
    background-repeat: no-repeat;
}
.shuffle-button {
/*	background-image: url( 'ui/action-shuffle.png');*/
}
.shuffle-button:before {
	background-image:url( 'ui/icons/shuffle-circle.png');
}
.shuffle-button :nth-child(2) {
	color: #42e7bc;
}
.add-damage-button {
/*	background-image: url( 'ui/action-add-damage.png');*/
}

.add-damage-button:before {
background-image: url( 'ui/icons/bolt-circle.png' );
}
.add-damage-button :nth-child(2) {
	color: #63abe1;
}
.add-health-button {
/*	background-image: url( 'ui/action-add-health.png');*/
}
.add-health-button:before {
background-image: url( 'ui/icons/health-circle.png');
}
.add-health-button :nth-child(2) {
	color: #ef99a2;
}
.defuse-button {
/*	background-image: url( 'ui/action-defuse.png');*/
}
.defuse-button:before {
background-image: url( 'ui/icons/bomb-circle.png');
}
.defuse-button :nth-child(2) {
	color: #a4ee8f;
}

/*UI Buttons - Remove this are inline*/
/*
#help-button {
    background-image:url(ui/icons/help.svg) !important;
}
#music-button {
        background-image:url(ui/icons/music.svg) !important;
}
#quit-button {
    background-image:url(ui/icons/quit.svg) !important;
}
*/



/*	Sidebar 	*/
.sidebar {
	position: absolute;
	left: 0px;
	top: 120px;
	background-image: url(ui/easel.png);
	width: 215px;
	height: 378px;
}
.recipe-display {
	top: 65px;
}
.totals-display {
	top: 235px;
}
.path-ratio-display {
	position: absolute;
	left: 57px;
	top: 303px;
	border: 2px solid black;
}
.recipe-ratio-display {
	position: absolute;
	left: 57px;
	top: 120px;
	border: 2px solid black;
}
.totals {
	position: absolute;
	left: 16px;
	height: 50px;
	width: 190px;
	font-size: 20px;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
.totals > * {
	display: grid;
	align-items: center;
	justify-items: center;
	color: white;
	height: 50px;
	/*
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: black;
	paint-order: stroke fill;
	*/
	/*
	text-shadow:
		-3px 0px black,
		-2px 1px black,
		-1px -2px black,
		0px -3px black,
		1px -2px black,
		2px -1px black,
		3px 0px black,
		2px 1px black,
		1px 2px black,
		0px 3px black,
		-1px 2px black,
		-2px 1px black;
	*/
}
/*
.totals > * > span {
	grid-area: 1 / 1 / 2 / 2;
}
.totals > * > span:nth-child( 2 ) {
	-webkit-text-stroke-color: transparent;
}
*/
.totals .red {
	width: 50px;
	background-image: url(ui/red-backdrop.png);
}
.totals .green {
	width: 50px;
	background-image: url(ui/green-backdrop.png);
}
.totals .blue {
	width: 50px;
	background-image: url(ui/blue-backdrop.png);
}
@keyframes glow-throb {
	0% { opacity: 0.25; }
	50% { opacity: 1; }
	100% { opacity: 0.25; }
}
.recipe-text {
	position: absolute;
	top: 43px;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	width: 180px;
	left: 22px;
	color: black;
	pointer-events: none;
}
.recipe-colon {
	font-weight: bold;
	padding-left: 3px;
	padding-right: 3px;
}
.recipe-display .recipe-colon {
	color: black;
}
.totals-display .recipe-colon {
	color: white;
}

/*
	Outlined text should be added using the following structure:
	<div class="outlined-text">
		<span>The Text</span>
		<span>The Text</span>
	</div>
*/
.outlined-text {
	display: grid;
	align-items: center;
	justify-items: center;
	-webkit-text-stroke-width: 4px;
	-webkit-text-stroke-color: black;
	paint-order: stroke fill;
	color: white;
}

.outlined-text > * {
	grid-area: 1 / 1 / 2 / 2;
}

.outlined-text > *:nth-child(2) {
	-webkit-text-stroke-color: transparent;
}


/*	Change recipe button 	*/
.change-recipe-button {
	position: absolute;
	left: 170px;
	top: 120px;
	cursor: pointer;
	width: 37px;
	height: 47px;
	display: grid;
	align-items: center;
	justify-items: center;
	color: white;
	text-decoration: none;
	font-size: 20px;
	transition: transform 0.15s ease;
	transform: scale( 0.8 );
}
.change-recipe-button:hover,
.change-recipe-button.tab-highlighted {
	transform: scale( 1.0 ) rotate( 10deg );
}
.change-recipe-button.tab-highlighted {
	outline: 2px solid yellow;
}
.change-recipe-button:active {
	filter: brightness( 50% );
	transform: scale( 0.8 ) rotate( 10deg );
}

/*	Bubbling cauldron	*/
.cauldron {
	position: relative;
	left: 5px;
	top: 184px;
}
.cauldron-image {
	position: absolute;
	left: 0px;
	top: 0px;
}
.cauldron-glow {
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
}
.cauldron.glowing .cauldron-glow {
	display: block;
}
.cauldron-glow {
	animation: glow-throb 2s infinite;
}
.cauldron-particles {
	position: absolute;
	top: 20px;
	left: 60px;
	display: none;
}
.cauldron.glowing .cauldron-particles {
	display: block;
}
.cauldron-particles img {
	position: absolute;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
.cauldron-particles :nth-child(1) {
	animation: bubble-up 1s infinite 0s;
	left: 0px;
}
.cauldron-particles :nth-child(2) {
	animation: bubble-up 1s infinite 0.25s;
	left: 30px;
}
.cauldron-particles :nth-child(3) {
	animation: bubble-up 1s infinite 0.75s;
	left: 60px;
}
.cauldron-particles :nth-child(4) {
	animation: bubble-up 1s infinite 0.5s;
	left: 90px;
}
@keyframes bubble-up {
	0% {
		top: 0px;
		opacity: 0.0;
	}
	1% {
		top: 0px;
		opacity: 1;
	}
	90% {
		top -35px;
		opacity: 0;
	}
	95% {
		top: -35px;
		opacity: 0;
	}
	100% {
		top: 0px;
		opacity: 0;
	}
}
.your-potion-text {
	position: absolute;
	top: 30px;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	width: 180px;
	left: 16px;
	/*
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: black;
	paint-order: stroke fill;
	text-shadow:
		-3px 0px black,
		-2px 1px black,
		-1px -2px black,
		0px -3px black,
		1px -2px black,
		2px -1px black,
		3px 0px black,
		2px 1px black,
		1px 2px black,
		0px 3px black,
		-1px 2px black,
		-2px 1px black;
	*/

}

/*	The confirm "brew" button */
.confirm-container {
	position: absolute;
	left: 35px;
	bottom: 85px;
}
.confirm-container button {
	width: 150px;
}

/*	Battler quotes 	*/
.left-battler-quote,
.right-battler-quote {
	position: absolute;
	left: 80px;
	top: 40px;
	padding: 10px;
	border-radius: 10px;
	background-image: url(ui/small-quote-balloon.png);
	width: 312px;
	height: 76px;
	padding: 20px;
	padding-left: 50px;
	display: grid;
	align-items: center;
	justify-items: stretch;
	color: black;
	font-size: 15px;
	animation-name: bubble-in;
	animation-duration: 0.25s;
	animation-timing-function: ease-in-out;
	transform-origin: 0px 30px;
	z-index: 10;
}
.right-battler-quote {
	background-image: url(ui/small-quote-balloon-right.png);
	padding: 20px;
	padding-left: 20px;
	padding-right: 50px;
	left: inherit;
	right: 80px;
}
@keyframes bubble-in {
	0% {
		transform: scale( 0 );
	}
	85% {
		transform: scale( 1.1 );
	}
	100% {
		transform: scale( 1 );
	}
}

/*	Coin display */
.coin {
	position: absolute;
	transition: all 1s ease-in;
	width: 51px;
	height: 52px;
}
.coin-display {
	position: absolute;
	width: 52px;
	height: 51px;
	left: 0px;
	top: 0px;
	background-image: url(ui/coin-strip.png);
	animation: coin-frames 1s 1;
	animation-timing-function: steps(1, end);
	transform: scale( 0.75 );
	transition: all 1s ease;
}
@keyframes coin-frames {
	0% { background-position: 0px 0px; }
	10% { background-position: 0px -52px; }
	20% { background-position: 0px -104px; }
	30% { background-position: 0px -156px; }
	40% { background-position: 0px -208px; }
	50% { background-position: 0px 0px; }
	60% { background-position: 0px -52px; }
	70% { background-position: 0px -104px; }
	80% { background-position: 0px -156px; }
	90% { background-position: 0px -208px; }
	100% { background-position: 0px 0px; }
}
.spent-coin {
	position: absolute;
	left: 120px;
	top: 525px;
	z-index: 1000;
	transform: scale( 0.75 );
	transition: all 1s ease;
}

/*	Bomb Advancement States */
.darkened {
	filter: brightness( 25% );
}
.potion img {
	transition: all 0.5s ease;
}
.potion.zoomed {
	z-index: 100;
}
.potion.zoomed img {
	transform: translate( -60px, -60px ) rotate( 10deg );
}

/*
-----------------------------------------------------------	LossSummary
*/

.lose-screen {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	background-image: url( ui/you-lose-backdrop.png );
}
.lose-screen .rumbler {
	position: absolute;
	right: -10px;
	top: 70px;
}
.lose-screen .summary {
	position: absolute;
	left: 50px;
	top: 50px;
	z-width: 350px;
}
.lose-screen h1 {
	font-family: 'Luckiest Guy', serif;
	font-size: 70px;
	color: #FC0;
	font-style: italic;
	text-shadow:
		-3px 3px 0 #000,
		3px 3px 0 #000,
		3px -3px 0 #000,
		-3px -3px 0 #000,
		-4px 0px 0 #000,
		 4px 0px 0 #000,
		 0px -4px 0 #000,
		 0px  4px 0 #000;
	letter-spacing: 2px;
}
.lose-screen .quote {
	position: absolute;
	left: 50px;
	top: 185px;
	background-image: url('ui/you-lose-quote.png');
	width: 370px;
	height: 186px;
	color: black;
	padding: 20px 45px 20px 20px;
	font-size: 24px;
	overflow: hidden;
	display: grid;
	align-items: center;
	justify-items: center;
}
.lose-screen .hint {
	position: absolute;
	left: 50px;
	top: 410px;
	width: 340px;
	color: #ccc;
	padding: 20px;
	font-size: 19px;
	overflow: hidden;
	border-radius: 10px;
	background-color: rgba(0,0,0,0.8);
	line-height: 1.4;
}
.lose-screen .hint strong {
	color: #ffcf00;
}
.lose-screen .round-button {
	position: absolute;
	right: 50px;
	bottom: 60px;
}

/*
-----------------------------------------------------------	WinSummary
*/

.win-screen {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 800px;
	height: 600px;
	background-image: url( ui/you-win-backdrop.png );
}
.win-screen .rumbler {
	position: absolute;
	left: -10px;
	top: 70px;
	transform: scale( -1, 1 );
}
.win-screen .summary {
	position: absolute;
	right: 50px;
	top: 50px;
	z-width: 350px;
}
.win-screen h1 {
	font-family: 'Luckiest Guy', serif;
	font-size: 70px;
	color: #FC0;
	font-style: italic;
	text-shadow:
		-3px 3px 0 #000,
		3px 3px 0 #000,
		3px -3px 0 #000,
		-3px -3px 0 #000,
		-4px 0px 0 #000,
		 4px 0px 0 #000,
		 0px -4px 0 #000,
		 0px  4px 0 #000;
	letter-spacing: 2px;
}
.win-screen .quote {
	position: absolute;
	right: 50px;
	top: 210px;
	background-image: url('ui/you-win-quote.png');
	width: 370px;
	height: 186px;
	color: black;
	padding: 20px 20px 20px 50px;
	font-size: 24px;
	overflow: hidden;
	display: grid;
	align-items: center;
	justify-items: center;
}					
.win-screen .round-button {
	position: absolute;
	right: 55px;
	bottom: 60px;
}
.win-screen .trophy {
	position: absolute;
	left: 350px;
	top: 30px;
	width: 150px;
	transform: rotate( 10deg );
}