html
{
	font-family: bahnschrift, sans-serif;
	font-stretch: semi-condensed;
	font-size: 2.5vh;
}

body
{
	background: #e22;
	color: #999;
	overflow: hidden;
}

*
{
	image-rendering: pixelated;
	cursor: default;
}

b
{
	color: #fff;
}

/* #bar1, #bar2 */
#f1,
#f2
{
	position: fixed;
	left: 0;
	right: 0;
	height: 0;
	background: #000;
	transition: height 0.5s;
}

#f1
{
	top: 0;
}

#f2
{
	bottom: 0;
}

#f1.v,
#f2.v
{
	height: 20vh;
}

#f1.w,
#f2.w
{
	height: 50vh;
}

/* .speak */
.s
{
	position: fixed;
	left: 10vw;
	width: 60vw;
	font-family: bahnschrift, arial;
	background: #000e;
	color: #fff;
	opacity: 0;
	border: 0.5rem solid #f0f;
	font-size: 1rem;
	transition: opacity 0.15s;
}

/* .speak-visible */
.u
{
	opacity: 1;
}

/* .message */
.m
{
	padding: 0.5rem;
}

/* .name */
.n
{
	font-weight: bold;
}

#s1
{
	top: 5rem;
	left: 10vw;
}

#s2
{
	bottom: 5rem;
	left: 30vw;
}

/* Devil */
.actor0
{
	border-color: #eb2436;
}

.actor0 .n
{
	color: #eb2436;
}

/* Skully */
.actor1
{
	border-color: #24c;
}

.actor1 .n
{
	color: #24c;
}

/* phone */
.actor2
{
	border-color: #bbb;
}

.actor2 .n
{
	color: #bbb;
}

/* Goblin */
.actor3
{
	border-color: #23a800;
}

.actor3 .n
{
	color: #23a800;
}

#a0,
#a1,
#a2,
#r1, /* recipe */
#r2, /* description */
#r3 /* status */
{
	position: fixed;
	background: #1119;
	color: #bbb;
	padding: 0.5em;
	font-size: 1rem;
}

#r2
{
	top: 1rem;
	left: 25vw;
	right: 25vw;
	font-size: 0.75rem;
}

#a0,
#a1,
#a2
{
	bottom: 1rem;
	left: 10vw;
	width: 20vw;
	display: block;
}

#a1
{
	left: 40vw;
}

#a2
{
	left: 70vw;
}

#d
{
	position: absolute;
}

#d,
#d *
{
	transform-style: preserve-3d;
}

#l0 /* layer 0 - transform base */
{
	position: absolute;
	top: 0;
	left: 0;
	width: 4000px;
	height: 2000px;
	transform: translateY(-820px) rotateX(90deg) translateY(-500px) translateX(-1500px);
	background: #ff04;
}
#l1, /* layer 1 - lava */
#l2, /* layer 2 - rocks */
#l3 /* layer 3 - fog */
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#l1
{
	/* lava_optimized.png */
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAgMAAADwXCcuAAAACVBMVEXcQwv75mL/jgCGM68cAAAAMElEQVQI12NgERRgSNRQYFBwa2AQVFBg6HCawMAi0sAg4eHA0KS4gEHMVYEhScUBAICSBxxSNRNRAAAAAElFTkSuQmCC");
	background-size: 40px 40px;
	animation: a1 7s linear infinite;
}

#l2
{
	/* rocks_optimized.png */
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWAgMAAAC52oSoAAAADFBMVEUAAABKFxFhIBGsSh4DteyuAAAAAXRSTlMAQObYZgAAAKVJREFUCNdjWMq2KpM1gSGVNWopbwBDOG/UcuYAhhjmq1MEPjB8TDGdIsrAwJjKHyMawOCY5vBhWQBDcFQoY+YChinXwlmXTmBYalkjtmoCw0pfB1OgXGbyUd6sAIaoKayTbxUwLE2RnGJ6gGFuhFgoPwND8Z2opQEMDAcMV61a4MAgyZiVGRjAECm4NLJwAkO64PRIV6CZknNuhi1gWKI1xT4qAADvZzNerS3tjAAAAABJRU5ErkJggg==");
	background-size: 88px 88px;
}

#l3
{
	/* fog */
	background: linear-gradient(0deg, #f004 0%, #c119 30%, #e22 75%);
}

#l4
{
	position: absolute;
	width: 600px;
	height: 360px;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAgMAAAArG7R0AAAADFBMVEVAODcxKSgiHBs2Ly64bcvJAAAALElEQVQI12Ng4GBgYDAD4qsNDMyhCQy8oREMpqFhDFNDQ0E0iA8SB8mD1AEAxLQJAlfy5rwAAAAASUVORK5CYII=");
	background-size: 24px 24px;
	transform: translateY(1500px) translateX(1500px);
}

.o
{
	position: absolute;
	transition: transform 0.1s;
}

.o div
{
	position: absolute;
}

.g,
.h,
.k
{
	font-weight: bold;
	background: #333;
	color: #fff;
	border: 0.2em #333 solid;
	border-radius: 0.2em;
	margin-right: 0.2em;
	display: none;
}

body.ag .g,
body.ah .h,
body.ak .k
{
	display: inline;
}

.g0
{
	background: #0c2;
	border-color: #0c2;
}
.g1
{
	background: #c00;
	border-color: #c00;
}
.h0
{
	color: #9ae;
}
.h1
{
	color: #f66;
}

.b, /* box inside description */
.c /* box inside description, in yellow */
{
	background: #fff1;
	padding: 0.1rem 0.25rem;
	margin: 0.2rem 0;
	border-left: 0.2rem solid #fff4;
}

.c
{
	color: #ff0;
	border-left-color: #ff04;
}

.c1 /* label for slots */
{
	position: relative;
	top: -25px;
	left: -35px;
	width: 100px;
	font-size: 0.75rem;
	color: #fff;
	text-align: center;
	z-index: 50000;
}

/* box parts */
.bl { transform: rotateY(-90deg) translateZ(15px); }
.bt { transform: rotateX(90deg) translateZ(15px); }
.br { transform: rotateY(90deg) translateZ(15px); }
.bf { transform: translateZ(15px); }

#r1
{
	top: 1rem;
	left: 3vw;
	width: 17vw;
}

#r3
{
	top: 1rem;
	right: 3vw;
	width: 17vw;
}

#o1, /* overlay-bg - behind controls */
#o2 /* overlay - main overlay */
{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #000e;
	transition: all 0.2s;
	display: none;
}


#e1,
#e2,
#e3,
#e4
{
	text-align: center;
	margin: 3rem auto;
}

#e1 b
{
	font-size: 2.5rem;
}

#e2
{
	width: 15rem;
	background: #111c;
	padding: 0.5rem;
	color: #888;
	list-style: none;
}

#e2 li
{
	text-align: left;
	padding: 0.5rem;
	transition: color 0.2s, background 0.2s;
}

#e2 li:hover
{
	background: #4448;
	color: #fff;
}

#e4
{
	display: none;
}

#e3
{
	background: #d512;
	padding: 0.5rem;
}

/* .w = on welcome screen */
body.w #o1
{
	background: #000;
	display: block;
}

body.w #o2
{
	background: #0000;
	display: block;
}

body.w #e4
{
	display: block;
}

body.w #e2
{
	display: none;
}

.l /* link */
{
	cursor: pointer;
	text-decoration: underline;
}

#gp
{
	position: fixed;
	left: 0;
	bottom: 3rem;
	opacity: 0.5;
}

@keyframes a2
{
	0% { opacity: 0.2; }
	30% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes a3
{
	0% { opacity: 0; margin-top: -20px; }
	10% { opacity: 1; margin-top: -30px; }
	90% { opacity: 1; margin-top: -30px; }
	100% { opacity: 0; margin-top: -60px; }
}

@keyframes a1
{
	0% { background-position: 0 0; }
	100% { background-position: 80px 40px; }
}