@keyframes move {
  0%,100% { transform:rotateY(-10deg) }
  50% { transform:rotateY(10deg) }
}

/* All */

* {
  margin: 0;
  padding: 0;
  font: 2.5vh/5.5vh arial,sans-serif;
  vertical-align: middle;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -moz-user-select: none;
  cursor: pointer;

}

html, body {
  height:100%;
  background: #000;
  overflow: hidden;
  background: radial-gradient(#def 25%,#7ec0ee);
  touch-action: manipulation
}

a {
  color: #def;
}

input, button {
  position: relative;
  z-index: 2;
  touch-action: manipulation;
}

input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
  background: #888;
  border: 1px solid #000;
}

input[type=range]::-moz-range-track,
input[type=range]::-moz-range-thumb {
  background: #888;
  border: 1px solid #000;
}

#perspective {
  width: 0;
  height: 0;
  perspective: 120vh;
  position: absolute;
  top: 50%;
  left: 50%;
}

.editor #perspective {
  top: 60vh;
  left: 50vw;
}

#perspective * {
  transform-style: preserve-3d;
}

#scene {
  width: 0;
  height: 0;
  transform-origin: 18vh 0%;
  transition: transform 1s, transform-origin 1s;
}

.editor #scene {
  transform:rotateX(80deg)translateX(-18vh);
}

/**************************************************************/

/* Cubes */

.cube {
  position: fixed;
  top: 0;
  left: 0;
}

.cube > div {
  width: 100%;
  height: 100%;
  position: fixed;
}

.cube .up {
  transform:rotateY(90deg)translateX(-100%)rotateY(-90deg)
}

.cube .left {
  transform:rotateX(-90deg)translateY(-50%)translateX(-50%)rotateY(-90deg)
}

.cube .right {
  transform:rotateX(-90deg)translateY(-50%)translateX(50%)rotateY(90deg)
}

.cube .front {
  transform:translateY(50%)rotateX(-90deg)translateY(-50%)
}

.cube .back {
  transform:translateY(-50%)rotateX(-90deg)translateY(-50%)rotateY(180deg)
}

.cube.wrap {
  width: 32vh;
  height: 32vh;
  pointer-events: none;
  transform: none;
}

.cube.wrap > div {
  background: transparent;
  pointer-events: none;
}

/*.cube.wrap .left {
  transform:rotateX(-90deg)translateY(-50%)translateX(-52%)rotateY(-90deg);
}

.cube.wrap .right {
  transform:rotateX(-90deg)translateY(-50%)translateX(52%)rotateY(90deg);
}

.cube.wrap .front {
  transform:translateY(52%)rotateX(-90deg)translateY(-50%);
}

.cube.wrap .back {
  transform:translateY(-50%)rotateX(-90deg)translateY(-52%);
  transition: opacity .5s;
}

.cube.wrap .down {
  background: #060;
  transform: none;
  transition: opacity .5s;
}
*/

.cube.wrap .back {
  transition: opacity .5s;
  transform:translateY(-50%)rotateX(-90deg)translateY(-52%);
}

.cube.wrap .down {
  transition: opacity .5s;
}

.snakecubemove, .snakecuberotate {
  transform-origin: 50% 50%;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: none;
}

.snakecubemove {
  transition: transform .15s;
}

.cube.snake {
  width: 100%;
  height: 100%;
}

.cube.snake > div {
  box-shadow: 0 0 0 1px #000 inset;
  text-align: center;
}

.cube.snake .front {
  font-weight: bold;
  line-height: 4.5vh;
}

.cube.snake .tongue {
  background: none !important;
  box-shadow: none;
  color: red;
  font-size: 5vh;
  text-align: center;
  transform:rotateZ(180deg)translateY(-4.5vh)translateZ(2.5vh);
}

#snake .cube.snake > div {
  background: #FFA500;
}

#snake .cube.snake .up {
  background: #dF8500;
}

#snake2 .cube.snake > div,
#wall:checked ~ * .cube.snake > div {
  background: #444;
}

#snake2 .cube.snake .up,
#wall:checked ~ * .cube.snake .up {
  background: #333;
}

#snake2 .cube.snake .front {
  color: #fff;
}

.snakeshadow {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.25);
  transform:translateX(11%)translateY(11%)translateZ(-.2vh);
}

/**************************************************************/

/* Editor */

label {
  display: inline-block;
  width: 22%;
}

button {
  float: left;
  width: 23%;
  border: .2vh solid #000;
  margin: 1vh 2% 0 0;
}

input[type=range] {
  width: 60%;
}

#form {
  width: 50vh;
  margin: auto;
}

.cell {
  float: left;
  outline: .4vh solid #888;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: all;
  background: #fff;
}

.cube.wrap.visible {
  transform:translateZ(1vh);
}

.cube.wrap.visible .cell {
  opacity: 1;
}

.cube.wrap.visible .down {
  transform: none;
}

#ground:checked ~ * #down .cell, #wall:checked ~ * #back .cell {
  opacity: 1;
}

#wrap:checked ~ * .wrap > div,
.cube.wrap.wrapvisible > div {
  background: linear-gradient(45deg, rgba(200,200,200,.1), rgba(200,200,200,.3));
}

.editor .grass {
  width: 250vh;
  height: 150vh;
  background: radial-gradient(#4F8D2F,#136321);
  border-radius: 50%;
  transform:translateX(-110vh)translateY(-50vh)translateZ(-5vh);
}

.editor .sun {
  width: 30vh;
  height: 30vh;
  background: radial-gradient(#ee0 30%, transparent 60%);
  transform:rotateX(-76deg)translateY(-20vh)rotateY(40deg);
  position: fixed;
  left: 30vh;
  top: -40vh;
}

/**************************************************************/

/* Emoji / Objects */

.emoji {
  position: fixed;
  transform-origin: 50% 100%;
  bottom: 0;
}

.emojimove {
  animation: move 3s infinite;
}

.emojishadow {
  color: rgba(0,0,0,.002);
  text-shadow: 0px 0px rgba(0,0,0,.25);
  position: fixed;
  transform-origin: 50% 100%;
  bottom: 0;
}

.tree, .treeshadow {
  font: 15vh/16vh a;
}

.mac .tree {
  font: 15vh/11vh a;
}

.mobile .tree {
  font: 10vh/11vh a;
}

.mac .treeshadow,
.fx .treeshadow,
.mobile .treeshadow {
  display: none;
}

.apple *, .appleshadow {
  font: 6vh/7vh a;
  transition: opacity .5s .5s;
}

.apple.hidden, .appleshadow.hidden {
  opacity: 0;
}

.animal *, .animalshadow {
  font: 8vh/9vh a;
}

.mac .apple {
  font: 6vh/5vh a;
}

.mac .appleshadow,
.fx .appleshadow,
.mobile .appleshadow,
.mac .animalshadow,
.fx .animalshadow,
.mobile .animalshadow {
  display: none;
}

.floor {
  position: fixed;
  width: 21vh;
  height: 21vh;
  background: green;
}

.door {
  position: fixed;
  transform-origin: 0% 100%;
  width: 0;
  height: 0;
}

.door .path {
  position: fixed;
  width: 21vh;
  height: 21vh;
  background: linear-gradient(transparent, #640 50%);
  top: -10.5vh;
  left: -10.5vh;
}

.door .realdoor {
  position: fixed;
  width: 21vh;
  height: 25vh;
  background: radial-gradient(2vh at 90% 50%, gold 35%, transparent 40%),brown;
  border-radius: 1vh 1vh 0 0;
  transform-origin: 0% 100%;
  transform:translateX(-10.5vh)translateY(-14.5vh)translateZ(.5vh)rotateX(-90deg);
  text-align: center;
  font-size: 8vh;
  line-height: 12vh;
  color: #fff;
  transition: transform 1s;
}

.door .realdoor.door1 {
  background: radial-gradient(2vh at 90% 50%, gold 35%, transparent 40%), #222;
}

.door.open .realdoor {
  transform:translateX(-10.5vh)translateY(-14.5vh)translateZ(.5vh)rotateX(-90deg)rotateY(90deg);
}

.cube.rock div {
  background: linear-gradient(45deg, #640, #583808);
}

.cube.rock div.up {
  background: radial-gradient(#3F7D1F,#034301);
  background-size: 280vh 140vh;
  width: 7.4vh;
  height: 7.4vh;
}

.hint {
  position: fixed;
  background: #fff;
  padding: 1vh;
  width: 25vh;
  font: 2.5vh/3vh arial,sans-serif;
  transform-origin: 50% 100%;
  text-align: center;
  box-shadow: 0 0 0 2px #000 inset;
  bottom: 0;
}

.hint br {
  font: 0/0 a
}

.hint:before {
  content: "";
  width: 4vh;
  height: 4vh;
  background: #750;
  position: absolute;
  bottom: -4vh;
  left: 10vh;
  border-left: 2px solid;
  border-right: 2px solid;
}
/**************************************************************/

/* Hub */

#scene {
  transition: transform 6s ease-in, transform-origin 6s ease-in;
  width: 280vh;
  height: 140vh;
  background: radial-gradient(#4F8D2F,#136321);
  border-radius: 3vh;
}

.editor #scene {
  transition: 1s;
  background: none;
}

.hub #scene,
[class="2-5"] #scene {
  background: radial-gradient(10vh at 51.3% 52%, #000 40%, transparent 50%), radial-gradient(15vh at 51.3% 52%, #640 40%, transparent 50%), radial-gradient(#4F8D2F,#136321);
}


/**************************************************************/

/* playing */

.playing input, .playing label, .playing button, .playing span, .playing br {
  display: none;
}

.playing #b_rl, .playing #b_rr {
  display: block;
}

.playing #quit {
  display: block;
  margin: 3vh auto 0;
  float: none;
}

/**************************************************************/

/* Intro */

#e {
  margin: 100vh 0 0;
  transition: margin 1s;
  font: 10vh/80vh a;
}

#itext {
  font:5vh arial,sans-serif;
  color:#fff;
  position:fixed;
  bottom:9vh;
  left:0;
  width:100vw
}

#menu {
  color:#fff;
  width: 55vh;
  transform:translateX(-27vh)translateY(-24vh)rotateX(-18deg);
}

#menu span {
  font:7vh/13vh arial,sans-serif;
  text-shadow: .1vh -.1vh #777, .2vh -.2vh #777, .3vh -.3vh #777;
}

#menu span:hover {
  color: #ace;
  transform: rotateX(-10deg);
}

#menu h1 {
  font:13vh/13vh arial,sans-serif;
  text-shadow: .1vh -.1vh #777, .2vh -.2vh #777, .3vh -.3vh #777;
}

/**************************************************************/

/* Mobile */
#mobilecontrols button {
  position: fixed;
  width: 10vh;
  height: 10vh;
  text-align: center;
  font: 6vh/10vh a; 
}

#mobilecontrols button.hidden {
  display: none;
}

#k_up {
  right: 14vh;
  bottom: 14vh;
}

#k_down {
  right: 14vh;
  bottom: 2vh;
}

#k_left {
  right: 26vh;
  bottom: 2vh;
}

#k_right {
  right: 2vh;
  bottom: 2vh;
}

#k_top {
  left: 2vh;
  top: 2vh;
}

#k_bottom {
  left: 2vh;
  top: 14vh;
}

#k_backtrack {
  bottom: 2vh;
  left: 2vh;
}

#k_reset {
  bottom: 14vh;
  left: 2vh;
}

#k_camleft {
  top: 2vh;
  right: 18vh;
}

#k_camright {
  top: 2vh;
  right: 6vh;
}