:root {
   --pixel-size: 2px;
   --grid-cell: calc( var(--pixel-size) * 16);
   --bg: #404040;
}

@media( min-width: 480px ) {
   :root {
      --pixel-size: 2px;
   }
}

@media( min-width: 1280px ) {
   :root {
      --pixel-size: 3px;
   }
}

@media( min-width: 1440px ) {
   :root {
      --pixel-size: 4px;
   }
}



html {
    margin: 0;
    padding: 0;
    height: 100%;
 }

body {
	margin: 0;
	padding: 0;
	height: 100%;
	max-height: 100%;
	float: left; 
	width: 100%;
	background: var(--bg);
}

#loading {
	position: fixed;
	left: 0;
	top: 0;
	background: black;
	width: 100%;
	height: 100%;
	z-index: 300;
}





#loading img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--pixel-size) * 48);
   height: calc(var(--pixel-size) * 48);

	transform: translate(-50%,-50%);
}

.preloader {
	position: absolute;
	left: -1000px;
	top: -1000px;
	width: 500px;
	height: 500px;
	overflow: scroll;
}

.show {
	opacity: 1 !important;
	transition: opacity 0.5s;
}

.pixel-art {
	image-rendering: pixelated;
}

.wrapper {
	position: fixed;
	background: var(--bg);
   width: 100%;
   min-width: 320px;
   height: 100%;
	overflow: hidden;
}

.touch-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 199;
}

.hud {
	position: absolute;
	z-index: 101;
	height: calc(var(--pixel-size) * 11);
   top: calc(var(--pixel-size) * 3);
   width: calc(var(--pixel-size) * 49);

}

.hud-inner {
	position: absolute;
	left: calc(var(--pixel-size) * 6);
	top: calc(var(--pixel-size) * 1);
	width: calc(var(--pixel-size) * 35);
	background-color: #000;
	z-index: 103;
	padding-left: calc(var(--pixel-size) * 8);
   height: calc(var(--pixel-size) * 8);
   padding-top: calc(var(--pixel-size) * 1);
}

.hud-icon {
	position: absolute;
	width: calc(var(--pixel-size) * 11);
	height: calc(var(--pixel-size) * 11);
	left: 0;
	top: 0;
	z-index: 104;
	background-repeat: no-repeat;
	background-size: calc(var(--pixel-size) * 11) calc(var(--pixel-size) * 11);
	   image-rendering: pixelated;
}

.energy-bar {
	left: calc(var(--pixel-size) * 3);
	width: calc( 100% - (var(--pixel-size) * 111));

}

.energy-bar-inner {
	width: calc( 100% - (var(--pixel-size) * 14));
}

#energy-bar {
	position: absolute;
	left: calc(var(--pixel-size) * -2);
   top: calc(var(--pixel-size) * 3);
   width: 100%;
   height: calc(var(--pixel-size) * 3);
   background-color: hsl(125, 65%, 40%);	
   image-rendering: pixelated;
   transition: all 0.5s;	
   opacity: 0.6;
}

#energy-bar-label {
	position: absolute;
	left: calc(var(--pixel-size) * 8);
   top: calc(var(--pixel-size) * 1);
   width: calc(var(--pixel-size) * 60);
   z-index: 104;
}

.energy-bar .hud-icon {
	background-image: url(../img/heart.png);
}

.coins {
	right: calc(var(--pixel-size) * 56);
}

#coins {

}

.coins .hud-icon {
	background-image: url(../img/coin.png);
}

.clock {
	right: calc(var(--pixel-size) * 4);
}

#clock {
}

.clock .hud-icon {
	background-image: url(../img/clock.png);
}


#start-screen {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #202020;
	z-index: 299;
}

.start-image {
	position: absolute;
	bottom:51%;
	left: 50%;
	transform: translateX(-50%);
	background: #000;
}

.start-image img {
	width: calc(var(--pixel-size) * 128);
	height: calc(var(--pixel-size) * 44);
	image-rendering: pixelated;
	margin-left: calc(var(--pixel-size) * 2);
		margin-right: calc(var(--pixel-size) * 2);
}

.start-game {
	left: 50%;
	top: 51%;
	transform: translateX(-50%);
}

#start-game {
	padding-left: calc(var(--pixel-size) * 5);
}





.camera {
	width: calc( 100% - (var(--pixel-size) * 8)) !important;
	height: calc( 100% - (var(--pixel-size) * 48) ) !important;
	top: calc(var(--pixel-size) * 17) !important;
   left: calc(var(--pixel-size) * 4) !important;
   overflow: hidden;
   background: #ccc;
   position: absolute;
   left:  0;
   top: 0;
}

.pixel-corners {
  clip-path: polygon(
    0px var(--pixel-size),
    var(--pixel-size) var(--pixel-size),
    var(--pixel-size) 0px,
    calc(100% - var(--pixel-size)) 0px,
    calc(100% - var(--pixel-size)) var(--pixel-size),
    100% var(--pixel-size),
    100% calc(100% - var(--pixel-size)),
    calc(100% - var(--pixel-size)) calc(100% - var(--pixel-size)),
    calc(100% - var(--pixel-size)) 100%,
    var(--pixel-size) 100%,
    var(--pixel-size) calc(100% - var(--pixel-size)),
    0px calc(100% - var(--pixel-size))
  );
}

.dialogue-box {
	position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: calc( var(--pixel-size) * 44 ); 
   display: block;
   z-index: 10;
}

#dialogue-box {
	position: absolute;
	background: #000;
	bottom: calc( var(--pixel-size) * 10 );
	left: calc( var(--pixel-size) * 48 );
	width: calc( 100% - (var(--pixel-size) * 100));
	max-height: calc( var(--pixel-size) * 8 );
	padding: calc( var(--pixel-size) * 2 ) 0 calc( var(--pixel-size) * 1 ) calc( var(--pixel-size) * 3 );

	display: block;
	transition: all 0.5s;
	overflow: hidden;
}





.dialogue-sprite {
	position: absolute;
	background: #000;
	bottom: calc( var(--pixel-size) * 2);
	width: calc( var(--pixel-size) * 48);
	height: calc( var(--pixel-size) * 48);
	background-position: 0 0;
	background-repeat: no-repeat;
	image-rendering: pixelated;
	background-image: url(../img/dialogue-spritesheet.png);
	background-size: 400%;
	opacity: 0;
	transition: opacity 0.5s;
}

#dialogue-sprite-primary {
	left: calc( var(--pixel-size) * 2);
	background-position: 0 0;
}

#dialogue-sprite-secondary {
	right: calc( var(--pixel-size) * 2);
	background-position: 0 0;
}

.word {
	position: relative;
	display: inline-block;
	margin: 0 calc(var(--pixel-size) * 3) 0 0;
}

.new-line { 
	display: inline;
  	white-space: pre-wrap;
} 

.new-line:before {
  content: "\A";
}

.letter {
	margin:  0;
	display: inline-block;
	height: calc(var(--pixel-size) * 7);
	width: auto;
   image-rendering: pixelated; 	
}

#dialogue-box .letter {
	animation: fadein 0.5s forwards;
   opacity:  0;
}

@keyframes fadein {
    0% { opacity: 0; }
    66% { opacity: 0; }
    100% { opacity: 1; }
}

#dpad-directions,
#dpad-actions {
	position:  fixed;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	width:  128px;
	height: 128px;
	z-index: 200;
}

#dpad-actions {
	left: auto;
	right: 20px;
}

.dpad-button {
	width:  40px;
	height: 40px;
	background-repeat:  no-repeat;
	background-size: 40px 40px;
	position: absolute;
	opacity: 0.8;
}

.dpad-up {
	top:  0;
	left: 44px;
	background-image: url(../img/keys-up.png);
}

.dpad-right {
	top:  44px;
	right: 0;
	background-image: url(../img/keys-right.png);
}

.dpad-down {
	top: 88px;
	left: 44px;
	background-image: url(../img/keys-down.png);
}

.dpad-left {
	top: 44px;
	left: 0;
	background-image: url(../img/keys-left.png);
}

.dpad-enter {
	right: 0;
	top: 0;
	width: 50px;
	height: 84px;
	background-image: url(../img/keys-enter.png);
	background-size: 50px 84px;
}

.dpad-space {
	right: 0;
	top: 88px;
	width: 128px;
	height: 40px;
	background-image: url(../img/keys-space.png);
	background-size: 128px 40px;
}

.pressed {
	opacity: 1;
}

.map,
.inner-map,
.night-and-day {
	position: absolute;
	left: 0;
	top: 0;
	width: calc( var(--pixel-size) * 512 );
	height: calc( var(--pixel-size) * 512 );
	image-rendering: pixelated;
	z-index: 1;

}

canvas {
	background-color: rgba(255,255,255,0.1);
}

#map-0 {
	z-index: 2;
}

#map-1 {
	z-index: 8;
}

#characters {
	z-index: 5;
}

.night-and-day {
	background: black;
	z-index: 20;
	animation: nightandday 12s infinite forwards;
}

@keyframes nightandday {
    0% { opacity: 0; }
    66% { opacity: 0; }
    100% { opacity: 1; }
}


/***********/
/* SPRITES */
/***********/

/* Main character */

.character {
	position: absolute;
	animation: sprite 0.75s steps(6) infinite;
	image-rendering: pixelated;
	background-image: url(../img/character-spritesheet.png);
	background-size: 2000%;
	background-repeat:  no-repeat;
	background-position-x: 0;
	outline: 1px solid transparent;
}

.idle {
	animation: sprite 0.75s steps(6) infinite, sprite-delay 7.5s steps(1) infinite;
}

@keyframes sprite {

  from { background-position-x: 0; }
  to { background-position-x: calc( var(--pixel-size) * -96 ) }
}

@keyframes sprite-delay {

  10% { background-position-x: 0; }
  90% { background-position-x: 0; }
}



/* Main Character */

.main-character {
	background-position-y: calc( var(--pixel-size) * -320 );

}

.testing {
	position: fixed;
	background: rgba(0,0,0,0.8);
	padding: 10px;
	left:  200px;
	bottom:  10px;
	color:  yellow;
	font-size: 8px;
	z-index: 201;
}

.testlink {
	cursor:  pointer;
}


/* RESPONSIVE ADJUSTMENTS */


@media (max-width: 880px) {
	#dialogue-box {
	}
}

@media (max-width: 640px) {
	#dialogue-box {
	}
}


@media (max-width: 360px) {
  #energy-bar-label {
  	display: none;
  }
}