@charset "utf-8";
/* ======================================================


    Game common style


========================================================*/
#game-container {
    overflow: hidden;
    position: relative;
    width: 640px;
    height: 420px;
    margin:0 auto;
}

#game-container::before {
    position: relative;
    content:"";
    display: block;
    border: solid 5px #000;
    width: 100%;
    height: 100%;
    z-index: 9000;
    pointer-events: none;
}

#game-offset {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#game-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#game-view {
    position: absolute;
}

/*#tile-floor {
    top:0;
    left:0;
    background-color: #ccc;
    transform: rotateX(45deg) rotateZ(45deg);
}

#tile-right {
    top:-18px;
    left:12px;
    background-color: #aaa;
    transform: rotateX(45deg) rotateY(45deg);
    
}

#tile-left {
    top:-2px;
    left:12px;
    background-color: #999;
    transform: rotateX(135deg) rotateY(135deg);
}*/

.cursor-map {
    position: absolute;
    top:0;
    left:0;
    background-color: #eee;
    opacity: .5;
    /*transform: rotateX(60deg) rotateZ(45deg);*/
}

.chip {
    background: url('../img/game/chips/sand.png') no-repeat center;
    background-size: contain;
}

.wall-1 {
    background: url('../img/game/wall/lab/wall-1.png') no-repeat center;
    background-size: contain;
}
.wall-2 {
    background: url('../img/game/wall/lab/wall-2.png') no-repeat center;
    background-size: contain;
}
.wall-3 {
    background: url('../img/game/wall/lab/wall-3.png') no-repeat center;
    background-size: contain;
}
.wall-alert-1 {
    background: url('../img/game/wall/lab/alert-3.png') no-repeat center;
    background-size: contain;
}
.wall-alert-2 {
    background: url('../img/game/wall/lab/alert-2.png') no-repeat center;
    background-size: contain;
}
.wall-alert-3 {
    background: url('../img/game/wall/lab/alert-1.png') no-repeat center;
    background-size: contain;
}

.character.cursor::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: solid 1px red;
}

.character-tentacle-1 {
    background: url('../img/game/character/tentacle-1.png') no-repeat center;
    background-size: contain;
}

#character-molvia {
    overflow: hidden;
    background: url('../img/game/character/girl-1.png') no-repeat center;
    background-size: contain;
}

@media screen and (max-width: 786px) {
    #game-container {
        width: 100%;
        height: 420px;
    }
}