.step__wrapper.step-current{z-index:11}.step__wrapper.step-current .step__wall--top{transform:rotateX(90deg) translateZ(250px) translateY(201px)}.step__wrapper.step-current .step__wall--top.left{left:-480px}.step__wrapper.step-current .step__wall--top.right{left:480px}.step__wrapper.step-current .step__wall--front{transform:translateZ(-50px)}.step__wrapper.step-current .step__wall--front.left{left:-480px}.step__wrapper.step-current .step__wall--front.right{left:480px}.step__wrapper.step-current .step__wall--left{transform:rotateY(-90deg) translateZ(240px) translate(190px)}.step__wrapper.step-current .step__wall--right{transform:rotateY(90deg) translateZ(240px) translate(-190px)}.step__wrapper.step-current .step__wall--bottom{transform:rotateX(-90deg) translateZ(203px) translateY(-201px)}.step__wrapper.step-current .step__wall--bottom.left{left:-480px}.step__wrapper.step-current .step__wall--bottom.right{left:480px}.step__wrapper.step-first{z-index:10}.step__wrapper.step-first .step__wall--top{transform:rotateX(90deg) translateZ(250px) translateY(-300px)}.step__wrapper.step-first .step__wall--top.left{left:-480px}.step__wrapper.step-first .step__wall--top.right{left:480px}.step__wrapper.step-first .step__wall--front{transform:translateZ(-528px)}.step__wrapper.step-first .step__wall--front.left{left:-480px}.step__wrapper.step-first .step__wall--front.right{left:480px}.step__wrapper.step-first .step__wall--left{transform:rotateY(-90deg) translateZ(240px) translate(-288px)}.step__wrapper.step-first .step__wall--right{transform:rotateY(90deg) translateZ(240px) translate(288px)}.step__wrapper.step-first .step__wall--bottom{transform:rotateX(-90deg) translateZ(203px) translateY(275px)}.step__wrapper.step-first .step__wall--bottom.left{left:-480px}.step__wrapper.step-first .step__wall--bottom.right{left:480px}.step__wrapper.has-shadow .step-second.step__wall{filter:brightness(75%)}.step__wrapper.step-second{z-index:9}.step__wrapper.step-second .step__wall--top{transform:rotateX(90deg) translateZ(250px) translateY(-769px)}.step__wrapper.step-second .step__wall--top.left{left:-480px}.step__wrapper.step-second .step__wall--top.right{left:480px}.step__wrapper.step-second .step__wall--front{transform:translateZ(-1016px)}.step__wrapper.step-second .step__wall--front.left{left:-480px}.step__wrapper.step-second .step__wall--front.right{left:480px}.step__wrapper.step-second .step__wall--left{transform:rotateY(-90deg) translateZ(240px) translate(-768px)}.step__wrapper.step-second .step__wall--right{transform:rotateY(90deg) translateZ(240px) translate(768px)}.step__wrapper.step-second .step__wall--bottom{transform:rotateX(-90deg) translateZ(203px) translateY(775px)}.step__wrapper.step-second .step__wall--bottom.left{left:-480px}.step__wrapper.step-second .step__wall--bottom.right{left:480px}.step__wrapper.has-shadow .step-third.step__wall{filter:brightness(50%)}.step__wrapper.step-third{z-index:8}.step__wrapper.step-third .step__wall--top{transform:rotateX(90deg) translateZ(250px) translateY(-1272px)}.step__wrapper.step-third .step__wall--top.left{left:-480px}.step__wrapper.step-third .step__wall--top.lefty{left:-960px}.step__wrapper.step-third .step__wall--top.right{left:480px}.step__wrapper.step-third .step__wall--top.righty{left:960px}.step__wrapper.step-third .step__wall--front{transform:translateZ(-1498px)}.step__wrapper.step-third .step__wall--front.left{left:-480px}.step__wrapper.step-third .step__wall--front.lefty{left:-960px}.step__wrapper.step-third .step__wall--front.right{left:480px}.step__wrapper.step-third .step__wall--front.righty{left:960px}.step__wrapper.step-third .step__wall--left{transform:rotateY(-90deg) translateZ(240px) translate(-1253px)}.step__wrapper.step-third .step__wall--left.left{left:-480px}.step__wrapper.step-third .step__wall--right{transform:rotateY(90deg) translateZ(240px) translate(1253px)}.step__wrapper.step-third .step__wall--right.right{left:480px}.step__wrapper.step-third .step__wall--bottom{transform:rotateX(-90deg) translateZ(203px) translateY(1280px)}.step__wrapper.step-third .step__wall--bottom.left{left:-480px}.step__wrapper.step-third .step__wall--bottom.lefty{left:-960px}.step__wrapper.step-third .step__wall--bottom.right{left:480px}.step__wrapper.step-third .step__wall--bottom.righty{left:960px}.step__wrapper.has-shadow .step-fourth.step__wall{filter:brightness(40%)}.step__wrapper.step-fourth{z-index:7}.step__wrapper.step-fourth .step__wall--top{transform:rotateX(90deg) translateZ(250px) translateY(-1778px)}.step__wrapper.step-fourth .step__wall--top.left{left:-480px}.step__wrapper.step-fourth .step__wall--top.lefty{left:-960px}.step__wrapper.step-fourth .step__wall--top.right{left:480px}.step__wrapper.step-fourth .step__wall--top.righty{left:960px}.step__wrapper.step-fourth .step__wall--front{transform:translateZ(-1980px)}.step__wrapper.step-fourth .step__wall--front.left{left:-480px}.step__wrapper.step-fourth .step__wall--front.lefty{left:-960px}.step__wrapper.step-fourth .step__wall--front.right{left:480px}.step__wrapper.step-fourth .step__wall--front.righty{left:960px}.step__wrapper.step-fourth .step__wall--left{transform:rotateY(-90deg) translateZ(240px) translate(-1735px)}.step__wrapper.step-fourth .step__wall--left.left{left:-480px}.step__wrapper.step-fourth .step__wall--right{transform:rotateY(90deg) translateZ(240px) translate(1735px)}.step__wrapper.step-fourth .step__wall--right.right{left:480px}.step__wrapper.step-fourth .step__wall--bottom{transform:rotateX(-90deg) translateZ(203px) translateY(1780px)}.step__wrapper.step-fourth .step__wall--bottom.left{left:-480px}.step__wrapper.step-fourth .step__wall--bottom.lefty{left:-960px}.step__wrapper.step-fourth .step__wall--bottom.right{left:480px}.step__wrapper.step-fourth .step__wall--bottom.righty{left:960px}.step__wrapper.has-shadow .step-fifth.step__wall{filter:brightness(35%)}.step__wrapper.step-fifth{z-index:6}.step__wrapper.step-fifth .step__wall--top{transform:rotateX(90deg) translateZ(250px) translateY(-2250px)}.step__wrapper.step-fifth .step__wall--top.left{left:-480px}.step__wrapper.step-fifth .step__wall--top.lefty{left:-960px}.step__wrapper.step-fifth .step__wall--top.right{left:480px}.step__wrapper.step-fifth .step__wall--top.righty{left:960px}.step__wrapper.step-fifth .step__wall--front,.step__wrapper.step-fifth .step__wall--fog{transform:translateZ(-2460px)}.step__wrapper.step-fifth .step__wall--front.left,.step__wrapper.step-fifth .step__wall--fog.left{left:-480px}.step__wrapper.step-fifth .step__wall--front.lefty,.step__wrapper.step-fifth .step__wall--fog.lefty{left:-960px}.step__wrapper.step-fifth .step__wall--front.right,.step__wrapper.step-fifth .step__wall--fog.right{left:480px}.step__wrapper.step-fifth .step__wall--front.righty,.step__wrapper.step-fifth .step__wall--fog.righty{left:960px}.step__wrapper.step-fifth .step__wall--left{transform:rotateY(-90deg) translateZ(240px) translate(-2225px)}.step__wrapper.step-fifth .step__wall--left.left{left:-481px}.step__wrapper.step-fifth .step__wall--right{transform:rotateY(90deg) translateZ(240px) translate(2225px)}.step__wrapper.step-fifth .step__wall--right.right{left:481px}.step__wrapper.step-fifth .step__wall--bottom{transform:rotateX(-90deg) translateZ(203px) translateY(2285px)}.step__wrapper.step-fifth .step__wall--bottom.left{left:-480px}.step__wrapper.step-fifth .step__wall--bottom.lefty{left:-960px}.step__wrapper.step-fifth .step__wall--bottom.right{left:480px}.step__wrapper.step-fifth .step__wall--bottom.righty{left:960px}.field-of-view-wrapper{margin-top:-10px;width:480px;height:500px;position:relative;overflow:hidden;display:inline-block;float:left}.field-of-view-wrapper .character{position:absolute;top:0;left:0;bottom:0;right:0;background:url(../hands.png);z-index:12;background-repeat:no-repeat;background-position:center bottom;animation:stepAnimation 3s infinite;background-size:contain}.field-of-view-wrapper .scene-wrapper{width:480px;height:500px;position:relative;overflow:hidden;perspective:640px}.field-of-view-wrapper.step-animation{animation:stepAnimation 1s alternate}.field-of-view-wrapper .step__wrapper{transform-style:preserve-3d;position:absolute;width:100%;height:100%}.field-of-view-wrapper .step__wrapper .step__wall{width:480px;height:500px;position:absolute;background-color:transparent;background-repeat:no-repeat!important;background-position:center bottom!important;background-size:cover!important;image-rendering:crisp-edges}.field-of-view-wrapper .step--fog{background:#000;position:absolute;z-index:1;top:calc(50% - 50px);left:calc(50% - 50px);width:100px;height:100px;display:block}@keyframes stepAnimation{0%{transform:translateY(0)}50%{transform:translateY(10px)}to{transform:translateY(0)}}.mini-map__wrapper{position:relative;float:left;display:inline-block;margin-left:5px;margin-top:5px}.mini-map__row{display:block;margin:0;padding:0;height:15px}.mini-map__tile{border:1px solid #333;display:inline-block;margin:0;padding:0;width:15px;height:15px;background:#555}.mini-map__tile--fill{background:#eee}.mini-map__tile--player{background:crimson}.mini-map__compass{width:15px;height:15px;margin:0;padding:0;border:1px solid #333;color:#333}.mini-map__compass-wrapper{width:51px;height:51px;position:relative;overflow:hidden;float:left;display:inline-block;margin-left:5px;margin-top:5px}.mini-map__compass--active{color:#dc143c;border-color:#dc143c}.mini-map__compass--NORTH,.mini-map__compass--EAST,.mini-map__compass--SOUTH,.mini-map__compass--WEST{position:absolute;line-height:15px;font-size:12px}.mini-map__compass--NORTH{top:0;left:17px}.mini-map__compass--WEST{top:17px;left:0}.mini-map__compass--EAST{top:17px;right:0}.mini-map__compass--SOUTH{top:34px;left:17px}.game__main-wrapper{display:block;width:800px;height:480px;overflow:hidden;position:relative;border:1px magenta solid}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}body{background:black}