/* CSS files add styling rules to your content */
* {
  box-sizing: border-box;
}

body {
  font-family: helvetica, arial, sans-serif;
  margin: 1em;
}

h1 {
  color: #373fff;
  font-style: italic;
}

.game {
  font-family: monospace;
  margin: 1em auto 0;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-content: center;
  background: #000;
  padding: .5em;
  grid-gap: .5em;
}

.display {
  width: calc(var(--width) * 1em);
  height: calc(var(--height) * 1em);
  position: relative;
  overflow: hidden;
}

.map span {
  text-align: center;
  font-size: .9em;
}

.stats {
  margin: 0;
  padding: 0;
  font-size: .75em;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

.screen {
  grid-row: 2;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.title {
  text-align: center;
  color: #fff;
  font-size: .8em;
  padding: 2em;
}
.title h1 {
  font: inherit;
  font-size: 2.25em;
  color: #fff;
  font-weight: bold;
}

.about {
  padding: 0 1em;
  color: #fff;
}

.map {
  background: #fff;
  max-width: 100%;
  grid-template-columns: repeat(var(--width), 1em);
  grid-template-rows: repeat(var(--height), 1em);
  line-height: 1em;
  transform-origin: top left;
}

.battle {
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(8, 1fr);
  background: #fff;
}
.battle .player {
  grid-row: -5 / span 3;
  grid-column: 2 / span 3;
  text-align: center;
  font-size: 4.5em;
}
.battle .battle-stats {
  font-size: .75em;
  border: .2em solid #000;
  padding: .1em .25em .4em;  
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.battle .player-stats {
  grid-row: -3 / span 1;
  grid-column: -5 / span 3;
}
.battle .enemy {
  grid-row: 2 / span 3;
  grid-column: -5 / span 3;
  font-size: 5em;
  text-align: center;
}
.battle .enemy-stats {
  grid-row: 2 / span 1;
  grid-column: 2 / span 3;
}
.battle .player-hit {
  text-align: center;
  color: red;
  font-size: 1.5em;
  font-weight: bold;
  grid-row: -6;
  grid-column: 2 / span 3;
  opacity: 0;
}
.battle .enemy-hit {
  text-align: center;
  color: red;
  font-size: 1.5em;
  font-weight: bold;
  grid-row: 1;
  grid-column: -5 / span 3;
  opacity: 0;
}
.battle .hp {
  transition: 800ms background-color ease-out, 800ms width ease-out;
  position: absolute;
  left: 0;
  bottom: 0;
  height: .4em;
  width: 100%
}


.ending {
  background: #fff;
  text-align: center;
  padding: 2em 1.5em;
  position: relative;
}
.ending .character {
  font-size: 5em;
}
.ending .cat {
  font-size: .2em;
  position: absolute;
  top: 35%;
  left: 50%;
}

@keyframes bounce {
  25% { transform: translateY(-8%); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-8%); }
  100% { transform: translateY(0); }
}

@keyframes lunge {
  50% { transform: translate(-25%, 20%)}
  75% { transform: translate(80%, -70%)}
  100% { transform: translate(0, 0); }
}

@keyframes slam {
  30% { transform: rotate(45deg) }
  40% { transform: translate(-70%, 50%) rotate(50deg) }
  45% { transform: translate(-35%, 25%) rotate(50deg) }
  50% { transform: translate(-70%, 50%) rotate(50deg) }
  55% { transform: translate(-35%, 25%) rotate(50deg) }
  60% { transform: translate(-70%, 50%) rotate(50deg) }
  65% { transform: translate(-35%, 25%) rotate(50deg) }
  70% { transform: translate(-70%, 50%) rotate(50deg) }
  90% { transform: rotate(45deg) }
}

@keyframes shake {
  8% { transform: translateX(6%); }
  16% { transform: translateX(-6%); }
  24% { transform: translateX(5%); }
  32% { transform: translateX(-5%); }
  40% { transform: translateX(4%); }
  48% { transform: translateX(-4%); }
  56% { transform: translateX(3%); }
  64% { transform: translateX(-3%); }
  72% { transform: translateX(2%); }
  80% { transform: translateX(-2%); }
  88% { transform: translateX(1%); }
  96% { transform: translateX(-1%); }
  100% { transform: translateX(0); }
}

@keyframes faint {
  20% { transform: translateX(10%) }
  40% { transform: translateX(-10%) }
  60% { transform: translateX(10%) }
  80% { transform: translateX(-10%) }
  100% { transform: translateX(0) }
}

@keyframes damage {
  from {
    opacity: 1;
    transform: translateY(100%);
  }
  to {
    opacity: 0;
    transform: translateY(50%);
  }
}

.controls {
  margin-top: 1em;
  background: #000;
  box-shadow: 0 0 0 .5em #ccc inset;
  display: grid;
  padding: 1em;
  grid-template-rows: repeat(6, 1.5em);
  grid-template-columns: repeat(6, 1.5em) 1fr repeat(4, 1.5em);
  margin-bottom: 2em;
}

.controls .dingus {
  grid-column: 3 / span 2;
  grid-row: 3 / span 2;
  background: linear-gradient(#111 40%, #444);
  border-radius: 50%;
  margin: .75em;
}

.button {
  border: 4px solid #ddd;
  background: #000;
  color: #333;
  font-size: 1em;
  margin: -.13em;
  text-align: center;
  padding:0;
}
.button[data-dir]:active {
  background: #444;
}
.button.up {
  grid-area: 1 / 3 / span 2 / span 2;
  border-radius: 12% 12% 0 0;
  border-bottom: 0 none;
}
.button.right {
  grid-area: 3 / 5 / span 2 / span 2;
  border-radius: 0 12% 12% 0;
  border-left: 0 none;
}
.button.left {
  grid-area: 3 / 1 / span 2 / span 2;
  border-radius: 12% 0 0 12%;
  border-right: 0 none;
}
.button.down {
  grid-area: 5 / 3 / span 2 / span 2;
  border-radius: 0 0 12% 12%;
  border-top: 0 none;
}
.button.select {
  grid-area: 2 / -5 / span 3 / span 3;
  background: #eee;
  border-radius: .1em;
  border: 0 none;
  background-image: radial-gradient(#e00 60%, transparent 60.5%),
    radial-gradient(#0f0 60%, transparent 60.5%);
  background-position: center, bottom center;
  top: .75em;
  position: relative;
}
.button.select:after {
  content: '';
  position: absolute;
  width: 60%;
  height: 40%;
  background: linear-gradient(rgba(255,255,255,0) 20%, rgba(255,255,255,.4));
  bottom: 15%;
  left: 0;
  right: 0;
  border-radius: 50%;
  margin: auto;
}
.button.select:active {
  background-image: radial-gradient(#a00 60%, transparent 60.5%);
}

@media screen and (max-width: 360px) {
  .controls {
    padding: 0 1.5em;
    font-size: .9em;
  }
}
@media screen and (max-width: 480px) {
  h1 {
    padding: 0 1rem;
  }
  body {
    margin: 0;
  }
  .controls {
    padding: 2em;
    font-size: .9em;
  }
}