@font-face {
   font-family: 'Arcade Normal';
   font-style: normal;
   font-weight: normal;
   src: local('Arcade Normal'), url('../fonts/arcade-font/ARCADE_N.woff') format('woff');
   }
@font-face {
   font-family: elif;
    src: url('../fonts/alphabet_of_magi/ALPMAGI.TTF') format('woff'),
     url('../fonts/alphabet_of_magi/ALPMAGI.woff') format('truetype');    
   
  
}
   
:root {
    --pixel-size: 2px;
    --grid-cell: calc( var(--pixel-size) * 16);
    --bg: #111;
 }
 @media( min-width: 700px ) {
    :root {
       --pixel-size: 3px;
    }
 }
 @media( min-width: 1000px ) {
    :root {
       --pixel-size: 4px;
    }
 }
 
 /* @media( min-width: 1000px ) {
    :root {
       --pixel-size: 5px;
    }
 } */
 
 html, body {
    height: 100%;
    overflow: hidden;
    -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
   /* Safari */
   -khtml-user-select: none;
   /* Konqueror HTML */
   -moz-user-select: none;
   /* Firefox */
   -ms-user-select: none;
   /* Internet Explorer/Edge */
   user-select: none;
   /* Non-prefixed version, currently
                                   supported by Chrome and Opera */
 }
 
 body {
    background: var(--bg);    
 }
 .arcade-font{
   font-family: 'Arcade normal'; 
 }
 
 #game{
   width: 100%;
   height: 100%;
 }
 .telif{
   font-family: 'elif' ; 
 }
 .hidden-m-text{
   font-family: 'elif' ;
   position: fixed;
   width: 200%;
   color:white;
}
 .pixel-art {
    image-rendering: pixelated;
 }
 
 .frame {
   position:fixed;
   z-index:1;   
    
    overflow: hidden; 
    background:#111;
 }

 .full-screen-btn{
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: url("../resources/fullscreen.png");;
    width:16px;
    height: 16px;
    border: none;
    cursor: pointer;
    z-index: 9999;
 }
 
 .camera {
   /* width: calc(var(--pixel-size) * 160);
    height: calc(var(--pixel-size) * 144);*/
    width:100% !important;
    height: 100% !important;
    overflow: hidden;
    background: #111;
    position:relative; 
    
 }
 
 .player-main-info-card-wrapper{
   width: 100%;
   height: 90px; 
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 1;
   background-color: black;
   
   color:white;
 }
 .player-main-info-card-wrapper .left-container{
    width: 300px;
    height:100%;
    float: left;
 }
 .player-main-info-card-wrapper .left-container .attr-container{
    width: 99%;
    height: 40%;
    text-align: center;
    font-family: 'Arcade normal'; 
    font-size: .8rem;
    padding-top: 5px;
 }

 .hpbar{
   width: 100px;
    height: 10px;
    border: solid #ffffff;
    background: #290101;
    border-radius: 1px;
    box-shadow: 1px 1px #111;
    margin: 0 auto;
} 
.hpbar .bar{
   width:100%;
   height: 100%;
   background: #c00202;
   margin: 0 auto;
   transition: width .1s;
}
.staminabar{
   width: 100px;
    height: 10px;
    border: solid rgb(0,255,0);
    background: #023d05;
    border-radius: 1px;
    box-shadow: 1px 1px #111;
    margin: 0 auto;
}
.staminabar   .bar{
   width:100%;
   height: 100%;
   background: green;
   margin: 0 auto;
   transition: width .1s;
   
}

.animated-border-change{
   animation: animated-border-change .8s;
   transition: border .5;
}




@keyframes animated-border-change {
   from, to { 
      transform: scaleX(1) scaleY(1);
      border:white thin solid;
   }
 
   10%,   50%, 90% {
      transform: scaleX(.9) scaleY(1.2);
      border:yellow thin solid ;
   }
 
   20%,  60%, 80% {
      transform: scaleX(1.2) scaleY(.7);
      border:aqua thin solid ;
   }
 }

 .player-main-info-card-wrapper  .right-container{
   width: 500px;
   height:100%;
   float: right;
   font-family: 'Arcade normal'; 
 }
 .player-main-info-card-wrapper  .right-container>.valign  {
   width:100%;
   height:100%;
 }
 .player-main-info-card-wrapper  .right-container>.valign>div{
   width:calc(96% / 3);
   height:100%; 
}
.player-main-info-card-wrapper  .right-container .info-action{
   position: relative;
}
.player-main-info-card-wrapper  .right-container .info-action .btn-key{
   width: 40px;
   height: 40px;
   font-size: 0.8rem;
   line-height: 30px;
   position: absolute;
   top: 60px;
   z-index: 1;
   left: -10px;
}
.player-main-info-card-wrapper  .right-container .info-action  .icon-action{
   width: 64px;
   height: 64px;
   border:solid white;
   border-radius: 2px;
   
   position: absolute;
   top: 10px;
   
}
.player-main-info-card-wrapper  .right-container .info-action  .icon-action img{
   width: 100%;
   height: 100%;
   image-rendering: pixelated;
}

.player-main-info-card-wrapper  .right-container .gold-info{
   
}



.player-main-info-card-wrapper  .center-container{
   width: calc(100% - 850px);
   height:100%;
   float: left;
   font-family: 'Arcade normal';  
 }



 .map {
    image-rendering: pixelated;
    /*background-image: url("https://assets.codepen.io/21542/CameraDemoMap.png");
    width: calc(13 * var(--grid-cell));
    height: calc(10 * var(--grid-cell));
    */
    background-size: 100%;
    
    position: relative;
 }
 .overmap{
   image-rendering: pixelated;
   background-color: transparent;
   position: absolute;
   top:0px;
   left: 0px;
   width: 100%;
   height: 100%; 
    z-index: 9000;
    background-repeat: no-repeat;
    background-size: contain;
 }
 .bgwhitepaper{
    position: absolute;
   top: -5px;
    left: -5px;
    width: 100%;
    height: 100%;
    z-index: 0;
    border: solid white 5px;
    background: white;
}
.relmap{
   image-rendering: pixelated;
   background-color: transparent;
   background-repeat: no-repeat;
   background-size: contain;
   position: absolute;
   top:0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 0;
   filter: brightness(0.5) blur(2px);   
}
 .bgmap{ 
    image-rendering: pixelated;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
   
 }
 .Entitys{
   z-index: 1;
 }
 .imap-canvas{
   image-rendering: pixelated;
   background-color: transparent;
   background-repeat: no-repeat;
   background-size: contain;
   position: absolute;
   top:0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 1;
 }

 .Entity{
   position: absolute;
   top:0px;
   left: 0px;
   width:calc( var(--grid-cell) );
   height:calc( var(--grid-cell) ); 
   filter: drop-shadow(2px 4px 3px black) ;
   
 }
.Entity .avatar-wrapper{
   position: absolute;       
   bottom:0px;
   left: 0px;
   width:100%;
   height:100%;
   
}
.Entity .hitbox{
   
   width: 100%;
   height: 100%;
   position: absolute;       
   bottom:0px;
   left: 0px;
}
.Entity.Player .hitbox{
   
}
 .Avatar{ 
   position: absolute;    
   overflow: hidden;
   bottom:0px;
   left: 0px;
 }
 

 .StatusDiv{
   margin: 0 auto;
   height: calc(var(--pixel-size)*5);
   margin-top: calc(var(--pixel-size)*-6);
   display: flex;
   justify-content: center;
   align-items: center;
   background: #2a0503;
   box-shadow: 2px 2px 1px white;   
   transform: rotate(      7deg      );
   display: none;
    text-align: center;
    line-height: 1rem;
 }
 .StatusDiv.active{
    display: inherit;
 }
 .status-icon {   
   width:16px !important;
   height:16px !important;   
   image-rendering: pixelated !important; 
   background-color:transparent !important;
   background-image: url("../resources/p.png") !important; 
 }
 .status-icon.guard{
    background-position: -64px 48px;
 }
 .status-icon.tired{

 }

 .status-text{
    color: white;
    font-family: 'Arcade Normal';
    font-size: .6rem;
    text-shadow: 0px 0px 3px black;
 }
  
 .cell-debug{
    width:calc( var(--grid-cell) );
    height:calc( var(--grid-cell) );
    /*border:1px solid red;*/
    background:white;
    position: absolute;
    top:0px;
    left:0px;
 }
 .cell-map{
   width:calc( var(--grid-cell) );
   height:calc( var(--grid-cell) );
   /*border:1px solid red;*/
   text-align: center;
   position: absolute;
   top:0px;
   left:0px;
}
  
 .bpad{
   position: fixed;
   right:calc(var(--pixel-size) * 5);
   bottom: calc(var(--pixel-size) * 1);
   z-index: 2;
   user-select:none;   
   height: calc(var(--pixel-size) * 25); 
   background: #0000004d;
    border-radius: 5px;
 } 
 .bpad div{
    float: left;
    margin: calc(var(--pixel-size) * 6);
 }
 .dpad {
    
    position: fixed;
    left:calc(var(--pixel-size) * 5);
    bottom: 20px;
    z-index: 2;
    user-select:none;
    width: calc(var(--pixel-size) * 37);
    height: calc(var(--pixel-size) * 38);
    background: #0000004d;
    border-radius: 50%;
 }
 .dpad-button {
    appearance:none;
    outline:0;
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
 }
 .dpad-button svg {
    display:block;
    height: calc(var(--pixel-size) * 13);
 }
 
 .dpad-button.pressed .Arrow_arrow-inset { stroke:#07c2cc; }
 .dpad-button.pressed .Arrow_arrow-body { stroke:#17dfea; }
 
 .dpad-up {
    position: absolute;
    left: calc(var(--pixel-size) * 12);
    top:0;
 }
 .dpad-down {
    position: absolute;
    bottom:var(--pixel-size);
    left: calc(var(--pixel-size) * 12);
 }
 .dpad-left {
    position: absolute;
    top: calc(var(--pixel-size) * 12);
    left:0;
 }
 .dpad-right {
    position: absolute;
    top: calc(var(--pixel-size) * 12);
    right:0;
 }
 
  
 
  



 /**

KEY BUTTON

*/

.btn-key { 
   font-family: 'Arcade Normal';
   image-rendering: pixelated;
   background-image: url("../resources/button.png");
   background-size: cover;
   background-position: 0px 0px;
   background-color: transparent;
   width: calc(var(--pixel-size) * 13);
   height: calc(var(--pixel-size) * 13);
   line-height: calc(var(--pixel-size) * 11);
   font-size: calc(var(--pixel-size) * 4);
   text-align: center;
   text-shadow: 1px 1px 1px #111;
   border: none;
   color: #5f5f5f;
   cursor: pointer;
}

.btn-key.active {
   background-position-x: calc(var(--pixel-size) * 13);
   border: none;
   color: #17dfea;
   line-height: calc(var(--pixel-size) * 13);
}
.btn-key.active, .btn-key:active svg{
   margin-top:5px;
}



.noselect {
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
   /* Safari */
   -khtml-user-select: none;
   /* Konqueror HTML */
   -moz-user-select: none;
   /* Firefox */
   -ms-user-select: none;
   /* Internet Explorer/Edge */
   user-select: none;
   /* Non-prefixed version, currently
                                   supported by Chrome and Opera */
 }
 .valign{
   display: flex;
   justify-content: center;
   align-items: center; 
}
.center{
   margin: 0 auto;
   text-align: center;
}


.animated.delay-01 {
   animation-delay: 0.1s !important;
 }
 .animated.delay-02 {
   animation-delay: 0.2s !important;
 }
 .animated.delay-03 {
   animation-delay: 0.3s !important;
 }
 .animated.delay-04 {
   animation-delay: 0.4s !important;
 }
 .animated.delay-05 {
   animation-delay: 0.5s !important;
 }
 
 .animated.delay-1 {
   animation-delay: 1s !important;
 }
 
 .animated.delay-2 {
   animation-delay: 2s !important;
 }
 
 .animated.delay-3 {
   animation-delay: 3s !important;
 }
 
 .animated.delay-4 {
   animation-delay: 4s !important;
 }
 
 .animated.delay-5 {
   animation-delay: 5s !important;
 }
 
 
 .animated.delay-01 {
   animation-delay: 0.1s !important;
 }
 
 .animated.delay-02 {
   animation-delay: 0.2s !important;
 }
 
 .animated.delay-03 {
   animation-delay: 0.3s !important;
 }
 
 .animated.delay-04 {
   animation-delay: 0.4s !important;
 }
 
 .animated.delay-05 {
   animation-delay: 0.5s !important;
 }
 
 

  
 .animated.float {
   animation: float 2s ease-in-out infinite;
 }
 
 @keyframes pulsate {
   0% {
     transform: scale(0.1);
     opacity: .4;
   }
   50% {
     opacity: 1;
   }
   100% {
     transform: scale(1.2);
     opacity: .5;
   }
 }
 
 @keyframes float {
   0% {
     box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
     transform: translatey(0px);
   }
   50% {
     box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
     transform: translatey(-2px);
   }
   100% {
     box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
     transform: translatey(0px);
   }
 }

 
 @keyframes pulse {
   0% {
     transform: scale(0.8); 
   }
   50% {
      transform: scale(1.2); 
   }
   100% {
     transform: scale(.8); 
   }
 }


 .actionicon{   
   position: absolute;
   top:-24px;
   left: 16px;
   width:16px !important;
   height:16px !important;   
   image-rendering: pixelated !important; 
   background-color:transparent !important;
   background-image: url("../resources/p.png") !important;
   transform: scale(2); 
  
}

 .effect-animation{
    position: absolute; 
 }
 .effect-animation.effect-icon{     
   width:16px !important;
   height:16px !important;   
   image-rendering: pixelated !important; 
   background-color:transparent !important;
   background-image: url("../resources/p.png") !important;
   
 }
 .scale5{
    transform: scale(5) !important;
 }
 .scale3{
   transform: scale(3) !important;
}
 
.damage-radial{
   background: rgb(252,205,205);
   background: radial-gradient(circle, rgba(252,205,205,0.27244401178440125) 47%, rgba(255,0,0,1) 100%);
}

.floating-up-text{
   font-size: 1.5rem;
   font-family: "Arcade normal";
   text-shadow: 1px 1px 12px #fff; 
   -webkit-text-stroke: 2px black;
}

.ui-message-sellpanel{
   font-family: "Arcade normal";
   position: fixed;
   z-index: 10;
   top:0px;
   left: 0px;
   width: 100%;
   height: 100%;   
   background: #0000004d; 
   display: flex;
   justify-content: center;
   align-items: center; 
}
.ui-message-sellpanel .container{
   min-height: 20%;
   min-width: 40%;
   max-width: 80%;
   max-height: 90%;
   margin: 0 auto;
   background-color: white;
   border-radius: 5px;
   position: relative;
} 
.goldcost-text{
   font-size: 2rem;
   color: yellow;
   text-shadow: 1px 1px 1px #111;
   background-color: #da7a34;
}
.nameitem-text{
   font-size: 1rem;
   font-weight: bold;
   margin:2rem 0px 1rem;
}
.sell-cursor{
   width: 40%;
}
.sell-btn{
   padding:1rem;   
   text-shadow: 1px 2px 2px gray;
   width:50%;
   text-align: center;
   color:#111;
   font-size: .9rem;
}
.sell-btn.active{
   border: thin solid;
   box-shadow: 1px 1px 2px #111;
   font-size: 1.5rem;
}
.sell-cursor{
   width:16px;
   height:16px;   
   image-rendering: pixelated; 
   background-color:transparent;
   background-image: url("../resources/p.png");
   background-position: -176px -432px;   
   transform: scale(2) scaleX(-1);
    margin-left: 5px;
} 
.sell-btn-wrapper{ 
   border: thin solid;
}
.ui-message-toast{   
   position: fixed;
   bottom: 30px;
   left: 0px;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center; 
   z-index: 100;
}

.ui-message-toast .toast{
   margin: 0 auto;
   background-color: black;
   color: white;
   width:auto;
   height: 2rem;
   line-height: 2rem;
   border-radius: 12px;
   padding: 12px;
   box-shadow: inset 0px 2px 14px 6px #4b4b4b;
}
.ui-message-toast.white .toast{
   background-color: white;
   color: black;
   box-shadow: inset 0px -2px 5px 3px #4b4b4b;
}
.ui-message-toast.align-left .toast{
   
   position: absolute;
   bottom: 20px;
   left:20px;
}

.ui-message-panel{
   position: fixed;
   z-index: 10;
   top:2rem;
   left: 1rem;
  /* width: calc(100% - 3rem);*/
   height: 100px;
   box-shadow: inset 0px 2px 14px 6px #4b4b4b;
   background: white;
   border-radius: 10px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center; 
   
}
.ui-message-panel.black{
   background-color: #111 !important;
   color:white;
}
.ui-message-panel.playertalk{
   background-color: red !important;
   color:white;
}



.small{
   font-size: .4rem !important;
}
.red{
   color:red;
}
.green{
   color:green;
}
.purple{
   color:purple;
}
.blue{
   color: blue;
}
.white{
   color: white;
}

.ui-message-panel .container{
   margin:0 auto;
   width:calc(100% - 10px);
   max-height:calc(100% - 10px);
   padding:0px 2rem;
   font-size: 1vw;
}
.ui-message-panel .cursor{
   position: absolute;
   bottom:10px;
   right: 10px; 
   width:16px;
   height:16px;   
   image-rendering: pixelated; 
   background-color:transparent;
   background-image: url("../resources/p.png");   
   background-position: -96px -432px; 
   transform: scale(2);
   display: none;
   -webkit-animation: cursor-animation 2s ease-in-out infinite;;
   animation: cursor-animation 2s ease-in-out infinite;;
}


@keyframes cursor-animation {
   from, to { 
      transform: translatex(0px) scale(2);
   }
 
   10%, 30%, 50%, 70%, 90% {
      transform: translatex(-2px)  scale(2);
   }
 
   20%, 40%, 60%, 80% {
      transform: translatex(2px)  scale(2);
   }
 }

.ui-message-panel .a9{
   font-family: 'Arcade normal';
}


.ui-message-panel .elif{
   font-family: 'elif';
   font-weight: bold;
}


.projectile{
   image-rendering: pixelated;
   position: absolute;  
   width: var(--grid-cell);
   height: var(--grid-cell);
   
   background-repeat: no-repeat;
   background-size: cover;
}
.bomb{
   image-rendering: pixelated;
   position: absolute;  
   width: var(--grid-cell);
   height: var(--grid-cell);
   
   background-repeat: no-repeat;
   background-size: cover;
}
 
.telegraph-cell{
   position: absolute;
   width: var(--grid-cell);
   height: var(--grid-cell);
   background: red;   
   animation: attack-cell-private-animation 2s ease-in-out infinite;
   border-radius: 6px;
   z-index: 1;
}
.telegraph-cell.white{
   background-color: white;
   width: calc(var(--grid-cell) * .8);
   height:  calc(var(--grid-cell) * .8);
   margin:  calc(var(--grid-cell) * .1);
   animation: attack-cell-private-animation .1s;   
}
.telegraph-cell.yellow{   
   background: yellow;   
}

 

 
@keyframes attack-cell-private-animation {
   0% {
     transform: scale(0.8); 
     filter:brightness(100) opacity(0.5);

   }
   50% {
      transform: scale(1.2); 
      filter:brightness(200) opacity(1);
      
      
   }
   100% {
     transform: scale(.8); 
     filter:brightness(100)     opacity(0.5);
   }
 }


 

 
@keyframes shake-letter {
   from, to {
     top:0px;
   }
 
   10%, 30%, 50%, 70%, 90% {
    top:-.5px;
   }
 
   20%, 40%, 60%, 80% {
      top:.5px;
   }
 }

 
@keyframes shake-letter2 {
   from, to {
     top:0px;
   }
 
   10%, 30%, 50%, 70%, 90% {
    top:.2px;
   }
 
   20%, 40%, 60%, 80% {
      top:-.2px;
   }
 }
 
 
@keyframes shake-letter3 {
   from, to {
     top:0px;
     left:0px;
   }
 
   10%, 30%, 50%, 70%, 90% {
    top:-.3px;
    left:-.1px;
   }
 
   20%, 40%, 60%, 80% {
      top: .3px;
      left:.1px;
   }
 }

 
@keyframes shake-letter4 {
   from, to {
     top:0px;
     left:0px;
   }
 
   10%, 30%, 50%, 70%, 90% {
    top:-.4px;
    left:.2px;
   }
 
   20%, 40%, 60%, 80% {
      top:-.4px;
      left:-.2px;
   }
 }
 .shake-letter {
    position: relative;
   -webkit-animation: shake-letter 1s ease-in-out infinite;;
   animation: shake-letter 1s ease-in-out infinite;;
 }
 
 .shake-letter2 {
   position: relative;
   -webkit-animation: shake-letter2 1s ease-in-out infinite;;
   animation: shake-letter2 1s ease-in-out infinite;;
 }
 .shake-letter3 {
   position: relative;
   -webkit-animation: shake-letter3 1s ease-in-out infinite;;
   animation: shake-letter3 1s ease-in-out infinite;;
 }
 .shake-letter4 {
   position: relative;
   -webkit-animation: shake-letter4 2s ease-in-out infinite;;
   animation: shake-letter4 1s ease-in-out infinite;;
 }
 



 .UI-floating-menu{
    position: fixed;
    z-index: 200;
    min-width: 100px;  
    min-height: 40px;
    max-height: 90%;
    overflow: auto;
    box-shadow: 1px 3px 2px 3px #111111a6;
 }

 .UI-menu-option{
    max-width: 300px;
    min-height: 40px;    
    
    text-align: center;
    line-height: 40px;
    text-shadow: 0px 1px #d1d1d1;
   font-family: 'Arcade normal'; 
   box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
   font-size: .6rem;
   color:   black;
   background-color: white;
 }
 .UI-menu-option.selected{
   color: white;
   background-color: orange;
   text-shadow: 1px 1px 2px black;
 }
.UI-player-levelup{
   position: fixed;
   top:0px;
   left: 0px;    
   width: 100%;
   height: 100%;
   z-index: 99;
   
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00000057;
}


.ui-panel-levelup{ 
   width: 90%;
   height: 80%;     
   position: relative;
  
   text-shadow: 0px 1px #d1d1d1;
  font-family: 'Arcade normal'; 

}
 .UI-player-inventory{
    position: fixed;
    top:0px;
    left: 0px;    
    width: 100%;
    height: 100%;
    z-index: 99;
    
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #00000057;
 }
  
 .ui-panel-inventory{ 
    width: 99%;
    height: 86%;     
    position: relative;
   
    text-shadow: 0px 1px #d1d1d1;
   font-family: 'Arcade normal'; 

 }
.menu-card{
   height: 100%;
} 
.card-wrapper{
   width: 100%;
   height: 100%;
}
 .info-card{
    width: 90%;    
    background-color: white;
    border-radius: 12px;
    box-shadow: 1px 3px 2px 3px #111111a6;
    margin: 0 auto; 
    overflow: hidden;
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    position: relative;
    font-size: 1vw;
 }
 .ui-panel-inventory .right-side{
   width: 59%;  
 }

 .ui-panel-inventory .left-side{
   width: 40%;  
 }
 .ui-panel-inventory  .side-wrapper{
    width: calc(100% - 10px);
    padding: 0px 5px;
 }

 
.griditems{ 
   border:thin solid yellow;
}
 .grid-wrapper{
   width:100%;
   height: 100%;
   overflow: hidden;
   background-color: white;
   display: grid;   
   grid-column-gap: .1rem;
   grid-row-gap: .1rem;
   border-bottom:thin solid;
}
.grid-cell .item-wrapper{
   padding: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    z-index: 2;
}
.grid-cell .item-wrapper .item{
   image-rendering: pixelated; 
   transform: scale(3);   
   margin-top:1rem;
}

.grid-cell .item-wrapper .cant-text{
   position: absolute;
   bottom: 0px;
   right: 5px;
   font-size: .5rem;
}
.grid-cell .item-wrapper .equiped-tag{
   position: absolute;
   bottom: 0px;
   left: 5px;
   font-size: .5rem;
   color:red;
}
 .grid-wrapper .grid-cell{
   border:inset;
   width: 100%;
   height: 100%;
   position: relative;
}
.grid-wrapper .grid-item-cursor-selector{
   position: absolute;
   top:0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: yellow;;
   z-index: 1;
}
.griditem-info{
   background-color: black;
   color: white;
   width: 100%;
   line-height: 1.5rem;
}
.griditem-info p{
   margin:.2rem 0px;
}
 .wrapper{
    width: 99%;
    border-bottom: solid;
    margin: 0 auto;
    font-size: 1.3vw;
 }
 .gear-wrapper{
    width: 100%;
 }
 .cell{
   text-align: center;
   padding:1vw 0px;
 }
 .cell.col-1{    
   width: calc(100% / 1);
 }
 .cell.col-2{    
   width: calc(100% / 2);
 }
 .cell.col-3{    
   width: calc(100% / 3);
 }
 .cell.col-4{    
   width: calc(100% / 4);
 }
 
 .cell-icon{
    padding:24px 0px;
 }
 .full-height{
    height: 100%;
 }
 .full-width{
    width: 100%;
 }
 .full-view{
   width: 100%;
   height: 100%;
}
 .skills {
   width:100%; 
 }
 .skills .skills-body.midwrapper{
   width: 100%;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
 }
 .top-info-toggle{
   width: 100%;
   padding: 10px;
   background: #da7a34;
   margin: 0 auto;
   text-align: center;
   position: relative;
 }
 .top-info-toggle .arrow-icon{
    position: absolute;
    top:.8vw;
    right:2vw;
    transform: scale(2);
    filter: drop-shadow(0px 1px 1px black)
 }
 .top-info-toggle .arrow-icon.right{
   right:auto;
   left: 2vw;
    transform: scale(2) scaleX(-1);
 }
 .inventory.midwrapper{
   width: calc(200% / 3); 
   height:23vw;
 }
 .inventory-body{ 
    overflow: hidden;
    height: calc(100% - 64px);
 }
 .info-card .title{
    height: 1.2rem !important;
    font-weight: bold;
    line-height: 1.2rem;
 }
 .flex-container{
   display: flex;
   flex-wrap: wrap;   
 }
 .flex-container.half>*{
    flex-basis: 50%;
 }
 .row{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center; 
    padding:.3rem 0px;
 }
 .row:not(:last-child){
    border-bottom: thin solid;
 }
 .row-label{
    width: 4rem;
    text-align: left; 
 }
 .row-value{
   width: calc(100% - 4rem);
}
.icon-melody{
   width: 16px;
   height: 16px;
   background-color: #d1d1d1;     
   background-image: url("../resources/p.png");
   image-rendering: pixelated; 
   background-position: -176px -400px;    
   transform: scale(4);
   border-radius: 2px;
   margin: 0 auto;
}
.icon-melody.off{
   background-position: -192px -400px;    
}
.icon-sound{
   width: 16px;
   height: 16px;
   background-color: #d1d1d1;     
   background-image: url("../resources/p.png");
   image-rendering: pixelated; 
   background-position: -176px -384px;    
   transform: scale(4);
   border-radius: 2px;
   margin: 0 auto;
}
.icon-sound.off{
   background-position: -192px -384px;    
}
.icon-off{
   width: 16px;
   height: 16px;
   background-color: #d1d1d1;    
   filter:grayscale(1)  contrast(0.5);
   background-image: url("../resources/p.png");
   image-rendering: pixelated; 
   transform: scale(4);
   border-radius: 2px;
   margin: 0 auto;
}

.icon-on{
   width: 16px;
   height: 16px;
   background-color: #d1d1d1;    
   filter:contrast(2px);
   background-image: none;
   image-rendering: pixelated; 
   transform: scale(4);
   border-radius: 2px;
   margin: 0 auto;
}
.icon-active{
   width: 16px;
   height: 16px;
   background-color: #da7a34;    
   filter:contrast(2px);    
   background-image: url("../resources/p.png");
   image-rendering: pixelated; 
   transform: scale(4);
   border-radius: 2px;
   margin: 0 auto;
}
 .icon-weapon{    
   background-position: -48px -208px;    
}
.icon-shield{
   background-position: -48px -304px;    
}
 .icon-cloth{    
   background-position: 0px -288px;        
}
 .icon-ring{                                                       
   background-position: -48px -144px;   
}
 .icon-collar{   
   background-position: -64px -144px;   
}
 
.info-icon{
   position: absolute;
   top:0px;
   left: 0px;   
}
.icon-key{
   width:16px;
   height:16px;   
   image-rendering: pixelated; 
   background-color:transparent;
   background-image: url("../resources/p.png");
   background-position: -80px -400px; 
}
.icon-key.left{
   transform: rotate(180deg);
}
.icon-key.down{
   transform:  rotate(90deg);
}
.icon-key.up{
   transform: rotate(-90deg);
}
.icon-key.A{
   color: white;
   line-height: 1rem;
   background-position: -96px -400px; 
}
.icon-key.B{
   color: white;
   line-height: 1rem;
   background-position: -96px -400px; 
}
.arrow-icon{
   
   width:16px;
   height:16px;   
   image-rendering: pixelated; 
   background-color:transparent;
   background-image: url("../resources/p.png");
   background-position: -176px -432px;
   transform: scale(4);
}


.coins-icon{
   
   width:16px;
   height:16px;   
   image-rendering: pixelated; 
   background-color:transparent;
   background-image: url("../resources/p.png");
   background-position: -0px -144px;
   transform: scale(2);
}
.bag-icon{
   
   width:16px;
   height:16px;   
   image-rendering: pixelated; 
   background-color:transparent;
   background-image: url("../resources/p.png");
   background-position: -16px -144px;
   transform: scale(2);
}


.chest-icon{
   
   width:16px;
   height:16px;   
   image-rendering: pixelated; 
   background-color:transparent;
   background-image: url("../resources/p.png");
   background-position: -64px -128px;
   transform: scale(2);
}
.inventory-icon{
   image-rendering: pixelated; 
   transform: scale(2);
}
.inventory-item{
   position:relative;
   width:98%;
   border-bottom:thin solid #d1d1d1;   
   font-size: .8vw;
   min-height: 3vw;
}
.inventory-item.selected{
   background:yellow;
   color:red;
} 
.message-bottom-panel{
   height: 3rem;
   width: 100%;
}
ul.secret{
   font-size: .7vw;
   margin: 0 auto;
   width: 80%;
}
ul.secret li{
   margin-bottom: 1vw;
}
ul.secret li.elif{
   font-family: 'elif' ;   
}

ul.secret li.elif span{
   font-family: 'Arcade Normal' ;
}
 
@media( max-width: 720px ) {
   .info-card{
      font-size: 1.2vw;
   }
   .icon-off,.icon-on, .icon-active {
      transform: scale(2);
   }  
   .bag-icon{
      transform: scale(1);
   }
   .cell-icon{
      padding:8px 0px;
   }
   .title{
      height: 1.5rem !important;
      font-weight: bold;
      line-height: 1.5rem;
   }
}


.circle{
   width:30px;
   height:30px;
   background-color: blue;
   border-radius: 50%;
   border-top:red solid;
}

.particle{
   width:5px;
   height:5px;
   background-color: white;
   filter:brightness(200) drop-shadow(1px 0px 10px white);
}
.particle.ms{
   width:25px;
   height:25px;
}


.particle.dust{
   border-radius: 50%;
}



#panelSounds{
   position: fixed;
    bottom: 0px;
    right: 0;
    width: 136px;
    height: 200px;
    z-index: 100;
    transform:scale(.7);
}

#panelSounds .btn-key{
   width: 3rem;
    height: 3rem;
    line-height: 2.5rem;
}



.title-game{
   background-image: url("../resources/title.png");
   height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center; 
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    image-rendering: pixelated;    
    
}

#credits{
   color:white;
   width: 100%;
   height: 100%;
   position: absolute;
   top:0px;
   left: 0px;
   font-family: 'Arcade Normal';
    font-size: .8rem;
}

.hitstar {
   width: 16px;
   height: 16px; 
   background-image: url("../resources/p.png");
   image-rendering: pixelated; 
   background-position: -160px -240px;    
   transform: scale(6);
   border-radius: 0px;
   
   background-color: transparent !important; 
}