body, html {
  padding:0;
  margin:0;
  width:100vw;
  font-family: 'VT323', monospace;
 font-size:18px;
  transition:.3s;
  position:relative;
  display:block;
  min-height: -webkit-fill-available;
  overflow:hidden;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
body {
  background-image:url(img/bodybghearts.png);
  background-repeat:repeat;
}
  body.done {
    *background-color:rgba(255,0,0,.3);
  }

body.fixed {
	overflow:hidden;
}

body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; 
   content:url(img/chimasprite.png) url(img/chimasprite_up.png) url(img/chimasprite_walk.png); 
}
  
h2 {
	font-size:1.1em;
	margin:0px auto;
}

a {
  z-index:10000;
  position:relative;
  -webkit-user-select: none;
}

#screencontainer {
	width:100%;
	height:100%;
	position:relative;
	left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.label-jp {
	display:none;
	font-family: 'DotGothic16', sans-serif;
	font-size:0.7em;
}

.gameui {
	position:absolute;
	top:0;
	left:0;
	width:90%;
	height:48px;
	z-index:15;
	margin:5%;
	display: flex;
	opacity:0;
}

.gameui.visible {
	opacity:1;
}

.gameui .borderleft{
	width:8px;
	height:48px;
	background-image:url(img/SleekBars_L.png);
	background-size:8px 48px;
	background-repeat:no-repeat;
}

.gameui .borderright{
	width:8px;
	height:48px;
	background-image:url(img/SleekBars_R.png);
	background-size:8px 48px;
	background-repeat:no-repeat;
}

.gameui .uicontent {
	width:calc(100% - 16px);
	display: flex;
	height:48px;
	background-size:auto 100%;
	background-image:url(img/SleekBars_M.png);
	background-repeat:repeat-x;
}

.uiscore {
	flex-grow: 1;
	padding:8px;
	font-size:15px;
	color:#ffffff;
	font-size: 0.9rem;
}

.uilives {
	padding:13px;
	font-size:20px;
	color:#ffffff;
	display:flex;
	font-size: 1.1rem;
}

.live {
	width:25px;
	height:25px;
	background-image:url(img/iconlive.png);
	background-size:contain;
	margin: 0 2px;
}

.live.away {
	background-image:url(img/iconnolive.png);
}

.liveplus {
	display:inline-block;
	vertical-align: bottom;
	width:25px;
	height:25px;
	background-image:url(img/iconlive.png);
	background-size:contain;
	margin: 0 2px;
}

.musicui {
	position:absolute;
	bottom:0;
	left:0;
	width:90%;
	height:36px;
	z-index:15;
	margin:5%;
	display: flex;
	opacity:0;
}


.musicui.visible {
	opacity:1;
}

.musicui .borderleft{
	width:13px;
	height:36px;
	background-image:url(img/SleekBars_L_bottom.png);
	background-size:13px 36px;
	background-repeat:no-repeat;
	
}

.musicui .borderright{
	width:13px;
	height:36px;
	background-image:url(img/SleekBars_R_bottom.png);
	background-size:13px 36px;
	background-repeat:no-repeat;
	
}

.musicui .uicontent {
	width:calc(100% - 16px);
	display: flex;
	height:36px;
	background-size:auto 100%;
	background-image:url(img/SleekBars_M_bottom.png);
	background-repeat:repeat-x;
}

.version {
	flex-grow: 1;
	padding:10px;
	font-size: 0.9rem;
	color:#ffffff;
	cursor:pointer;
}

.uilang {
	flex-grow: 1;
	padding:10px;
	font-size: 0.9rem;
	color:#ffffff;
	cursor:pointer;
}

.uilang span.inactive {
	opacity:0.5;
}

.uibgm {
	flex-grow: 1;
	padding:10px;
	font-size: 0.9rem;
	color:#ffffff;
}

.uibgm span.inactive {
	opacity:0.5;
}

.text {
	background-image:url(img/textbg.jpg);
	background-size:cover;
	height:auto;
	max-height:300px;
	margin:5%;
	padding:15px;
	width:calc(100% - 30px - 10%);
	font-size: 1.0rem;
}

.end.text {
	opacity:0;
	pointer-events: none;
	z-index:15;
	position:absolute;
	margin-top:30%;
	height:auto;
}
.end.visible {
	opacity:1;
	pointer-events: auto;
}

.gameover {
	opacity:0;
	pointer-events: none;
	z-index:16;
	position:absolute;
	margin-top:30%;
}
.gameover.visible {
	opacity:1;
	pointer-events: auto;
}

.screen {
	width:100%;
  height:100%;
	position:absolute;
	opacity:0;
	z-index:0;
	top:0;
	left:0;
	transition:.5s;
	overflow:hidden;
  *transform:translateY(100%);
  text-align:center;
  pointer-events: none;
  min-height: -webkit-fill-available;
}
.screen.visible {
	opacity:1;
	z-index:2;
  *transform:translateY(0%);
  pointer-events: auto;
}

.button {
	display:block;
	margin:10px auto;
	background-image:url(img/button1.png);
	background-size:cover;
	background-repeat:repeat-x;
	text-align:center;
	padding:10px 0;
	width:70%;
	font-size: 1.2rem;
	color:#ffffff;
	text-decoration:none;
	border-radius:15px;
}

#ending .button {
	width:45%;
	display: inline-block;
	font-size: 1.01em;
}

#start {
	background-image:url(img/introbg.png);
	background-size:cover;
  background-position:center;
  touch-action: pan-x pan-y;
  height:auto;
  min-height:100%;
  z-index:3;
}

 .logo img {
	height: 30vh;
	max-width:100%;
	margin-top:10%;
}

#intro1, #intro2, #intro3, #ending {
	background-image:url(img/introbg.png);
	background-size:cover;
  background-position:center;
  touch-action: pan-x pan-y;
  height:auto;
  min-height:100%;
  z-index:3;
}



#intro .scroll {
	width:70%;
	background-image:url(img/scroll.png);
	background-size:100% auto;
	background-repeat: no-repeat;
	padding:15%
}

#intro .scroll h2{
	margin-top:40px;	
}

#intro .scroll p{
	margin: 0 40px;	
}

.zone {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  overflow:hidden;
}

  .zone .reel {
    width:auto;
    height:100%;
    position:absolute;
    z-index:10;
    user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  }
  .zone.finished .reel {
    pointer-events:none;
  }
  
  .sliding-background {
	  background-repeat: repeat-x;
	  background-position: 0 0;
	  background-size: auto 100%;
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  
	  z-index:1;
	}
	
	.sliding-background.animation {
		animation: slide 100s linear infinite;
	}
  
  @keyframes slide{
	   from {
	    background-position: 0 0;
	  }
	/*use negative width if you want it to flow right to left else and positive for left to right*/
	  to {
	    background-position: -10000px 0;
	  }
	}
	
	.sliding-background.animation.paused, .items.paused {
	   -ms-animation-play-state:paused;
	   -o-animation-play-state:paused;
	   -moz-animation-play-state:paused;
	   -webkit-animation-play-state:paused;
	  animation-play-state: paused;
	}
	
	#level1 .sliding-background {
	  background-image:url('img/level1bg.png');
 	}
 	
 	#level2 .sliding-background {
	  background-image:url('img/level2bg.png');
 	}
 	
 	#level3 .sliding-background {
	  background-image:url('img/level3bg.png');
 	}
  
    .zone .reel .items {
      position:relative;
      top:0;
      white-space:nowrap;
      left:0%;
      padding-left:100vw;
      width:auto;
      height:100%;
      background-size:60vw auto;
      background-repeat:repeat-x;
      background-position:100% 100%;
      will-change:left;
      
    }
    
    .zone .reel .items.animation {
    	transition:30s linear;
	      -webkit-transition:28s linear;
	      transform:translateZ(0);
	      -webkit-transform:translateZ(0);
    }
    
    .zone .reel .items:after {
      content:" ";
      position:absolute;
      height:6%;
      width:100vw;
      z-index:-1;

      bottom:0;
      left:100%;
    }
    .zone.playing .reel .items {
      left:-100%;
    }
    .zone.finished .reel .items {
      left:-100%;
    }
    .zone .reel .items .item {
      position:relative;
      display:inline-block;
      height:25px;
      width:25px;
      background-image:url('img/sunflower.png');
      background-size:contain;
      background-repeat:no-repeat;
      background-position:center;
      margin:0px 100px;
      transform:translateY(-50%);
      transition:.5s;
    }

    .zone .reel .items .item.bad {
    	background-image:url('img/rock.png');
    }
   

    .zone .reel .items .item.caught {
      opacity:0;
      transform:scale(2) rotate(-180deg);
    }
    .zone .reel .items .item:after {
      content:" ";
      width:100%;
      height:100%;
      background-image:url('img/sunflower.png');
      background-size:contain;
      background-repeat:no-repeat;
      background-position:center;
      position:absolute;
      top:0%;
      left:0%;
      transition:.3s;
      transform:scale(0);
    }
    .zone .reel .items .item.bad:after {
    	background-image:url('img/rock.png');
    }
    
    .zone .reel .items .item.caught:after {
      transform:scale(2);
    }
      

  .zone .chima {
    position:absolute;
    bottom:calc(50% - 70px);
    left:20px;
    width:110px;
    height:140px;
    transition:all .3s, bottom .1s;
    -webkit-transition:all .3s, bottom .1s;
    z-index:2;
  }
    .zone .chima[data-dir="up"] {
      transition:all .3s, bottom .3s;
      -webkit-transition:all .3s, bottom .3s;
    }
    .zone .chima[data-dir="down"] {
      transition:all .3s, bottom .05s;
      -webkit-transition:all .3s, bottom .05s;
    }

    .zone .chima:after {
      content:" ";
      left: -40px;
    margin-top: -65px;
    position: absolute;
    width: 110%;
    height: 130%;
      background-image:url('img/chimasprite.png');
      background-size:contain;
      background-repeat:no-repeat;
      background-position:center;
      transition:.3s;
      -webkit-transition:.3s;
      transform-origin:bottom left;
      transform:rotate(30deg);
    }
      .zone .chima[data-dir="up"]:after {
      	background-image:url('img/chimasprite_up.png');
        transform:rotate(20deg);
      }
      .zone .chima[data-dir="down"]:after {
        transform:rotate(30deg);
      }
	.zone .chima[data-dir="none"]:after {
        transform:rotate(0deg);
        background-image:url('img/chimasprite_walk.png');
  	}
  	
  	.zone .chima:before {
  		content:" ";
  		position: absolute;
  		left:-45px;
  		top:-35px;
  		width:84px;
  		height:150px;
  		background-image:url('img/sparkle.gif');
  		background-size:contain;
      background-repeat:no-repeat;
      background-position:center;
  		transform: rotate(90deg);
  	}

.modal {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    text-align:center;
    opacity:0;
    pointer-events: none;
}
.modal.visible {
	opacity:1;
	background:#00000090;
	pointer-events: auto;
}
.centered {
    position: absolute;
	  left: 45%;
	  top: 50%;
	  transform: translate(-50%, -50%);
}
.modal:before {
    content:"";
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
}
#closemodal {
	position:absolute;
	top:10px;
	right:10px;
	width:20px;
	height:20px;
}

#share a {
	text-decoration: none;
	color:#ffffff;
}

  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #fbf6ce;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #fbf6ce;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #fbf6ce;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #fbf6ce;
  }



@keyframes button {
  0% { transform:rotate(2deg); }
  50% { transform:rotate(-2deg);  }
  100% { transform:rotate(2deg);  }
}