styles.css

* {
  position: relative;
  margin: 0;
  padding: 0;
}

body {
  background: url('static/bg.jpg') no-repeat center #2C3E50;
  background-size: cover;
  color: #fff;
  font: 1em/1.618 Graphik, sans-serif;
  font-weight: 200;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

b {
  font-weight: 500;
}

.instructions {
  position: fixed;
  font-size: .8em;
  bottom: 0;
  left: 0;
  padding: 1em;
  color: #eee;
}
.instructions a {
  color: #fff;
}

.clash {
  width: 100vmin;
  height: 100vmin;
  margin: 0 auto;
  background: rgba(255, 255, 255, .03);
}

.clash-tile {
  display: inline-block;
}
.clash-tile:nth-child(odd) {
  background: rgba(255, 255, 255, .03);
}

.clash-ammo {
  position: absolute;
  background: url('static/star.png') no-repeat center / 90%;
}
.clash-ammo:hover {
  transform: rotate(360deg);
}

.clash-player {
  position: absolute;
  top: 0;
  left: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .3s;
}
.clash-player-container {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .4s;
}
.clash-player-name {
  top: -2em;
  text-align: center;
}

.clash-shoot {
  position: absolute;
  width: 100em;
  transform-origin: center left;
}

.clash-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vmin;
  height: 100vmin;
}

.stats {
  position: fixed;
  top: 0;
  right: 0;
  padding: 1em;
}

.animation-shot {
  animation: shotKeyFrame .3s;
}
@keyframes shotKeyFrame {
  0%  {
    background: #f00;
    margin-top: -.05em;
    height: .1em;
  }
  100% {
    background: #ff0;
    height: .7em;
    margin-top: -.35em;
  }
}

.animation-glow {
  animation: glowKeyFrame 1s infinite alternate;
}
@keyframes glowKeyFrame {
  0%  {
    -webkit-filter: saturate(0);
  }
  100% {
    -webkit-filter: saturate(1);
  }
}