@import "../fonts/PressStart2P/stylesheet.css";
@import "../fonts/johnny-fever/stylesheet.css";
html,
body {
  height: 100vh;
  overflow: hidden;
}
body {
  position: relative;
  background: black;
  color: white;
  margin: 0;
  overflow: hidden;
  font-family: "PressStart2P", "Courier New", "Courier";
  text-transform: uppercase;
}
.hidden {
  display: none;
}
.sup {
  top: -2.1vmin;
  position: relative;
}
* {
  box-sizing: border-box;
}
.stats {
  position: absolute;
  right: 0;
  top: 0;
  padding: 1em;
  width: 118.28571429vmin;
  top: 0.8vmin;
  left: 50%;
  margin-left: calc(-59.14285714vmin);
  line-height: 1;
  height: 4vmin;
  font-size: 4vmin;
  overflow: hidden;
}
#score-wrap {
  position: absolute;
  left: 0;
  top: 0;
}
#high-score-wrap {
  position: absolute;
  right: 0;
  top: 0;
}
.kc-life {
  display: inline-block;
  width: 4vmin;
  height: 4vmin;
  background-size: 4vmin 4vmin;
  background-image: url('../images/kc-still.svgz');
  background-repeat: no-repeat;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  margin-left: 0.5vmin;
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100vw;
  height: 100vh;
  display: block;
  line-height: 100vh;
  font-size: 3vmin;
}
#overlay.hidden {
  display: none;
}
#mobile-controller {
  position: absolute;
  top: 0;
  left: 0;
}
#mobile-controller.disabled {
  display: none;
}
/*
 * Maze styles
 */
#maze {
  width: 118.28571429vmin;
  height: 92vmin;
  transform: translateZ(0);
  transform-origin: 0 0;
  position: absolute;
  bottom: 0.8vmin;
  left: 50%;
  margin-left: calc(-59.14285714vmin);
  perspective: 3000px;
  border-spacing: 0;
  -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 */
}
#maze[data-has-finished-rendering] {
  perspective: initial;
}
#maze[data-has-finished-rendering] td {
  transform: none;
  opacity: initial;
}
#maze tr td:first-of-type {
  border-left-width: 1vmin;
}
#maze tr td:last-of-type {
  border-right-width: 1vmin;
}
#maze tr:nth-child(2) td {
  border-top-width: 1vmin;
}
#maze tr:nth-last-child(2) td {
  border-bottom-width: 1vmin;
}
#maze tr td {
  border: 0.5vmin solid blue;
  width: 10.22222222vmin;
  /*  10.6666vmin; /* 92vmin / 9); */
  height: 13.14285714vmin;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
  transition: ease-in-out 250ms transform, ease-in-out 250ms opacity;
  transform: perspective(3000px) translateZ(0px);
  opacity: 1;
}
#maze tr td[data-initial-state] {
  transform: perspective(3000px) translateZ(-3000px);
  opacity: 0;
}
#maze tr td:before,
#maze tr td:after {
  content: "";
}
#maze tr td.s {
  border-bottom: none;
}
#maze tr td.n {
  border-top: none;
}
#maze tr td.w {
  border-left: none;
}
#maze tr td.e {
  border-right: none;
}
#maze tr td.v {
  background: skyblue;
}
#maze tr td.n.e::before,
#maze tr td.n.w::before,
#maze tr td.s.e::after,
#maze tr td.s.w::after {
  width: 1vmin;
  height: 1vmin;
  background: blue;
  display: block;
  position: absolute;
}
#maze tr td.n.e::before,
#maze tr td.n.w::before {
  top: -0.5vmin;
}
#maze tr td.s.e::after,
#maze tr td.s.w::after {
  bottom: -0.5vmin;
}
#maze tr td.n.e::before,
#maze tr td.s.e::after {
  right: -0.5vmin;
}
#maze tr td.n.w::before,
#maze tr td.s.w::after {
  left: -0.5vmin;
}
#maze tr td.will-empty {
  will-change: contents;
}
#maze tr td.will-fill {
  will-change: contents;
}
#maze tr td.letter-by-letter-animation {
  will-change: contents;
}
#maze tr th {
  width: 0px;
  display: none;
}
#maze tr th + td.w:before,
#maze tr th + td.w:after {
  content: none;
}
/*
 * moving objects
 */
.player {
  width: calc(10.222222222222221vmin - 1px);
  height: calc(10.222222222222221vmin - 1px);
  position: absolute;
  top: 1vmin;
  left: 1vmin;
  display: inline-block;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation-timing-function: linear;
  animation-fill-mode: forwards !important;
  animation-duration: 500ms;
  /* Moving */
}
.player.paused {
  animation-play-state: paused;
}
.player.reverse {
  animation-direction: reverse;
}
.player:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  will-change: background-position-y, background-position;
  background-size: 10.22222222vmin auto;
  background-position-y: 2.55555556vmin;
  background-repeat: no-repeat;
}
.player:after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: 10.22222222vmin 10.22222222vmin;
  background-repeat: no-repeat;
}
.player.w {
  animation-name: go-west;
}
td[data-tunnel="w"] .player.w {
  animation-name: go-west-in-tunnel;
  animation-duration: 2s !important;
}
.player.e {
  animation-name: go-east;
}
td[data-tunnel="e"] .player.e {
  animation-name: go-east-in-tunnel;
  animation-duration: 2s !important;
}
.player.n {
  animation-name: go-north;
}
.player.s {
  animation-name: go-south;
}
.player.dot {
  z-index: 30;
}
.player.dot:after {
  background-image: url('../images/dot.svgz');
}
.player.dot.pill:after {
  background-image: url('../images/pill.svgz');
  animation: rotate-pallette 1000ms infinite;
}
.player.stop {
  display: none;
}
.player.kc {
  z-index: 20;
  /* 
		* Ensures KC will not be still moving when he dies and that
		* he is right side up.
		*/
}
.player.kc:after {
  background-image: url('../images/kc-still.svgz');
}
.player.kc.move:after {
  background-image: url('../images/kc-left.svgz');
  background-size: auto 10.22222222vmin;
  animation: kc-move 250ms steps(4) infinite;
}
.player.kc.die {
  animation-play-state: paused;
  transform: rotate(0);
}
.player.kc.die:after {
  background-image: url('../images/kc-dying.svgz');
  background-size: auto 10.22222222vmin;
  animation: kc-die 1000ms steps(8);
}
.player.kc.dead:after {
  visibility: hidden;
}
.player.kc.e.reverse:after,
.player.drat-head.e.reverse:after {
  transform: translateZ(0);
}
.player.kc.e:after,
.player.drat-head.e:after,
.player.kc.w.reverse:after,
.player.drat-head.w.reverse:after {
  transform: scaleX(-1);
}
.player.kc.n:after,
.player.drat-head.n:after,
.player.kc.s.reverse:after,
.player.drat-head.s.reverse:after {
  transform: rotate(90deg);
}
.player.kc.s:after,
.player.drat-head.s:after,
.player.kc.n.reverse:after,
.player.drat-head.n.reverse:after {
  transform: scaleX(-1) rotate(-90deg);
}
.player.muncher {
  z-index: 30;
  /* Muncher body */
  /* Alternate colours for each muncher using filters */
  /*
		* EYES
		*/
  /* Eaten styles */
}
.player.muncher:after {
  background-image: url('../images/muncher-left.svgz');
  background-size: auto 10.22222222vmin;
  animation: muncher-move 250ms steps(2) infinite;
}
.player.muncher:after.e {
  transform: scaleX(-1);
}
.player.muncher-1:after {
  filter: hue-rotate(160deg);
}
.player.muncher-2:after {
  filter: hue-rotate(260deg);
}
.player.muncher.w:before {
  background-image: url('../images/eyes-left.svgz');
}
.player.muncher.e:before {
  background-image: url('../images/eyes-left.svgz');
  transform: scaleX(-1);
}
.player.muncher.n:before {
  background-image: url('../images/eyes-down.svgz');
  transform: scaleY(-1);
  background-position-y: 5.11111111vmin;
}
.player.muncher.s:before {
  background-image: url('../images/eyes-down.svgz');
}
.pill-eaten .player.muncher.edible:after {
  filter: saturate(0%) brightness(2);
}
.pill-wearing-out .player.muncher.edible:after {
  animation: muncher-flash 250ms infinite;
}
.player.muncher.eaten {
  z-index: 10;
  animation-duration: 100ms;
}
.player.muncher.eaten:after {
  opacity: 0;
}
.player.tree {
  z-index: 29;
}
.player.tree:after {
  background-image: url('../images/tree.gif');
  background-size: auto 10.22222222vmin;
  animation: tree-appear 1000ms steps(5);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.player.tree.removing:after {
  animation-name: tree-disappear;
}
.player.drat-head:after {
  background-image: url('../images/drat-head.gif');
}
.player.drat-head.sad:after {
  background-image: url('../images/drat-head-sad.gif');
}
.player.drat-head.eating:after {
  background-image: url('../images/drat-head-eating.gif');
  background-size: auto 10.22222222vmin;
  animation: kc-move 500ms steps(2) infinite;
}
.player.drat-segment:after {
  background-image: url('../images/drat-segment.gif');
}
#bonus-display {
  position: absolute;
  font-size: 2vmin;
  transform: translate3d(0, 0, 0);
  opacity: 0;
}
#bonus-display.show {
  animation: show-bonus 500ms;
}
/*
 * Styles for demo
 */
.demo-mode #maze {
  display: none;
}
.slide {
  text-align: center;
  padding-top: 20vmin;
  line-height: 4;
  font-size: 3vmin;
  white-space: nowrap;
}
.logo-container {
  top: -20vmin;
  height: 57vh;
  position: relative;
  overflow: hidden;
}
#slide1-3,
#slide1-4 {
  position: absolute;
  width: 100%;
}
#slide1-3 {
  top: 50vmin;
  transform: translateZ(0);
}
#slide1-4 {
  top: 35vmin;
}
.slide .kc {
  position: relative;
}
.slide .kc.e {
  animation-name: go-east-demo;
  animation-timing-function: linear;
  animation-duration: 4000ms;
}
.kc-munchkin-logo {
  font-family: 'JohnnyFever-Regular';
  line-height: 1;
  font-size: 15vmin;
  height: 15vmin;
  width: 100%;
  transform: perspective(200px) scaleY(1.5) rotateX(-25deg) translateY(100vh);
  opacity: 0;
  transition: opacity 500ms linear, transform 1500ms linear;
  color: #D92A27;
  margin-top: -0.1vmin;
  overflow: hidden;
}
.kc-munchkin-logo.animate {
  opacity: 1;
  transform: perspective(200px) scaleY(1.5) rotateX(-25deg) translateY(0vh);
}
.white-gradient {
  position: relative;
}
.white-gradient:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 60%);
}
/*
 * Progress Bars
 */
/* All HTML5 progress enabled browsers */
#preloader {
  /* Turns off styling - not usually needed, but good to know. */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  /* gets rid of default border in Firefox and Opera. */
  border: solid rgba(16, 16, 16, 0.8) 5px;
  border-radius: 10px;
  /* Dimensions */
  width: 238px;
  height: 45px;
  position: absolute;
  left: calc(-69vw);
  top: calc(27.5vh);
  /* Chrome */
  /*
	* Background of the progress bar value
	*/
  /* Firefox */
  /* Chrome */
}
#preloader::-webkit-progress-bar {
  background: #cccccc;
}
#preloader::-moz-progress-bar {
  border-radius: 5px;
  background-image: -moz-linear-gradient(center bottom, #2bc253 37%, #54f054 69%);
}
#preloader::-webkit-progress-value {
  border-radius: 5px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2bc253), color-stop(1, #54f054));
  background-image: -webkit-linear-gradient(center bottom, #2bc253 37%, #54f054 69%);
}
@keyframes kc-die {
  100% {
    background-position-x: -81.77777778vmin;
  }
}
/*
 * Why on earth does Chrome Win need -89.7vmin instead of -92vmin? Because if it
 * doesn't, it will show an animation flaw
 */
@keyframes kc-move {
  100% {
    background-position-x: -40.88888889vmin;
  }
}
@keyframes muncher-move {
  100% {
    background-position-x: -20.44444444vmin;
  }
}
@keyframes tree-appear {
  100% {
    background-position-x: -51.11111111vmin;
  }
}
@keyframes tree-disappear {
  0% {
    background-position-x: -51.11111111vmin;
  }
  100% {
    background-position-x: 0;
  }
}
@keyframes muncher-flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
/*
 * Note on the go-* animations below: IE/Edge will not apply 
 * `animation-fill-mode: forwards` correctly when transforming raw viewport
 * units.  It does work when you wrap them around a `calc()` statement, which
 * is what we are doing here.
 */
@keyframes go-west {
  100% {
    transform: translate3d(calc(-13.33333333vmin), 0, 0);
  }
}
@keyframes go-west-in-tunnel {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.5)) drop-shadow(0 0 0 rgba(0, 0, 255, 0.5)) drop-shadow(0 0 0 rgba(255, 0, 0, 0.5));
  }
  48% {
    opacity: 0;
    transform: translate3d(calc(-106.66666667vmin), 0, 0);
    filter: drop-shadow(30vw 0 0 #ffffff) drop-shadow(15vw 0 0 #0000ff) drop-shadow(10vw 0 0 #ff0000);
  }
  49% {
    display: none;
    transform: translate3d(213.33333333vmin, 0, 0);
  }
  51% {
    display: block;
  }
  52% {
    opacity: 0;
    transform: translate3d(calc(213.33333333vmin), 0, 0);
    filter: drop-shadow(30vw 0 0 #ffffff) drop-shadow(15vw 0 0 #0000ff) drop-shadow(10vw 0 0 #ff0000);
  }
  100% {
    opacity: 1;
    transform: translate3d(calc(106.66666667vmin), 0, 0);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.5)) drop-shadow(0 0 0 rgba(0, 0, 255, 0.5)) drop-shadow(0 0 0 rgba(255, 0, 0, 0.5));
  }
}
@keyframes go-east {
  100% {
    transform: translate3d(calc(13.33333333vmin), 0, 0);
  }
}
@keyframes go-east-in-tunnel {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.5)) drop-shadow(0 0 0 rgba(0, 0, 255, 0.5)) drop-shadow(0 0 0 rgba(255, 0, 0, 0.5));
  }
  48% {
    opacity: 0;
    transform: translate3d(calc(106.66666667vmin), 0, 0);
    filter: drop-shadow(-30vw 0 0 #ffffff) drop-shadow(-15vw 0 0 #0000ff) drop-shadow(-10vw 0 0 #ff0000);
  }
  49% {
    display: none;
    transform: translate3d(calc(0vmin), 0, 0);
  }
  51% {
    display: block;
  }
  52% {
    opacity: 0;
    transform: translate3d(calc(-213.33333333vmin), 0, 0);
    filter: drop-shadow(-30vw 0 0 #ffffff) drop-shadow(-15vw 0 0 #0000ff) drop-shadow(-10vw 0 0 #ff0000);
  }
  100% {
    opacity: 1;
    transform: translate3d(calc(-106.66666667vmin), 0, 0);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.5)) drop-shadow(0 0 0 rgba(0, 0, 255, 0.5)) drop-shadow(0 0 0 rgba(255, 0, 0, 0.5));
  }
}
@keyframes go-north {
  100% {
    transform: translate3d(0, calc(-13.33333333vmin), 0);
  }
}
@keyframes go-south {
  100% {
    transform: translate3d(0, calc(13.33333333vmin), 0);
  }
}
@keyframes go-east-demo {
  0% {
    transform: translate3d(-60vw, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes show-bonus {
  0% {
    opacity: 0, transform3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(2);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(2);
  }
}
@media screen and (max-aspect-ratio: 31 / 26) {
  html,
  body {
    height: calc(100vh - 73px);
  }
  .stats {
    width: 100vw;
    top: 0.8vw;
    left: 0;
    margin-left: 0;
    height: 4vw;
    font-size: 4vw;
  }
  .kc-life {
    width: 4vw;
    height: 4vw;
    background-size: 4vw 4vw;
  }
  #maze {
    width: 100vw;
    height: 77.77777778vw;
    top: 5vw;
    bottom: auto;
    left: 0;
    right: auto;
    margin-left: 0;
  }
  .player {
    width: calc(11.11111111111111vw - @maze-border-width - );
    height: calc(11.111111111111112vw - @maze-border-width);
    top: 1px;
    left: 1px;
  }
  .n.e::before,
  .n.w::before,
  .s.e::after,
  .s.w::after {
    width: 1vw;
    height: 1vw;
  }
  #overlay {
    height: 100vw;
    line-height: 100vw;
  }
  @keyframes go-west {
    100% {
      transform: translate3d(calc(-12.11111111vw), 0, 0);
    }
  }
  @keyframes go-east {
    100% {
      transform: translate3d(calc(12.11111111vw), 0, 0);
    }
  }
  @keyframes go-north {
    100% {
      transform: translate3d(0, calc(-12.11111111vw), 0);
    }
  }
  @keyframes go-south {
    100% {
      transform: translate3d(0, calc(12.11111111vw), 0);
    }
  }
}