* {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    touch-action: manipulation;
}
html, body, #s1, .tc {height:100%}
body {
	font-family: gesta, 'gesta', arial, helvetica, sans-serif;
	-webkit-text-size-adjust:none;
	font-size: 55%;
	text-align: center;
	background: #000 url('../images/bg_hm.jpg') no-repeat 50% 50%;
    background-size: cover;
	color: #FFF;
	text-shadow: 0 0 .2em rgba(0, 0, 0, .3);
}
body.bg01 {background: #222 url('../images/bg02.jpg?t=20250813b') no-repeat 50% 50%;background-size: cover;}
body.bg02 {background: #222 url('../images/bg.png') no-repeat 50% 50%;background-size: cover;}
body.bg03 {background: #222 url('../images/bg.png') no-repeat 50% 50%;background-size: cover;}
body.bg04 {background: #222 url('../images/bg.png') no-repeat 50% 50%;background-size: cover;}
body.bg05 {background: #222 url('../images/bg.png') no-repeat 50% 50%;background-size: cover;}
body.bg06 {background: #222 url('../images/bg.png') no-repeat 50% 50%;background-size: cover;}
body.bg07 {background: #222 url('../images/bg.png') no-repeat 50% 50%;background-size: cover;}
body.bg08 {background: #222 url('../images/bg.png') no-repeat 50% 50%;background-size: cover;}
body.bg09 {background: #222 url('../images/bg.png') no-repeat 50% 50%;background-size: cover;}
body.bg10 {background: #222 url('../images/bg.png') no-repeat 50% 50%;background-size: cover;}
li {list-style: none}
a , #p, #b1, .hs, .tm, .ht, .b3 {cursor: pointer}

.tb {display: table;width:100%;height:100%}
.tc {display: table-cell;text-align: center;vertical-align:middle}
#mw, li a, #a3 .b3, #s3 {position: absolute}
.cl, #s1, #s2, #s3 {display: none}

#mw, #s3 {
	z-index: 9;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.8);
	width: 100%;
	height: 100%;
}
#mw p {font-size: 2em}
.pw #s2 {background: rgba(255,0,0,.3);}
#s2, #s3 {
	height: 100%;
	text-align: center;
	overflow: hidden;
}
#s3 p {font-size:1em;margin: 3em 0;}
#a1 {
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}
#a1, #w {position:relative}
#a1 .tc > * {
	display: inline-block;
	vertical-align: middle;
}
#a1 h1 {margin: 0 .3em}
#a1, #a3 {width: 100%;	display: table}
#w {width: 18em;text-align:left;margin:auto;height:2em}
.tm, .hs {
	width: 5em;
	line-height: 1.6em;
	margin-top: .7em;
	background: rgba(0,0,0,.2);
	border-radius: .3em;
	-webkit-box-shadow: 0 1px 0 #2b2b2b;
	box-shadow: 0 1px 0 #2b2b2b;
}
.tm:before, .hs:before {
	position: absolute;
	margin-top: -2.3em;
	font-size: .5em;
	font-weight: bold;
}
#a2 {position: relative;}
.a2w {
	position: relative;
	width: 1px;
	height: 100%;
	margin: auto;
}
.a2ww {
	position: relative;
	height: 100%;
	margin-left: -10em;
}
.help {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -5em;
	margin-left: 2.5em;
	width: 7em;
	padding: .5em .3em .5em .6em;
	color: #FFF;
	font-size: 1.2em;
	text-align: left;
    word-break: keep-all;
    background: rgba(0,0,0,.4);
	pointer-events: none;
}
.help p.pwonly {
	display: none;
	color: #ffc95e;
}
.pw .help p.pwonly {display: block;}
.help p {line-height: 1.6;}
.help p {padding: .5em 0;}
.tm:before {content: "TIME "}
.hs:before {content: "HIGH SCORE "}

h1 {
	font-family: legitima,'times new roman',serif;
	font-size: 4em;
	font-weight: normal;
	line-height: .6em;
}
h1 span:nth-of-type(2) {
	display: inline-block;
	border-top: 1px solid #DDD;
	font-size: .6em;
}
p {
	font-size:.6em; line-height: 1.2;
}
p a {color:#75d0d6;text-decoration: none}
#a3 .b3 {right:0;top:0}
#mw .b3, #mw #b1 {margin-top:1em;}

.b3, #b1, .ht {
	display: inline-block;
	width: 6em;
	line-height: 2em;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	margin: auto;
	color:#FFF;
	border-radius: .4em;
	-webkit-box-shadow:hsl(75, 80%, 15%) 0 .38em .08em;
	box-shadow:hsl(75, 80%, 15%) 0 .38em .08em;
	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
	background:#749A02;
}
.ht {
	width: 3.5em;
	background: #007D9A;
	-webkit-box-shadow:hsl(191, 80%, 15%) 0 .38em .08em;
	box-shadow:hsl(191, 80%, 15%) 0 .38em .08em;
}
#s1 h1 {margin-bottom: .5em}
#p {
	font-size: 1.2em;
	margin: 1.5em 0 1.8em 0;
	-webkit-animation: a 1s infinite;
	-moz-animation: a 1s infinite;
	-ms-animation: a 1s infinite;
}
@-webkit-keyframes a {
	0%, 100% {opacity: 1}
	50% {opacity: 0}
}
@-moz-keyframes a {
	0%, 100% {opacity: 1}
	50% {opacity: 0}
}
@-ms-keyframes a {
	0%, 100% {opacity: 1}
	50% {opacity: 0}
}

li a {
	border-radius: .3em;
	border-top: .05em solid rgba(255,255,255,.8);
	border-bottom: .05em solid rgba(0,0,0,.1);
	background-color: hsl(0, 0%, 80%);
	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from(rgba(255,255,255,0)), to( rgba(255,255,255,.7)));
	background-image: 	-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%);
	background-image: -ms-radial-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 100%);
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from(rgba(255,255,255,0)), to( rgba(255,255,255,.7)));
	-webkit-box-shadow: hsl(0, 0%, 60%) 0 .08em .3em, hsl(0, 0%, 40%) 0 .38em .08em;
	box-shadow: hsl(0, 0%, 60%) 0 .08em .3em, hsl(0, 0%, 40%) 0 .38em .08em;
}
li a {
	display: block;
	width: 2.25em;
	height: 2.9em;
	left: 50%;
	top: 50%;
}
/* a: Skeleton */
.a:before {
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/Skeleton.png') no-repeat 50% 50%;
    background-size: contain;
}
/* b: New */
.b:before{
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/New.png') no-repeat 50% 50%;
    background-size: contain;
}
/* c: Shopping_Cart */
.c:before{
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/candle.png') no-repeat 50% 50%;
    background-size: contain;
}
/* d: Pumpkin */
.d:before{
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/Pumpkin.png') no-repeat 50% 50%;
    background-size: contain;
}
/* e: x */

.e:before {
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/Bat.png') no-repeat 50% 50%;
    background-size: contain;
}

/* f: star */
.f:before {
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/Net.png') no-repeat 50% 50%;
    background-size: contain;
}
/* g: up */
.g:before {
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/Mummy.png') no-repeat 50% 50%;
    background-size: contain;
}
/* h: down */
.h:before {
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/Hat.png') no-repeat 50% 50%;
    background-size: contain;
}
/* i: sandwatch */
.i:before{
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/Cat.png') no-repeat 50% 50%;
    background-size: contain;
}
/* j: man */
.j:before{
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/Download.png') no-repeat 50% 50%;
    background-size: contain;
}
/* j: + */
.k:before {
	top: .21em;
	left: .21em;
	width: 1.85em;
	height: 2.5em;
    background: url('../images/Vampire.png') no-repeat 50% 50%;
    background-size: contain;
}
a:before,a:after{
	content: "";
	position: absolute;
}
li a.ss, li a.ss:hover {
	background-color: hsla(0, 70%, 50%, 1);
	-webkit-box-shadow: hsla(0, 70%, 50%, 1) 0 0.08em 0.3em, hsl(0, 80%, 40%) 0 0.38em 0.08em;
	box-shadow: hsla(0, 70%, 50%, 1) 0 0.08em 0.3em, hsl(0, 80%, 43%) 0 0.38em 0.08em;
    border-bottom: .05em solid hsl(0, 76%, 63%);
}
.x {
	visibility: hidden;
	opacity: 0;
}
a.htb {
	-webkit-animation: b 3s 1;
	-moz-animation: b 3s 1;
	-ms-animation: b 3s 1;
}
@-webkit-keyframes b {
	0%, 100% {}
	30%, 70% {
		background-color: #fff580;
		-webkit-box-shadow: hsl(55, 70%, 50%) 0 .08em .3em, hsl(55, 80%, 40%) 0 .38em .08em;
	}
}
@-moz-keyframes b {
	0%, 100% {}
	30%, 70% {
		background-color: #fff580;
		box-shadow: hsl(55, 70%, 50%) 0 .08em .3em, hsl(55, 80%, 40%) 0 .38em .08em;
	}
}
@-ms-keyframes b {
	0%, 100% {}
	30%, 70% {
		background-color: #fff580;
		/* box-shadow: hsl(55, 70%, 50%) 0 .08em .3em, hsl(55, 80%, 40%) 0 .38em .08em; */
	}
}

h2 {
	font-size:2em;
	text-shadow: .05em .05em .05em rgba(0,0,0,.5);
	margin-bottom:.5em;
	white-space: nowrap;
}


/* only for pc */
.pc .b3:hover, .pc #b1:hover {background:#91bd09}
.pc .ht:hover {background:#2daebf}
.cir {
	width: 100%;
	height: 12em;
    background: url('../images/boom.png') no-repeat 50% 50%;
    background-size: contain;
}
.pc #s3 p {margin: -2em 0 3em 0;text-shadow: 0 1px 2px rgba(0,0,0,.5);}
.pc a:hover {
	background-color: #FFF;
	-webkit-box-shadow: hsl(252, 0%, 50%) 0 .08em .3em, hsl(252, 0%, 30%) 0 .38em .08em; rgba(0,0,0,.2) 0 .375em .3em;
	box-shadow: hsl(252, 0%, 50%) 0 .08em .3em, hsl(252, 0%, 30%) 0 .38em .08em; rgba(0,0,0,.2) 0 .375em .3em;
}
.pc .x {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	/* -ms-transition: all .3s ease-in-out; */
	-o-transition: all .3s ease-in-out;
	-webkit-transform: scale(.5);
	-moz-transform: scale(.5);
	/* -ms-transform: scale(.5); */
	-o-transform: scale(.5);
}
.pc h2 {
	-webkit-animation: tt 1s 1;
	-moz-animation: tt 1s 1;
	/*-ms-animation: tt 1s 1;*/
}
@-webkit-keyframes tt {
	0% {letter-spacing:.5em;opacity:0}
	100% {letter-spacing:0;opacity:1}
}
@-moz-keyframes tt {
	0% {letter-spacing:.5em;opacity:0}
	100% {letter-spacing:0;opacity:1}
}
@-ms-keyframes tt {
	0% {letter-spacing:.5em;opacity:0}
	100% {letter-spacing:0;opacity:1}
}
.pc.pw #s2 {
	-webkit-animation: pw .3s infinite;
	-moz-animation: pw .3s infinite;
	-ms-animation: pw .3s infinite;
}
@-webkit-keyframes pw {
	0%,100% {background: rgba(255,0,0,0);}
	50% {background: rgba(255,0,0,.1);}
}
@-moz-keyframes pw {
	0%,100% {background: rgba(255,0,0,0);}
	50% {background: rgba(255,0,0,.1);}
}
@-ms-keyframes pw {
	0%,100% {background: rgba(255,0,0,0);}
	50% {background: rgba(255,0,0,.1);}
}
/* media quries */
@media (max-width : 768px) {
	#ms {font-size: .7em;}
}
@media (min-width : 501px) {
	#a1, #a3 {height: 20%; background: rgba(0,0,0,.4)}
	#a2 {height: 60%}
    #a1 h1 img {width:70%;}
    .ld.ld #a3 {margin-left: -22.8em;}
}
@media (min-width : 501px) and (orientation:portrait) {
    #a1 h1 img {width:100%;}
    #a1 h1 {width:30%;margin:0 .1em;}
    #appBar {height:90px;}
    #appBar span {display:block;margin: auto;}
}
@media (max-width : 500px) and (orientation:portrait) {
    #appBar {height:90px;}
    #appBar span {display:block;margin: auto;}
	#a1 .tc h1 {position:absolute;left: 50%;margin-left: -1.7em;margin-top: -2.1em;}
    #s1 h1 img {width:3.4em;}
    #a1 .tc h1 img {width:3.4em;}
    #a1 .tc h1 {display: none;}
	#a1 {margin-top:-.5em}
	#a1, #a3 {height: 1em}
	#w {font-size:.75em;padding-top:.2em}
	#w .b3 {top:.2em}
	#a2 {height: 17em}
	.hs {margin-right: 12em}
	.tm:before {margin-left:-2em}
	.tm, .hs {
		margin-top: 0;
		font-size: .6em;
		background: none;
		border-radius: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.tm:before, .hs:before {
		position: static;
		font-size: inherit;
	}
	#s3 {font-size:.6em}
	h2 {font-size:1.5em;}
	.pc #mw h2 {-webkit-animation:none;-moz-animation:none;-ms-animation:none;}
	.a2w {width: 100%;}
	.a2ww {margin-left: 0;}
	.help {
		position: absolute;
		top: 20em;
		left: 5%;
	    width: 90%;
	    margin: 0;
	    font-size: 1em;
	    padding: .3em .8em;
	    box-sizing: border-box;
	}
	.help p {padding: .2em 0;}
	#a3 {margin-bottom: 5em;}
}
/* for Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	a.htb {
		background-color: #fff580;
		box-shadow: hsl(55, 70%, 50%) 0 .08em .3em, hsl(55, 80%, 40%) 0 .38em .08em;
	}
	.ld #s2 #a3 {margin-left:-21.9em;}
}
/* custom media queries for height */
.ld #s1 h1 img {width: 50%;}
.ld #a1 h1 img {width: 2.5em;}
.ld .help {display: none;}
.ld .a2ww {margin-left: 0;}

.ld #a1 {background: none;width:auto;margin: 0 auto -1.8em auto;height:0;padding-right: 14.5em}
.ld #a1 h1 {margin:0;font-size:2.8em}
.ld #a1 .tc > * {display:block}
.ld .hs, .ld .tm {position:absolute;font-size:1.3em;line-height:1.3em}
.ld .hs {top:3.2em}
.ld .tm {top:5.4em}
.ld .tm:before, .ld .hs:before {font-weight:normal;color:#999;margin-top:-2em;left:0}
.ld #a2 {margin: 0 0 1.7em 10em;height: 11em}
.ld #a3 {
	position:absolute;
	background: none;
	font-size:.5em;
	width: 0;
	height: 0;
	left: 50%;
	margin: -8.2em 0 0 -21em;
}
.ld .ht, .ld #a3 .b3 {font-size:1.2em;line-height:3em;border-radius:.7em}
.ld #a3 .b3 {
	left:0;
	right:auto;
	top:4.2em;
	width:13em;
	-webkit-box-shadow: hsl(75, 80%, 15%) 0 .7em .1em;
	box-shadow: hsl(75, 80%, 15%) 0 .7em .1em;
}
.ld .ht {
	width:4em;
	margin-right:.3em;
	-webkit-box-shadow:hsl(191, 80%, 15%) 0 .7em .1em;
	-ms-box-shadow:hsl(191, 80%, 15%) 0 .7em .1em;
	box-shadow:hsl(191, 80%, 15%) 0 .7em .1em;
}
.ld #a3 .cl {display:block}
.ld #w {height:0;position:relative}
.ld #s1 p:nth-of-type(1) {display:none}
.ld #s3 {font-size:.8em}