.text-shadow-green {
  color: #17ff0a;
  text-shadow: 3px 3px 0 #035D1B, -1px -1px 0 #035D1B, 1px -1px 0 #035D1B, -1px 1px 0 #035D1B, 1px 1px 0 #035D1B;
}
.text-shadow-blue {
  color: #0096ff;
  text-shadow: 3px 3px 0 #0F0F57, -1px -1px 0 #0F0F57, 1px -1px 0 #0F0F57, -1px 1px 0 #0F0F57, 1px 1px 0 #0F0F57;
}
.text-shadow-orange {
  -webkit-text-stroke: 1px #ff9f00;
  color: #ff9f00;
  text-shadow: 3px 3px 0 #994300, -1px -1px 0 #994300, 1px -1px 0 #994300, -1px 1px 0 #994300, 1px 1px 0 #994300;
}
.text-shadow-red {
  -webkit-text-stroke: 1px red;
  color: red;
  text-shadow: 3px 3px 0 #7F000E, -1px -1px 0 #7F000E, 1px -1px 0 #7F000E, -1px 1px 0 #7F000E, 1px 1px 0 #7F000E;
}
.text-shadow-yellow-red {
  -webkit-text-stroke: 1px yellow;
  color: yellow;
  text-shadow: 3px 3px 0 red, -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
}
.text-red {
  color: red;
}
.text-yellow {
  color: yellow;
}
.text-orange {
  color: #ff9f00;
}
.text-green {
  color: #17ff0a;
}
.text-blue {
  color: #0096ff;
}
@-webkit-keyframes hittenBeeAnimation {
  0% {
    border: 1px solid red;
  }
  100% {
    border: 30px solid red;
  }
}
@-moz-keyframes hittenBeeAnimation {
  0% {
    border: 1px solid red;
  }
  100% {
    border: 30px solid red;
  }
}
@-o-keyframes hittenBeeAnimation {
  0% {
    border: 1px solid red;
  }
  100% {
    border: 30px solid red;
  }
}
@keyframes hittenBeeAnimation {
  0% {
    border: 1px solid red;
  }
  100% {
    border: 30px solid red;
  }
}
html {
  overflow: hidden;
  height: 100%;
}
.container {
  height: 100%;
}
body {
  font-size: 1em;
  overflow: hidden;
  background: #000000 url('../img/background-pixel.jpg');
  color: #ffffff;
  height: 100%;
}
@media (max-width: 767px) {
  body {
    font-size: 0.5em;
  }
}
h1.title,
h2.title {
  text-transform: uppercase;
  margin: 0 0 0 0;
  font-size: 3em;
}
h1.main-title {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
}
.debug {
  position: absolute;
  top: 0;
  left: 0;
}
.preformatted {
  font-family: monospace;
  white-space: pre;
  font-size: 0.6em;
}
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#game-status-metric {
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  font-size: 3em;
}
#game-status-metric span {
  display: inline-block;
}
#game-credit-version {
  display: block;
  position: absolute;
  bottom: 0.2em;
  left: 0.2em;
  font-size: 2em;
}
.font-vt323 {
  font-family: 'VT323', monospace;
}
.font-press-play {
  font-family: 'Press Start 2P', cursive;
}
#buttons-panel {
  display: block;
  position: absolute;
  bottom: 0.2em;
  right: 0.2em;
  padding: 0.5em;
  z-index: 200;
}
#buttons-panel button {
  display: block;
  margin-top: 0.5em;
  min-width: 4em;
}
@media (max-width: 767px) {
  #buttons-panel button .ctrl-vol {
    display: none;
  }
}
.btn {
  border: 2px solid;
  background: #000;
  padding: 5px;
  text-transform: uppercase;
  border-radius: 0;
  font-size: 2em;
}
.btn.btn-success {
  color: #17ff0a;
  border-color: #17ff0a;
}
.btn.btn-danger {
  color: red;
  border-color: red;
}
.btn.btn-info {
  color: cyan;
  border-color: cyan;
}
.scrush-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  z-index: 300;
  display: none;
  font-size: 1em;
  padding: 20px;
  background: #000;
  color: #fff;
  max-width: 1000px;
  height: auto;
}
@media (max-width: 1024px) {
  .scrush-modal {
    width: 80%;
  }
}
#end-game .end-game-message {
  font-size: 3em;
  display: none;
}
#end-game .end-game-message h3 {
  font-size: 3em;
}
#end-game.win {
  display: block;
  border: 5px solid #17ff0a;
  color: #17ff0a;
}
#end-game.win .win-message {
  display: block;
}
#end-game.game-over {
  display: block;
  border: 5px solid #ff9f00;
  color: #ff9f00;
}
#end-game.game-over .game-over-message {
  display: block;
}
#end-game.killed-mothership {
  display: block;
  border: 5px solid red;
  color: red;
}
#end-game.killed-mothership .killed-mothership-message {
  display: block;
}
#end-game .play-again,
#end-game .buy-ep {
  margin-top: 2em;
}
#end-game .play-again:hover {
  color: inherit;
  text-decoration: none;
}
#help {
  border: 3px solid #ffffff;
}
#help.show {
  display: block;
}
#help .game-info {
  font-size: 1em;
  line-height: 2em;
}
@media (max-width: 767px) {
  #help .game-info {
    font-size: 2em;
  }
}
#help .game-info .help-ship-list .font-vt323 {
  font-size: 2em;
}
#help .help-ship {
  height: 200px;
  width: 200px;
  background-size: cover;
  display: block;
  margin: 0 auto;
}
@media (max-width: 767px) {
  #help .help-ship {
    height: 50px;
    width: 50px;
  }
}
#help .help-ship.mothership {
  background-image: url('../img/mothership.png');
}
#help .help-ship.cruiser {
  background-image: url('../img/cruiser.png');
}
#help .help-ship.vessel {
  background-image: url('../img/vessel.png');
}
#help .btn {
  margin-top: 2em;
}
#fleet-status {
  position: absolute;
  top: 4em;
  right: 0px;
}
#fleet-status > div {
  text-align: right;
}
#fleet-status .ship-qt {
  position: relative;
  top: -0.3em;
  right: -0.2em;
  display: inline-block;
  text-align: right;
  height: 1em;
  color: #ff9f00;
}
#fleet-status .fleet-ship {
  height: 1em;
  width: 1em;
  background-size: cover;
  display: inline-block;
  margin: 0 auto;
}
#fleet-status .fleet-ship.mothership {
  background-image: url('../img/mothership.png');
}
#fleet-status .fleet-ship.cruiser {
  background-image: url('../img/cruiser.png');
}
#fleet-status .fleet-ship.vessel {
  background-image: url('../img/vessel.png');
}
.fleet {
  height: 80%;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  cursor: url(../img/crossair.png) 64 64, auto;
}
.ship {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
  float: left;
  display: table-cell !important;
  margin: 5px;
  position: absolute;
  transition: top 2000ms cubic-bezier(0.165, 0.84, 0.44, 1), left 2000ms cubic-bezier(0.165, 0.84, 0.44, 1), width 500ms, height 500ms, background 500ms;
  z-index: 10;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: url(../img/crossair-ship.png) 64 64, pointer;
}
@media (max-width: 1440px) {
  .ship {
    width: 80px;
    height: 80px;
  }
}
@media (max-width: 767px) {
  .ship {
    width: 50px;
    height: 50px;
  }
}
.ship.ng-enter {
  width: 0px;
  height: 0px;
  border: 0px;
  transition: 500ms;
}
.ship.ng-enter-active {
  width: 150px;
  height: 150px;
  transition: 0s;
}
.ship.ng-leave {
  width: 800px;
  height: 800px;
  opacity: 0;
  background: red!important;
  border-color: red;
  transition: width 600ms, height 600ms, opacity 800ms, background 200ms, border 0ms;
}
.ship.ng-leave .ship-details {
  opacity: 0;
}
.ship.ship-MotherShip {
  transition: top 1500ms cubic-bezier(0.165, 0.84, 0.44, 1), left 1500ms cubic-bezier(0.165, 0.84, 0.44, 1), width 500ms, height 500ms, background 500ms;
}
.ship.ship-MotherShip .ship-image {
  background-image: url('../img/mothership.png');
}
.ship.ship-MotherShip .life-span {
  top: -2em;
  right: 5px;
  font-size: 2em;
  height: 100px;
}
.ship.ship-MotherShip.shielded .ship-image {
  background-image: url('../img/mothership-shielded.png');
}
.ship.ship-CruiserShip {
  z-index: 20;
}
.ship.ship-CruiserShip .ship-image {
  background-image: url('../img/cruiser.png');
}
.ship.ship-CruiserShip.hit-by-shot .ship-image {
  background-image: url('../img/cruiser-hit.png');
}
.ship.ship-VesselShip {
  z-index: 30;
}
.ship.ship-VesselShip .ship-image {
  background-image: url('../img/vessel.png');
}
.ship.ship-VesselShip.hit-by-shot .ship-image {
  background-image: url('../img/vessel-hit.png');
}
.ship.hit-by-shot {
  transform: rotate(1440deg);
  width: 200px;
  height: 200px;
  z-index: 100;
  transition: 500ms;
}
@media (max-width: 1440px) {
  .ship.hit-by-shot {
    width: 160px;
    height: 160px;
  }
}
@media (max-width: 767px) {
  .ship.hit-by-shot {
    width: 100px;
    height: 100px;
  }
}
.ship.shielded .life-span {
  display: none;
}
.ship .ship-image {
  height: 100%;
  width: 100%;
  background: transparent;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 10;
  transition: transform 500ms;
}
.ship .life-span {
  display: block;
  line-height: 2em;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  font-size: 2em;
}
@media (max-width: 1440px) {
  .ship .life-span {
    font-size: 2em;
  }
}
@media (max-width: 767px) {
  .ship .life-span {
    top: -10px;
    right: -5px;
    font-size: 4em;
  }
}
.ship .life-span-100 {
  color: #00fe0e;
}
.ship .life-span-90 {
  color: #31fe0b;
}
.ship .life-span-80 {
  color: #5dfe09;
}
.ship .life-span-70 {
  color: #89fe06;
}
.ship .life-span-60 {
  color: #b6fe04;
}
.ship .life-span-50 {
  color: #f6fe00;
}
.ship .life-span-40 {
  color: #f8d000;
}
.ship .life-span-30 {
  color: #faa200;
}
.ship .life-span-20 {
  color: #fb7a00;
}
.ship .life-span-10 {
  color: #fd3d00;
}
.ship .life-span-0 {
  color: #ff0000;
}