code:
/* reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*=====================================================================================
BASE
=======================================================================================*/
html,body
{
	width:100%;
	height:100%;
}

body
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: manipulation;

	color:#fff;
	background:#000 url(img/darkNoise.jpg);
	font-family:Tahoma,Arial,sans-serif;
	font-size:13px;
}
.selectable
{
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

#wrapper
{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	/*min-width:1280px;*/
}

small
{
	font-size:80%;
}

a,a:visited
{
	text-decoration:underline;
	cursor:pointer;
	color:#ccc;
}
a:hover
{
	text-shadow:0px 0px 3px #fff;
	color:#fff;
}
a:active
{
	opacity:0.8;
	background:transparent;
}

.inset
{
	/*box-shadow:0px 0px 12px #000 inset;*/
}

.titleFont,.title,.section,.lockedTitle
{
	font-family: 'Merriweather', Georgia,serif;
}
.title,.section,.lockedTitle
{
	font-size:28px;
	text-shadow:0px 0px 4px #000;
	color:#fff;
}

/*=====================================================================================
SECTIONS
=======================================================================================*/
.section
{
	text-align:center;
	padding:0px 16px;
	background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.5),rgba(0,0,0,0),rgba(0,0,0,0));
	margin:12px 0px;
}
.section:after
{
	content:'';
	display:block;
	background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0),rgba(255,255,255,0));
	height:1px;
	margin:6px 0px;
}
.section:before
{
	content:'';
	display:block;
	background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0),rgba(255,255,255,0));
	height:1px;
	margin:6px 0px;
}
.subsection
{
	padding:8px 0px;
	font-size:14px;
}
.subsection div.title
{
	font-size:22px;
	padding-left:16px;
	margin-bottom:8px;
	background:linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0));
}
.subsection div.title:after
{
	content:'';
	display:block;
	background:linear-gradient(to right,rgba(255,255,255,0.25),rgba(255,255,255,0));
	height:1px;
	width:50%;
	margin:6px 0px;
	margin-left:-16px;
}
.subsection div.title:before
{
	content:'';
	display:block;
	background:linear-gradient(to right,rgba(255,255,255,0.25),rgba(255,255,255,0));
	height:1px;
	width:50%;
	margin:6px 0px;
	margin-left:-16px;
}
.update
{
	-webkit-touch-callout: auto;
	-webkit-user-select: auto;
	-khtml-user-select: auto;
	-moz-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;
}
.update .title
{
	color:#69c;
}
.update.small .title
{
	font-size:16px;
	opacity:0.8;
	color:#fff;
}
.listing
{
	padding:3px 16px;
	font-size:13px;
}
.listing b
{
	font-weight:bold;
	opacity:0.6;
}
.listing small
{
	font-size:11px;
	opacity:0.9;
}
.listing label
{
	font-size:12px;
	border-bottom:1px solid rgba(255,255,255,0.25);
	border-right:1px solid rgba(255,255,255,0.25);
	opacity:0.5;
	padding-left:16px;
	padding-bottom:2px;
	padding-right:4px;
	position:relative;
	left:-4px;
	top:-2px;
	background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.5));
}

.hidden
{
	visibility:hidden;
}
.toggledOff
{
	opacity:0;
	display:none;
}
.listing:hover .hidden
{
	visibility:visible;
}

.optionBox
{
	text-align:center;
	clear:both;
	margin-bottom:-12px;
}
.optionBox .option
{
}
a.option.big
{
	font-size:30px;
	margin:auto;
	padding:8px 16px;
	width:80%;
}
a.option.framed.large small {font-size:65%;}
a.option.framed.large
{
	font-size:20px;
	margin:4px auto;
	padding:6px 12px;
	background:#058;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #0cf inset;
	text-shadow:0px 1px 2px #000;
}
a.option.framed.large:hover
{
	background:#0cf;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #8ef inset;
	text-shadow:0px 1px 2px #000;
	color:#fff;
}
a.option.framed.large.red
{
	background:#c30;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #f64 inset;
}
a.option.framed.large.red:hover
{
	background:#f64;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #fc7 inset;
}
a.option, .info a
{
	display:inline-block;
	border:1px solid #ccc;
	background:#000;
	margin:2px 4px 2px 0px;
	color:#ccc;
	font-size:12px;
	padding:4px 8px;
	text-decoration:none;
}
a.option.off {opacity:0.5;}
a.option:hover, .info a:hover
{
	border-color:#fff;
	color:#fff;
	text-shadow:none;
}
a.option:active, .info a:active
{
	background-color:#333;
}
.warning, a.option.warning
{
	color:#c00;
	border-color:#c00;
}
a.option.warning:hover
{
	border-color:#f33;
	color:#f33;
}
a.option.warning:active
{
	background-color:#300;
}

.neato, a.option.neato
{
	color:#096;
	border-color:#096;
}
a.option.neato:hover
{
	border-color:#3c9;
	color:#3c9;
}
a.option.neato:active
{
	background-color:#032;
}
.info a
{
	border-color:#666;
	background:#eee;
	color:#666;
	padding:2px 6px;
}
.info a:hover
{
	border-color:#000;
	background-color:#fff;
	color:#000;
}
.info a:active
{
	background-color:#999;
}

/*=====================================================================================
oh forget it this is just a mess
=======================================================================================*/
#backgroundLayers, #backgroundLayers div
{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
}

#backgroundCanvas,#backgroundLeftCanvas
{
	position:absolute;
	left:0px;
	top:0px;
}

#topBar
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:32px;
	background:url(img/darkNoiseTopBar.jpg) repeat-x bottom;
	color:#ccc;
}
#topBar>div
{
	display:inline-block;
	float:left;
	border-right:1px solid #000;
	box-shadow:0px 0px 3px 1px rgba(255,255,255,0.2) inset;
	padding:7px 8px 9px 8px;
}
#topBar a
{color:#fff;}
#topBar a.blueLink
{color:#06c;}
#topBar a.blueLink:hover
{color:#28f;text-shadow:0px 0px 3px #06c;}
#topBar a.lightblueLink
{color:#6ad3ff;}
#topBar a.lightblueLink:hover
{color:#74fffd;text-shadow:0px 0px 3px #6ad3ff;}
a.orangeLink,#topBar a.orangeLink
{color:#f65f4d;}
a.orangeLink:hover,#topBar a.orangeLink:hover
{color:#ff9580;text-shadow:0px 0px 3px #f65f4d;}

#topBar>#links
{
	display:block;
	position:absolute;
	right:0px;
	top:0px;
	z-index:10000000;
	float:none;
}

.hoverable
{
	text-align:left;
	opacity:0;
	transition:max-height 0.25s ease-out,opacity 0.25s ease-out;
	position:absolute;
	left:0px;
	top:32px;
	padding-right:1px;
	width:100%;
	max-height:0px;
	overflow:hidden;
	color:#fff;
	box-shadow:0px 0px 4px rgba(255,255,255,0.2) inset,0px 2px 4px 2px rgba(0,0,0,0.5),0px 0px 0px 1px rgba(0,0,0,0.5);
	background:url(img/darkNoise.jpg);
}
div:hover>.hoverable
{
	opacity:1;
	max-height:400px;
}
.hoverable>div
{
	padding:8px 12px;
}
.hoverable a
{
	text-shadow:none;
	display:block;
	text-decoration:none;
	padding:5px 8px 7px 8px;
}
.hoverable a:nth-child(odd)
{
	background:rgba(255,255,255,0.05);
}
.hoverable a:hover
{
	text-shadow:none;
	background:rgba(255,255,255,0.2);
	box-shadow:0px 0px 4px rgba(255,255,255,0.2) inset,0px 0px 2px 1px rgba(0,0,0,0.5);
}

#javascriptError
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	background:#111 url(img/darkNoise.jpg);
	background:url(img/shadedBorders.png) left top/100% 100%,#111 url(img/darkNoise.jpg);
	text-align:center;
	z-index:100000000000;
	line-height:150%;
	font-size:20px;
}
#loader
{
	padding:64px 128px;
	position:relative;
	top:120px;
	animation-name:appear;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-duration:0.5s;
}
@keyframes appear
{
	from {opacity:0;top:130px;}
	to {opacity:1;top:120px;}
}
#loading
{
	text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #39f;
	animation-name:blink;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-duration:0.75s;
}
@keyframes blink
{
	0% {opacity:0.5;}
	50% {opacity:1;}
	100% {opacity:0.5;}
}
#ifIE9{display:none;}
#failedToLoad
{
	text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #f33;
	animation-name:appearLater;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-duration:15s;
}
@keyframes appearLater
{
	0% {opacity:0;}
	95% {opacity:0;}
	100% {opacity:1;}
}
.spinnyBig,.spinnySmall
{
	display:block;
	width:100px;
	height:100px;
	position:absolute;
	left:50%;
	top:-75px;
	margin-left:-50px;
	animation-name:loadSpin;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
}
.spinnyBig
{
	background:url(img/spinnyBig.png);
	animation-duration:5s;
}
.spinnySmall
{
	background:url(img/spinnySmall.png);
	animation-duration:9s;
}
@keyframes loadSpin
{
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#game
{
	position:absolute;
	left:0px;
	top:32px;
	right:0px;
	bottom:0px;
	overflow:hidden;
}
#sectionLeft
{
	position:absolute;
	left:0px;
	top:0px;
	width:30%;
	bottom:0px;
	min-width:100px;
	/*overflow:hidden;*/
}
/*#sectionLeftExtra{position:absolute;left:0px;top:0px;}*/
#sectionMiddle
{
	position:absolute;
	left:30%;
	padding-left:16px;
	margin-right:15px;
	top:0px;
	right:318px;
	bottom:0px;
	min-width:100px;
	overflow:hidden;
}
#centerArea
{
	overflow-x:hidden;
	overflow-y:scroll;
	position:absolute;
	top:112px;
	left:16px;
	bottom:0px;
	right:0px;
}
#game.onMenu #centerArea
{
	background:#000 url(img/darkNoise.jpg);
	background-image:url(img/shadedBorders.png),url(img/darkNoise.jpg);
	background-size:100% 100%,auto;
	background-color:#000;
}
#sectionRight
{
	height:100%;
	position:absolute;
	top:0px;
	right:0px;
	overflow-x:hidden;
	overflow-y:scroll;
	/*background:url(img/panelBG.png);*/
	background:rgba(0,0,0,0.5);
}

#sectionLeft .blackGradient
{
	background:url(img/blackGradient.png) repeat-x bottom;
	position:absolute;
	left:0px;
	right:0px;
	top:300px;
	height:640px;
}
#sectionLeft .blackFiller
{
	background:#000;
	position:absolute;
	left:0px;
	right:0px;
	top:940px;
	bottom:0px;
}

/* this is a mess */
.framed,a.option,.sliderBox,.smallFramed
{
	border:1px solid #e2dd48;
	background:#000 url(img/darkNoise.jpg);
	background-image:url(img/shadedBordersSoft.png),url(img/darkNoise.jpg);
	background-size:100% 100%,auto;
	background-color:#000;
	border-radius:2px;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 0px 2px 2px #000 inset,0px 1px 0px 1px rgba(255,255,255,0.5) inset;
	text-shadow:0px 1px 1px #000;
	color:#ccc;
	line-height:100%;
}
.framed,a.option,a.option.framed,a.option.framed:hover,.smallFramed
{
	/*border-color:#dac56e #c07a36 #a44e36 #c07a36;*/
	/*border:1px solid #e2dd48;*/
	border-color:#ece2b6 #875526 #733726 #dfbc9a;
}
.smallFramed
{border-radius:8px;}
a.option,textarea,input[type="text"],.sliderBox
{
	border:1px solid #e2dd48;
	border-color:#ece2b6 #875526 #733726 #dfbc9a;
	border-radius:2px;
}
textarea,input[type="text"]
{
	border-radius:4px;
	box-shadow:0px 0px 0px 1px rgba(0,0,0,0.5) inset,0px 1px 2px rgba(0,0,0,0.5) inset;
}

.framed,a.option.framed
{
	padding:4px 8px;
	margin:4px;
	border:3px solid transparent;
	border-image:url(img/frameBorder.png) 3 round;
	border-radius:2px;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 0px 6px 1px rgba(0,0,0,0.5) inset;
	-webkit-transition: opacity 0.1s ease-out;
	-moz-transition: opacity 0.1s ease-out;
	-ms-transition: opacity 0.1s ease-out;
	-o-transition: opacity 0.1s ease-out;
	transition: opacity 0.1s ease-out;
}

.sliderBox
{
	padding:4px 8px;
	width:200px;
	display:inline-block;
	margin-bottom:2px;
	margin-right:2px;
}
.sliderBox>div
{
	margin-bottom:4px;
}
.sliderBox>input
{
	display:block;
	margin:2px auto;
}

/* why, CSS? why? */
input[type=range]
{
	-webkit-appearance:none;
	width:100%;
	height:12px;
	margin:0px 0px;
	border:0px solid #000;
	cursor:pointer;
}
input[type=range]:focus{outline:none;}
input[type=range]::-webkit-slider-runnable-track
{
	width:100%;
	height:12px;
	cursor:pointer;
	background:#999;
	border:0px solid #000;
	border-radius:4px;
	box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
}
input[type=range]::-webkit-slider-thumb
{
	border:0px solid #000;
	height:12px;
	width:12px;
	background:#ccc;
	box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
	cursor:pointer;
	-webkit-appearance:none;
	margin-top:0px;
	border-radius:4px;
}
input[type=range]:active::-webkit-slider-thumb,input[type=range]:hover::-webkit-slider-thumb {background:#fff;}

input[type=range]::-moz-range-track
{
	width:100%;
	height:12px;
	cursor:pointer;
	background:#999;
	border:0px solid #000;
	border-radius:4px;
	box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
}
input[type=range]::-moz-range-thumb
{
	border:0px solid #000;
	height:12px;
	width:12px;
	background:#ccc;
	box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
	cursor:pointer;
	-webkit-appearance:none;
	margin-top:0px;
	border-radius:4px;
}
input[type=range]:active::-moz-range-thumb,input[type=range]:hover::-moz-range-thumb {background:#fff;}

input[type=range]::-ms-track
{
	width:100%;
	height:12px;
	cursor:pointer;
	background:#999;
	border:0px solid #000;
	border-radius:4px;
	box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
}
input[type=range]::-ms-thumb
{
	border:0px solid #000;
	height:12px;
	width:12px;
	background:#ccc;
	box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
	cursor:pointer;
	-webkit-appearance:none;
	margin-top:0px;
	border-radius:4px;
}
input[type=range]:active::-ms-thumb,input[type=range]:hover::-ms-thumb {background:#fff;}

.framed b
{
	color:#fff;
	font-weight:bold;
}
.framed .name
{
	font-weight:bold;
	font-size:110%;
	color:#fff;
	margin:2px 0px;
	text-shadow:0px 0px 2px rgba(255,255,255,0.3);
}
.framed q
{
	display:block;
	position:relative;
	text-align:right;
	margin-top:8px;
	font-style:italic;
	color:rgba(255,255,255,0.5);
	font-size:11.5px;
	font-family:Georgia;
	line-height:135%;
}
.framed q:before
{
	display:inline-block;
	content:"“";
	font-size:14px;
	font-family:Georgia;
	font-weight:bold;
}
.framed q:after
{
	display:inline-block;
	content:"”";
	font-size:14px;
	font-family:Georgia;
	font-weight:bold;
}
.framed .close
{
	position:absolute;
	top:-5px;
	right:0px;
	padding:4px;
}
.close
{
	font-weight:bold;
	font-size:16px;
	text-shadow:0px 0px 2px #000,0px 0px 1px #000;
	cursor:pointer;
	font-family:Comic Sans MS;
	padding:1px 8px 7px 8px;
	z-index:1000;
}
.close:hover
{
	color:#fff;
	text-shadow:0px 0px 2px #fff;
}
.sidenote
{
	position:absolute;
	right:-6px;
	bottom:6px;
}

.menuClose
{
	position:absolute;
	top:0px;
	right:0px;
	border-bottom-left-radius:36px;
	padding:4px 12px 16px 18px;
	font-size:24px;
	box-shadow:-2px 2px 8px #000, 2px -2px 8px rgba(255,255,255,0.1) inset;
}
.menuClose:hover
{
	background:rgba(255,255,255,0.05);
}

.framed .block
{
	padding:8px;
	margin:2px;
	border-radius:4px;
	border:1px solid rgba(255,255,255,0.1);
	box-shadow:0px 0px 1px #000,0px 0px 1px #000 inset;
}

#tooltipAnchor
{
	position:absolute;
	z-index:1000000000;
	display:none;
	//transition:left 0.1s ease-out,right 0.1s ease-out,top 0.1s ease-out,bottom 0.1s ease-out;
}
#tooltip
{
	position:absolute;
	-webkit-transition:none;
	-moz-transition:none;
	-ms-transition:none;
	-o-transition:none;
	transition:none;
	pointer-events:none;
	opacity:1;
}
.wobbling
{
	animation:wobble 0.1s ease-out;
}
#tooltip .data
{
	/*border-top:1px solid rgba(255,255,255,0.25);*/
	padding:4px 0px;
	font-size:80%;
}

.line
{
	background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0));
	height:1px;
	width:90%;
	margin:6px auto;
	position:relative;
}
.line:before,.line:after
{
	content:'';
	display:block;
	background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.25),rgba(0,0,0,0));
	height:1px;
	width:90%;
	position:absolute;
	left:0px;
	bottom:1px;
}
.line:after
{
	bottom:-1px;
}
.description
{
	/*border-top:1px solid rgba(255,255,255,0.25);*/
	margin:4px 0px;
}

q:before
{
	display:inline-block;
	content:"\"";
}
q:after
{
	display:inline-block;
	content:"\"";
}

.price
{
	font-weight:bold;
	color:#6f6;
	padding-left:18px;
	position:relative;
}
.priceMult
{
	font-weight:bold;
	color:#ffc;
}
.price .tinyCookie
{
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	width:16px;
	height:16px;
	cursor:pointer;
}
.price.disabled, .disabled .price
{
	color:#f66;
}
.price:before
{
	content:'';
	display:block;
	position:absolute;
	left:0px;
	top:2px;
	background:url(img/money.png);
	width:16px;
	height:16px;
}
.hasTinyCookie
{
	position:relative;
	padding-left:18px;
}
.hasTinyCookie:before
{
	content:'';
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	background:url(img/money.png);
	width:16px;
	height:16px;
}
.heavenly.price:before
{
	background:url(img/heavenlyMoney.png);
}
.lump.price:before
{
	background:url(img/sugarLump.png);
}
.price.plain
{
	color:#fff;
	display:inline-block;
}
.price.plain:before
{
	top:0px;
}

#cookieAnchor
{
	position:absolute;
	left:50%;
	top:40%;
}
#bigCookie
{
	width:256px;
	height:256px;
	position:absolute;
	left:-128px;
	top:-128px;
	/*background:url(img/perfectCookie.png);
	background-size:256px 256px;*/
	background:url(img/empty.png);/* somehow necessary; an empty div with no background seems to be click-through */
	cursor:pointer;
	z-index:10000;
	border-radius:128px;
}
.elderWrath #bigCookie
{
	background:url(img/imperfectCookie.png);
	background-size:256px 256px;
}
#cookieNumbers{position:absolute;top:-80px;}
.cookieNumber
{
	position:absolute;
	pointer-events:none;
	left:-100px;
	top:0px;
	width:200px;
	z-index:100;
	text-align:center;
	text-shadow:none;
}
#cookieCursors{position:absolute;z-index:5;}
.cursor
{
	width:32px;
	height:32px;
	position:absolute;
	background:url(img/cursor.png);
}
.cookieParticle
{
	width:64px;
	height:64px;
	margin-left:-32px;
	margin-top:-32px;
	position:absolute;
	background:url(img/smallCookies.png);
	opacity:0;
}
#particles {position:absolute;left:0px;top:0px;z-index:100000000000;}
.particle
{
	position:absolute;
	pointer-events:none;
	left:-200px;
	bottom:0px;
	width:400px;
	z-index:100000000;
	text-align:center;
	text-shadow:1px 1px 1px #000,0px 0px 6px #000;
	font-size:24px;
}
.particle.title
{
	background:rgba(0,0,0,0.5);
	box-shadow:0px 0px 8px 8px rgba(0,0,0,0.5);
	border-radius:16px;
	display:none;
}

#milk
{
	width:100%;
	height:0%;
	position:absolute;
	left:0px;
	bottom:0px;
	z-index:100;
	opacity:0.9;
}
.milkLayer
{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	background-repeat:repeat-x;
}
#cookies
{
	position:absolute;
	left:0px;
	top:10%;
	width:100%;
	text-align:center;
	z-index:200;
	background:#000;
	background:rgba(0,0,0,0.4);
	padding:2px 0px;
	pointer-events:none;
}
.monospace
{
	font-family:Courier,monospace;
	font-weight:bold;
}
#bakeryNameAnchor
{
	position:absolute;
	left:0px;
	top:10%;
	width:100%;
	z-index:200;
}
#bakeryName
{
	position:absolute;
	left:0px;
	bottom:8px;
	left:12.5%;
	width:75%;
	text-align:center;
	font-size:20px;
	background:#000;
	background:rgba(0,0,0,0.4);
	border-radius:12px;
	padding:4px 0px;
	cursor:pointer;
}
#bakeryName:hover
{
	text-shadow:0px 0px 8px #fff;
}

#specialPopup
{
	position:absolute;
	left:50%;
	margin-left:-185px;
	bottom:32px;
	width:350px;
	min-height:8px;
	z-index:20000;
	transition:bottom 0.2s ease-out,opacity 0.1s ease-out;
	text-align:center;
}
#specialPopup.onScreen
{
	bottom:32px;
	opacity:1;
}
#specialPopup.offScreen
{
	bottom:-32px;
	pointer-events:none;
	opacity:0;
}

.separatorLeft, .separatorRight
{
	width:16px;
	height:100%;
	background:url(img/panelVertical.png?v=2) repeat-y;
	background:url(img/panelGradientTop.png) no-repeat top left,url(img/panelGradientBottom.png) no-repeat bottom left,url(img/panelVertical.png?v=2) repeat-y;
	position:absolute;
	top:0px;
	bottom:0px;
	z-index:100;
}
.separatorLeft
{
	left:30%;
}
.separatorRight
{
	right:317px;
}
.separatorBottom
{
	width:100%;
	height:16px;
	background:url(img/panelHorizontal.png?v=2) repeat-x;
	background:url(img/panelGradientLeft.png) no-repeat top left,url(img/panelGradientRight.png) no-repeat top right,url(img/panelHorizontal.png?v=2) repeat-x;
	position:absolute;
	left:0px;
	bottom:0px;
}

.button
{
	background:url(img/panelMenu3.png);
	background-position:0px 0px;
	position:absolute;
	z-index:100;
	width:100px;
	height:48px;
	text-align:center;
	font-size:18px;
	cursor:pointer;

	box-sizing:border-box;
	padding-top:16px;

	color:#999;
	text-shadow:0px 1px 0px #444,0px 0px 4px #000;
}
.button:hover,.button.selected
{
	z-index:1000;
	color:#fff;
	text-shadow:0px 1px 0px #999,0px 0px 4px #000;
}
#prefsButton{top:0px;left:0px;		padding-top:16px;		padding-right:2px;		background-position:0px 0px;}
#statsButton{bottom:16px;left:0px;	padding-top:14px;		padding-right:2px;		background-position:0px -48px;}
#logButton{top:0px;right:0px;		padding-top:16px;		padding-left:2px;		background-position:-100px 0px;}
#legacyButton{bottom:16px;right:0px;padding-top:14px;		padding-left:2px;		background-position:-100px -48px;}
#prefsButton:hover,#prefsButton.selected{					background-position:0px -96px;}
#statsButton:hover,#statsButton.selected{					background-position:0px -144px;}
#logButton:hover,#logButton.selected{						background-position:-100px -96px;}
#legacyButton:hover,#legacyButton.selected{					background-position:-100px -144px;}

#logButton.hasUpdate
{
	color:#ffc;
}
#logButton.hasUpdate:before
{
	content:'';
	display:block;
	position:absolute;
	left:-60px;
	top:0px;
	width:60px;
	height:56px;
	background:url(img/pointyLad.png);
	animation:pointLadBump 0.5s infinite ease-in-out;
}
@keyframes pointLadBump{
	0% {transform:translate(0px,0px);}
	20% {transform:translate(-15px,0px);}
	50% {transform:translate(-20px,0px);}
	80% {transform:translate(-15px,0px);}
	100% {transform:translate(0px,0px);}
}
#checkForUpdate
{
	display:none;
	font-size:10px;
	margin-top:-8px;
	animation:checkForUpdateFlash 0.5s infinite ease-in-out;
}
@keyframes checkForUpdateFlash{
	0% {color:#999;}
	50% {color:#ffc;}
	100% {color:#999;}
}
#logButton.hasUpdate #checkForUpdate {display:block;}

.roundedPanel
{
	background:url(img/roundedPanelBGS.png) repeat-x 0px 0px;
	position:relative;
	padding:9px 0px;
	height:20px;
}
.roundedPanel:before,.roundedPanel:after
{
	content:'';
	display:block;height:36px;
	position:absolute;top:0px;
}
.roundedPanel:before
{
	background:url(img/bracketPanelLeftS.png) no-repeat;left:-16px;width:16px;
}
.roundedPanel:after
{
	background:url(img/bracketPanelRightS.png) no-repeat;right:-18px;width:18px;
}
/*.roundedPanel
{
	background:url(img/roundedPanelBG.png) repeat-x 0px 0px;
	position:relative;
}
.roundedPanel:before,.roundedPanel:after
{
	content:'';
	display:block;width:17px;height:32px;
	position:absolute;top:0px;
}
.roundedPanel:before
{
	background:url(img/roundedPanelLeft.png) no-repeat;left:-17px;
}
.roundedPanel:after
{
	background:url(img/roundedPanelRight.png) no-repeat;right:-17px;
}*/
#ascendNumber
{
	display:none;
	position:absolute;
	right:115px;
	top:22px;
	font-size:14px;
	font-weight:bold;
	font-family:Georgia;
	color:#fff;
	text-shadow:0px -1px 1px #09f,0px 1px 1px #f04;
}
#legacyButton:hover>#ascendNumber
{text-shadow:0px -1px 1px #09f,0px 1px 1px #f04,0px -1px 1px #09f,0px 1px 1px #f04,0px 0px 4px #fff;}

#ascendTooltip
{
	display:none;
	position:absolute;
	right:0px;
	top:52px;
	font-family:Tahoma,Arial,sans serif;
	font-size:11px;
	width:220px;
	padding:8px;
	pointer-events:none;
}
#legacyButton:hover>#ascendTooltip
{display:block;}

#lumps
{
	display:none;
	position:absolute;
	width:32px;
	height:32px;
	position:absolute;
	z-index:10000;
	left:-8px;
	bottom:-12px;
	z-index:10000;
	cursor:pointer;
	filter:drop-shadow(0px 3px 2px #000);
	-webkit-filter:drop-shadow(0px 3px 2px #000);
}
#lumps:hover #lumpsIcon,#lumps:hover #lumpsIcon2
{top:-10px;}
#lumpsIcon,#lumpsIcon2
{
	width:48px;
	height:48px;
	position:absolute;
	left:-8px;
	top:-8px;
	pointer-events:none;
}
#lumpsAmount
{
	font-size:12px;
	color:#6cf;
    position:absolute;
    left:36px;
    top:6px;
	pointer-events:none;
}
.lumpsOn #lumps{display:block;}

.lumpRefill
{
	cursor:pointer;
	width:48px;
	height:48px;
	position:absolute;
	left:0px;
	top:0px;
	transform:scale(0.5);
	z-index:1000;
	transition:transform 0.05s;
}
.lumpRefill:hover{transform:scale(1);}
.lumpRefill:active{transform:scale(0.4);}

.meterContainer
{
	background:rgba(0,0,0,0.5);
	position:relative;
	border-radius:2px;
	height:8px;
}
.meter
{
	background:url(img/prestigeBar.jpg) 0px 0px;
	position:absolute;
	left:0px;
	/*right:100%;*/
	right:0px;
	top:0px;
	height:100%;
	/*max-width:100%;*/
	transform:translate(0px,0px);
}
.meter:after
{
	height:8px;
	width:8px;
	position:absolute;
	right:-8px;
	top:0px;
	content:'';
	display:block;
	background:url(img/prestigeBarCap.png);
}
#ascendMeterContainer
{
	width:100px;
	right:0px;
	bottom:4px;
	position:absolute;
	overflow:hidden;
}
#ascendMeter
{
	/*right:100px;*/
}

.meter.filling
{
-webkit-animation:fluidMotion 10s infinite linear;
   -moz-animation:fluidMotion 10s infinite linear;
        animation:fluidMotion 10s infinite linear;
	/*-webkit-transition:right 0.5s linear;
	-moz-transition:right 0.5s linear;
	-ms-transition:right 0.5s linear;
	-o-transition:right 0.5s linear;
	transition:right 0.5s linear;*/
}
@-webkit-keyframes fluidMotion{
from {background-position:0px -24px;}
	to {background-position:-128px -24px;}
}
@-moz-keyframes fluidMotion{
from {background-position:0px -24px;}
	to {background-position:-128px -24px;}
}
@keyframes fluidMotion{
from {background-position:0px -24px;}
	to {background-position:-128px -24px;}
}

#game.onMenu #menu{display:block;}
#game.onMenu .row{visibility:hidden;display:none;}
#menu
{
	display:none;
	z-index:1;
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	/*box-shadow:0px 0px 24px #000 inset;
	background:#000 url(img/darkNoise.jpg);*/
}

#comments
{
	padding:16px;
	text-align:center;
	position:relative;
	padding-bottom:32px;
	font-size:16px;
	height:64px;
	background:url(img/shadedBorders.png);
	background-size:100% 96px;
	/*overflow:hidden;*/
}
.commentsText
{
	padding:16px 0px;
	position:absolute;
	top:0px;
	left:108px;
	right:108px;
	opacity:1;
	text-align:center;
}
.commentsText q
{
	font-style:italic;
}
.commentsText sig
{
	font-size:70%;
	display:block;
	text-align:center;
	opacity:0.7;
}
.commentsText sig:before
{
	content:"-";
	padding-left:64px;
}
.fortune
{
	color:#ade000;
	cursor:pointer;
}
.fortune:hover
{
	color:#d2ff00;
	text-shadow:0px 0px 4px #ade000;
}

#commentsText
{
	z-index:20;
}
#commentsTextBelow
{
	z-index:10;
}

/* let me tell you about vendor prefixes */
.risingAway{
-webkit-animation:riseAway 1s 1 forwards;
   -moz-animation:riseAway 1s 1 forwards;
        animation:riseAway 1s 1 forwards;
}
.risingUp{
-webkit-animation:riseUp 1s 1 forwards;
   -moz-animation:riseUp 1s 1 forwards;
        animation:riseUp 1s 1 forwards;
}
.risingUpLinger{
-webkit-animation:riseUpLinger 4s 1 forwards ease-out;
   -moz-animation:riseUpLinger 4s 1 forwards ease-out;
        animation:riseUpLinger 4s 1 forwards ease-out;
}
@-webkit-keyframes riseAway{
from {top:0px;opacity:1;}
	to {top:-20px;opacity:0;}
}
@-webkit-keyframes riseUp{
from {top:20px;opacity:0;}
	to {top:0px;opacity:1;}
}
@-webkit-keyframes riseUpLinger{
0% {transform:translate(0px,0px);opacity:0;}
1% {transform:translate(0px,0px);opacity:1;}
20% {transform:translate(0px,-32px);opacity:1;}
100% {transform:translate(0px,-32px);opacity:0;}
}
@-moz-keyframes riseAway{
from {top:0px;opacity:1;}
	to {top:-20px;opacity:0;}
}
@-moz-keyframes riseUp{
from {top:20px;opacity:0;}
	to {top:0px;opacity:1;}
}
@-moz-keyframes riseUpLinger{
0% {transform:translate(0px,0px);opacity:0;}
1% {transform:translate(0px,0px);opacity:1;}
20% {transform:translate(0px,-32px);opacity:1;}
100% {transform:translate(0px,-32px);opacity:0;}
}
@keyframes riseAway{
from {top:0px;opacity:1;}
	to {top:-20px;opacity:0;}
}
@keyframes riseUp{
from {top:20px;opacity:0;}
	to {top:0px;opacity:1;}
}
@keyframes riseUpLinger{
0% {transform:translate(0px,0px);opacity:0;}
2% {transform:translate(0px,0px);opacity:1;}
20% {transform:translate(0px,-32px);opacity:1;}
75% {transform:translate(0px,-32px);opacity:1;}
100% {transform:translate(0px,-32px);opacity:0;}
}

@keyframes wobble
{
	0% {transform:scale(0.5,0.5);}
	20% {transform:scale(1.3,0.7);}
	30% {transform:scale(0.7,1.3);}
	50% {transform:scale(1.2,0.8);}
	70% {transform:scale(0.9,1.1);}
	90% {transform:scale(1.1,0.9);}
	100% {transform:scale(1,1);}
}

@keyframes bounce
{
	/* weeeeee */
	0% 		{transform-origin:50% 100%;transform:scale(1,1);}
	10% 	{transform-origin:50% 100%;transform:scale(0.9,1.2);}
	20% 	{transform-origin:50% 100%;transform:scale(1.5,0.5);}
	25% 	{transform-origin:50% 100%;transform:scale(0.75,1.5) translate(0px,-10px);}
	30% 	{transform-origin:50% 100%;transform:scale(0.8,1.2) translate(0px,-20px);}
	60% 	{transform-origin:50% 100%;transform:scale(1,1) translate(0px,-25px);}
	70% 	{transform-origin:50% 100%;transform:scale(2,0.5);}
	80% 	{transform-origin:50% 100%;transform:scale(0.8,1.2);}
	90% 	{transform-origin:50% 100%;transform:scale(1,1);}
	100% 	{transform-origin:50% 100%;transform:scale(1,1);}
}

.comeLeft{animation:comeLeft 0.2s ease-out;}
@keyframes comeLeft
{
	0% {transform:translate(-16px,0px);opacity:0;}
	100% {transform:translate(0px,0px);opacity:1;}
}

.pucker{animation:pucker 0.2s ease-out;}
@keyframes pucker
{
	0% {transform:scale(1,1);}
	10% {transform:scale(1.15,0.85);}
	20% {transform:scale(1.2,0.8);}
	50% {transform:scale(0.75,1.25);}
	70% {transform:scale(1.05,0.95);}
	90% {transform:scale(0.95,1.05);}
	100% {transform:scale(1,1);}
}
.puckerHalf{animation:puckerHalf 0.2s ease-out;}
@keyframes puckerHalf
{
	0% {transform:scale(0.5,0.5);}
	10% {transform:scale(0.575,0.425);}
	20% {transform:scale(0.6,0.4);}
	50% {transform:scale(0.375,0.625);}
	70% {transform:scale(0.525,0.475);}
	90% {transform:scale(0.475,0.525);}
	100% {transform:scale(0.5,0.5);}
}

.flashRed{animation:flashRed 0.2s ease-out;}
@keyframes flashRed
{
	0% 		{background:#f00;}
	100% 	{}
}
.punchDown{animation:punchDown 0.3s ease-out;}
@keyframes punchDown
{
	0% 		{transform:translate(0px,0px);}
	20% 		{transform:translate(0px,4px);}
	100% 		{transform:translate(0px,0px);}
}
.punchUp{animation:punchUp 0.3s ease-out;}
@keyframes punchUp
{
	0% 		{transform:translate(0px,0px);}
	20% 		{transform:translate(0px,-4px);}
	100% 		{transform:translate(0px,0px);}
}

#buildingsMaster
{
	min-height:24px;
	background:#999;
	background:url(img/darkNoise.jpg);
	box-shadow:0px 0px 4px #000 inset;
	position:relative;
	text-align:center;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	font-variant:small-caps;
	text-shadow:0px 1px 0px #000;
	margin-bottom:8px;
	display:none;
}
.extraButtons #buildingsMaster{display:block;}
#game.onMenu #buildingsMaster{display:none;}

.row
{
	position:relative;
	padding-bottom:16px;
	display:none;
	/*overflow:hidden;*/
}
.row.enabled{display:block;}
.row .rowCanvas
{
	width:100%;
	height:128px;
	/*overflow-x:scroll;
	overflow-y:hidden;*/
	background:#000;
	display:block;
}
.row .rowSpecial
{
	min-height:24px;
	z-index:100;
	width:100%;
	top:0px;
	left:0px;
	background:#000 url(img/mapBG.jpg) fixed;
	display:none;
}
.row.onMinigame .rowCanvas{display:none;}
.row.onMinigame .rowSpecial{display:block;}
/*.row.muted .rowCanvas,.row.muted .rowSpecial{display:none;}*/
/*.row.muted .separatorBottom{background:rgba(0,0,0,0.75);box-shadow:1px 1px 0px rgba(255,255,255,0.1) inset,-1px -1px 0px rgba(0,0,0,0.5) inset;}*/
.row.muted{display:none;}

.row .info, #sectionLeft .info
{
	display:none;
	/*visibility:hidden;*/
	-webkit-transition: opacity 0.1s ease-out;
	-moz-transition: opacity 0.1s ease-out;
	-ms-transition: opacity 0.1s ease-out;
	-o-transition: opacity 0.1s ease-out;
	transition: opacity 0.1s ease-out;
	opacity:0;
}
.row .info, #sectionLeft .info
{
	position:absolute;
	top:0px;
	left:0px;
	height:112px;
	padding:8px;
	font-size:12px;
	line-height:125%;
	background:url(img/infoBG.png);
	color:#666;
	z-index:100000;
}
.row .info:after
{
	width:16px;
	height:128px;
	position:absolute;
	right:-16px;
	top:0px;
	background:url(img/infoBGfade.png) repeat-y;
	display:block;
	content:'';
}
#sectionLeft .info
{
	border-radius:16px;
	padding:24px 8px 8px 24px;
	left:-16px;
	top:-16px;
	height:auto;
}
.row:hover .info, #sectionLeft:hover .info
{
	opacity:1;
}
.row .object
{
	position:absolute;
	width:64px;
	height:64px;
}
#sectionLeftInfo
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}

.zoneTitle
{
	text-align:center;
	padding:8px;
	width:100%;
}
#store
{
	position:relative;
}
#store:after
{
	display:block;
	height:64px;
	background:url(img/blackGradientSmallTop.png) repeat-x top;
	content:'';
	pointer-events:none;
	position:absolute;
	left:0px;
	right:0px;
	bottom:-64px;
}
#storeTitle
{
	width:284px;
	background:url(img/blackGradientSmallTop.png) repeat-x top;
}
#buildingsTitle
{
	display:none;
}
.storeSection
{
	height:60px;
	width:300px;
	position:relative;
	overflow-y:hidden;
	background:url(img/panelHorizontal.png?v=2) repeat-x top;
	background:url(img/panelGradientLeft.png) no-repeat top left,url(img/panelGradientRight.png) no-repeat top right,url(img/panelHorizontal.png?v=2) repeat-x;
	padding-top:16px;
}
.storeSection:hover
{
	height:auto;
	min-height:60px;
}
.storeSection:hover:before
{
	display:block;
}
.storeSection:before,.storeSectionAddon
{
	z-index:1000;
	text-shadow:0px 1px 1px #360e00,0px -1px 1px #360e00,1px 0px 1px #360e00,-1px 0px 1px #360e00;
	font-weight:bold;
	color:#f6dab8;
	opacity:1;
	font-variant:small-caps;
}
.storeSection:before
{
	display:none;
	position:absolute;
	content:'';
	left:2px;
	top:0px;
	pointer-events:none;
}
.storeSectionAddon
{
	position:relative;
	line-height:0%;
	text-align:right;
	top:6px;
	right:4px;
}

.trophy
{
	width:48px;height:48px;margin:2px;float:left;
	cursor:pointer;
	filter:drop-shadow(0px 3px 2px #000);
	-webkit-filter:drop-shadow(0px 3px 2px #000);
	position:relative;
}
.trophy:hover
{
	top:-1px;
	/*filter:brightness(125%) drop-shadow(0px 3px 2px #000);
	-webkit-filter:brightness(125%) drop-shadow(0px 3px 2px #000);*/
}

.tag
{
	display:inline-block;
	font-family:Arial;
	font-size:10px;
}

#toggleBox
{
	position:absolute;
	right:318px;
	top:56px;
	width:300px;
	min-height:60px;
	display:none;
	z-index:50000000;
	text-align:center;
}

#upgrades:before{content:'Upgrades';}
#toggleUpgrades:before{content:'Switches';}
#techUpgrades:before{content:'Research';}
/*#vaultUpgrades{height:0px;}*/
/*#vaultUpgrades:hover{height:auto;min-height:60px;}*/
#vaultUpgrades .crate{opacity:0.5;}
#vaultUpgrades .crate{transform:scale(0.5);margin:-9px;}
#vaultUpgrades{height:30px;}
#vaultUpgrades:hover{height:auto;min-height:30px;}
#vaultUpgrades:before{content:'Vault';}
#products:before{content:'Buildings';}
#upgrades
{
}
#upgrades.hasMenu
{
	min-height:82px;
}
#products
{
	height:auto;
	min-height:60px;
}
.crate
{
	width:48px;
	height:48px;
	margin:6px;
	display:inline-block;
	cursor:pointer;
	/*opacity:0.6;*/
	position:relative;
	/*background:#000;*/
	background:rgba(0,0,0,0.25);
	float:left;
}
.crate:before
{
	content:'';
	position:absolute;
	left:-6px;
	top:-6px;
	width:60px;
	height:60px;
	display:block;
	background:url(img/upgradeFrame.png?v=2);
	background-position:0px 0px;
	z-index:10;
}

.crate.noFrame {background-color:transparent!important;margin:2px;}
.crate.noFrame:before {background:transparent;}
.crate.noFrame {opacity:0.3;}
.crate.noFrame.enabled ,.crate.noFrame:hover {opacity:1;}

.crate:before{background-position:120px 0px;}
.crate.enabled:before{background-position:0px 0px;}
.crate.enabled:hover:before,.crate.highlighted:before{background-position:60px 0px;}
/*.crate.enabled:hover:after,.crate.highlighted:after
{
	content:'';
	position:absolute;
	left:-24px;
	top:-24px;
	width:96px;
	height:96px;
	display:block;
	//background:url(img/upgradeHighlight.png);
	background:url(img/upgradeHighlight.jpg);
	mix-blend-mode:screen;
	z-index:100;
	pointer-events:none;
}*/
.crate.shadow:before{background-position:120px 60px;}
.crate.shadow.enabled:before{background-position:0px 60px;}
.crate.shadow.enabled:hover:before{background-position:60px 60px;}

.selectorCorner
{
	position:absolute;
	left:-6px;
	bottom:-6px;
	width:12px;
	height:12px;
	display:block;
	background:url(img/upgradeSelector.png);
	z-index:20;
}

.crate:hover:before
{
	z-index:20;
}

.pieTimer
{
	position:absolute;
	left:0px;
	top:0px;
	width:48px;
	height:48px;
	background:url(img/pieFill.png);
	/*background-size:864px 384px;*/
	/*background-size:864px 384px;*/
	z-index:1000;
	opacity:0.5;
}

.crate.heavenly{opacity:0.8;}
.crate.heavenly:before
{
	left:-20px;
	top:-20px;
	width:88px;
	height:88px;
	background-image:url(img/ascendSlot.png);
	background-position:88px 0px;
}
/*.crate.heavenly:after
{
	content:'';
	position:absolute;
	left:-6px;
	top:-6px;
	width:60px;
	height:60px;
	display:block;
	background:#f00;
	border-radius:30px;
	z-index:-10;
}*/
#menu .crate.heavenly {margin:12px;}
/*#menu .crate.heavenly:nth-child(even) {margin-top:16px;margin-bottom:8px;}
#menu .crate.heavenly:nth-child(3n) {margin-right:16px;margin-left:8px;}*/
.crate.heavenly,.crate.heavenly:hover{background-color:transparent;}
.icon
{
	width:48px;
	height:48px;
	display:inline-block;
	margin:0px 4px;
}
.icon,.crate,.usesIcon
{
	/*background-image:url(img/icons.png?v=20);*/
}
.icon,.crate,.shadowFilter
{
	filter:drop-shadow(0px 3px 2px #000);
	-webkit-filter:drop-shadow(0px 3px 2px #000);
}

/*filter the whole list rather than filtering each individual crate*/
.crateBox .crate,.upgradeBox .crate
{
	filter:none;
	-webkit-filter:none;
}
.crateBox,.upgradeBox
{
	filter:drop-shadow(0px 3px 2px #000);
	-webkit-filter:drop-shadow(0px 3px 2px #000);
}
.listing.crateBox
{
	overflow-y:hidden;
	padding-bottom:12px;
	margin-bottom:-12px;
}

.achievement
{
	/*opacity:0.4;*/
}
.crate.enabled
{
	opacity:1;
}
.crate.heavenly.enabled:before
{
	/*background-position:0px -60px;*/
	background-position:0px 0px;
}
.crate.heavenly:hover:before
{
	background-position:-88px 0px;
}
.crate:hover,.crate.highlighted
{
	/*background-color:#200e0a;*/
	opacity:1;
	top:-1px;

	/* for some reason having a filter update on hover makes the cursor confused about which icon it's hovering */
	/*filter:brightness(115%);
	-webkit-filter:brightness(115%);*/
}
.crate.heavenly
{
	transition:left 0.2s ease-out,top 0.2s ease-out;
	z-index:10;
}
.crate.ghosted
{
	background:transparent;
	opacity:0.2;
}
.parentLink
{
	/*background:url(img/linkPulse.png);*/
	background:url(img/linkPulse.gif);
	width:0px;
	height:8px;
	position:absolute;
	-ms-transform-origin:0% 50%;
	-webkit-transform-origin:0% 50%;
	transform-origin:0% 50%;
	opacity:0.5;
	z-index:-10;
	/*
-webkit-animation:parentLinkPulse 1s infinite linear;
   -moz-animation:parentLinkPulse 1s infinite linear;
        animation:parentLinkPulse 1s infinite linear;
	*/
}
@-webkit-keyframes parentLinkPulse{
from {background-position:0px 0px;}
	to {background-position:32px 0px;}
}
@-moz-keyframes parentLinkPulse{
from {background-position:0px 0px;}
	to {background-position:32px 0px;}
}
@keyframes parentLinkPulse{
from {background-position:0px 0px;}
	to {background-position:32px 0px;}
}

.product
{
	width:300px;
	height:64px;
	cursor:pointer;
	opacity:0.6;
	background:url(img/storeTile.jpg);
	position:relative;
	-webkit-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
	-moz-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
	-ms-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
	-o-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
	transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
}
.product:after
{
	content:'';
	display:block;
	position:absolute;
	left:0px;top:0px;right:0px;bottom:0px;
	z-index:100;
}
.product:nth-child(4n-3) {background-position:0px 64px;}
.product:nth-child(4n-2) {background-position:0px 128px;}
.product:nth-child(4n-1) {background-position:0px 192px;}
.product:hover
{
	box-shadow:0px 0px 16px #fff inset,0px 0px 1px #000;
	z-index:20;
	filter:brightness(115%);
	-webkit-filter:brightness(115%);
}
.product.enabled:active
{
	box-shadow:0px 0px 16px #000 inset;
}
.product.unlocked.enabled
{
	opacity:1;
}
.product.toggledOff
{
	opacity:0;
}
.product .icon
{
	width:64px;
	height:64px;
	position:absolute;
	left:0px;
	top:0px;
	background:url(img/buildings.png?v=4);
	background-repeat:no-repeat;
	margin:0px;
}
.product .content
{
	display:inline-block;
	position:absolute;
	left:64px;
	top:6px;
	right:0px;
	bottom:6px;
	padding:4px;
	text-shadow:0px 0px 6px #000,0px 1px 1px #000;
}
.tinyProductIcon
{
	width:64px;
	height:64px;
	left:0px;
	top:0px;
	background:url(img/buildings.png?v=4);
	background-repeat:no-repeat;
	margin:-16px;
	transform:scale(0.5);
	display:inline-block;
	border-radius:32px;
}
#buildingsMaster .tinyProductIcon
{
	cursor:pointer;
	opacity:0.8;
}
#buildingsMaster .tinyProductIcon:hover
{
	opacity:1;
}

.product .content .owned
{
	position:absolute;
	right:8px;
	bottom:5px;
	font-size:40px;
	opacity:0.2;
	color:#000;
	text-shadow:0px 0px 8px #fff;
	letter-spacing:-2.5px;
}
.product .icon
{
	opacity:0;
}
.product.unlocked .icon
{
	opacity:1;
}
.product .icon.off
{
	z-index:100;
	opacity:1;
	background:url(img/buildings.png?v=4);
	background-repeat:no-repeat;
	-webkit-transition: opacity 2s ease-out;
	-moz-transition: opacity 2s ease-out;
	-ms-transition: opacity 2s ease-out;
	-o-transition: opacity 2s ease-out;
	transition: opacity 2s ease-out;
}
.product.unlocked .icon.off
{
	opacity:0;
}
.product.locked .title {display:none;}
.product .lockedTitle {display:none;}
.product.locked .lockedTitle {display:block;}

.selling .product
{
	box-shadow:0px 0px 16px #c00 inset;
}
.selling .product:hover
{
	box-shadow:0px 0px 16px #f66 inset,0px 0px 1px #000;
}
.selling .product.enabled:active
{
	box-shadow:0px 0px 16px #f99 inset;
}

.productButtons
{
	position:absolute;
	right:-1px;
	bottom:0px;
	overflow:hidden;
	z-index:10;
}
.productButton
{
	background:rgba(0,0,0,0.25);
	box-shadow:-1px -1px 0px rgba(255,255,255,0.25),0px 0px 1px 1px rgba(0,0,0,0.5) inset;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	padding:4px 8px;
	font-size:11px;
	font-weight:bold;
	color:#ccc;
	text-shadow:1px 1px 0px #000,-1px 1px 0px #000,1px -1px 0px #000,-1px -1px 0px #000;
	cursor:pointer;
	float:right;
	position:relative;
	margin-left:2px;
	margin-top:2px;
	min-height:11px;
}
.productLevel
{
	border-top-right-radius:0px;
}
.productButton:hover
{
	background:rgba(0,0,0,0.5);
	color:#fff;
}
.productLevel
{
	width:65px;
}
.productLevel:after
{
	content:'';
	display:block;
	position:absolute;
	right:8px;
	bottom:0px;
	background:url(img/levelUp.png);
	width:33px;
	height:19px;
	opacity:0.75;
}
.productLevel:hover:after
{
	opacity:1;
}
.productButton.on{background:rgba(255,255,255,0.75);}
.productMute{display:none;}
.extraButtons .productMute{display:inline-block;}

.lumpsOnly{display:none;}
.lumpsOn .lumpsOnly{display:block;}

.storePre
{
	background:#999;
	background:url(img/darkNoise.jpg);
	box-shadow:0px 0px 4px #000 inset;
	width:300px;
	padding:4px 0px;
	position:relative;
	text-align:center;
	font-variant:small-caps;
	color:#fff;
	font-weight:bold;
	font-size:14px;
	text-shadow:0px 1px 0px #000;
}
.storePreButton
{
	opacity:0.5;
	cursor:pointer;
}
.storePreButton:hover,.storePreButton.selected
{
	text-shadow:0px 1px 0px #000,0px 0px 1px #fff,0px 0px 4px #fff;
	opacity:1;
}
#storeBulk
{
	width:240px;
	padding:0px;
	padding-left:60px;
	height:32px;
	overflow:hidden;
}
.storeBulkMode,.storeBulkAmount
{
	float:left;
}
.storeBulkMode:hover,.storeBulkAmount:hover,.storeBulkMode.selected,.storeBulkAmount.selected
{
}
.storeBulkMode
{width:60px;padding:1px 0px;}
#storeBulkBuy
{position:absolute;left:0px;top:0px;}
#storeBulkSell
{position:absolute;left:0px;bottom:1px;}
.storeBulkAmount
{width:60px;padding:9px 0px;}

#buffs
{
	position:absolute;
	top:0px;
	right:0px;
	z-index:100000;
	transform-origin:100% 0%;
	transform:scale(0.75);
}
.buff
{
	margin:12px;
}

#shimmers
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:10000000000;
	filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
	-webkit-filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
}
.shimmer
{
	cursor:pointer;
	position:absolute;
	z-index:10000000000;
	display:none;
}
.shimmer:hover
{
	filter:brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1));
	-webkit-filter:brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1));
}

.goldenCookie,.seasonPopup
{
	cursor:pointer;
	position:absolute;
	z-index:10000000000;
	display:none;
	filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
	-webkit-filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
}

.goldenCookie
{
	width:96px;
	height:96px;
	background:url(img/goldCookie.png);
}

.seasonPopup
{
	width:256px;
	height:256px;
	background:url(img/goldCookie.png) center center no-repeat;
}
.goldenCookie:hover,.seasonPopup:hover
{
	filter:brightness(125%) drop-shadow(0px 3px 4px rgba(0,0,0,0.5));
	-webkit-filter:brightness(125%) drop-shadow(0px 3px 4px rgba(0,0,0,0.5));
}

.sparkles
{
	width:128px;
	height:128px;
	background:url(img/sparkles.jpg);
	position:absolute;
	z-index:10000000000;
	display:none;
	left:0px;
	top:0px;
	mix-blend-mode:screen;
	pointer-events:none;
}

#darken
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	background:rgba(0,0,0,0.5);
	z-index:100000000;
	display:none;
}

#promptAnchor
{
	position:absolute;
	left:50%;
	top:125px;
	z-index:1000000000;
	display:none;
	width:0px;
	height:0px;
}
#prompt
{
	position:relative;
	overflow:hidden;
	width:250px;
	padding:16px;
	margin-left:-18px;
	left:-125px;
	text-align:center;
}
#promptContent{margin-top:-8px;}
#promptContent h3{margin-bottom:6px;}
#prompt h3,.prompt h3,h4,.fancyText
{
	text-align:center;
	font-weight:bold;
	font-size:14px;
	position:relative;
	font-variant:small-caps;
	display:inline-block;
}
#prompt h3,.prompt h3,.fancyText
{
	color:#ece2b6;
	text-shadow:0px 1px 0px #733726,0px 2px 0px #875626,0px 2px 1px #000,0px 2px 3px #000;
	font-family:Georgia,serif;
	font-size:15px;
}
.large .fancyText{font-size:20px;}
#prompt h3:before,#prompt h3:after,.prompt h3:before,.prompt h3:after
{
	content:'';
	display:block;
	width:39px;
	height:23px;
	position:absolute;
	top:-4px;
}
#prompt h3:before,.prompt h3:before
{
	background:url(img/featherLeft.png) no-repeat;
	left:-39px;
}
#prompt h3:after,.prompt h3:after
{
	background:url(img/featherRight.png) no-repeat;
	right:-39px;
}
#prompt textarea,#prompt input
{
	width:100%;
	margin:0px;
	position:relative;
	left:-3px;
}

#prompt.widePrompt
{
	width:500px;
	left:-250px;
}

#prompt.legacyPrompt
{
	width:400px;
	left:-200px;
}

#notes
{
	position:absolute;
	/*left:0px;
	bottom:128px;*/
	left:50%;
	margin-left:-125px;
	bottom:0px;
	z-index:100000000;
}
#notes .remaining {padding:3px;opacity:0.75;text-shadow:0px 0px 2px #000,0px 1px 0px #000;}
.note
{
	position:relative;
	overflow-y:hidden;
	width:250px;
	padding-right:16px;
	padding-bottom:8px;
	left:-18px;
}
.note .icon
{
	float:left;
	margin-left:-4px;
}
.note h3
{
	font-weight:bold;
	font-size:14px;
	/*overflow-y:hidden;*/
}
.note h5
{
	opacity:0.6;
	font-size:12px;
}
.note.haspic h3
{
	margin-top:4px;
}
.note.hasdesc h3
{
	/*border-bottom:1px solid rgba(255,255,255,0.5);
	padding-bottom:2px;*/
}
.note.nodesc h3
{
	text-align:center;
}

p
{
	text-indent:6px;
	padding:2px 0px;
}

#sectionMiddle,#sectionRight,#cookies,#bakeryNameAnchor,#backgroundCanvas,.separatorRight,.separatorLeft
{transition:opacity 1s;}
.ascendIntro #sectionMiddle,.ascendIntro #sectionRight,.ascendIntro #cookies,.ascendIntro #bakeryNameAnchor,.ascendIntro #backgroundCanvas,.ascendIntro .separatorRight,.ascendIntro .separatorLeft,.reincarnating #sectionMiddle,.reincarnating #sectionRight,.reincarnating #cookies,.reincarnating #bakeryNameAnchor,.reincarnating #backgroundCanvas,.reincarnating .separatorRight,.reincarnating .separatorLeft
{opacity:0;}
#game.ascendIntro,#ascend
{
	/*background:url(img/starbg.jpg);
	background-size:1024px 1024px;*/
	/*background:url(img/starbg.jpg),url(img/starbg.jpg);
	background-size:1024px 1024px,2048px 2048px;
	background-blend-mode:hard-light;*/
}/*animation:drift 60s linear 0s infinite;}*/
#game.ascendIntro,#game.reincarnating{background:#000;}

.ascending #sectionMiddle,.ascending #sectionRight,.ascending #sectionLeft,.ascending .separatorLeft,.ascending .separatorRight,.reincarnating  #backgroundCanvas
{display:none;opacity:0;}

#ascend
{
	display:none;
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	z-index:100000;
	cursor:move;
	/*transition:background-position 0.2s ease-out,background-size 0.1s ease-out;*/
}
#ascendBG
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:url(img/shadedBorders.png);
	background-size:100% 100%;
}
#ascendZoomable
{
	position:absolute;
	left:0px;
	top:0px;
	margin-left:50%;
	margin-top:25%;/* this should be 50%. not sure why it needs to be 25% */
}
.ascending #ascend
{display:block;}
#ascendContent
{
	position:absolute;
	left:0px;
	top:0px;
	/*transition:transform 0.1s ease-out;*/
}
#ascendHelp
{
	position:absolute;
	bottom:40px;
	width:300px;
	left:50%;
	margin-left:-150px;
	font-size:16px;
	text-align:center;
	z-index:100;
}
#ascendHelp a
{
	display:block;
	border-radius:40px;
	font-size:22px;
	opacity:0.5;
	cursor:pointer;
	text-decoration:none;
	background:#000;
	color:#fff;
	padding:8px 4px;
	width:150px;
	margin:5px auto;
}
#ascendHelp a:hover
{
	background:#fff;
	color:#000;
	opacity:0.75;
}
#ascendOverlay
{
	position:absolute;
	top:0px;
	left:50%;
	height:100%;
	z-index:100;
	text-align:center;
	filter:drop-shadow(0px 0px 4px #000);
	/*-webkit-filter:drop-shadow(0px 0px 4px #000);*/
	cursor:auto;
}

#ascendHCs .price
{font-weight:inherit;color:inherit;}

#ascendBox
{
	background:url(img/ascendBox.png);
	width:344px;
	height:162px;
	position:absolute;
	left:-172px;
	top:0px;
	text-align:center;
}
.ascendData
{
	width:60%;
	margin:2px auto;
	padding:6px;
}

#ascendInfo
{
	background:url(img/ascendInfo.png);
	width:308px;
	height:94px;
	position:absolute;
	left:-154px;
	bottom:0px;
	text-align:center;
}

@keyframes drift
{
	from {background-position:0px 0px;}
	to {background-position:2048px -1024px;}
}

.green,b.green{color:#3f0;}.green b{color:inherit;}
.red,b.red{color:#f30;}.red b{color:inherit;}
.gray,b.gray{color:#999;}.gray b{color:inherit;}

#versionNumber
{
	position:absolute;
	left:0px;
	bottom:0px;
	opacity:0.5;
	margin:8px;
	font-size:22px;
	z-index:100000000;
}

#alert
{
	display:none;
	position:fixed;
	bottom:-16px;
	left:-16px;
	z-index:100000000000;
	padding:12px 12px 24px 24px;
	font-size:14px;
	background:#990;
	border-radius:16px;
	color:#fff;
	box-shadow:0px 0px 4px #000, 0px 0px 4px #000 inset;
	text-shadow:0px 0px 2px #000;
	border:4px solid #fff;
}
#alert b {font-weight:bold;}
#alert small {font-size:80%;}

#debug
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:1000000000;
	display:none;
}
#devConsole
{
	position:relative;
	left:-2px;
	top:-2px;
	width:24px;
	height:32px;
	overflow:hidden;
	cursor:pointer;
	opacity:0.5;
	text-align:center;
	transition:opacity 0.4s;
}
#devConsole:hover
{
	width:192px;
	height:auto;
	min-width:192px;
	min-height:48px;
	overflow:auto;
	opacity:1;
}
#devConsole:hover>.icon
{
	display:none;
}
#devConsoleContent
{display:none;cursor:auto;}
#devConsole:hover>#devConsoleContent
{
	display:block;
}

#debugLog
{
	min-width:150px;
	background:rgba(0,0,0,0.5);
	background:linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.5) 90%,rgba(0,0,0,0));
	padding:4px 4px 4px 8px;
	font-size:10px;
	text-shadow:0px 1px 0px #000;
	color:#ccc;
	pointer-events:none;
}

.crisp
{
	image-rendering: optimizeSpeed;             /* Older versions of FF          */
	image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
	image-rendering: -webkit-optimize-contrast; /* Safari                        */
	image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
	image-rendering: pixelated;                 /* Future-browsers				 */
	-ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

/*show scrollbars in safari*/
::-webkit-scrollbar
{
	-webkit-appearance:none;
	width:17px;
}
::-webkit-scrollbar-track
{
	background-color:#eee;
}
::-webkit-scrollbar-thumb
{
	background-color:#bbb;
	border:2px solid #eee;
	box-shadow:0px 0px 0px 1px #999 inset;
}

/*=====================================================================================
SUPPORT
=======================================================================================*/
#support
{
	width:300px;
	text-align:center;
	margin:16px auto;
}
.supportComment
{
	font-size:10px;
	opacity:0.75;
	text-shadow:0px 0px 2px #000,0px 1px 0px #000;
	padding:8px 0px;
	text-align:center;
}
.supportPlaceholder {width:300px;height:250px;position:absolute;left:0px;top:0px;z-index:10;opacity:0.6;}
.supportPlaceholder>div {margin:20px auto;width:60%;text-align:center;background:#000;color:#fff;font-weight:bold;font-size:80%;border-radius:8px;padding:8px 4px;}
#donateBox
{
	z-index:10000000;
	position:absolute;
	right:12px;
	top:160px;
	padding:8px 4px;
	text-align:center;
	width:120px;
	display:none;
	background:rgba(128,128,255,0.25);
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.25);
	border-radius:8px;
	transition:box-shadow 0.25s,background 0.25s;
}
#donateBox:hover
{
	background:rgba(128,128,255,0.5);
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.5);
}
#donateBox.on {display:block;}

#donate
{
	display:inline-block;
}
#donateButton
{
	border:0px;
	display:inline-block;
	border-radius:4px;
	background:#fc6;
	background:linear-gradient(to bottom,#fff 0%,#fc6 45%,#f90 50%,#f66 100%);
	box-shadow:0px 0px 1px #fff inset,0px 0px 0px 1px #f66;
	text-shadow:0px -1px 0px #fc6,0px 1px 0px #f66;
	cursor:pointer;
	font-size:9px;
	font-weight:bold;
	opacity:0.9;
}
#donateButton:hover
{
	border:0px;
	box-shadow:0px 0px 4px #fff inset,0px 0px 0px 1px #f66;
	opacity:1;
}
.highlightHover:hover{filter:brightness(125%);opacity:1;}
.highlightHover:active{filter:brightness(85%);opacity:1;}

#supportSection
{
	font-size:11px;
	margin:4px 0px;
	line-height:110%;
	color:rgba(200,200,255,1);
	background:rgba(128,128,255,0.15);
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.15);
	transition:box-shadow 0.25s,background 0.25s;
}
#supportSection:hover
{
	background:rgba(128,128,255,0.2);
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.2);
}

.ifNoAds
{
	display:none;
}
.noAds .ifNoAds{display:block;}
.noAds #support,.noAds #smallSupport,.noAds .supportComment{display:none;}

/*=====================================================================================
NEW AD DISPLAY
=======================================================================================*/
/*
#sectionRight
{
	right:160px;
}
#sectionMiddle
{
	right:478px;
}
#sectionAd
{
	height:100%;
	position:absolute;
	top:0px;
	right:0px;
	overflow-x:hidden;
	width:160px;
	background:url(img/darkNoise.jpg);
}
.separatorRight
{
	right:477px;
}
#sectionAd .supportPlaceholder {width:160px;}
*/

/*=====================================================================================
STOP THE FANCY
=======================================================================================*/
.noFancy *
{
	text-shadow:none!important;
	box-shadow:none!important;
}
.noFancy .price
{
	text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
}
.noFilters *
{
	filter:none!important;
	-webkit-filter:none!important;
}

/*=====================================================================================
MOBILE
=======================================================================================*/
.mobile #sectionLeft,.mobile #sectionMiddle,.mobile #sectionRight
{
	width:100%;
	position:absolute;
	left:0px;
	top:128px;
	right:0px;
	bottom:64px;
	display:none;
}
.mobile .separatorLeft,.mobile .separatorRight
{display:none;}

.mobile .focusLeft #sectionLeft{display:block;}
.mobile .focusMiddle #sectionMiddle{display:block;}
.mobile .focusRight #sectionRight{display:block;}
.mobile .focusMenu #sectionMiddle{display:block;}
.mobile #sectionMiddle
{
	margin:0px;
	padding:0px;
}
.mobile #storeTitle,.mobile #upgrades,.mobile #toggleUpgrades,.mobile #techUpgrades
{
	width:100%;
}
.mobile .product
{
	width:100%;
	background-size:100% 400%;
}

.mobile #game{top:0px;}
.mobile #topBar,.mobile #versionNumber{display:none;}

#focusButtons
{
	display:none;
	position:fixed;
	left:0px;
	bottom:0px;
	height:64px;
	width:100%;
	background:url(img/darkNoise.jpg);
	z-index:1000000;
	font-size:32px;
}
#focusButtons:before
{
	content:'';
	display:block;
	position:absolute;
	left:0px;
	top:-16px;
	background:url(img/blackGradient.png) repeat-x bottom;
	background-size:100% 100%;
	width:100%;
	height:16px;
	opacity:0.5;
	pointer-events:none;
}
#focusButtons div
{
	width:25%;
	height:50%;
	cursor:pointer;
	float:left;
	background:url(img/buttonTile.jpg);
	background-size:100% 400%;
	padding:16px 0px;
	text-align:center;
	opacity:0.5;
}
#focusButtons div:nth-child(4n-3) {background-position:0px 100%;}
#focusButtons div:nth-child(4n-2) {background-position:0px 200%;}
#focusButtons div:nth-child(4n-1) {background-position:0px 300%;}
#focusButtons div:hover
{
	box-shadow:0px 0px 16px #fff inset,0px 0px 1px #000;
	z-index:20;
}
#focusButtons div:active
{
	box-shadow:0px 0px 16px #000 inset;
}
.focusLeft #focusButtons #focusLeft,.focusMiddle #focusButtons #focusMiddle,.focusRight #focusButtons #focusRight,.focusMenu #focusButtons #focusMenu
{
	opacity:1;
	z-index:20;
	box-shadow:0px 0px 8px #fff;
}

#compactOverlay
{
	display:none;
	position:fixed;
	left:0px;
	top:0px;
	height:128px;
	width:100%;
	background:url(img/darkNoise.jpg);
	z-index:1000000;
	text-align:center;
	font-size:16px;
}
#compactCommentsText
{
	padding:8px 0px;
	opacity:0.8;
	position:absolute;
	width:100%;
	text-align:center;
	bottom:16px;
	left:0px;
}
#compactCookies
{
	padding:8px 0px;
	position:absolute;
	width:100%;
	height:32px;
	top:0px;
	left:0px;
	font-size:24px;
	text-shadow:0px 0px 12px rgba(255,255,255,0.5);
	background:rgba(255,255,255,0.05);
}

.mobile .row {padding-bottom:16px;}

.mobile #comments, .mobile #cookies {display:none;}
.mobile #focusButtons, .mobile #compactOverlay/*, .mobile #buildingsTitle*/
{display:block;}

/**{overflow:hidden!important;}*/


code:
function ajax(url,callback){
	var ajaxRequest;
	try{ajaxRequest = new XMLHttpRequest();} catch (e){try{ajaxRequest=new ActiveXObject('Msxml2.XMLHTTP');} catch (e) {try{ajaxRequest=new ActiveXObject('Microsoft.XMLHTTP');} catch (e){alert("Something broke!");return false;}}}
	if (callback){ajaxRequest.onreadystatechange=function(){if(ajaxRequest.readyState==4){callback(ajaxRequest.responseText);}}}
	ajaxRequest.open('GET',url+'&nocache='+(new Date().getTime()),true);ajaxRequest.send(null);
}


code:
import resources from '../utils/resources.js';

class Customer {
  constructor(route, resLeft, resRight) {
    this.x = route[0].x;
    this.y = route[0].y;
    this.dst = 1 % route.length;
    this.size = 40;
    this.resLeft = resLeft;
    this.resRight = resRight;
    this.route = route;
    this.speed = 80;
    this.speedToDst = this.getXySpeed();
    this.timeOffset = Math.floor(Math.random() * 600);
    this.rotation = this.speedToDst.dir;
    this.infectingRadius = 50;
  }

  getBoundingBox() {
    return {
      x: this.x - this.size / 2,
      y: this.y - this.size / 2,
      width: this.size,
      height: this.size,
    };
  }

  getInfectingArea() {
    return {
      x: this.x,
      y: this.y,
      r: this.infectingRadius,
    };
  }

  getXySpeed() {
    let dir = Math.atan2(this.route[this.dst].y - this.y, this.route[this.dst].x - this.x);
    return {
      vx: this.speed * Math.cos(dir),
      vy: this.speed * Math.sin(dir),
      dir: dir,
    };
  }

  update(dt) {
    // move according to route
    let distFromDst = Math.hypot(this.route[this.dst].x - this.x, this.route[this.dst].y - this.y);
    if (distFromDst <= this.speed * dt) { // Reaching destination
      this.x = this.route[this.dst].x;
      this.y = this.route[this.dst].y;
      this.dst = (this.dst + 1) % this.route.length;
      this.speedToDst = this.getXySpeed();
      this.rotation = this.speedToDst.dir;
    } else {
      this.x += this.speedToDst.vx * dt;
      this.y += this.speedToDst.vy * dt;
    }
    this.res = ((Date.now() + this.timeOffset) % 600 < 300) ? this.resLeft : this.resRight;
  }

  render(ctx) {
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle = 'rgba(0, 180, 0, 0.4)';
    ctx.arc(this.x, this.y, this.infectingRadius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.translate(this.x, this.y);
    ctx.rotate(this.rotation + Math.PI / 2);
    let img = resources.get(this.res);
    ctx.drawImage(img, -img.width / 2, -img.height / 2);
    ctx.restore();
  }
}

export default Customer;


code:
import resources from '../utils/resources.js';

class Entity {
  constructor(x, y, width, height, res = null) {
    this.rect = {
      x: x,
      y: y,
      width: width,
      height: height,
    }
    this.res = res;
  }

  getBoundingBox() {
    return this.rect;
  }

  render(ctx) {
    if (this.res) {
      // console.log(this.constructor.name);
      let img = resources.get(this.res);
      ctx.drawImage(img, this.rect.x, this.rect.y, this.rect.width, this.rect.height);
    } else { // Default rendering (missing resource)
      ctx.fillStyle = 'white';
      ctx.strokeStyle = 'black';
      ctx.fillRect(this.rect.x, this.rect.y, this.rect.width, this.rect.height);
      ctx.strokeRect(this.rect.x, this.rect.y, this.rect.width, this.rect.height);
    }
  }
}

export default Entity;


code:
import Entity from './entity.js';
import resources from '../utils/resources.js';

class Obstacle extends Entity {
  constructor(x, y, width, height, style = { color: '#8b5a3b', shade: true }) {
    super(x, y, width, height);
    this.style = style;
  }

  render(ctx) {
    if (this.style && this.style.src) {
      let img = resources.get(this.style.src);
      ctx.drawImage(img, this.rect.x, this.rect.y, this.rect.width, this.rect.height);
    } else {
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = '#000000';
      ctx.fillStyle = this.style.color;
      ctx.rect(this.rect.x, this.rect.y, this.rect.width, this.rect.height);
      ctx.fill();
      ctx.stroke();
      ctx.restore();

      if (this.style.shade) {
        ctx.fillStyle = 'rgba(255,255,255,0.1)';
        ctx.fillRect(this.rect.x + this.rect.width - 20, this.rect.y, 10, this.rect.height);
      }
    }
  }
}

export default Obstacle;


code:
import Entity from './entity.js';

class Piece extends Entity {
  constructor(x, y, size, res) {
    super(x - size / 2, y - size / 2, size, size, res);

    this.arc = {
      x: x,
      y: y,
      r: size / 2,
    };
  }

  getBoundingArc() {
    return this.arc;
  }
}

export default Piece;


code:
import keyboard from '../utils/keyboard.js';
import resources from '../utils/resources.js';

class Player {
  constructor(x, y, rotation, options = {}) {
    this.x = x;
    this.y = y;
    this.rotation = rotation;
    this.size = 38; // A bit smaller than the player's assets (40x40)
    this.arcSize = 17;
    this.speed = 150;
    this.sick = false;

    for (const key in options) {
      this[key] = options[key];
    }
  }

  getBoundingBox() {
    return {
      x: this.x - this.size / 2,
      y: this.y - this.size / 2,
      width: this.size,
      height: this.size,
    };
  }

  getBoundingArc() {
    return {
      x: this.x,
      y: this.y,
      r: this.arcSize,
    };
  }

  update(dt, validator) {
    let newPos = null;
    let dirKey = null;

    let recentKey = keyboard.getRecentDown();
    if (recentKey && recentKey.substr(0, 5) == "Arrow") {
      dirKey = recentKey;
    } else {
      dirKey = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].find(key => keyboard.isDown(key));
    }

    if (dirKey == 'ArrowUp') {
      newPos = { x: this.x, y: this.y - this.speed * dt, r: 0 };
    } else if (dirKey == 'ArrowDown') {
      newPos = { x: this.x, y: this.y + this.speed * dt, r: 180 };
    } else if (dirKey == 'ArrowLeft') {
      newPos = { x: this.x - this.speed * dt, y: this.y, r: 270 };
    } else if (dirKey == 'ArrowRight') {
      newPos = { x: this.x + this.speed * dt, y: this.y, r: 90 };
    }

    if (newPos) {
      this.res = (Date.now() % 600 < 300) ? 'res/imgs/player-left.svg' : 'res/imgs/player-right.svg';
      this.rotation = newPos.r;

      let newBoundingBox = {
        x: newPos.x - this.size / 2,
        y: newPos.y - this.size / 2,
        width: this.size,
        height: this.size,
      };
      if (validator(newBoundingBox)) {
        this.x = newPos.x;
        this.y = newPos.y;
      }
    } else {
      this.res = 'res/imgs/player.svg';
    }
  }

  toggleSick() {
    this.sick = !this.sick;
  }

  render(context) {
    context.save();
    if (this.sick) {
      context.beginPath();
      context.fillStyle = 'rgba(0, 180, 0, 0.4)';
      context.arc(this.x, this.y, 50, 0, 2 * Math.PI);
      context.fill();
    }

    context.translate(this.x, this.y);
    context.rotate(this.rotation * Math.PI / 180);
    let img = resources.get(this.res);
    context.drawImage(img, -img.width / 2, -img.height / 2);
    context.restore();
  }
}

export default Player;


code:
import Piece from './piece.js';
import resources from '../utils/resources.js';

class Seller extends Piece {
  constructor(x, y) {
    super(x, y, 40, 'res/imgs/seller.svg');
    this.x = x;
    this.y = y;
    this.popupImg = null;
    this.popupOffset = 0;
  }

  showPopup(res, offsetX = 0) {
    if (this.popupImg) {
      return;
    }
    this.popupImg = resources.get(res);
    this.popupOffset = offsetX;
  }

  hidePopup() {
    this.popupImg = null;
  }

  render(ctx) {
    super.render(ctx);
    if (this.popupImg) {
      ctx.drawImage(this.popupImg, this.x - this.popupImg.width + this.popupOffset, this.y - this.popupImg.height - 10);
    }
  }
}

export default Seller;


code:
import resources from './utils/resources.js';
import sounds from './utils/sounds.js';
import { boxCollides, boxContains, arcCollides } from './utils/collision.js';

const delay = t => new Promise(res => setTimeout(res, t));

class Game extends HTMLElement {
  constructor() {
    super();
    this.shadowDOM = this.attachShadow({ mode: "open" });
    this.shadowDOM.innerHTML = `

        <canvas width="1024" height="576"></canvas>

          Entrance
          Exit

    `
      ;

    this.canvas = this.shadowDOM.querySelector('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.ready = false;
    this.active = false;
    this.level = null;
    this.floorPattern = null;
    this.prevLoopTime = null;

    this.requestId = null;
    this.signs = this.shadowDOM.querySelector('.signs-container');
  }

  async init() {
    // Load background
    await resources.loadImage('res/imgs/floor.png');
    this.floorPattern = this.ctx.createPattern(resources.get('res/imgs/floor.png'), 'repeat');
    this.reset();

    // Load game resources
    await resources.loadImages([
      'res/imgs/freezer.png',
      'res/imgs/freezer-90.png',
      'res/imgs/vegetables.png',
      'res/imgs/vegetables-90.png',
      'res/imgs/vegetables-180.png',
      'res/imgs/virus.svg',
      'res/imgs/closed.png',

      // Player
      'res/imgs/player.svg',
      'res/imgs/player-left.svg',
      'res/imgs/player-right.svg',

      // Seller
      'res/imgs/seller.svg',
      'res/imgs/seller-forget.png',
      'res/imgs/seller-goodbye.png',

      // Buyers
      'res/imgs/buyer1-left.svg', 'res/imgs/buyer1-right.svg',
      'res/imgs/buyer2-left.svg', 'res/imgs/buyer2-right.svg',
      'res/imgs/buyer3-left.svg', 'res/imgs/buyer3-right.svg',
      'res/imgs/buyer4-left.svg', 'res/imgs/buyer4-right.svg',

      // Items
      'res/imgs/items/apple.svg',
      'res/imgs/items/avocado.svg',
      'res/imgs/items/bread.svg',
      'res/imgs/items/broccoli.svg',
      'res/imgs/items/cabbage.svg',
      'res/imgs/items/carrot.svg',
      'res/imgs/items/cereal.svg',
      'res/imgs/items/honey.svg',
      'res/imgs/items/juice.svg',
      'res/imgs/items/milk.svg',
      'res/imgs/items/paper.svg',
      'res/imgs/items/tomato.svg',
    ]);

    document.addEventListener('keydown', evt => {
      if (!this.level) return;
      let playerBB = this.level.player.getBoundingBox();
      if (evt.key == ' ' && !evt.repeat) {
        let itemsBefore = this.level.items.length;
        this.level.items = this.level.items.filter(item => {
          return !boxCollides(playerBB, item.getBoundingBox());
        });
        if (this.level.items.length < itemsBefore) {
          this.dispatchEvent(new CustomEvent('point'));
        } else {
          sounds.play('res/sounds/illegal.mp3', 0.7);
        }
      }
    });

    this.ready = true;
  }

  reset() {
    this.active = false;
    this.ctx.fillStyle = this.floorPattern;
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    this.signs.style.visibility = 'hidden';
  }

  loadLevel(levelBuilder) {
    this.level = levelBuilder();
    this.active = true;
    this.signs.style.visibility = 'visible';

    this.prevLoopTime = Date.now();
    this.mainLoop();
  }

  // The main this.level loop
  mainLoop() {
    if (!this.active) {
      return;
    }
    let now = Date.now();
    let dt = (now - this.prevLoopTime) / 1000.0;
    this.update(dt);
    this.render();

    this.prevLoopTime = now;
    this.requestId = window.requestAnimationFrame(() => this.mainLoop());
  };

  update(dt) {
    // Update entities
    this.level.player.update(dt, (boundingBox) => { // validator
      let collides = false;
      for (let obstacle of this.level.obstacles) {
        if (boxCollides(boundingBox, obstacle.getBoundingBox())) {
          collides = true;
          break;
        }
      }
      let inStore = boxContains({ x: 0, y: 0, width: this.canvas.width, height: this.canvas.height }, boundingBox);
      return !collides && inStore;
    });
    for (let customer of this.level.customers) {
      customer.update(dt);
    }

    // Test loss
    for (let customer of this.level.customers) {
      if (arcCollides(this.level.player.getBoundingArc(), customer.getInfectingArea())) {
        this.stop();
        this.dispatchEvent(new CustomEvent('loss', { detail: { cough: true } }));
        this.playerBlinkSick();
        break;
      }
    }
    for (let virus of this.level.viruses) {
      if (arcCollides(this.level.player.getBoundingArc(), virus.getBoundingArc())) {
        this.stop();
        this.dispatchEvent(new CustomEvent('loss', { detail: { cough: false } }));
        this.playerBlinkSick();
        break;
      }
    }

    // Test win
    if (boxCollides(this.level.player.getBoundingBox(), this.level.exit.getBoundingBox())) {
      if (this.level.items.length == 0) {
        this.stop();
        this.dispatchEvent(new CustomEvent('win'));
        delay(200).then(() => {
          this.level.seller.showPopup('res/imgs/seller-goodbye.png', -10);
          this.render();
        });
      } else if (!this.level.exit.touching) {
        sounds.play('res/sounds/illegal.mp3');
        this.level.seller.showPopup('res/imgs/seller-forget.png', 30);
        this.level.exit.touching = true;
      }
    } else if (this.level.exit.touching) {
      this.level.exit.touching = null;
      this.level.seller.hidePopup();
    }
  }

  render() {
    this.ctx.fillStyle = this.floorPattern;
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

    // Draw entities
    if (this.level.fluffs) {
      for (let fluff of this.level.fluffs) {
        fluff.render(this.ctx);
      }
    }

    for (let customer of this.level.customers) {
      customer.render(this.ctx);
    }

    this.level.player.render(this.ctx);

    for (let virus of this.level.viruses) {
      virus.render(this.ctx);
    }

    for (let obstacle of this.level.obstacles) {
      obstacle.render(this.ctx);
    }
    this.level.exit.render(this.ctx);

    for (let item of this.level.items) {
      item.render(this.ctx);
    }

    this.level.seller.render(this.ctx);
  }

  stop() {
    this.active = false;
  }

  async playerBlinkSick() {
    for (let i = 0; i < 3; i++) {
      await delay(300);
      this.level.player.toggleSick();
      this.render();
    }
  }
}

customElements.define('x-game', Game);


code:
body {
  position: relative;
  text-align: center;
  margin-top: 24px;
  user-select: none;
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
}

.logo {
  font-size: 78px;
  letter-spacing: 6px;
}

.logo img {
  width: 62px;
  vertical-align: bottom;
  margin: 0 -2px 7px -6px;
}

#error_msg {
  display: none;
  font-size: 30px;
  margin: 40px 0;
}

#container {
  display: inline-block;
  position: relative;
  margin-top: 10px;
}

#loading {
  position: absolute;
  width: 100%;
  font-family: cursive;
  font-size: 50px;
  margin-top: 140px;
}

x-game {
  display: inline-block;
}

#main_screen {
  position: absolute;
  width: 100%;
  text-align: center;
}

#win_message {
  margin-top: 45px;
  font-size: 80px;
  line-height: 92px;
  visibility: hidden;
}

#start_button {
  display: inline-block;
  --width: 260px;
  width: var(--width);
  margin-top: 50px;
  padding: 8px 0;
  background-color: #7ce96d;
  border: 1px solid black;
  border-radius: 60px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: #333;
  font-size: 70px;
  cursor: pointer;
  letter-spacing: 2px;
}

#howto_button {
  display: inline-block;
  margin-top: 18px;
  font-size: 24px;
  letter-spacing: 1px;
  cursor: pointer;
}

#instructions {
  display: inline-block;
  margin-top: 16px;
  border-radius: 12px;
  background-color: #0009;
  opacity: 0;
  transform: scale(0.01);
  transform-origin: top center;
  transition: opacity 0.4s, transform 0.4s;
}

#instructions.open {
  opacity: 1;
  transform: scale(1);
}

.share-buttons {
  position: absolute;
  width: 100%;
  top: 530px;
}

.credits {
  font-size: 16px;
  color: #666;
}

.credits>div {
  margin-bottom: 8px;
}

a {
  color: #000;
}

#top_row {
  position: relative;
  visibility: hidden;
}

.sound-button {
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 4px;
  padding-left: 2px;
  cursor: pointer;
}

.speaker {
  height: 20px;
  vertical-align: bottom;
  margin-right: 2px;
}

.speaker-text {
  display: inline-block;
  font-size: 20px;
  line-height: 20px;
}

#lives {
  position: absolute;
  right: 0;
  bottom: -1px;
}

.life-icon {
  transition: transform 0.6s, opacity 0.6s;
  height: 26px;
}

.life-icon.used {
  opacity: 0;
  transform: scale(0.01);
}

#level_label {
  display: inline-block;
  font-size: 22px;
  line-height: 24px;
  margin: -2px 0 3px 0;
}


code:
  <meta charset="utf-8" />
  <meta name="description" content="CoronaMarket is a free online game. Collect groceries, avoid the corona virus.">
  <meta name="keywords" content="CoronaMarket, Corona, Coronavirus, Game">
  <meta name="author" content="Dor D. Cohen">

  <meta property="og:title" content="CoronaMarket">
  <meta property="og:image" content="http://coronamarket.cc/res/og_high.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1280">
  <meta property="og:image:height" content="640">

  <title>Corona Market</title>
  <link rel="icon" href="favicon.ico" />
  <link rel="stylesheet" type="text/css" href="index.css">
  <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet">

    Crona Mrket

        Mute

        Unmute

      Level 1

Loading...

Well done!

Start

How to play?

    <x-game></x-game>

        Follow @dordchn

        Star

        Issue

Sound effects & music obtained from zapsplat

Icons made by Freepik from www.flaticon.com


code:
import level1 from './levels/level1.js';
import level2 from './levels/level2.js';
import level3 from './levels/level3.js';
import level4 from './levels/level4.js';
import level5 from './levels/level5.js';
import level6 from './levels/level6.js';
import sounds from './utils/sounds.js';

const delay = t => new Promise(res => setTimeout(res, t));

const loadingMessage = document.querySelector('#loading');
const mainScreen = document.querySelector('#main_screen');
const startButton = document.querySelector('#start_button');
const howtoButton = document.querySelector('#howto_button');
const instructions = document.querySelector('#instructions');
const topRow = document.querySelector('#top_row');
const livesContainer = document.querySelector('#lives');
const levelLabel = document.querySelector('#level_label');
const winMessage = document.querySelector('#win_message');

const levels = [level1, level2, level3, level4, level5, level6];
let levelIndex = 0;

let game = document.querySelector('x-game');
game.init().then(() => {
  mainScreen.style.visibility = '';
  loadingMessage.style.display = 'none';
});

game.addEventListener('point', async () => {
  await sounds.play('res/sounds/point.mp3', 0.7);
});

game.addEventListener('win', async () => {
  gtag('event', 'win', { 'event_category': 'Level', 'event_label': 'Level' + (levelIndex + 1) });
  sounds.stopBackground();
  await sounds.play('res/sounds/win.mp3', 0.7);
  levelIndex = (levelIndex + 1) % levels.length;
  if (levelIndex == 0) { // Completed game
    gtag('event', 'win', { 'event_category': 'Game' });
    winMessage.style.visibility = 'visible';
    loadMenu();
  } else {
    loadLevel(levelIndex);
  }
});

game.addEventListener('loss', async evt => {
  gtag('event', 'loss', { 'event_category': 'Level', 'event_label': 'Level' + (levelIndex + 1) });
  let lives = livesContainer.querySelectorAll('img:not(.used)');
  sounds.stopBackground();
  if (lives.length > 0) {
    if (evt.detail.cough) {
      await sounds.play('res/sounds/cough-boy9.mp3');
      await sounds.play('res/sounds/life.mp3', 0.7);
    } else {
      await sounds.play('res/sounds/life.mp3', 0.7);
      await delay(800);
    }

    lives[0].classList.add('used');
    loadLevel(levelIndex);
  } else {
    gtag('event', 'loss', { 'event_category': 'Game', 'event_label': 'Level' + (levelIndex + 1) });
    await sounds.play('res/sounds/loss.mp3', 0.7);
    loadMenu();
    levelIndex = 0;
  }
});

function loadMenu() {
  game.reset();
  topRow.style.visibility = 'hidden';
  mainScreen.style.display = '';
  Array.from(livesContainer.children).forEach(life => life.classList.add('used'));
}

startButton.addEventListener('click', async () => {
  if (!game.ready) {
    return;
  }
  if (window.levelIndex) { // Allow changing the level from developer console
    levelIndex = window.levelIndex;
    window.levelIndex = undefined;
  }
  gtag('event', 'start', { 'event_category': 'Game' });
  Array.from(livesContainer.children).forEach(life => life.classList.remove('used'));
  mainScreen.style.display = 'none';
  winMessage.style.visibility = '';
  loadLevel(levelIndex);
  topRow.style.visibility = 'visible';
});

howtoButton.addEventListener('click', () => {
  instructions.classList.toggle('open');
});

const muteButton = document.querySelector('#mute_button');
const unmuteButton = document.querySelector('#unmute_button');

muteButton.addEventListener('click', function () {
  sounds.mute();
  muteButton.style.display = 'none';
  unmuteButton.style.display = '';
});

unmuteButton.addEventListener('click', function () {
  sounds.unmute();
  unmuteButton.style.display = 'none';
  muteButton.style.display = '';
});

function loadLevel(levelIndex) {
  levelLabel.innerText = `Level ${levelIndex + 1}`;
  game.loadLevel(levels[levelIndex]);
  sounds.playBackground();
}


code:
import Player from '../entities/player.js';
import Obstacle from '../entities/obstacle.js';
import Piece from '../entities/piece.js';
import Customer from '../entities/customer.js';
import Seller from '../entities/seller.js';

export default () => {
  return {
    player: new Player(/*x=*/ 140, /*y=*/ 530, /*rotation=*/ 0),
    obstacles: [
      new Obstacle(80, 556, 120, 20, { color: 'black' }), // Entrance
      new Obstacle(934, 420, 30, 120, { color: '#ddd' }), // Desk
      new Obstacle(40, 0, 440, 80, { src: 'res/imgs/vegetables.png' }), // Vegetables
      new Obstacle(600, 50, 300, 100, { src: 'res/imgs/freezer.png' }), // Freezer

      new Obstacle(600, 220, 300, 40), // Shelf below freezer
      new Obstacle(984, 0, 40, 400), // Right shelf
      new Obstacle(480, 0, 40, 160),

      // Bottom shelves
      new Obstacle(360, 456, 40, 120),
      new Obstacle(480, 336, 40, 240),
      new Obstacle(600, 336, 40, 240),
      new Obstacle(720, 336, 40, 240),

      new Obstacle(0, 0, 40, 576), // Left shelf
    ],
    items: [
      new Piece(40, 200, 40, 'res/imgs/items/cereal.svg'),
      new Piece(640, 480, 40, 'res/imgs/items/paper.svg'),
      new Piece(700, 50, 40, 'res/imgs/items/milk.svg'),
    ],
    viruses: [],
    customers: [
      new Customer([
        { x: 560, y: 25 },
        { x: 940, y: 25 },
        { x: 940, y: 180 },
        { x: 560, y: 180 },
      ], 'res/imgs/buyer1-left.svg', 'res/imgs/buyer1-right.svg'),
      new Customer([
        { x: 560, y: 360 },
        { x: 560, y: 550 },
      ], 'res/imgs/buyer3-left.svg', 'res/imgs/buyer3-right.svg'),
    ],
    seller: new Seller(990, 480),
    exit: new Obstacle(844, 556, 120, 20, { color: 'black' }),
  };
};


code:
import Player from '../entities/player.js';
import Obstacle from '../entities/obstacle.js';
import Piece from '../entities/piece.js';
import Customer from '../entities/customer.js';
import Seller from '../entities/seller.js';

export default () => {
  return {
    player: new Player(/*x=*/ 140, /*y=*/ 530, /*rotation=*/ 0),
    obstacles: [
      new Obstacle(80, 556, 120, 20, { color: 'black' }), // Entrance
      new Obstacle(934, 420, 30, 120, { color: '#ddd' }), // Desk
      new Obstacle(1024 - 80, -16, 80, 400, { src: 'res/imgs/vegetables-90.png' }), // Vegetables
      new Obstacle(40, 100, 300, 100, { src: 'res/imgs/freezer.png' }), // Freezer

      new Obstacle(0, 0, 40, 576), // Left shelf
      new Obstacle(40, 0, 540, 40), // Top shelf

      new Obstacle(540, 100, 40, 180), // Middle shelf 1
      new Obstacle(540, 366, 40, 576 - 366), // Middle shelf 2

      new Obstacle(700, 0, 40, 280), // Right shelf
      new Obstacle(700, 366, 1024 - 700, 40), // Right horizontal

      new Obstacle(240, 576 - 40, 540 - 240, 40), // Bottom
      new Obstacle(400, 420, 540 - 400, 40), // Bottom parallel
    ],
    items: [
      new Piece(530, 390, 40, 'res/imgs/items/honey.svg'),
      new Piece(530, 500, 40, 'res/imgs/items/bread.svg'),
      new Piece(940, 220, 40, 'res/imgs/items/cabbage.svg'),
    ],
    viruses: [
      new Piece(560, 322, 40, 'res/imgs/virus.svg'),
    ],
    customers: [
      new Customer([
        { x: 500, y: 380 },
        { x: 370, y: 380 },
        { x: 370, y: 500 },
        { x: 500, y: 500 },
        { x: 370, y: 500 },
        { x: 370, y: 380 },
      ], 'res/imgs/buyer4-left.svg', 'res/imgs/buyer4-right.svg'),
      new Customer([
        { x: 70, y: 70 },
        { x: 370, y: 70 },
        { x: 370, y: 170 },
        { x: 370, y: 70 },
      ], 'res/imgs/buyer3-left.svg', 'res/imgs/buyer3-right.svg'),
      new Customer([
        { x: 910, y: 110 },
        { x: 910, y: 320 },
      ], 'res/imgs/buyer1-left.svg', 'res/imgs/buyer1-right.svg'),
    ],
    seller: new Seller(990, 480),
    exit: new Obstacle(844, 556, 120, 20, { color: 'black' }),
  };
};


code:
import Player from '../entities/player.js';
import Obstacle from '../entities/obstacle.js';
import Piece from '../entities/piece.js';
import Customer from '../entities/customer.js';
import Seller from '../entities/seller.js';

export default () => {
  return {
    player: new Player(/*x=*/ 140, /*y=*/ 530, /*rotation=*/ 0),
    obstacles: [
      new Obstacle(80, 556, 120, 20, { color: 'black' }), // Entrance
      new Obstacle(934, 420, 30, 120, { color: '#ddd' }), // Desk
      new Obstacle(320, 576 - 80, 400, 80, { src: 'res/imgs/vegetables-180.png' }), // Vegetables
      new Obstacle(370, 50, 300, 100, { src: 'res/imgs/freezer.png' }), // Freezer

      // Vertical - Up
      new Obstacle(0, 0, 40, 576),
      new Obstacle(280, 0, 40, 300),
      new Obstacle(720, 0, 40, 184),
      new Obstacle(984, 0, 40, 400),

      // Vertical - Bottom
      new Obstacle(280, 376, 40, 200),
      new Obstacle(720, 260, 40, 316),

      // Horizontal
      new Obstacle(40, 0, 240, 40),
      new Obstacle(760, 0, 224, 40),
      new Obstacle(320, 260, 140, 40),
      new Obstacle(720 - 140, 260, 140, 40),
    ],
    items: [
      new Piece(160, 40, 40, 'res/imgs/items/paper.svg'),
      new Piece(660, 490, 40, 'res/imgs/items/tomato.svg'),
      new Piece(870, 40, 40, 'res/imgs/items/juice.svg'),
    ],
    viruses: [
      new Piece(360, 230, 40, 'res/imgs/virus.svg'),
      new Piece(680, 330, 40, 'res/imgs/virus.svg'),
      new Piece(798, 78, 40, 'res/imgs/virus.svg'),
      new Piece(942, 78, 40, 'res/imgs/virus.svg'),
    ],
    customers: [
      new Customer([
        { x: 490, y: 180 },
        { x: 490, y: 460 },
        { x: 550, y: 460 },
        { x: 550, y: 180 },
      ], 'res/imgs/buyer2-left.svg', 'res/imgs/buyer2-right.svg'),
      new Customer([
        { x: 80, y: 260 },
        { x: 240, y: 260 },
      ], 'res/imgs/buyer3-left.svg', 'res/imgs/buyer3-right.svg'),
      new Customer([
        { x: 785, y: 158 },
        { x: 955, y: 158 },
      ], 'res/imgs/buyer3-left.svg', 'res/imgs/buyer3-right.svg'),
    ],
    seller: new Seller(990, 480),
    exit: new Obstacle(844, 556, 120, 20, { color: 'black' }),
  };
};


code:
import Player from '../entities/player.js';
import Obstacle from '../entities/obstacle.js';
import Piece from '../entities/piece.js';
import Customer from '../entities/customer.js';
import Seller from '../entities/seller.js';

export default () => {
  return {
    player: new Player(/*x=*/ 140, /*y=*/ 530, /*rotation=*/ 0),
    obstacles: [
      new Obstacle(80, 556, 120, 20, { color: 'black' }), // Entrance
      new Obstacle(934, 420, 30, 120, { color: '#ddd' }), // Desk
      new Obstacle(312 + 6, 0, 400, 80, { src: 'res/imgs/vegetables.png' }), // Vegetables
      new Obstacle(458, 226, 100, 300, { src: 'res/imgs/freezer-90.png' }), // Freezer

      // Vertical
      new Obstacle(0, 0, 40, 576),
      new Obstacle(240, 160, 40, 576 - 160),
      new Obstacle(488, 80, 40, 146),
      new Obstacle(744, 160, 40, 576 - 160),
      new Obstacle(984, 0, 40, 400),

      // Horizontal
      new Obstacle(40, 0, 278, 40),
      new Obstacle(718, 0, 266, 40),
    ],
    items: [
      new Piece(70, 70, 40, 'res/imgs/items/broccoli.svg'),
      new Piece(724, 380, 40, 'res/imgs/items/juice.svg'),
      new Piece(954, 60, 40, 'res/imgs/items/bread.svg'),
    ],
    viruses: [
      // Left
      new Piece(310, 260, 40, 'res/imgs/virus.svg'),
      new Piece(426, 260, 40, 'res/imgs/virus.svg'),
      new Piece(368, 375, 40, 'res/imgs/virus.svg'),
      new Piece(310, 490, 40, 'res/imgs/virus.svg'),
      new Piece(426, 490, 40, 'res/imgs/virus.svg'),
      // Right
      new Piece(810, 180, 40, 'res/imgs/virus.svg'),
      new Piece(855, 180, 40, 'res/imgs/virus.svg'),
      new Piece(870, 280, 40, 'res/imgs/virus.svg'),
      new Piece(915, 280, 40, 'res/imgs/virus.svg'),
      new Piece(960, 280, 40, 'res/imgs/virus.svg'),
      new Piece(810, 380, 40, 'res/imgs/virus.svg'),
      new Piece(855, 380, 40, 'res/imgs/virus.svg'),
    ],
    customers: [
      // Left column
      new Customer([
        { x: 80, y: 450 },
        { x: 200, y: 450 },
      ], 'res/imgs/buyer1-left.svg', 'res/imgs/buyer1-right.svg'),
      new Customer([
        { x: 200, y: 350 },
        { x: 80, y: 350 },
      ], 'res/imgs/buyer2-left.svg', 'res/imgs/buyer2-right.svg'),
      new Customer([
        { x: 80, y: 250 },
        { x: 200, y: 250 },
      ], 'res/imgs/buyer3-left.svg', 'res/imgs/buyer3-right.svg'),
      // Right column
      new Customer([
        { x: 704, y: 280 },
        { x: 584, y: 280 },
      ], 'res/imgs/buyer4-left.svg', 'res/imgs/buyer4-right.svg'),
      new Customer([
        { x: 584, y: 380 },
        { x: 704, y: 380 },
      ], 'res/imgs/buyer1-left.svg', 'res/imgs/buyer1-right.svg'),
      new Customer([
        { x: 704, y: 480 },
        { x: 584, y: 480 },
      ], 'res/imgs/buyer3-left.svg', 'res/imgs/buyer3-right.svg'),
    ],
    seller: new Seller(990, 480),
    exit: new Obstacle(844, 556, 120, 20, { color: 'black' }),
  };
};


code:
import Player from '../entities/player.js';
import Obstacle from '../entities/obstacle.js';
import Piece from '../entities/piece.js';
import Customer from '../entities/customer.js';
import Seller from '../entities/seller.js';

// Rendered from './level4.lvl'

export default () => {
  return {
    player: new Player(/*x=*/ 140, /*y=*/ 530, /*rotation=*/ 0),
    obstacles: [
      new Obstacle(80, 556, 120, 20, { color: 'black' }), // Entrance
      new Obstacle(934, 420, 30, 120, { color: '#ddd' }), // Desk
      new Obstacle(280, 0, 440, 80, { src: 'res/imgs/vegetables.png' }), // Vegetables
      new Obstacle(350, 170, 300, 100, { src: 'res/imgs/freezer.png' }), // Freezer

      // Left section
      new Obstacle(0, 0, 240, 40),
      new Obstacle(0, 220, 40, 356),
      new Obstacle(52, 100, 40, 60),
      new Obstacle(100, 220, 140, 40),
      new Obstacle(100, 320, 80, 80),
      new Obstacle(145, 100, 40, 120),
      new Obstacle(240, 0, 40, 80),
      new Obstacle(240, 220, 40, 356),

      // Middle section
      new Obstacle(350, 336, 300, 40),
      new Obstacle(350, 436, 300, 40),
      new Obstacle(350, 536, 300, 40),
      new Obstacle(720, 0, 40, 80),
      new Obstacle(720, 220, 40, 356),

      // Right section
      new Obstacle(760, 0, 224, 40),
      new Obstacle(984, 0, 40, 400),
      new Obstacle(884, 170, 40, 50),
      new Obstacle(760, 220, 164, 40),
      new Obstacle(910, 360, 74, 40),
    ],
    items: [
      new Piece(500, 506, 40, 'res/imgs/items/apple.svg'),
      new Piece(954, 70, 40, 'res/imgs/items/honey.svg'),
      new Piece(30, 70, 40, 'res/imgs/items/broccoli.svg'),
    ],
    viruses: [
      new Piece(500, 303, 40, 'res/imgs/virus.svg'),
      new Piece(500, 406, 40, 'res/imgs/virus.svg'),
    ],
    customers: [
      new Customer([
        { x: 210, y: 290 },
        { x: 70, y: 290 },
        { x: 70, y: 430 },
        { x: 210, y: 430 },
      ], 'res/imgs/buyer3-left.svg', 'res/imgs/buyer3-right.svg'),
      new Customer([
        { x: 22, y: 70 },
        { x: 122, y: 70 },
        { x: 122, y: 190 },
        { x: 22, y: 190 },
      ], 'res/imgs/buyer1-left.svg', 'res/imgs/buyer1-right.svg'),
      new Customer([
        { x: 220, y: 65 },
        { x: 220, y: 198 },
      ], 'res/imgs/buyer4-left.svg', 'res/imgs/buyer4-right.svg'),
      new Customer([
        { x: 370, y: 125 },
        { x: 630, y: 125 },
      ], 'res/imgs/buyer2-left.svg', 'res/imgs/buyer2-right.svg'),
      new Customer([
        { x: 315, y: 300 },
        { x: 315, y: 546 },
      ], 'res/imgs/buyer2-left.svg', 'res/imgs/buyer2-right.svg'),
      new Customer([
        { x: 685, y: 300 },
        { x: 685, y: 546 },
      ], 'res/imgs/buyer3-left.svg', 'res/imgs/buyer3-right.svg'),
      new Customer([
        { x: 884, y: 85 },
        { x: 884, y: 140 },
        { x: 954, y: 140 },
        { x: 884, y: 140 },
      ], 'res/imgs/buyer1-left.svg', 'res/imgs/buyer1-right.svg'),
      new Customer([
        { x: 785, y: 310 },
        { x: 960, y: 310 },
      ], 'res/imgs/buyer4-left.svg', 'res/imgs/buyer4-right.svg'),
    ],
    seller: new Seller(990, 480),
    exit: new Obstacle(844, 556, 120, 20, { color: 'black' }),
  };
};


code:
import Entity from '../entities/entity.js';
import Player from '../entities/player.js';
import Obstacle from '../entities/obstacle.js';
import Piece from '../entities/piece.js';
import Seller from '../entities/seller.js';

// Rendered from './level4.lvl'

export default () => {
  return {
    player: new Player(/*x=*/ 140, /*y=*/ 530, /*rotation=*/ 0, {size: 36, speed: 140}), // Small BB size & lower speed to allow easier navigation
    obstacles: [
      new Obstacle(80, 556, 120, 20, { color: 'black' }), // Entrance
      new Obstacle(934, 420, 30, 120, { color: '#ddd' }), // Desk
      new Obstacle(584, 0, 440, 80, { src: 'res/imgs/vegetables.png' }), // Vegetables
      new Obstacle(418, 226, 100, 300, { src: 'res/imgs/freezer-90.png' }), // Freezer

      new Obstacle(578, 134, 220, 44),
      new Obstacle(534, 354, 176, 44),
      new Obstacle(94, 354, 176, 44),
      new Obstacle(182, 266, 176, 44),
      new Obstacle(0, 398, 50, 178),
      new Obstacle(974, 266, 50, 132),
      new Obstacle(886, 222, 44, 132),
      new Obstacle(754, 310, 44, 132),
      new Obstacle(578, 442, 44, 134),
      new Obstacle(446, 0, 44, 134),
      new Obstacle(314, 354, 44, 132),
      new Obstacle(314, 134, 44, 132),
      new Obstacle(226, 442, 44, 134),
      new Obstacle(182, 0, 44, 134),
      new Obstacle(710, 486, 88, 44),
      new Obstacle(798, 442, 88, 44),
      new Obstacle(50, 266, 88, 44),
      new Obstacle(754, 178, 88, 44),
      new Obstacle(842, 310, 44, 88),
      new Obstacle(666, 398, 44, 88),
      new Obstacle(270, 46, 44, 88),
      new Obstacle(0, 0, 50, 90),
      new Obstacle(622, 530, 44, 46),
      new Obstacle(358, 486, 44, 44),
      new Obstacle(182, 442, 44, 44),
      new Obstacle(50, 442, 44, 44),
      new Obstacle(710, 266, 44, 44),
      new Obstacle(534, 266, 44, 44),
      new Obstacle(798, 222, 44, 44),
      new Obstacle(666, 222, 44, 44),
      new Obstacle(974, 178, 50, 44),
      new Obstacle(578, 178, 44, 44),
      new Obstacle(270, 178, 44, 44),
      new Obstacle(138, 178, 44, 44),
      new Obstacle(50, 178, 44, 44),
      new Obstacle(490, 134, 44, 44),
      new Obstacle(402, 134, 44, 44),
      new Obstacle(94, 134, 44, 44),
      new Obstacle(490, 46, 44, 44),
      new Obstacle(358, 46, 44, 44),
      new Obstacle(138, 46, 44, 44),
    ],
    items: [
      new Piece(248, 22, 40, 'res/imgs/items/paper.svg'),
      new Piece(732, 104, 40, 'res/imgs/items/carrot.svg'),
      new Piece(292, 244, 40, 'res/imgs/items/bread.svg'),
      new Piece(732, 200, 40, 'res/imgs/items/avocado.svg'),
      new Piece(732, 420, 40, 'res/imgs/items/milk.svg'),
      new Piece(688, 508, 40, 'res/imgs/items/juice.svg'),

    ],
    viruses: [
      new Piece(72, 22, 40, 'res/imgs/virus.svg'),
      new Piece(248, 68, 40, 'res/imgs/virus.svg'),
      new Piece(22, 112, 40, 'res/imgs/virus.svg'),
      new Piece(644, 112, 40, 'res/imgs/virus.svg'),
      new Piece(468, 156, 40, 'res/imgs/virus.svg'),
      new Piece(996, 156, 40, 'res/imgs/virus.svg'),
      new Piece(116, 200, 40, 'res/imgs/virus.svg'),
      new Piece(688, 288, 40, 'res/imgs/virus.svg'),
      new Piece(204, 332, 40, 'res/imgs/virus.svg'),
      new Piece(820, 332, 40, 'res/imgs/virus.svg'),
      new Piece(22, 376, 40, 'res/imgs/virus.svg'),
      new Piece(996, 420, 40, 'res/imgs/virus.svg'),
      new Piece(380, 464, 40, 'res/imgs/virus.svg'),
      new Piece(336, 508, 40, 'res/imgs/virus.svg'),
      new Piece(996, 508, 40, 'res/imgs/virus.svg'),
      new Piece(732, 552, 40, 'res/imgs/virus.svg'),
    ],
    customers: [],
    fluffs: [
      new Entity(110, 440, 60, 60, 'res/imgs/closed.png'),
    ],
    seller: new Seller(-40, -40), // No seller in this level
    exit: new Obstacle(844, 556, 120, 20, { color: 'black' }),
  };
};


code:
Icons made by Freepik from www.flaticon.com

Sound effects & music obtained from zapsplat.com