* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -o-user-select: none;
   user-select: none;
   font-family: 'VT323', monospace;
   image-rendering: pixelated;
   color: white;
}

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

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

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

h1 {
   color: white;
   font-size: 26px;
   font-weight: 1;
}

html, body {
   height: 100%;
}

body {
   background: black;
   display: flex;
   align-items: center;
   justify-content: center;
}

.ramka {
   width: calc(var(--pixel-size) * 160);
   height: calc(var(--pixel-size) * 144);
   outline: var(--pixel-size) solid #fff;
   z-index:1; 
   position:relative;
   box-shadow: 0 0 20px 5px rgb(255,255,255,0.4);
}

.camera {
   width: calc(var(--pixel-size) * 160);
   height: calc(var(--pixel-size) * 144);
   overflow: hidden;
   background: #61ddf7;
   position:relative;
}

.map {
   background-image: url("img/mapa.png");
   width: calc(30 * var(--grid-cell));
   height: calc(20 * var(--grid-cell));
   position: relative;
   background-size: 100%;
}

.map0 {
   background-image: url("img/mapa4.png");
   width: calc(30 * var(--grid-cell));
   height: calc(20 * var(--grid-cell));
   position: relative;
   background-size: 100%;
}

.map0nad {
   background-image: url("img/mapa2.png");
   width: calc(30 * var(--grid-cell));
   height: calc(20 * var(--grid-cell));
   position: relative;
   background-size: 100%;
   z-index: 2;
}

.map1 {
   background-image: url("img/mapa1.png");
   width: calc(6 * var(--grid-cell));
   height: calc(8 * var(--grid-cell));
   position: relative;
   background-size: 100%;
   z-index: 2;
}

.wrog1 {
   width: calc( var(--grid-cell)* 2 );
   height: calc( var(--grid-cell)* 2 );
   position: absolute;
   overflow: hidden;
   top: calc( var(--grid-cell)* 8.5);
   left: calc( var(--grid-cell)* 3.5);
}

.wrog2 {
   width: calc( var(--grid-cell)* 2 );
   height: calc( var(--grid-cell)* 2 );
   position: absolute;
   overflow: hidden;
   top: calc( var(--grid-cell)* 5.5);
   left: calc( var(--grid-cell)* 13.5);
   transform: scaleX(-1);
}

.wrog3 {
   width: calc( var(--grid-cell)* 2 );
   height: calc( var(--grid-cell)* 2 );
   position: absolute;
   overflow: hidden;
   top: calc( var(--grid-cell)* 11.5);
   left: calc( var(--grid-cell)* 10.5);
   transform: scaleX(-1);
}

.slime {
   position: absolute;
   background: url("img/slime.png") no-repeat no-repeat;
   background-size: 100%;
   width: calc( var(--grid-cell)* 8 );
   height: calc( var(--grid-cell)* 8 );
   animation: animacja 0.6s steps(4) infinite; 
}

.wybuch {
   position: absolute;
   background: url("img/wybuch.png") no-repeat no-repeat;
   background-size: 100%;
   width: calc( var(--grid-cell)* 24 );
   height: calc( var(--grid-cell)* 24 );
   animation: animacja 0.6s steps(12) infinite; 
   z-index: 101;
}

.eq {
   outline: var(--pixel-size) solid #fff;
   text-align: center;
   padding-top: 10px;
   width: 480px;  /* 16 * 30 */
   height: 300px; /* 16 * 15 */
   position: absolute;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   background-color: black;
   z-index: 10;
   animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-duration: 0.25s;
   visibility: hidden;
}

.inv {
   outline: var(--pixel-size) solid #fff;
   text-align: center;
   padding-top: 10px;
   width: 320px;  /* 16 * 30 */
   height: 384px; /* 16 * 15 */
   position: absolute;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   background-color: black;
   z-index: 10;
   animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-duration: 0.25s;
   visibility: hidden;

}

.hidden {
	animation-name: fadeOutOpacity;
}

.visible {
	animation-name: fadeInOpacity;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeOutOpacity {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.slot {
   padding: 5px;
   z-index: 10;
   background-color: #222;
   outline: var(--pixel-size) solid #fff;
   width: 64px;
   height: 64px;
   position: absolute;
}


.slot:nth-of-type(1) {
   top: 48px;
   left: 48px;
}

.slot:nth-of-type(2) {
   top: 48px;
   left: 128px;
}

.slot:nth-of-type(3) {
   top: 48px;
   left: 208px;
}

.slot:nth-of-type(4) {
   top: 48px;
   left: 288px;
}

.slot:nth-of-type(5) {
   top: 48px;
   left: 368px;
}

.slot:nth-of-type(6) {
   top: 128px;
   left: 48px;
}

.slot:nth-of-type(7) {
   top: 128px;
   left: 128px;
}

.slot:nth-of-type(8) {
   top: 128px;
   left: 208px;
}

.slot:nth-of-type(9) {
   top: 128px;
   left: 288px;
}

.slot:nth-of-type(10) {
   top: 128px;
   left: 368px;
}

.slot:nth-of-type(11) {
   top: 208px;
   left: 48px;
}

.slot:nth-of-type(12) {
   top: 208px;
   left: 128px;
}

.slot:nth-of-type(13) {
   top: 208px;
   left: 208px;
}

.slot:nth-of-type(14) {
   top: 208px;
   left: 288px;
}

.slot:nth-of-type(15) {
   top: 208px;
   left: 368px;
}

.inv .slot:nth-of-type(1) {
   top: 48px;
   left: 128px;
}

.inv .slot:nth-of-type(2) {
   top: 48px;
   left: 208px;
}

.inv .slot:nth-of-type(3) {
   top: 128px;
   left: 48px;
}

.inv .slot:nth-of-type(4) {
   top: 128px;
   left: 128px;
}

.inv .slot:nth-of-type(5) {
   top: 128px;
   left: 208px;
}

.inv .slot:nth-of-type(6) {
   top: 208px;
   left: 128px;
}

.inv .slot:nth-of-type(7) {
   top: 288px;
   left: 128px;
}

.item {
   z-index: 20;
   width: 100%;
   height: 100%;
}

.item:hover {
   cursor: pointer;
}

.item1 {
   background: url(img/items/Item__28.png);
   background-size: 100%;
}

.item2 {
   background: url(img/items/Item__46.png);
   background-size: 100%;
}

.item3 {
   background: url(img/items/Item__41.png);
   background-size: 100%;
}

.character {
   width: calc( var(--grid-cell)* 2 );
   height: calc( var(--grid-cell)* 2 );
   position: absolute;
   overflow:hidden;
   z-index: 1;
}

.character_spritesheet {
   position: absolute;
   background: url("img/postac.png") no-repeat no-repeat;
   background-size: 100%;
   width: calc( var(--grid-cell)* 8 );
   height: calc( var(--grid-cell)* 8 );
}

.character[facing="left"] .character_spritesheet {
   background-position-y: calc( var(--pixel-size) * -32 );
}
.character[facing="right"] .character_spritesheet {
   background-position-y: calc( var(--pixel-size) * -64 );
}
.character[facing="up"] .character_spritesheet {
   background-position-y: calc( var(--pixel-size) * -96 );
}
.character[walking="true"] .character_spritesheet {
   animation: animacja 0.6s steps(4) infinite; 
}

@keyframes animacja {
  from {
    transform: translate3d(0%,0%,0);
  }
  to {
    transform: translate3d(-100%,0%,0);
  }
}

.opis {
   outline: var(--pixel-size) solid #fff;
   width: 300px;
   position: absolute;
   z-index: 500;
   background-color: black;
   visibility: hidden;
   color:white;
   bottom: 25px;
   height: 90px;
   text-align: center;
}

.opis1 {
   height: 125px!important;
}


.opis3 {
   height: 75px!important;
}

a {
   font-size: 30px;
}

.paski {
   width: calc(var(--pixel-size) * 160);
   background-color: black;
   outline: var(--pixel-size) solid #fff;
   position: absolute;
   top: 24px;
}

.paski2 {
   width: calc(var(--pixel-size) * 160);
   background-color: black;
   position: absolute;
   top: 68px;
   color:white;
   text-align: center;
   font-size: 30px;
}

.paski3 {
   visibility: hidden;
   width: calc(var(--pixel-size) * 160);
   background-color: black;
   position: absolute;
   bottom: 112px;
   color:gold;
   text-align: center;
   font-size: 30px;
}

.hp {
   width: 50%;
   height: calc(var(--pixel-size) * 10);;
   float:left;
   background-color: #500;
}

.xp {
   width: 50%;
   height: calc(var(--pixel-size) * 10);;
   float: right;
   background-color: #103;
}

.hpPasek {
   background-color: red;
   width: 50%;
   height: 100%;
}

.xpPasek {
   background-color: #508;
   width: 0%;
   height: 100%;
}

.hpInfo, .x {
   width: 50%;
   height: calc(var(--pixel-size) * 10);;
   float:left;
   background-color: black;
}

.xpInfo, .y {
   width: 50%;
   height: calc(var(--pixel-size) * 10);;
   float: right;
   background-color: black;
}

.walka {
   width: calc(var(--pixel-size) * 160);
   height: calc(var(--pixel-size) * 144);
   visibility: hidden;
   background: url("img/tlo.png");
   background-size: cover;
   background-repeat: no-repeat;
   position: absolute;
   z-index: 100;
   animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-duration: 0.25s;
}

.postac {
   width: calc( var(--grid-cell)* 2 );
   height: calc( var(--grid-cell)* 2 );
   position: absolute;
   overflow:hidden;
   top: 50%;
   left: 10%;
}

.wrogwalka {
   width: calc( var(--grid-cell)* 2 );
   height: calc( var(--grid-cell)* 2 );
   position: absolute;
   overflow:hidden;
   top: 55%;
   right: 10%;
   transform: scaleX(-1);
}

.postacsprite {
   position: absolute;
   background: url("img/postac.png") no-repeat no-repeat;
   background-size: 100%;
   width: calc( var(--grid-cell)* 8 );
   height: calc( var(--grid-cell)* 8 );
   background-position-y: calc( var(--pixel-size) * -64 );
}

.progress {
   width: 70%;
   height: 7%;
   left: 15%;
   bottom: 10%;
   z-index: 500;
   position: absolute;
   outline: var(--pixel-size) solid black;
   box-shadow: 0 0 20px 5px black;
}

.wskaznik {
   position: absolute;
   height: 100%;
   width: 2%;
   background-color: white;
   z-index: 500;
}

.progresskolor1 {
   background-color: red;
   width: 100%;
   height: 100%;
   position: absolute;
}

.progresskolor2 {
   background-color: gold;
   width: 50%;
   height: 100%;
   left: 25%;
   position: absolute;
}

.progresskolor3 {
   background-color: lime;
   width: 10%;
   height: 100%;
   left: 45%;
   position: absolute;
}

.zyciewroga {
   position: absolute;
   width: 20%;
   height: 1.5%;
   background-color: black;
   top: 45%;
   right: 10%;
   outline: var(--pixel-size) solid black;
}

.zycie {
   background-color: red;
   width: 100%;
   height: 100%;
}

.zycietwoje {
   position: absolute;
   width: 20%;
   height: 1.5%;
   background-color: black;
   top: 45%;
   left: 10%;
   outline: var(--pixel-size) solid black;
}

.zycie2 {
   background-color: red;
   width: 100%;
   height: 100%;
}

.umarles {
   background-color: black;
   position: absolute;
   width: calc(var(--pixel-size) * 160);
   height: calc(var(--pixel-size) * 144);
   z-index: 1000;
   color:white;
   font-size: 100px;
   text-align: center;
   padding-top: 220px;
   animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-duration: 0.25s;
}

.level {
   width: 100%;
   position: absolute;
   height: 5%;
   top: 12%;
   text-align: center;
   color:white;
   z-index: 100;
   font-size:50px;
   transition: 0.05s;
}

.powiadomienie {
   top: 81%;
   background-color: rgba(0,0,0,0.65);
   width: 100%;
   height: 10%;
   position: absolute;
   z-index: 1001;
   text-align: center;
   justify-content:center;
   display: table;
   animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-duration: 0.25s;
   visibility: hidden;
}

.powiadomienie a {
   display: table-cell;
   vertical-align: middle;
   color:gold;
   font-size: 50px;
}

.dmg {
   width: 100%;
   height: 15%;
   padding-top: 1%;
   text-align: center;
   z-index: 1000;
   position: absolute;
   top: 16%;
   background-color: rgba(0,0,0,0.65);
   animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-duration: 0.25s;
   visibility: hidden;
}

.dmg a {
   font-size: 70px;
}

.menu {
   left: 0;
   bottom: 0;
   position: absolute;
   padding: 10px;
}

.checkboxes {
   left: 0;
   bottom: 0;
   position: absolute;
   padding: 10px;
}

.checkboxes label {
   display: inline-block;
   white-space: nowrap;
}

.checkboxes input {
   vertical-align: middle;
   height: 20px;
   width: 20px;
   accent-color: black;
}

.checkboxes label span {
   vertical-align: middle;
   font-size: 26px;
}