/** @license
 *
 * SURVIVOR: A HTML + CSS + JavaScript prototype
 * based on the Commodore 64 version of Survivor from 1983
 *
 * http://schillmania.com/survivor/
 * http://www.flickr.com/photos/schill/sets/72157628885315581/
 * http://github.com/scottschiller/
 *
 * Scott Schiller wrote this beginning in December 2011, while on a plane to Hawaii.
 * Code provided under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License:
 * http://creativecommons.org/licenses/by-nc/3.0/
 *
 */

:root {
  --gs: 1;
}

html,
body {
  position: absolute;
  overflow: hidden;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  font:
    normal 1em 'helvetica neue',
    helvetica,
    arial,
    sans-serif;
  color: #ccc;
  margin: 0px;
  padding: 0px;
  /* grid-tile.png */
  background: #000;
  /* don't allow highlighting / selection, by accidental click + drag etc. */
  user-select: none;
  /**
   * avoid smooth image resizing, keep things pixelated - like the original.
   * Firefox does a great job here; Safari is OK (though not pixel-sharp.)
   * Chrome + Safari may be worse when using -webkit-optimize-contrast vs. default.
   * https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
   */
  image-rendering: optimizeQuality;
  /* deprecated. */
  image-rendering: -webkit-optimize-contrast;
  /* non-standard, but quite nice under Firefox */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  image-rendering: smooth;
  image-rendering: auto;
  /* font trickery */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body.mouse-hidden {
  cursor: none;
}

#c64 h1,
#c64 h2,
#c64 h3,
#c64 p {
  margin: 0.5em 0px;
  padding: 0px;
  font-size: 21px;
  line-height: 30px;
  font-weight: normal;
  color: #a6a6ff;
}

#c64 h1,
#c64 h2 {
  text-align: center;
}

#c64 h3 {
  margin-bottom: 0px;
}

#c64 p {
  margin: 0px;
  line-height: 22px;
}

#c64 .loading {
  display: none;
}

#c64 #go_go_go {
  /* inside joke. */
  display: none;
}

@font-face {
  /**
     * http://style64.org/c64-truetype
     * see license.txt in font directory for details.
     */
  font-family: 'C64 User Mono';
  src: url('../font/C64_User_Mono_v1.0-STYLE.eot');
}

@font-face {
  /**
     * http://style64.org/c64-truetype
     * see license.txt in font directory for details.
     */
  font-family: 'C64 User Mono';
  src:
    url('../font/C64_User_Mono_v1.0-STYLE.ttf') format('truetype'),
    url('../font/C64_User_Mono_v1.0-STYLE.woff') format('woff');
}

span.survivor-charset {
  position: relative;
  display: inline-block;
  /* original sprite scale = 8px square. */
  width: 1.5vw;
  height: 1.5vw;
  min-width: 16px;
  min-height: 16px;
  /* collapse nonsense */
  font-size: 0px;
  background-image: url(../image/survivor-charset.png);
  /**
   * Background size: "# of characters * 100% width"
   * (since each block here is one character.)
   * Divide original image size by 8 to get # of characters.
   */
  background-size: 4400% 100%;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  /* collapse */
  font-size: 0px;
  image-rendering: optimizeQuality;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  /* basically, same look as image-rendering: smooth; without background pixel bleed. */
  filter: blur(0.05vw);
}

#game-over-screen span.survivor-charset,
#help-screen span.survivor-charset,
#level-passed-screen span.survivor-charset {
  width: 20px;
  height: 20px;
  filter: blur(0.65px);
}

.survivor-font b {
  /* "word boundary"-style wrapper element */
  display: inline-block;
  white-space: nowrap;
}

.bubble div.survivor-charset-wrapper {
  display: inline-block;
  opacity: 0.75;
}

.bubble span.survivor-charset {
  /* the original font size */
  width: 8px;
  height: 8px;
  min-width: auto;
  min-height: auto;
  filter: none;
}

.c64 {
  /* generic "use this font" class */
  font-family: 'C64 User Mono';
}

.c64 p {
  line-height: 1.5em;
  margin: 0px 0px 1em 0px;
}

#c64 {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 640x480, before border etc. */
  width: 820px;
  height: 615px;
  margin: -371px 0px 0px -474px;
  background: #4444e7;
  border: 64px solid #a6a6ff;
  padding: 2px;
  font-family: 'C64 User Mono';
  color: #fff;
  cursor: pointer;
}

@media (min-resolution: 192dpi) {
  /**
   * in the 80s, you would have been connected through a signal converter to a TV
   * on channel 3, or a Commodore-branded CRT "monitor" with composite video inputs,
   * which gave higher quality rendering. Notwithstanding, there should be some fuzz.
   * (hi-dpi only. too aggressive on non-retina screens.)
   */
  #c64 {
    filter: blur(0.88px);
  }
}

#c64 #cursor {
  width: 20px;
  height: 20px;
  /* a tiny animated .GIF */
  background: transparent
    url(data:image/gif;base64,R0lGODlhDwAPAPAAAEBA4KCg/yH/C05FVFNDQVBFMi4wAwEAAAAh+QQEKAD/ACwAAAAADwAPAEACDYSPqcvtD6OctNqLZwEAIfkEBSgAAAAsAAAAAA8ADwAAAg2Mj6nL7Q+jnLTai2cBADs=);
  margin: 2px 0px 0px 2px;
}

#screens {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#screen-list {
  list-style-type: none;
}

#screen-list,
#screen-list li {
  margin: 0px;
  padding: 0px;
}

#screen-list li {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 3;
  /* by default, hide. */
  display: none;
}

#screen-list li#boot-screen {
  /* initially, show this one. */
  display: block;
}

#level-end-sequence {
  background: #000;
}

#title-screen {
  background: #000;
  text-align: center;
  cursor: pointer;
  display: none;
}

#title-screen h1,
#title-screen h2,
#title-screen h3 {
  font-family: 'C64 User Mono';
  font-size: 13px;
  line-height: 20px;
  font-weight: normal;
}

#title-screen h2 {
  color: #6699ff;
}

#title-screen h2.survivor-font {
  margin: 2em 0px 3em 0px;
}

h3 {
  color: #00cc00;
}

#title-screen #title-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 67%;
  min-width: 480px;
  max-width: 75%;
  /* 3:1 width/height */
  aspect-ratio: 3;
  transform: translate3d(-50%, -50%, 0);
}

#title-screen #title-header {
  position: relative;
  width: 100%;
  font-size: 0px;
  overflow: hidden;
  background-color: #fff;
  /* black bar pattern */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAEUlEQVR4AWOAgv/oNAyPEAUAwlEn2UhFXE4AAAAASUVORK5CYII=);
  background-size: 2.6%;
  image-rendering: pixelated;
  filter: blur(1px);
  animation: play 0.4s steps(4) infinite;
}

@keyframes play {
  100% {
    background-position: 2.6% 0px;
  }
}

#title-screen #title-header h1 {
  position: relative;
  width: 100%;
  /* 6:1 width/height */
  aspect-ratio: 6;
  /* height: 100px; */
  font-size: 0px; /* hack */
  color: transparent;
  overflow: hidden;
  /* title-screen-cutout.png */
  background: transparent
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAABkAQMAAABgj9xgAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlP/AOW3MEoAAAJmSURBVHgB7ZYBpuRAFEVPnqIbg5gN/MxOsrNfS8tS8ncQQD4tNdPNRdVTj9ZtmJGD1q7jJVV1lXDy73DyWe6sXMoKXB7/HkCdNRbIeQAGmQ6ZmKFyMsZAj5kYq5wZw+gxEZMqZyKR6DESc62cEeMauhFj5VxJwdMTMVPlJCzYFSNmrhzDgtMaiMmVM2DkSI4YGifbEC4iwhpnNgs3NyI1zpQSb8P4/2cl+Jpw3LPLDiC+h8suE2TdHdl/e43nrHPWOeu8vz4KFKPinsV4W+81vHON+Y2z5jfOmvCw8gyr3YLvtoVnWOwIvtsyz5BTUTc8hRBnG7nb2YMQZxtLt2A3QpxtrN292QlxtrF1C7YR4mzT06eX64VpV16vF8aBeLFeGIV3YTD8oa399zDqblraA1XibCMGJoY4EX6WK9fYOi6RnYCYKylMRDDrpt/EVVWrE2dbeMocYIygqtWJ60RIgYEJsk+e2PsDZiBDnqsO+kS2EbPAnDnCRFiwuglY4Vd9k/lEttFnBDb4WdXcJUHrfAl/wBYmwoJGXFWcqkw+kW3EHNpvl3hScIIJKO4m84lsg5gMlDgR6bJ3v7pMizmAu/dRviYlzjeMHiuDNrkuk0tkG8RswB4nwqIhGdhpy+QS2ZrFqvf2N1MncUXTLBYO9E+Pn4HDlUnJ0domI1MAX53STVzRrBGq6kz1Q4SS3NjWvDgc2ha3eJpkaWxzW3xzzekkrmjmDnpvvgo3VyYlW2Mb1Lmrzt5LXNE0yxdG3DqJq55m+cJQ0NsroUmOxtYsXxhROomvnqHYFUbaJy1KsrNf4OTk5DegUhnPLtNiAwAAAABJRU5ErkJggg==)
    no-repeat 50% 50%;
  background-size: contain;
}

#title-screen .marquee,
#title-screen .marquee-text {
  /*
   * "The <marquee> element is not valid according to the HTML or XHTML specifications. Page authors concerned with validation should not use this tag."
   * https://developer.mozilla.org/en/HTML/Element/marquee
   * So instead, we'll play dirty with CSS animations. :D
   */
  position: relative;
  display: block;
}

#title-screen .marquee {
  /* not exactly full-width, align with logo. */
  width: 98%;
  margin: 0px auto;
  overflow: hidden;
}

#title-screen .marquee .marquee-text {
  width: 100%;
  display: block;
  /* undo defaults */
  text-align: left;
  /* force one line */
  white-space: nowrap;
}

#title-screen .marquee .marquee-text .survivor-charset-wrapper {
  position: relative;
  display: block;
  animation: marquee 33s linear infinite;
}

#help-screen,
#game-over-screen,
#level-passed-screen {
  background: #000;
  cursor: pointer;
  display: block;
}

#help-screen,
#game-over-screen,
#level-passed-screen {
  background-color: rgba(0, 0, 0, 0.85);
}

#level-passed-screen .bd,
#game-over-screen .bd,
#help-screen .bd {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  max-width: 56em;
  transform: translate3d(-50%, -50%, 0px);
  max-height: 98%;
  overflow: auto;
  text-align: center;
}

#help-screen .bd {
  text-align: left;
  font-size: 16px;
  line-height: 24px;
}

#game-over-stats {
  margin: 0px auto;
  text-transform: uppercase;
}

#level-passed-stats {
  text-align: center;
  text-transform: uppercase;
}

#game-over-screen .bd h3,
#help-screen .bd h3 {
  font-weight: normal;
  margin-top: 2em;
  color: #3399ff;
}

#level-passed-screen .bd .wrapper {
  text-align: left;
}

#game-over-stats .survivor-charset-wrapper,
#level-passed-stats .survivor-charset-wrapper {
  display: inline-block;
}

#level-passed-screen .fixed,
#game-over-screen .fixed {
  /* fixed-width items */
  display: inline-block;
  text-align: left;
  max-width: 50%;
  padding: 1em;
}

#game-over-screen .fixed {
  margin-left: auto;
  margin-right: auto;
}

#level-passed-screen .fixed .icon,
#game-over-screen .fixed .icon {
  position: relative;
  display: inline-block;
  margin-bottom: -32px;
}

#level-passed-screen .icon,
#game-over-screen .icon {
  /* sneaky: scale down slightly. */
  zoom: calc(1.25 / var(--gs));
  min-width: 16px;
  min-height: 16px;
}

#level-passed-screen .fixed.bad-guy,
#game-over-screen .fixed.bad-guy {
  /* special display tweak */
  position: relative;
  width: auto;
  height: auto;
}

#level-passed-screen .fixed.bad-guy .icon,
#game-over-screen .fixed.bad-guy .icon {
  /* special display tweak */
  margin-right: calc(8px * var(--gs));
  height: calc(24px * var(--gs));
  background-position: 0px 100%;
}

#help-screen .bd .wrapper,
#level-passed-screen .bd .wrapper {
  position: relative;
  margin: 0px auto;
  padding: 1em;
}

#help-screen .bd .wrapper {
  max-width: 60em;
}

body.show-help #help-screen {
  display: block;
}

body.show-help #world-container {
  /* a little gratuitous filter nonsense, why not. */
  filter: blur(1px);
}

#world-container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: none;
}

#bg-canvas {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /* this might help with retina/hi-dpi. */
  image-rendering: pixelated;
}

#world,
#screen-overlay {
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  overflow: hidden;
}

#screen-overlay {
  z-index: 2;
  /* pass-thru */
  pointer-events: none;
  /* background: url(../image/scanline.png); */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEElEQVR42mNgkEKCKBycAAAvIAE5Q0a8XwAAAABJRU5ErkJggg==);
}

.ship,
.ship-gunfire,
.bad-guy,
.spaceball,
.turret,
.turret-gunfire,
.block,
.wall {
  position: absolute;
  top: 0px;
  left: 0px;
  width: calc(32px * var(--gs));
  height: calc(32px * var(--gs));
  overflow: hidden;
}

.transform-sprite {
  position: absolute;
  top: 0px;
  left: 0px;
  width: calc(32px * var(--gs));
  height: calc(128px * var(--gs));
  overflow: visible;
  /* TODO: fix background: definitions everywhere */
  background-size: contain !important;
  background-position: 50% 50%;
}

.ship,
.ship-gunfire,
.bad-guy,
.spaceball,
.transform-sprite,
.turret,
.wall {
  /* warm things up a bit more like on a C64 CRT monitor. */
  filter: saturate(150%);
}

/* except turret gunfire, which is relative to container. */
.turret {
  overflow: visible;
}

.turret .transform-sprite,
.wall .transform-sprite,
.spaceball .transform-sprite {
  /* static image, single frame height. */
  height: calc(32px * var(--gs));
}

#world.hide-wall .wall,
#world.hide-ship .ship,
#world.hide-ship-gunfire .ship-gunfire,
#world.hide-bad-guy .bad-guy,
#world.hide-turret .turret,
#world.hide-turret-gunfire .turret-gunfire,
#world.hide-block .block,
#world.hide-spaceball .spaceball {
  /* for performance testing? */
  display: none !important;
}

.ship,
.ship-sprite,
.turret-sprite {
  position: absolute;
  top: 0px;
  left: 0px;
  width: calc(32px * var(--gs));
  height: calc(32px * var(--gs));
  overflow: visible;
}

.ship-sprite {
  /* ship-2x.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAMAAADypuvZAAAAPFBMVEUAAAD///////////////////////////////////////////////////////////////////////8+MaIIh0PtAAAAE3RSTlMA/xcnObblREnJzDZ2Fs5Id+L4KjWIVAAAAONJREFUeAHszjeSAzEMRNHp8fTu/mddz1XTlJAp0o/xCr3Mw1+L3GvQukloW3uzH+f1HF3nsbfmVkBVjNgA6m6MBlgRIgNoUrsCWBlbkTVsALVXsx7AQznrQXnrHgY41j+0nfhXISZ0pRjoYKPBtYxJGTyFlRwbVrIRlGh6Vf7qTV/Iz1EOy1iUPsXRuCSh5AZkISHYAXkZ+d4YyAimQ1ZGtG9+3Iem16M3+my2DgoAAGAogvZvrcM7ybB90HH9jfBhYRowQpg7gAUQRrB0LIMAQDUgNdKniFqSQOLDMseDah6JARxLI92oaE5VAAAAAElFTkSuQmCC);
  background-position: 50% 50%;
  background-size: calc(26px * var(--gs)) calc(26px * var(--gs));
  background-repeat: no-repeat;
}

.turret-sprite {
  /* ship-turret.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwCAMAAADxPgR5AAAABlBMVEUAAACJQDZ0QENcAAAAAXRSTlMAQObYZgAAAFhJREFUeNrtzdEJwlAARbHz9l/a/4JCES5UkwXSXeeim4TCM+iuhE8Kzxu/Ep4PnhmeL7QPp2Wtw/HYPByPtR1rO9Z2rO1Y27G2Y23HAAAAAAAAAAAA/s0LCi8D1XL5MEUAAAAASUVORK5CYII=);
  background-position: 50% 50%;
  background-size: calc(28px * var(--gs)) calc(28px * var(--gs));
  background-repeat: no-repeat;
}

.ship.warping .sub-sprite,
.ship.exploding .sub-sprite {
  transition: all 0.35s ease-in-out;
  filter: blur(4px);
}

.ship .sub-sprite {
  transition: all 0.2s ease-out;
  transition-property: transform, opacity, filter;
}

.ship.hidden .sub-sprite,
.ship.exploding .sub-sprite {
  transition: all 0.5s ease-in-out;
  transform: scale3d(8, 8, 1) !important;
  opacity: 0;
}

.ship-thrust-up .sub-sprite {
  transform: rotate(0deg);
}

.ship.thrust-up.thrust-left .sub-sprite {
  transform: rotate(-45deg);
}

.ship.thrust-up.thrust-right .sub-sprite {
  transform: rotate(45deg);
}

.ship.thrust-right .sub-sprite {
  transform: rotate(90deg);
}

.ship.thrust-down .sub-sprite {
  transform: rotate(180deg);
}

.ship.thrust-down.thrust-left .sub-sprite {
  transform: rotate(-135deg);
}

.ship.thrust-down.thrust-right .sub-sprite {
  transform: rotate(135deg);
}

.ship.thrust-left .sub-sprite {
  transform: rotate(-90deg);
}

.ship-gunfire {
  position: absolute;
  width: calc(6px * var(--gs));
  height: calc(6px * var(--gs));
  background: #fff;
  border-radius: 100%;
}

.big-explosion {
  position: absolute;
  top: 0px;
  left: 0px;
  width: calc(96px * var(--gs));
  height: calc(80px * var(--gs));
  margin-left: calc(-48px * var(--gs));
  margin-top: calc(-40px * var(--gs));
  /* explosion-96.png */
  background: transparent
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAFABAMAAACxbWSJAAAAFVBMVEUAAAA+MaJcRwCAgICJQDbQ3HH///+xGu2/AAAAAXRSTlMAQObYZgAAASVJREFUaN7tm9ENwyAMRLNCV+gKXYEVukL3H6HmAwnRAkZKyp1776dKxYvkEoyN0uMQQmwiGZ7v0IWbUa5fBpvQDmhvwCDUg6YBAwtloCtgUCFTgnYnAwmnCxGeJfY1HSG3RtjjItQaQohdncrS0gQTUsXTYBPqgbXIIKQBedv6CB5QKFIb7HACgYRyMQocXfBMnoTfCMkJqtBbNExChHmIJNStfbt4WATt0/sFzQOO0PsBlqp7EGHUNHWPVIkExl6U8VmaboYSLhe+JWEmQVXlfiEtIkGCBAlXC8reOEL0Autu5EIlfzII/9CLMglCCCHOpz4AdL3yCShEOat8GEuVAJgwPb0CFnoHa2xCmTB3sQ4m9ArdfBMmgT0vLf1fAFQQQtDzBklNU5sbQcADAAAAAElFTkSuQmCC)
    no-repeat 0px calc(-96px * var(--gs));
  background-size: calc(96px * var(--gs)) calc(320px * var(--gs));
}

.bad-guy {
  position: absolute;
  width: calc(32px * var(--gs));
  height: calc(32px * var(--gs));
}

.bad-guy .icon {
  position: absolute;
  width: calc(24px * var(--gs));
  height: calc(24px * var(--gs));
  top: calc(4px * var(--gs));
  left: calc(4px * var(--gs));
}

.bad-guy.x .icon {
  /* badguy-x.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAADACAYAAABCkOCeAAAEvUlEQVR4AWKgBdj9Ztp/bJgWdgHYrQMLAAAQiKL7b90EUXAcDwH4PVAAAAAAAAAAAAAAAAAA29I1GIBU+DLJVjsAAADAHQDwzAEAAAAAAAAAAAAAAAB8kcOuHUC09oZxHNcailHdBAlypVuAICFAAiBdRcICiIAJIggFIAICUlxAA5thGGbArCtTBFeIO2Juqjj/75/wOs7zdsyzd+dl8aHL2fM+v+M97/ue3X4g42vz39BEHTlM+xZgC4HhCedYxkDSm0+jiCDCNVJJD7CIf0KADR+mz6nQ/C1Gk978JP4IAQ59uPu7QvMtzCa9+SFUhQCXPtz9FbxHNP+BVR8CXAh3v4ZhjQEGkOpS8zP4KwTY0xpkGdfYwKhygAOh+UdMaQ1yHlqTDzGrUHcEv4UAZ1rNT+NJWN4usYrhDmuvC82/YEkrQA6BxQdq2MPUF7VS5u/ICzVLSGs0n0EdQUyPOMMS0hH1NnGMeSygLdTZ1nyxaIoNy15QwjbGjZNmBQGecSd89h7j2i8YWyiKJ0W7exwhi7cY1x9186y+iFP50CULNf9muSaLtIuT4y6qwhHA5hVZnOBBCFHBJlIuDmEruIjYTSVlDH5+fgI7KOM1dN2x6/PMDA6MjUmyE/HZwdAz8oz5Xh3MRrCOfMQy+YAJ4XMnxnV3WECqlyfMFBZCy+WJcO1ExPPQRh7rGOlViHk8h1aYwYjrdhBY/MYBZlwHOI5YgcrYwYQx/8sIYviLC6xgyMUU2kRFWPcfcIKssQLF9Y4qdjHp4ssqeReWNrj4/uAUi0h3K8RRzJ06iyPcdxDkH4rYwjfN5sctDd0ZD3kFaeMz2yjhpYMwTfzQCrAtDNLGAuZxjE1h+i3hDI8IYqojozX/S8Ig+fALzhe1prCHGj6+CJDTuvtLlimw3mHNYaziEq2Iuk+Y1gpwZtmYRhTqz+IQt0btc63mpyzz9kB5lRvFBq6xrFV0z7KbznRx8xzQKDSMmhDgwofvOleFleIdKz4EuBTufhVDSW9+Fi0hwK4Pd//QcuiaTHrzo7gVApz6cPc3LCfFxaQ3n8K1EKCIdNIDDGAZ5xFfx2/59vcO08ihjqb4guFBkIzSi0X/p/+T+D8V8HZMCu3jCmMOmx/DFfY1/gfzDQF+YcxR87+M75JyCs3DCOGoedhDWKeN2bwQwkXzZoj92A8ProRCQgjF5mVXGNIsqBJCfyx3IfTH0B9Av7b7EPo13YfQr+UoBL9//5/z5hVCZDCHm09zyDhrXiFEAQ3j3w0U9JvXDyFz37xKiDbgvnmNEC2sfWrpN6/7Yl+IaP6ncc3PiBAFZJLwtjaHhtS8JUQDc71u/jtuQnN+zXL9WuiZuDH3iX4AD6aQBw9xfxn1YCP7r707IAIAAEEY2L/1cvzdTKEIA1glXuaAdVo5aD4p6aOellVUYcuXFl1xF5DX6QcH/WKin3y/WYEB5nkAw9OWM8D0B9guN74C1mPc/L39/gAEEEEBQkDHsIggHBBFPAwKxHGBQPSRdAQKAGAZADDGaBIADgPgeQBA0ogqABIGYNoAUN6oQh8WCeA6AWDqyFoAGgxgmwdn8+hyAh4P4PsvULjCAigRucYFKdIBqoyAMimgzitTkaFCQlcDFQAAAABJRU5ErkJggg==);
  background-size: calc(24px * var(--gs)) calc(96px * var(--gs));
}

.bad-guy.smiley .icon,
.bad-guy.smiley.icon {
  /* hackish: all classNames together for end game screen */
  /* badguy-smiley.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAADYAgMAAAA15U2XAAAACVBMVEX///+4uLgAAABwuR3lAAAAAXRSTlMAQObYZgAAAJNJREFUeF7t1bENwzAMBVG50AjZJyO4yLnQCN7HI7gIp0xAAen5C0IIeOXrJBtfbcWqDrtAD7xXkDZ+PUME2A3DgCjNMsm8COmXo38O/QfIr6rNmbtAJiHTuI47gYQFWIHOt0JtUkslkGjLpf9f8qqeAH2Q9bHyqY1TZxJ7mLxUOuzbFSU/tpkfO0xegIRBXnEeqw8sWSJiXi2m2AAAAABJRU5ErkJggg==);
  background-size: calc(24px * var(--gs)) calc(72px * var(--gs));
}

.bad-guy.smiley.icon {
  /* end screen special case */
  background-size: 100%;
  background-position: 0% 100%;
}

.bad-guy.bird .icon {
  /* badguy-bird.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAADYAgMAAAA15U2XAAAACVBMVEUAAADZ4YEAAAD2A5sWAAAAAXRSTlMAQObYZgAAAIJJREFUeAHtlwEGQ0EMRBPkCHufPUKwU/RePULv2UpVLdAJre+bB8ZDCIzExG8Ya8vfK0O+TcAY5ZifQKgaEUDWUErZQLGMVYbr7XKH8crx5K/qtTahhBCiVx2BjSRVNSahTt+rQgj1ar+s+vdq/0IOOIrklGPW2hUI1fk7+p/OsRAPGEWFUblQnfMAAAAASUVORK5CYII=);
  background-size: calc(24px * var(--gs)) calc(72px * var(--gs));
}

.bad-guy .icon {
  background-repeat: no-repeat;
}

.bad-guy.exploding {
  background: transparent url(../image/badguy-boom.png) no-repeat 0px 0px;
  background-size: calc(352px * var(--gs)) calc(32px * var(--gs));
}

.bad-guy.exploding .icon {
  display: none;
}

.turret-gunfire {
  /* turret-gunfire.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAYAAAB7jnWuAAAAO0lEQVR42u3XsQkAQAgEwe+/ab8EBUWTmVzY7PABmWgScB8AANZQAAAwNcPdewECBAgQIEDAeoAvGaj6ZC38LpiJVU0AAAAASUVORK5CYII=);
  background-size: calc(32px * var(--gs)) calc(64px * var(--gs));
  /* stay underneath turret "barrels." */
  z-index: 0;
}

.turret-gunfire.up,
.turret-gunfire.down {
  background-position: calc(2px * var(--gs)) calc(-32px * var(--gs));
}

.turret-gunfire.left,
.turret-gunfire.right {
  background-position: 0px 0px;
}

#editor-screen .block.type-0,
.block.type-0 .transform-sprite {
  /* block-type-0.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAACAAQAAAABCHVa3AAAAAnRSTlMAAHaTzTgAAAA+SURBVHgBY0AA/v///0AJBgabgSAQLoADQu5DiD1gpCZBwDY4ICf85P/BCDk5IgiEDmqGH4kE4wM0gkrxCwCJ1HuRGII6ZgAAAABJRU5ErkJggg==);
}

#game-over-screen .block.type-2,
#editor-screen .block.type-2,
.block.type-2 .transform-sprite {
  /* block-type-2.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAACAAgMAAAAXCIOJAAAADFBMVEUAAAD///+JQDZoqUFEDSERAAAAAXRSTlMAQObYZgAAAExJREFUeF7N07ENACEUw9BbMkt6yZzEAk5BQapXfizxTcuZAIoiUXQAUIHfvOxmn4IiWVBDAcFrffxmf/vesAje6wNUsP2dBVRwqc8PxC8PAGt9zUgAAAAASUVORK5CYII=);
}

#game-over-screen .block.type-2 {
  background-size: 100%;
}

#editor-screen .block.type-3,
.block.type-3 .transform-sprite {
  /* block-type-3.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAACAAgMAAAAXCIOJAAAADFBMVEUAAAAAAACJQDb///+BW6ugAAAAAXRSTlMAQObYZgAAAERJREFUOI3NkLENADAIw/Jkn+TJFFXsyRBVeEDeggw48CEEc7aI8XMKq89ppJAZMba29bGkKiOZf772qUYKkBFjK9LnApuVuQAKuhHCAAAAAElFTkSuQmCC);
}

#editor-screen .block.type-1,
.block.type-1 .transform-sprite,
#editor-screen .block.damaged,
.block.damaged .transform-sprite {
  /* block-type-1.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAACAAgMAAAAXCIOJAAAADFBMVEUAAAAAAABoqUH///+Pb14MAAAAAXRSTlMAQObYZgAAAERJREFUOI3NkLENADAIw/Jkn+TJFFXsyRBVeEDeggw48CEEc7aI8XMKq89ppJAZMba29bGkKiOZf772qUYKkBFjK9LnApuVuQAKuhHCAAAAAElFTkSuQmCC);
}

#world .block.damaged .transform-sprite {
  /**
   * "damaged" blocks always use the first "type 1"
   * block style, and don't animate.
   */
  transform: translate3d(0px, 0px, 0px) !important;
}

/**
 * translate3d-based GPU acceleration for sprites
 * inner sprite element: this element gets the sprite and will be transformed, sliding within the container.
 */

#world .block .transform-sprite {
  transform: translate3d(0px, 0px, 0px);
}

#world.phase-1 .block .transform-sprite {
  transform: translate3d(0px, -25%, 0px);
}

#world.phase-2 .block .transform-sprite {
  transform: translate3d(0px, -50%, 0px);
}

#world.phase-3 .block .transform-sprite {
  transform: translate3d(0px, -75%, 0px);
}

#world.phase-4 .block .transform-sprite {
  transform: translate3d(0px, -100%, 0px);
}

/* step-based animations, too */

.block.exploding,
.wall.exploding,
.turret.exploding {
  /* death sequence */
  /* base-explosion.png */
  /* TODO: move further down so !important isn't needed? */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAADACAMAAABS4JFEAAAAElBMVEVVVVVoqUF6v8d8cNqJQDb///8IAG8eAAABoklEQVR42u2YYYuDMBBEbbX//y/XAQeWB2aWnhcsd/Ml6+ZhZiRW6/LY9dqlcdmlUXK/B0gEt0MZqA0BBhcrAUOTLeDCFNZpCmtyij6g0ZO89BngEh4FqM6AT+kGYwYgpFDdAyjBfYAbZJhCmpTCsKAMbJAnJIE9wKeVNigDmmSzGo3A0GQfwMVBCgATU1gR+FmK//3w9/aDJy1D6y4dZ8CNCqyH1O8Ba5GOK/gZYJMt4PYpNAYAJlXTZAa4WSqgfgY8YYOMmQEXhmg6AkOTPYDbnCYDcPMUVgaqIf5WL1ILkPhG6rkMuGHxNozAL6doAUOTqjNgM2WESQLXp+Cl/QzQ6K3HmBngPxKajsDQZBPgU5cmCUxOoboHSAZpsg88D7HOQG3YqGovlQE2vKT7ERiaFBSBC1NYpymsySl6gAuPERguwe3XA+op6+g6AkOTWqYHPItoMgM85TCFgIkpXGfAPzX8FuYlM2CdvR5koDYIZ4DPTgPoBeBOKSyuH4ELUvC7KB+sGeCLBmNmgN9EaToAwaTrAHCb0ySBL0phZSDf/m+SPju9I9KB0AAAAABJRU5ErkJggg==) !important;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: calc(32px * var(--gs)) calc(192px * var(--gs));
}

.block.exploding .transform-sprite {
  visibility: hidden;
}

.block-exploding {
  margin: calc(4px * var(--gs));
  width: calc(26px * var(--gs));
  height: calc(26px * var(--gs));
}

#world.disable-pulse .block {
  /* no pulse effect */
  background-position: 0px -100% !important;
}

#world.disable-pulse .block .transform-sprite {
  transform: none !important;
}

#world.disable-sprites div {
  /* nuke sprites */
  background-image: none !important;
  outline: 1px solid #999;
}

#world.disable-css3 div {
  border-radius: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.bad-guy,
.ship-gunfire,
.spaceball,
.turret,
.turret-gunfire,
.wall,
.ship,
.ship .sub-sprite {
  /* constantly moving, OR, scrolling */
  will-change: transform;
}

.bad-guy,
.ship-gunfire,
.spaceball,
.turret-gunfire,
.wall,
.turret,
.ship {
  /**
   * Ensure dynamically-generated elements appear out of view,
   * before initial positioning. TODO: assign position before append.
   */
  transform: translate3d(-100%, -100%, 0);
}

.fixed,
.fixed .icon {
  /* don't apply to "game over" screens. */
  transform: none;
}

.wall,
.turret,
.turret-gunfire {
  /* the stuff which bases are made of. */
  width: calc(32px * var(--gs));
  height: calc(32px * var(--gs));
}

/* turrets */

.turret.down {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPEDAGipQYlANv///wAAACH5BAUKAAMALAAAAAAgACAAAAKUnBcZh8q6DnxOVjNtoltHfDUdOIqfyZ3QGrJs6qpxO5e1fcMuwwA+wAsOfkBh72c8+pIHItPgfEaZ0yHxis1qt9yu9wsOfwXkMploTpfR6jS7vf7Bze95HX5v11PEDCnQR5MQiDP442dCKGPogwihyHcYolREhSR1abmEualZmVRlFCo0GlTKc0r5ZNUJmunaKvpaAAA7);
}

.turret.right {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPEDAGipQYlANv///wAAACH5BAUKAAMALAAAAAAgACAAQAKLnI8my5ufggyg2ouzhak1zk2URpKiiHgMCp0TcjXs40qpKsxRDVvy2+IdcDkgaCAqKTG1QK/ysx1BxClSqMDpQpOlF9B8AqJOK6RqPqKP4aHWuHPdVNug5LtEJPGltiG2AqeHNQC4UJe2lnaGY+U3QIR4JedGJ2g3wqcxeKep8WhYJEVDGCpppchRAAA7);
}

.turret.up {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPEDAGipQYlANv///wAAACH5BAUKAAMALAAAAAAgACAAAAKVnG+ggH3LXINyroooTncPvYGYWJGS6aCW4n1d+I4xEtQBZAe0jdt73av9bovcMKg75JDHok/Jc9YE1CoVYs1Wsdost7tdgK3fcRl87pYh7Lb7DY/L5/S6vV6anfQp/ioCw+KhkuFXKOiQo/hksLg45JjUGMk4QFl5KQR1Cek49LkpaYlJqjlpOopqFAp6Krrq2poaUAAAOw==);
}

.turret.left {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPEDAGipQYlANv///wAAACH5BAUKAAMALAAAAAAgACAAAAKAnI8my5sPX2uxnoDDZCj7EHmbc31YmI1CZ4KQOLImQNf2jdcekvf+fvAJb0DD8AgoVmAb2QeFUTmVTmnJBNXErk/LwOr1gsOVMRliPg+Yk2kmO265HmwKl8qNt5BDJV/o99cTKIiDR5eyZSAHp7jW0th09/aSKLkIKeaolpD2UAAAOw==);
}

.turret {
  background-size: contain;
  z-index: 1;
}

.wall.type-1.downLeft {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAQAJFjI8ZwKAPT5sU0otZ3Lz7NH1fKCJkiabiqSpsm72q7MY23LT6zo95L/kBF0IgDWXTzJK9I065ScY60szTMSRCs9yu91sAADs=);
}

.wall.type-1.downRight {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAQAJEjI8ZwKAPT5s02kRzvbzf6XlgSCJjiYZnqqystrGGK8+wVttMzvccXQPKhK8G72ZMIXc5ojLpW8Y6UqcI2rP6ttzupQAAOw==);
}

.turret.type-1.up.dead,
.turret.type-1.down.dead,
.wall.type-1.horizontal {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAQAJAjI+py+0Nopy02vmy3nzh9zkhJHXmiabq6pWga1zyTDGjDbP6zvf+Dwyubq1IhqgY0ZbMZhNnfEVFOShAiM1iCwA7);
}

.wall.type-1.rightDown {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAAAJAjI+py+0Po5y02ouz3rz7LwEiAI7kZ5YjZrZuC70y/Mz26dwzux7p9TMEK8MhpdjzyDjLTVPzzBidyc4UWmUUAAA7);
}

.wall.type-1.upRight {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAAAJBjI+py+0Po5y02ouz3rz7DxrACIBk+Z0miZ3ui0rwHEc0TN1vzh7q9RP1LMFAkTdCHB8zTnPz1EQ7S+mQenVmFwUAOw==);
}

.turret.type-1.left.dead,
.turret.type-1.right.dead,
.wall.type-1.vertical {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAAAJMjI8ZwKAPX3Oxwmlzwrrznn1gJY5XY0rTyqQGy7oLXIJ0neLy3O6KLgO6hDmUb2M8Hogm5shpSyp5FN9N+rxWm9pg9wj1YMFjazlRAAA7);
}

.wall.type-2.downLeft {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPECAP///2ipQQAAAAAAACH5BAUKAAIALAAAAAAgACAAQAJGlI8pwKAPX3PRzIDDzbP6D4ZZEIpZiabqKjUsNL4tIyuxt2G55tb+D/x1gkPgzXgi9oDF39GZrOymywiVMWoGt9yu91srAAA7);
}

.wall.type-2.downRight {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPECAGipQf///wAAAAAAACH5BAUKAAIALAAAAAAgACAAQAJDlI8pwaEPX3OxwgkywNr672kACIrkiaaq1KyQ6SpTrMD0wWX5ePf+H5n9hD5bz3gj9pQ3JM0Z2+1O0gYUiM1qt1xDAQA7);
}

.turret.type-2.up.dead,
.turret.type-2.down.dead,
.wall.type-2.horizontal {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPECAGipQf///wAAAAAAACH5BAUKAAIALAAAAAAgACAAAAI7lI+py+0Po5y02ouz3rz7D4biSAVmAKTAiaqsup7w68q1Odspvesxfmv1gEPhz8gDkJbMpvMJjUqnlwIAOw==);
}

.wall.type-2.rightDown {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPECAGipQf///wAAAAAAACH5BAUKAAIALAAAAAAgACAAAAJAlI+py+0Po5y02ouz3rz7D4biSAVmAKTAiaosxKrrKb9P7NK5Cesp/juBZENVMXUEgGweZsfJgW6IH6rH2sEyCgA7);
}

.wall.type-2.upRight {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPECAGipQf///wAAAAAAACH5BAUKAAIALAAAAAAgACAAAAI9lI+py+0Po5y02ouz3rz7D4biSAZmAKTAiaoUq65n/M4q7E54ugMU/QF6hB0ihwVCfpQeZjE3hD5TIOOiAAA7);
}

.turret.type-2.left.dead,
.turret.type-2.right.dead,
.wall.type-2.vertical {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPECAGipQf///wAAAAAAACH5BAUKAAIALAAAAAAgACAAQAJJlI8pwaEPX3OxwmlzwrqDD3QeKGpgWFpnanEstL5XI8Nkrbj4Ee+H7uv5FrShAbgTBm9GJM5ZUyaZQ6jM+pLitDUsy5viysSHAgA7);
}

/* type 3 */

.wall.type-3.downLeft {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAQAI/jI8ZwKAPX3PRzItv3bz76X1NSJbmKY1oyqws5SLgltVajOd6Pus9r/IFga3dD3eMJRW2JizitO2m1Kr1uisAADs=);
}

.wall.type-3.downRight {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAQAI/jI8ZwKAPX3OxwokztbzX6XlgSJbmqYxo2qxS6yZqbGj2Ruf6/jL8TAPGhC7iyohCnpSmm4bkzPCm1Kr1GikAADs=);
}

.turret.type-3.up.dead,
.turret.type-3.down.dead,
.wall.type-3.horizontal {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAAAIpjI+py+0Po5y02ouz3rz7D4biSAHmiabqyrbuC8fyzJL2jef6zvf+VQAAOw==);
}

.wall.type-3.rightDown {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAAAI2jI+py+0Po5y02ouz3rz7D4biSAHmiaYppLYt68YmLLsgep/5/OG9/uN5fENgUdghJo1LJKMAADs=);
}

.wall.type-3.upRight {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAAAI1jI+py+0Po5y02ouz3rz7D4biSALmiaYApbYn67ZwnM7rh4I5/vKm3vPshMHO0FjkHJXJRQEAOw==);
}

.turret.type-3.left.dead,
.turret.type-3.right.dead,
.wall.type-3.vertical {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAP///wAAACH5BAUKAAEALAAAAAAgACAAAAJGjI8ZwKAPX3Oxwmlzwrrznn1gJY5XY1pluqHsybwwJbdxbdO4sda9/HsFWcNU0XQcJUFLj2vHe0KbGmpIurOqsDgtiasoAAA7);
}

.wall.type-4.downLeft {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAGipQQAAACH5BAUKAAEALAAAAAAgACAAQAI/jI8ZwKAPX3PRzItv3bz76X1NSJbmKY1oyqws5SLgltVajOd6Pus9r/IFga3dD3eMJRW2JizitO2m1Kr1uisAADs=);
}

.wall.type-4.downRight {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAGipQQAAACH5BAUKAAEALAAAAAAgACAAQAI/jI8ZwKAPX3OxwokztbzX6XlgSJbmqYxo2qxS6yZqbGj2Ruf6/jL8TAPGhC7iyohCnpSmm4bkzPCm1Kr1GikAADs=);
}

.turret.type-4.up.dead,
.turret.type-4.down.dead,
.wall.type-4.horizontal {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAGipQQAAACH5BAUKAAEALAAAAAAgACAAAAIpjI+py+0Po5y02ouz3rz7D4biSAHmiabqyrbuC8fyzJL2jef6zvf+VQAAOw==);
}

.wall.type-4.rightDown {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAGipQQAAACH5BAUKAAEALAAAAAAgACAAAAI2jI+py+0Po5y02ouz3rz7D4biSAHmiaYppLYt68YmLLsgep/5/OG9/uN5fENgUdghJo1LJKMAADs=);
}

.wall.type-4.upRight {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAGipQQAAACH5BAUKAAEALAAAAAAgACAAAAI1jI+py+0Po5y02ouz3rz7D4biSALmiaYApbYn67ZwnM7rh4I5/vKm3vPshMHO0FjkHJXJRQEAOw==);
}

.turret.type-4.left.dead,
.turret.type-4.right.dead,
.wall.type-4.vertical {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPABAGipQQAAACH5BAUKAAEALAAAAAAgACAAAAJGjI8ZwKAPX3Oxwmlzwrrznn1gJY5XY1pluqHsybwwJbdxbdO4sda9/HsFWcNU0XQcJUFLj2vHe0KbGmpIurOqsDgtiasoAAA7);
}

.wall {
  background-size: contain;
}

.wall.exploded,
.turret.exploded {
  /* death sequence complete */
  display: none;
}

.spaceball {
  position: absolute;
  width: calc(32px * var(--gs));
  height: calc(32px * var(--gs));
  /* spaceball.png */
  background: transparent
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAAgElEQVR42u2WQQqAMBAD+zjv4oP8hj/xffVacxkWA6HFQG4hO+1SaPuq89776GZVHoAHqikfB3AMeFml+fUBrmMbLXn2bABsER4gD1AsrA5A4DwAFNqvXJUHkID92VF/HqBYQIVVoAkAyKIqYB7g/w+Q3CtaH4BWEgCIfstZeYAH+iJJMw1O7SUAAAAASUVORK5CYII=)
    no-repeat 0px 0px;
  background-size: contain;
}

@keyframes marquee {
  from {
    transform: translate3d(115%, 0px, 0px);
  }
  to {
    text-indent: 0%;
    transform: translate3d(-300%, 0px, 0px);
  }
}

#world.use-transform .turret.dead {
  /* no more GPU for you */
  transform: none;
}

#footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  min-height: 20px;
  padding: 8px 8px 9px 8px;
  font-size: 12px;
  color: #999;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
  z-index: 2;
  line-height: 20px;
}

#footer .bubble {
  position: relative;
  display: inline-block;
  background: rgba(0, 0, 0, 0.75);
  padding: 1px 8px;
  border-radius: 6px;
}

#footer p {
  margin: 0px;
  padding: 0px;
}

#footer span.divider {
  padding: 0px 7px;
  color: #444;
}

#footer a {
  text-decoration: none;
  color: #6699cc;
}

#footer a:hover {
  color: #fff;
}

#footer a.cta {
  padding: 0px 5px;
  text-decoration: none;
  color: #6699cc;
  border-color: #114477;
  line-height: 19px;
  font-weight: bold;
}

#footer a.cta.help {
  border-radius: 20px;
  width: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  vertical-align: bottom;
}

#footer a.cta:hover {
  color: #fff;
}

#points,
#lives,
#smartbombs,
#fps {
  font-weight: bold;
}

#stats {
  float: right;
  padding-right: 1.5em;
}

#original {
  display: none;
}

/* debug bits */

#debug-panel {
  position: fixed;
  bottom: 38px;
  right: 8px;
  background: #000;
  background-color: rgba(0, 0, 0, 0.9);
  font-family:
    monaco, 'Andale Mono', 'VT-100', 'Lucida Console', 'Courier New', monospace,
    courier, system, sans-serif;
  font-weight: normal;
  font-size: 10px;
  line-height: 10px;
  color: #999;
  border: 1px dotted #999;
  border-color: rgba(255, 255, 255, 0.25);
  padding: 0.5em;
  display: none;
}

#debug-panel .debug-header {
  font-weight: bold;
  text-align: center;
  border-bottom: 1px dotted #999;
  border-color: rgba(255, 255, 255, 0.2);
  padding-top: 5px;
  padding-bottom: 5px;
}

#debug-panel .debug-header:first-child {
  padding-top: 0px;
}

#debug-form,
#debug-form ul,
#debug-form ul li {
  margin: 0px;
  padding: 0px;
}

#debug-form ul {
  list-style-type: none;
  padding: 5px 0px;
}

#debug-form ul li {
  padding: 2px 0px;
  color: #666;
}

#debug-form ul.compact li {
  /* make everything tightly spaced. */
  padding: 0px;
  margin-top: -2px;
}

#debug-form label {
  position: relative;
}

#debug-form code {
  display: inline-block;
  color: #336699;
}

#debug-form .count {
  color: #339933;
}

a.cta {
  display: inline-block;
  padding: 3px 4px;
  background: #001133;
  border: 1px solid #003366;
  border-radius: 3px;
}

a.cta:hover,
#footer a.cta:hover {
  background-color: #336699;
  border-color: #6699cc;
  color: #fff;
}

a.cta:focus {
  outline: none;
}

#tweeter {
  display: none;
}

#footer a.tweeter {
  display: inline-block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAMCAQAAADFGyU3AAAA4ElEQVQYV1WRsQ4BQRCGlyARlRARUSgUOq8gIQpRSSQSBZHQeQAvIFGpFDoVOREnKo3bN5vf7Mxtzs3lv529/7uZ2TtjDDKGg+SugSYdaE8l8x9oY5ba38jiiXUaKiOExQZV2a04/7IsjmlsLg8/WCCHu+QWEWv0Dy1hKRIrUIQbRqwL+tRVhIfGQd92plxudU1D9BJoh5eHYrlqD0x0Ut9ySzau4CtaTMWivABZVp0C8rMockVBoQ7GKDJS4+HfasdHiNBK2gzir5IM7rIzGv5vyEIV2tBbj+0QOtHQey5+lFrhcFxfM3wAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: 6px;
  width: 22px;
  height: 19px;
  margin-top: -3px;
  overflow: hidden;
  font-size: 18px;
  line-height: 10px;
  font-weight: bold;
  text-indent: -99em;
  vertical-align: middle;
  text-align: center;
}