/*

                                         ████▙   ▀████▌████▙  ▀█████   █████▀ ▄██████▄ ▀████▌████▙         ████▙   ▀█████▀    ▀█████▀     ▀████▐███▋▀█████▀ ▀█████▀ TM
                        ▄██▀            ▕█████▏   ████▌ ████▌  ▐████▌  ████▌ ████▎▐███▊ ████▌ ████▌        █████▏   █████      █████       ████ ▝██▋ ▝████   ▐███▘
                      ▄█▀               ▐▐████▎   ████▌ ████▙   █████ ▌████▌▐███▊  ████▏████▌ ████▙       ▐▐████▎   █████      █████       ████   ▝▋  ▝███▙ ▗███▘
      ▄████▄▄▄▄▄▄▄▄▄ █▀▄▄▄▄▄▄▄▄▄▄▄      █▌████▋   ████▌▗████▘   ▌█████▌████▌████▊  ████▌████▌▗████▘       █▌████▋   █████      █████       ████ ▗█▌    ▝███▙▝█▘
                  ▄█████▄▄▄▄  ▀▀▀      ▐█▌▐████   ████▌████▘    ▌█████▌████▌████▊  ████▌████▌████▘       ▐█▌▐████   █████      █████       ████▐██▌     ▐████▌
  ▄          ▄████████████████▄        ██ ▄████▎  ████▌▝███▙    █▐████ ████▌████▊  ████▌████▌▝███▙       ██ ▄████▎  █████      █████       ████ ▝█▌     ▐████▌
  ██        ▀████████████████████▄    ▐█▌██████▌  ████▌ ████▌  ▕█ ███▌ ████▌▐███▊  ████ ████▌ ████▌     ▐█▌██████▌  █████    ▗▋█████    ▗▋ ████   ▗▋    ▐████▌
  ▀███     ▄██████████████████████    ███  ▐████  ████▌ ████▌▗▋▐█ ▐██  ████▌ ████▎▐███▊ ████▌ ████▌▗▋   ███  ▐████  █████  ▗██▌█████  ▗██▌ ████ ▗██▌    ▐████▌
   ████▄▄███████████████████████▀    ▄███▄ ▄████▌▄█████▄▀████▀▄██▄ █▌ ▄█████▄ ▀██████▀ ▄█████▄▀████▀   ▄███▄ ▄████▌▄█████▐████▌█████▌████▌▄████▐███▌   ▄██████▄
  ████████▀▀▀▀▀▀▀▀████▀█▀▀▀▀█▀
   ██▀              ██▘▘ ██▘▘

  A browser-based interpretation of the MS-DOS release of Armor Alley.

  Original game Copyright (C) 1989 - 1991 Information Access Technologies.
  http://en.wikipedia.org/wiki/Armor_alley

  Images, text and other portions of the original game used with permission under an ISC license.
  Original sound effects could not be re-licensed; modern replacements used from freesound.org.

  http://www.schillmania.com/armor-alley/
  http://github.com/scottschiller/ArmorAlley/
  http://www.schillmania.com/content/entries/2013/armor-alley-web-prototype/

  General disclaimer: This is a fun personal side project. The code could surely be better. ;)

  This release:     V1.6.20220201
  Previous release: V1.5.20180201
  Original release: V1.0.20131031

*/

@font-face {
  /* Credit and thank-you (Apache 2.0): https://www.jetbrains.com/lp/mono/ */
  font-family: "JetBrains Mono";
  src: url('../font/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
  /* https://fontsarena.com/sysfont-by-alina-sava/ (SIL Open Font License 1.1) */
  font-family: 'FA Sysfont C';
  src: url('../font/sysfont/sysfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

html,
body {
  margin: 0px;
  padding: 0px;
}

body {
  /* Classic Mac OS-style "chicago" by default, with an array of safe fallbacks. */
  font-family: 'FA Sysfont C', 'JetBrains Mono', 'SF Mono', 'Lucida Console', 'Terminal', Monaco, monospace;
  background: #111;
  color: #fff;
  /**
   * 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;
  image-rendering: -webkit-optimize-contrast;
  /* non-standard, but quite nice under Firefox */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  /* who knows, for IE */
  -ms-interpolation-mode: nearest-neighbor;
  /* font trickery */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  /* on mobile especially, aggressively disable selection. this is a game, not a document. ;) */
  -webkit-user-select: none;
  user-select: none;
}

#aa {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: crosshair;
  cursor: url(../image/cursor-cross.png), crosshair;
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAQAAADY4iz3AAAAJklEQVR4AWNAAv/BECv4/5/WUv9hECqFgEABTABWhEcXPR2PJwwBYldZpwyOHyUAAAAASUVORK5CYII=), crosshair;
}

#world-container,
#game-status,
#radar,
#radar-container,
.sprite {
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
  contain: strict;
}

#world-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(27,107,27,0.45);
  /* image/checkerboard-black-mask-50percent.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlN/AN40qAEAAAAVSURBVHgBYwiFAoZVUEC8yKjIqAgAdHP/Abts7zEAAAAASUVORK5CYII=);
  background-size: 64px;
  z-index: 10;
  transform: scale3d(1,1,1);
  image-rendering: pixelated;
}

#world.tutorial-mode #world-overlay,
#world.regular-mode #world-overlay {
  background: transparent;
}

#world-overlay.fade-out {
  transition: all 0.66s ease-in-out;
  transition-property: opacity, transform;
  opacity: 0;
  transform: scale3d(1.2,1.2,0);
}

#logo {
  position: absolute;
  top: 36%;
  left: 50%;
  width: 391px;
  height: 67px;
  margin: -33.5px 0px 0px -195.5px;
  background: transparent url(../image/aa-logo.png) no-repeat 0px 0px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYcAAABDBAMAAACFPtRbAAAAGFBMVEUAAAD/qgH///+qqqoAAAAOqgKrVaoFVQESGVkpAAAAAXRSTlMAQObYZgAAAw1JREFUeAHtWgGO1DAMNCPgHVZfwNN4Ck/jBZW1zwDJQrC5Xs/b2bqXOhSJke5OTjJxxnF8iXalBh/eyfuP6Q/0bmBqZmtYt7XRdyx9UOFU5mYK0zAbrRVLP9o0+O1IoJBHrJeuSxsdCL3/MCoB4jTRpsvSNwMmFYR5IzDJDqDtd5oKOQlubrkJNdcP5dRSmCVEINkN3lcK3/ZjIZ7rNuXRVkIl8OAv2hyR0Bcsa3z3grg7j20E9umIbSzWhMpggRNtqkb8ZbybzOIGvqR8rEwsz+YDWeTnB3cBeEa3xzZs0b80g1AJnO9IgG01OBFB3OheqL5zasWh0KgMtMjnE8OjQwboGXKKS7lKEYwL4yLy5WlkjPy5Fz0UbWVrRNVO+XM34FYdcELeWt984KEthnUHxa5zspWLqEfBIf+0EnFLs9ER7rSb/Mvs5yICYw4oegPvJL+QTurpxGWqJPD5dXggQHujAxmEH2vDvHNJ3n/+uuH2Jom8M64qowGJmDcGaBNajBPd2JZK32e49jrrzy7nd7arQw/mG/pvpRkqvp5aDnFuhdEk9du4W7Fe7pFnVARyxFunT5TXYBcGT4YjRfVKEdb3jshSreaZDZLLxdCSdOq7vVLqGCC/FLf293IqEPe2rtJq2U0Ycn1YToSLWHFh4m76gb7/JRFWsdF+VAT22ZbZKT8YO2jGJvg4tIxwN5qyCTDsbKN26n++QOHIBdU673C3ohqLLnaEv5eKp7Y76tLJx2cTE6EjrrEFbmKJ9TmWv5L3BXejCZsD1elz/ept3B4JZBYAjYcnDWhGJ3I2PxPoeEx6NDkVeQfE5gBpoPBzri44N500Kl1MkO+fIcaHUWOHEh1I2dw1smK3x1q0OOqySYD40lbBBllXtr4K89agLdPA/G640fDZ6J4dXKd3wvN3Ik6tBzSGH6I0a/1tqzZNQNPHi9Gjm8NlNbheAZ1XDU88ZsuBzOo9pc/y1LEiPN/grKMesBa21WJstY5ZROaXXt/6KvEcPmiO1Dse3VDRxI6uTwYmTCp/Eb8Azq7u6tP90iYAAAAASUVORK5CYII=);
  z-index: 11;
  opacity: 1;
}

@media screen and (orientation: portrait) {
  #logo {
    /* hack! fit within iPhone X portrait dimensions. */
    transform: scale(0.57);
  }
}

#logo h1 {
  visibility: hidden;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

#world.tutorial-mode #logo {
  top: 56%;
}

#world.blurred .sprite,
#world.blurred #game-tips .tips-container,
#world.blurred #top-bar,
#world.blurred #mobile-controls,
#world.blurred #pointer {
  filter: blur(2px);
  transition: filter 0.5s ease-in-out;
}

#world.blurred.no-blur .sprite,
#world.blurred.no-blur #game-tips .tips-container,
#world.blurred.no-blur #top-bar,
#world.blurred.no-blur #mobile-controls,
#world.blurred.no-blur #pointer {
  filter: unset;
}

#game-menu {
  margin-top: 60px;
  display: none;
  /* left alignment tweak */
  margin-left: -12px;
  text-align: center;
  color: #999;
}

#game-menu.visible {
  display: block;
}

#game-menu h2 {
  font-weight: normal;
  font-size: 1.1em;
  line-height: 1.5em;
}

#game-menu .cta {
  display: inline-block;
  width: 22%;
  box-sizing: border-box;
  color: #00cc00;
  border: 1px solid green;
  font-size: 1.33em;
  line-height: 1.33em;
  padding: 0.25em 0.5em;
  text-align: center;
  text-decoration: none;
  background-color: #003300;
  background-color: rgba(0,102,0,0.5);
  margin-left: 1%;
}

#game-menu .cta:hover {
  background-color: #006600;
  background-color: rgba(0,153,0,0.75);
  color: #fff;
}

#game-menu .cta:first-of-type {
  margin-left: 0%;
}

#game-menu .cta .emoji {
  display: block;
  font-size: 1.1rem;
  filter: grayscale(0.5);
  pointer-events: none;
}

#exit {
  display: none;
}

#exit.visible {
  display: inline;
}

#exit-emoji {
  font-size: 0.5rem;
  filter: grayscale(1);
  opacity: 0.75;
}

#exit:hover #exit-emoji,
#game-menu .cta:hover .emoji {
  filter: grayscale(0);
  opacity: 1;
}

#game-description {
  margin-top: 0.75em;
  font-size: 1em;
  color: #009900;
}

#world-wrapper {
  position: absolute;
  top: 50%;
  left: 0px;
  height: 384px;
  width: 100%;
  border-bottom: 2px solid #666;
  /* mac style */
  border-bottom-color: rgb(135,84,0);
  margin-top: -192px;
  background: #000;
  font-size: 11px;
}

#game-status-bar {
  border: 1px solid rgb(23,160,7);
  border-left: none;
  border-right: none;
}

#game-status-bar.building {
  /* when inventory is being ordered */
  border-color: #fff;
}

/* nested in #player-status-bar */
#spinner {
  /* gear spinner */
  position: absolute;
  display: none;
  width: 12px;
  height: 12px;
  top: 12px;
  right: 8px;
  /* Gear SVG (gear.svg) by Fabián Alexis - https: //github.com/fabianalexisinostroza/Antu, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=49940470 */
  background: transparent url(data:image/svg+xml;base64,PCEtLSBodHRwczovL2NvbW1vbnMud2lraW1lZGlhLm9yZy93aWtpL0NhdGVnb3J5OkdlYXJfaWNvbnMjL21lZGlhL0ZpbGU6QW50dV9hZGp1c3RsZXZlbHMuc3ZnIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIyIDIyIj48cGF0aCBkPSJNMTguOTIxIDkuNjNhLjMyNy4zMjcgMCAwIDAtLjIxOC0uMTNsLTEuOTA3LS4yOTJhNi4yODQgNi4yODQgMCAwIDAtLjQyNy0xLjAyYy4xMjUtLjE3NC4zMTItLjQxOS41NjItLjczNS4yNS0uMzE2LjQyNy0uNTQ3LjUzMi0uNjkzYS40MDEuNDAxIDAgMCAwIC4wODMtLjI0LjMzNi4zMzYgMCAwIDAtLjA3My0uMjI4Yy0uMjUtLjM1NS0uODIzLS45NDUtMS43MTktMS43NzFhLjQwMi40MDIgMCAwIDAtLjI2LS4xMDQuMzM4LjMzOCAwIDAgMC0uMjUuMDkzbC0xLjQ4IDEuMTE1YTYuNTE0IDYuNTE0IDAgMCAwLS45MzctLjM4NmwtLjI5MS0xLjkxN2EuMzA5LjMwOSAwIDAgMC0uMTItLjIyNC4zOTMuMzkzIDAgMCAwLS4yNTYtLjA4OEg5Ljg0N2MtLjIgMC0uMzI2LjA5Ny0uMzc1LjI5MS0uMDkuMzQ3LS4xOS45OTMtLjMwMiAxLjkzN2E1Ljk4MiA1Ljk4MiAwIDAgMC0uOTQ4LjM5Nkw2Ljc4NSA0LjUyYS40NDMuNDQzIDAgMCAwLS4yNzEtLjEwNGMtLjE1MyAwLS40OC4yNDgtLjk4NC43NDQtLjUwNC40OTctLjg0Ni44Ny0xLjAyNyAxLjEyYS40MzkuNDM5IDAgMCAwLS4wOTQuMjRjMCAuMDgzLjAzNS4xNjYuMTA0LjI1LjQ2Ni41NjIuODM3IDEuMDQxIDEuMTE1IDEuNDM3YTUuMTQgNS4xNCAwIDAgMC0uNDA2Ljk1OWwtMS45MzcuMjkxYS4zMTQuMzE0IDAgMCAwLS4xOTguMTM2LjQwMS40MDEgMCAwIDAtLjA4NC4yNHYyLjMxMmMwIC4wOS4wMjguMTcyLjA4NC4yNDVhLjMyNy4zMjcgMCAwIDAgLjIxOC4xM2wxLjkwNy4yODJjLjA5Ny4zNC4yNC42ODQuNDI3IDEuMDNhMjEuOTggMjEuOTggMCAwIDEtLjU2My43MzVjLS4yNS4zMTYtLjQyNy41NDctLjUzLjY5MmEuNDAyLjQwMiAwIDAgMC0uMDExLjQ4Yy4yNy4zNzUuODQzLjk1OCAxLjcxOSAxLjc1YS4zNTkuMzU5IDAgMCAwIC4yNi4xMTQuMzc1LjM3NSAwIDAgMCAuMjYtLjA5M2wxLjQ3LTEuMTE1Yy4yODQuMTQ2LjU5Ny4yNzQuOTM3LjM4NmwuMjkyIDEuOTE3YS4zMS4zMSAwIDAgMCAuMTIuMjI0LjM5LjM5IDAgMCAwIC4yNTUuMDg4aDIuMzEzYy4yMDEgMCAuMzI2LS4wOTcuMzc1LS4yOTIuMDktLjM0Ny4xOS0uOTkzLjMwMi0xLjkzN2E1LjkyIDUuOTIgMCAwIDAgLjk0OC0uMzk2bDEuNDM3IDEuMTI2YS41MS41MSAwIDAgMCAuMjcxLjA5M2MuMTUzIDAgLjQ4LS4yNDYuOTgtLjc0LjUtLjQ5Mi44NDMtLjg2OCAxLjAzLTEuMTI1YS4zNDcuMzQ3IDAgMCAwIC4wOTQtLjIzOS40MDIuNDAyIDAgMCAwLS4xMDUtLjI2Yy0uNS0uNjEyLS44NzEtMS4wOS0xLjExNC0xLjQzOGE2LjY4IDYuNjggMCAwIDAgLjQwNi0uOTQ4bDEuOTI3LS4yOTFhLjMxOC4zMTggMCAwIDAgLjIwOC0uMTM2LjQwMi40MDIgMCAwIDAgLjA4My0uMjRWOS44NzRhLjM5My4zOTMgMCAwIDAtLjA4My0uMjQ0bS02LjAzMSAzLjI2NWEyLjU3IDIuNTcgMCAwIDEtMS44ODYuNzgyIDIuNTcgMi41NyAwIDAgMS0xLjg4NS0uNzgyIDIuNTcgMi41NyAwIDAgMS0uNzgxLTEuODg1YzAtLjczNi4yNi0xLjM2NS43OC0xLjg4NmEyLjU3IDIuNTcgMCAwIDEgMS44ODYtLjc4MWMuNzM3IDAgMS4zNjUuMjYgMS44ODYuNzgxLjUyLjUyMS43ODEgMS4xNS43ODEgMS44ODZhMi41NyAyLjU3IDAgMCAxLS43ODEgMS44ODUiIGZpbGw9IiNmZmYiLz48L3N2Zz4=) no-repeat 0px 0px;
  background-size: contain;
  animation: rotating3d 2s linear infinite;
  opacity: 0.67;
}

/* a little more spacing on mobile. */
body.is-mobile #game-status li:first-of-type {
  margin-left: 1rem;
}

body.is-mobile #game-status li:last-of-type {
  margin-right: 0.6rem;
}

@media screen and (orientation: portrait) {
  /* remove for portrait mode. */
  body.is-mobile #game-status li:first-of-type {
    margin-left: 0.25rem;
  }
  body.is-mobile #game-status li:last-of-type {
    margin-right: 0.25rem;
  }
}

#game-status {
  position: absolute;
  top: 6px;
  left: 0px;
  width: 100%;
  height: 11px;
  overflow: hidden;
  z-index: 9;
  font-size: 65%;
  color: #999;
}

#game-status li {
  text-indent: 0.33em;
  margin-right: 1em;
}

#funds,
#funds-count {
  vertical-align: top;
}

#funds-count {
  position: relative;
  display: inline-block;
  margin-left: -0.15rem;
  margin-top: 0.25px;
  font-size: 0px;
  min-width: 10px;
  transform: scale(0.85);
  /* earlier "jetbrains mono" version */
  /*
  margin-left: -0.33rem;
  margin-top: 0.5px;
  font-size: 0px;
  min-width: 10px;
  transform: scale(0.9)
  */
}

#funds-count .digit {
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-size: 7px;
  line-height: 7px;
  width: 5px;
  height: 10px;
  text-align: left;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  text-indent: 0px;
  margin-left: -0.5px;
  opacity: 1;
  white-space: nowrap;
  /* collapse / expand, 1 <-> 10 <-> 100 */
  transition: width 0.15s ease-in-out;
  color: transparent;
  margin-top: -1px;
}

#funds-count .digit.collapsed {
  width: 0px;
  opacity: 0;
}

#funds-count .digit-wrapper {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  overflow: hidden;
  /* "rotating" number */
  transition: all 0.25s ease-in-out;
  transition-property: margin, background-position;
  background: transparent url(../image/number-strip-chicago.svg);
  background-size: 100% 1000%; /* height ~10 pixels? */
  background-position: 0px 0px;
  width: 100%;
  height: 100%;
}

#queue {
  position: absolute;
  vertical-align: top;
  /* collapse whitespace */
  font-size: 0px;
  white-space: nowrap;
  top: 1px;
  left: 4px;
}

#queue .progress {
  position: absolute;
  bottom: -1px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #3399ff;
}

#queue .queue-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 22px;
  margin-top: 15px;
  margin-right: 0px;
  filter: grayscale(1) blur(8px);
  opacity: 0;
  transition: all 0.25s ease-out;
  transition-property: width, margin, opacity, filter, transform, font-weight;
  /* small letter, e.g., "T" for "Tank" */
  width: 0.5rem;
  font-family: 'JetBrains Mono', 'SF Mono', 'Lucida Console', 'Terminal', Monaco, monospace;
  padding-right: 1px;
  font-size: 0.5rem;
  color: #ccc;
  background: none;
}

#queue .queue-item.has-counter {
  /* expand */
  width: 1rem;
  margin-right: -3px;
}

#queue .queue-item.has-counter.over-ten {
  width: 1rem;
  margin-right: 0px;
}

#queue .queue-item.queued {
  opacity: 0.66;
  filter: grayscale(1) blur(0px);
  margin-top: 0px;
}

#queue .queue-item.building {
  opacity: 1;
  font-weight: bold;
  filter: grayscale(0) blur(0px);
}

#queue .queue-item.complete {
  /* opacity: 0; */
  /* filter: grayscale(0) blur(8px); */
  filter: grayscale(0);
  color: #999;
}

#queue .queue-item.complete .counter {
  filter: grayscale(1);
}

#queue .queue-item.collapsing {
  opacity: 0;
  filter: grayscale(0) blur(8px);
  /* faster */
  transition-duration: 0.33s;
  transition-timing-function: ease-in;
}

#queue .queue-item .counter {
  position: absolute;
  top: 0px;
  right: 0px;
  transform: scale(1);
  text-shadow: 0px 1px 0px #000;
  display: inline-block;
  text-align: right;
  font-size: 0.4rem;
  margin-top: -3px;
  margin-right: 4px;
  padding: 1px 2px;
  vertical-align: middle;
  transition: all 0.175s ease-in-out;
  transition-property: opacity, filter;
  opacity: 0;
}

#queue .queue-item.over-ten .counter {
  margin-right: 0px;
}

#queue .queue-item.has-counter .counter {
  opacity: 1;
}

#radar-container,
#radar {
  height: 32px;
}

#radar-container {
  position: relative;
  overflow: hidden;
  background: rgb(14,54,14);
  /* image/checkerboard-black-mask-50percent.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlN/AN40qAEAAAAVSURBVHgBYwiFAoZVUEC8yKjIqAgAdHP/Abts7zEAAAAASUVORK5CYII=);
}

#radar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  overflow: hidden;
  transition: filter 0.75s ease-in-out;
  filter: unset;
}

#world-wrapper.incoming-smart-missile {
  border-color: #fff;
}

#player-status-bar {
  position: absolute;
  /* so type lines up */
  line-height: 24px;
  /* and room for green bars */
  height: 48px;
  top: 34px;
  left: 0px;
  width: 100%;
}

#aa ul,
#aa li {
  margin: 0px;
  padding: 0px;
}

#aa ul {
  list-style-type: none;
}

#top-bar li {
  display: inline-block;
}

#fuel-bar,
#fuel-line {
  background-color: #161616;
}

#fuel-bar {
  position: relative;
  width: 100%;
  height: 5px;
  overflow: hidden;
  /* background-image: url(../image/fuel-bar-background.png); */
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEUlEQVQIW2NYzcT4nwEGQBwAHUEDW61K8xIAAAAASUVORK5CYII=);
  margin-top: 3px;
  opacity: 0.75;
}

#fuel-line {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 5px;
  overflow: hidden;
}

#repair-complete {
  position: absolute;
  /* background: #000 url(../image/status-repair-complete.png) repeat-x 0px 0px; */
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAANCAYAAACgu+4kAAAAGUlEQVQoz2NgWMXwnyI8CMCoF0a9MBi8AADkY4TRAX5SfwAAAABJRU5ErkJggg==) repeat-x 0px 0px;
  display: none;
  top: 35px;
  left: 0px;
  width: 100%;
  height: 13px;
  z-index: 1;
}

ul.stats-bar {
  /* whitespace hack */
  font-size: 0px;
}

ul.stats-bar li {
  position: relative;
  overflow: hidden;
  font-size: 7px;
  text-align: left;
  color: #ccc;
}

ul.stats-bar li.inventory-item:not(:last-of-type),
ul.stats-bar li.stats-item:not(:last-of-type) {
  /* annoying, but need to override #aa rules */
  padding-right: 8px !important;
}

#stats-bar.hide-inventory li.inventory-item,
#stats-bar.hide-weapons-status .stats-item,
#stats-bar.hide-keyboard-labels .letter-block {
  /* user has chosen to hide via game prefs */
  display: none;
}

#stats-bar.hide-keyboard-labels li {
  /* balance things nicely, since the variable-width labels are gone. */
  text-align: center;
}

#stats-bar.hide-keyboard-labels li .weapon-count {
  /* tighten up spacing on numbers, items will be spaced out more here */
  margin-left: 0px;
}

#stats-bar.hide-keyboard-labels li.inventory-item:not(:last-of-type),
#stats-bar.hide-keyboard-labels li.stats-item:not(:last-of-type) {
  /* ugh, one more override. */
  padding-right: 12px !important;
}

body.is-mobile ul.stats-bar li {
  /* bigger! mobile controls are moved to sides, so we have way more room. */
  min-width: 10%;
}

body.is-mobile #player-status-bar .spacer {
  /* hide entirely on mobile? */
  display: none;
}

ul.stats-bar li.stats-item .weapon-count {
  display: inline-block;
  /* prevent a shift when as number counts change (for variable-width fonts) */
  min-width: 0.65rem;
  margin-left: 0.075rem;
}

ul.stats-bar li.stats-item .wrapper,
#mobile-controls li.inventory-item {
  filter: grayscale(0);
  transition: filter 0.33s ease-out;
  transition-property: filter, opacity;
}

#mobile-controls li.inventory-item {
  /* default (available) green flash is fast */
  transition-duration: 0.15s;
}

#mobile-controls li.inventory-item.weapon-unavailable {
  /* override default active state of 0.15s. */
  transition-duration: 0.33s;
}

ul.stats-bar li.stats-item.weapon-unavailable:not(.repairing) .wrapper,
#mobile-controls li.inventory-item.weapon-unavailable {
  filter: grayscale(1);
  opacity: 0.5;
}

ul.stats-bar li .double-wide {
  display: inline-block;
  min-width: 0.825rem;
  /* prevent 3 to 2 characters from causing UI shift. */
}

ul.stats-bar li.repairing em {
  animation: sorta-blink 0.5s ease-in-out alternate infinite;
}

ul.stats-bar em {
  position: relative;
  display: inline-block;
  text-indent: 2rem;
  /* hide inner text */
  overflow: hidden;
  vertical-align: middle;
}

ul.stats-bar .lives em {
  /* background: transparent url(../image/status-helicopter.png) no-repeat 0px 0px; */
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAGCAYAAAAc2cSCAAAAJUlEQVQYlWNYtWrVf2IwAzGAJMXIGoi1FS5OrLOxGkaxn8kNKAA4T5tlzMKmfAAAAABJRU5ErkJggg==) no-repeat 0px 0px;
  width: 15px;
  height: 7px;
  margin-left: 0.5em;
}

ul.stats-bar .infantry-count {
  background: transparent !important;
}

ul.stats-bar .infantry-count em,
#mobile-controls li.inventory-item a.parachute-infantry {
  /* background: transparent url(../image/parachute-infantry-static.png) no-repeat 0px 0px; */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAATCAYAAACgADyUAAAAd0lEQVR4Aa3R0QqAIAyFYRW67e18yfWQxrkZsvqdQYMDCn65ZQk1khQEVPSBsVszHJ+hkiO+NZsHIQD+cQ6VGVLijK/4alVZoogf0MwABXxa84NHr9tIhxWtlQRPaLVGGG72/RJCu/C+3C60+TfsvSoOw55hEq8bvTGFPiUQnUIAAAAASUVORK5CYII=);
}

ul.stats-bar .infantry-count em {
  /* background: transparent url(../image/parachute-infantry-static.png) no-repeat 0px 0px; */
  background-size: contain;
  width: 9px;
  height: 13px;
  margin-top: -3px;
  margin-right: 3px;
  transform-origin: left;
  background-repeat: no-repeat;
}

/* hackish: min-width fix for pixel shift from 1/0. Ugh. */
#infantry-count {
  display: inline-block;
  min-width: 0.25rem;
}

ul.stats-bar .missiles em {
  min-width: 16px; /* accommodate rubber chicken mode */
  width: 10px;
  height: 9px;
}

#world ul.stats-bar .missiles span.divider {
  /* X|C|B */
  display: inline-block;
  opacity: 0.25;
  text-align: center;
  min-width: 0.5rem;
}

ul.stats-bar .missiles em,
#mobile-controls li.inventory-item a.smart-missile {
  /* background: transparent url(../image/status-missile.png) no-repeat 0px 0px; */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAK0lEQVR4AWOgHhgF/wlgwgaAwSrG/6uZUDGxhv/HMIQwxnDdf/LwwINRAADw7UafvPxRawAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 75%;
  transform: rotate(-5deg);
}

ul.stats-bar .ammo em,
#mobile-controls li.inventory-item a.ammo {
  /* background: transparent url(../image/status-ammo.png) no-repeat 0px 0px; */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAM0lEQVQY02NgIAH8BwLiBPGp+Q8Fq1atIgkzkKoJxQnoEtgUEdSIVQE2jchOJSWEydYIADt2mmamiXmJAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 2px 1px;
  background-size: 80%;
}

ul.stats-bar .ammo em {
  width: 14px;
  height: 9px;
}

ul.stats-bar .bombs em,
#mobile-controls li.inventory-item a.bombs {
  /* background: transparent url(../image/status-bombs.png) no-repeat 0px 0px; */
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAALCAYAAAC6ezfSAAAAKklEQVQIW2P4DwQMQLBq1ar/DCAOiAHmwBiYMquZGP+DMEgf5RyYAIgGAHvgOaZq6s+EAAAAAElFTkSuQmCC) no-repeat 0px 0px;
  background-size: 75%;
  background-position: 50% 1px;
}

ul.stats-bar .bombs em {
  width: 3px;
  height: 11px;
  margin-left: 1px;
  text-indent: -32px;
}

#top-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 88px;
  overflow: hidden;
  background: #000;
}

#world {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#battlefield {
  position: absolute;
  top: 0px;
  left: 0px;
  /**
   * width was previously hard-coded at 8192px, but that's silly. 
   * no need for a real layer that large, just for positioning.
   * and a transform offset for terrain elements.
   */
  width: 0px;
  height: 100%;
}

#stars {
  /* GPU parallax, where possible */
  position: absolute;
  top: 64px;
  left: 0px;
  /* will be adjusted according to browser width + 10% of battlefield width. */
  width: 100%;
  height: 320px;
  /* background: transparent url(../image/star-background.png); */
  background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgMAAAEQBAMAAADfX2rMAAAAJ1BMVEUAAACqqgIFVQH///+rVaqqqqqqqlX/qgGrAgGqVQFVVQFVVVUOqgKHPpTkAAAAAXRSTlMAQObYZgAAAMpJREFUeAHt3csRglAQBMDxz8GDIRgSIRAKIRiCIRiid476hBW6Y6CoerWzO4F12AUAAGhgn40BDlkbADgGAAAAAAAAAEy6CwL6tAJ2bRnSDgAAAMAlCwGALjU8AgAAs3jKq1HPKcC3RkFPAFjaKwA/GmUCgGIhAAAAABCAAgDGQEm3APChc/ijOhqwpwEAAEDn9jwAFHYNAAAAAGC7mhmKmQAA7gEAph0GAAC4wwGA5AH44AH/AAAAgN67CgAAwK1yqGmQtxU5ZkPekqAIhV0w0YcAAAAASUVORK5CYII=);
  background-size: 22%;
}

.sprite {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  -moz-pointer-events: none;
  pointer-events: none;
  overflow: hidden;
}

#stars,
.sprite.balloon,
.sprite.chain,
.sprite.cloud1,
.sprite.cloud2,
.sprite.gunfire,
.sprite.smart-missile,
.sprite.van,
.sprite.missile-launcher,
/* .sprite.smoke, */
.smoke .transform-sprite,
.sprite.shrapnel,
.turret .sub-sprite,
#radar .radar-item--animated {
  /**
   * 09/2021: Chrome may benefit from explicit "layer" promotion, per dev tools.
   * Here, green paint flashing (and thus, performance) is notably improved
   * by carefully applying `will-change` to a number of common elements.
   * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
   */
  will-change: transform;
}

/*
.chain,
#fuel-line,
.sprite.helicopter,
.sprite.missile-launcher,
.sprite.tank,
.sprite.van,
.sprite.infantry,
.sprite.engineer,
.sprite.cloud1,
.sprite.cloud2,
.sprite.balloon,
.sprite.gunfire,
.sprite.shrapnel,
.turret .sub-sprite,
.radar-item.parachute-infantry {
*/
  /**
   * elements with constant transform-based motion / animation
   * #stars and #game-tips-list are large, may trigger this Firefox console warning:
   * > Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (771270 px).
   * > Occurrences of will-change over the budget will be ignored.
   * this list should probably be reviewed over time.
   */
  /* 08/2021: I suspect this makes Chrome performance worse. */
  /* will-change: transform; */
/* } */

.transform-sprite {
  /* GPU-accelerated, transform-based CSS animations on sprites. Look ma, no paint! */
  /* These elements move within a clipped parent element. */
  position: absolute;
  top: 0px;
  left: 0px;
}

/* hide GPU-accelerated, transform-based animated sprites when exploding. */
.sprite.exploding .transform-sprite {
  display: none;
}

.bunker,
.bunker.enemy {
  /* background-image: url(../image/bunker.png); */
  /* background-image: url(../image/bunker_mac.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAAAyCAMAAACZHl6xAAAAElBMVEUAwdQAAABUVFSHVACzh1Ta2toSV1+iAAAAAXRSTlMAQObYZgAAAXdJREFUeNrNltGWgyAMRBuB///l5XSjF6YgdY9Nd16Kgcn1TFPt46LM5Wsub1Xb2FrdjSlVOde+tq+r4NyNMcHYhTzewux9D5wX2lgXqf8Zo2MxZVSbLeUYlxkfniN0BOWjGOIsVSmVX+VML2mZxtqP4DNjSZwfxph/rWpRCUIgK30Bg24hoObRJF56rDEnNwboYVGYUiZ9lqmxKSgZwEjMBDRK4eJAtpMWhBnHJlb2lyDZD8dUTU9If3lW/0MM7/RJFoJ4FwQkCsP7XTDXQXgBEVkghqMzEJAJJrm0SzxGB1pi4GKBAaUjEICRgabfIMLZCLxCCI6tQMz4Z4a1I05CA0F3LzvGYjBARGrMiwFAFOMxVZO3FzbX6Qi8rFyMwOoPDBCV+AZZMNCRmERieiyz3yNObupAxmNS2qrSru0pis1lP2fPKh4/j3DFYrpuemqDNwiNTZy4voDxGnU1HF0ktD4q/GKOxfieihaHX0PzOxjZvRSK+QE8UDR00HKungAAAABJRU5ErkJggg==);
  width: 51px;
  height: 25px;
  z-index: 1; /* sit on top of chains. */
  background-size: contain;
}

#battlefield.snow .bunker:not(.exploding):not(.burning):not(.dead) {
  background-image: url(../image/bunker_mac_snow.png);
  background-size: contain;
}

.bunker .sub-sprite.arrow {
  position: absolute;
  top: 8px;
  left: 38px;
  width: 6px;
  height: 10px;
  /* background-image: url(../image/arrow-right.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAMElEQVR4AW3JwQkAIBTD0Lr/Ji5ZBQMe8nPMy63dq1GA8YOQaWQYpylgvjzJk8Z5AGtqUXNK2+JgAAAAAElFTkSuQmCC);
  transition: transform 0.5s ease-in-out;
}

.bunker.enemy .sub-sprite.arrow {
  transform: rotate3d(0, 0, 1, -180deg);
}

.bunker.exploding .sub-sprite.arrow,
.bunker.burning .sub-sprite.arrow {
  display: none;
}

.balloon,
.balloon.enemy {
  /* background-image: url(../image/balloon.png); */
  /* background-image: url(../image/balloon_mac.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAEgBAMAAADs+IiNAAAAElBMVEUAAAAAAADa2tqzh1SHVAD////Cdr3WAAAAAXRSTlMAQObYZgAABCFJREFUeF7V2vFpJDEMxWGrA70WpgW14Bau/1aO2TMP+2HrtDuXhTP5K3xYYVj9mJA0nmbgga/f94lhPvL9+aLrPnF/xXSj4boGg7LpRgxmf0RcsR4A/ros4mY4M7SGwew2BCr9VjdDyjCYQYzAwVBkvUfu3mKRuR6BCBSZN1zRj6RHDwTQiuwwtA/Y+xhaYnwgKqK/UOcDKTKEHpoet3oxqzFeJ+I2AZBZyvxm/JCTUPBDjsHszHwMWxYweNYFJDNhyzqTFeJQTM0PHcN2qMlE7Ps2tY5VuuIO1/xADNfEIIw3YmJ2m12OXoUhw4GhYWJGpNBxBRmODAsj0vMR6/3s3mWGSFxgMOQMPljc7VIYzFarMw7t2z5MQy1nWB5IX2LKBiLiXRbRNzOHepthW64ILMyOzGfWRmZeo0e5+CGfmB2Ya46kW/MCzsyUcZ3JCnGop+YLhfNkpPRN6qaF49sW6zYdKIPU7VAlwFk3HmwYoMxwJaHhQYkZlbiVochu1XtX9znrrxgoQ5H5zO6Z2i9mq850qDJ4jUGGRtd+3Sw+YS/HfjGCwixneh2bOvIWwixlep2+CUKZbZibMi0cF1CZKXPWrRaHemq+U7h81v4dNCkc4Ic6Y2VgKtPCAbg2DEWmtcEVHzOrMRTZxSVkGh4xidczxnhx6AMWHFpm9QfSP2XaJKoNsxprEPWQ0Y0IAjtmBSaFkwU8Fo7rXI9DnppvHqvNlLwd77rug/w+kIEgbVx2HUCW1neg/DosDARpCZ8yxusx03j15ywYrzL73s/GeP0jxqQ+Z5i7dWS2ME82hpnOKmIT83wBmbfkGJk/iEOamv/mDc7gzZbkn17fGlaGHbuIKL3GsGOBkPOPmdcYNoxKlvAZYyDiAQsyxusBk6EPWegD6Y8YHSejyDxjHIv2OQPAXz7ZuArz2gLW1/l/eYMzjjAkU8FaIAscfsH3v7Qrw62VQVnADUlDyIANg7IQNNbZawzCVLFwNQZhqrrGps6gbPShL8xqrJFJu6osHxrboagxPhCpQ/+Y0UnhaszXaA0nf2YFWon59kM+jAZOV0aZryxqCxjpOudxKKbmG3XToTp2Lg+Ws7ILzpsipHAzA28ShpmFvAnO0meGhgPDxAJGpNBnhiPDwgi0X2+zRPVeZ5oGZfMOWs6YX2HaryrToWlGkDN49kBYALR32eQERVTZki2oCFZpYnZkrh9yTor5j6iyMgfmZFFbwMjXuR6HPDU/Fzd44T9TJGOnvOF61W3Xt3ElGaablGEqg8uboBZzMLSGM8NgAROjhRsMKQNZZAdeY5AGHla6zhBBdWxXsxpjaJLYXGVmuM6scygqLH8gfHd5i8Xf/gmuyLxhVAAbwdy0wSxlLh/yQShYJV0ZZVyZiNICRhTWOY1DNTU/dH4DrlNtZVAEDQcAAAAASUVORK5CYII=);
  background-size: 38px 144px; /* 76 x 288 source image */
  /* initially, show neutral */
  background-position: 0px -60px;
  width: 38px;
  height: 16px;
  z-index: 2;
  margin-right: 0px;
  /* allow status bar to hang out a bit */
  overflow: visible;
}

#battlefield.snow .balloon:not(.exploding):not(.dead) {
  background-image: url(../image/balloon_mac_snow.png);
}

.balloon,
.balloon.facing-right {
  background-position: 0px -128px; /* original yellow version: 0px -120px */
}

.balloon.animating,
.balloon.facing-right.animating {
  animation: balloonright 0.8s steps(8);
}

.balloon.enemy,
.balloon.facing-left {
  background-position: 0px 0px;
  /* default when animation finishes */
}

.balloon.enemy.animating,
.balloon.facing-left.animating {
  animation: balloonleft 0.8s steps(8);
}

.balloon.exploding {
  /* background-image: url(../image/generic-explosion.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAtCAMAAAD4OpkYAAAADFBMVEUAAACrAgH/qgH////RG0riAAAAAXRSTlMAQObYZgAAAJxJREFUeNrtkkESgzAMAyPl/3+uFdfWFAY4wKXTroOBbKJwYDwConKo+q7WwGrUU/ARQnSUxMYGJKhNzHfWCXXa8nNyOaehEwYmDaikGJ3B9HjnUF37CywPOYjwYLkspFaWEkUn+Htysgcqo72XRdf8zwGVWuC2I+dpa7BZs9MO9pEHcNDOoP5tHgcAqRjXnyswcO6vV/Bugvz38QJkMwE8W+8b+gAAAABJRU5ErkJggg==);
  background-size: auto;
  background-position: 0px -30px;
  /* default when animation finishes */
  animation: genericexplosionsmall 0.45s steps(3);
}

.balloon.dead {
  display: none;
}

.sprite.dead {
  background-image: none;
}

.chain {
  /* slightly over 1px to "thicken up" when scaled */
  border-left: 1.02px dotted #999;
  border-right: 1.02px dotted #999;
  width: 0.75px;
  /*
   * height will be set / reset by JS.
   * element is moved via transform and is effectively fixed-height when active.
   * height is only zeroed when chain is at bottom - detached from balloon and/or bunker.
   */
  height: 0px;
  top: 0px;
}

.missile-launcher {
  /* background-image: url(../image/missile-launcher.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABICAMAAACKs/ZeAAAAHlBMVEUAAAAAAAC0tLQJtAACYABgYACzAAD/tACqqqpVVQGXdNyGAAAAAXRSTlMAQObYZgAAATtJREFUeNrt1uFuwyAQA+CYgy57/xeebxa7U1Ah+dthRUhQvkIrWe1xN4gcD4LG1GZmKwdPsPpVazU0urlprxfHYO7gbmla6czI6DAyKMmUAmjdT2PEcP3Yr5YNJyLUZn+nGYaLMWF4mL7CUshcVWOQWQNwPacAwVzJZcbXsuGSHydGyN2JQRFQYqnQ+Xp2YrqDyCxU3YlZT1XyNK8gHBlQkRMuYGfaoK/E2Xme0DiJQTuqmM++Odd4vAuZdjBacKNnxfKOfMkJG3bAo3G3e7f7X7Sbp+Z2+1TjJK6aOzFoqnFa099N0W5N+SyY7tMX8iUnDMqx273b/YntVgMe/XYLqKZv0/s2thvLdreh3cua2uWNBVYdxNB/ePY/893uD2h3XO1Bu1U/4Wft1tMetVvvInm33XIe4Vvt/gGcuBozuCjCbAAAAABJRU5ErkJggg==);
  width: 54px;
  height: 18px;
  z-index: 2;
}

.missile-launcher.enemy {
  /* background-image: url(../image/missile-launcher-enemy.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABICAMAAACKs/ZeAAAAHlBMVEUAAAAAAACqqqqqVQFVVVW0tLT///9VVQGrAgH/qgG2BlWyAAAAAXRSTlMAQObYZgAAATtJREFUeNrtldEOgjAMRek2Cvz/D9ubptxJZGNvGnezVCk7FAknLhZhlucRUdWkySJDVJJUSjkKsf5oUAKKmCH7riC72FFjuvVIcexwDEEv5xzkmeuwmIYvmsWz1aTqvl8wSRb8NmCaN9svi42rScQHchooJLANA/N1JnofMfsEBAzDsIckWh8wUjiNJWdyhK1FSBnXjT8Iw/SkBAXdSELY4YFgWhEkMEKkpA6OgAFBkftgR9SCJ+M9tePG+x87rII+m9LFuKIZt9DAqpskxtxyiNdp97T7i+1e13XcbqMUnDSCC3t1u71nq6WpX9gr7fartDEudj0NjDc57Z52/+F/dxjwbnf4dpsQlHaz+UBT2s1m6mlKu9nsvO/IkN3MtHva/ft204CndhNwTcfsVnd0yO4AMPO53dwRm14j2RxBKB7MLwAAAABJRU5ErkJggg==);
}

.tank,
.tank.enemy {
  /* sprite for CSS animation */
  /* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA2BAMAAABkV5dgAAAAGFBMVEUAAAAAAAAFVQEOqgJVVVWqqqr/qgFVVQFUkEzkAAAAAXRSTlMAQObYZgAAARhJREFUeF7tlEFqwzAQRZMbeApu1vky2Uvf7gHsuUACPkC9yAHsRa/fGVTRlopQSJb5WCB4fEa2H9r9yF48sqvFwMe2JcQa3h/WjW8JYGwq1TUwnRYEUn5Ny1WQOF2dRikx+t44tarThUwAAj3R6Ks0mSbvGjxKiU+8+maF0yUQEE8ZewBohAROBnOOTaYrEJygEIAWaXK3Hmbatuf57yO5K5cRJFFeA56JQ54rnYI9gc5gz4TOtlpoqzpSJ0AnUkcEW6pT/KKdhl4VnSptIe+Hc6byMgbreDdB8z5MQ/ka9SNn+Eg3nm7MNTtuuhHvcGO46YbccmP+dqMix8PdeLohVTX+dW+0dTeKOffcG5eaG+U31s/8BT8BHhzBEwBsJKEAAAAASUVORK5CYII=); */
  width: 58px;
  height: 19px;
  z-index: 2;
  background-image: none;
}

.tank .transform-sprite {
  width: 174px;
  /* 58px x 3 frames */
  height: 19px;
  top: 1px;
  /* account for 1px bottom black border */
  /* background-image: url(../image/tank-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVwAAAAmBAMAAAB69j4MAAAAGFBMVEUAmCEAAABVVQEOqgIFVQH/qgGqqqpVVVUOlAyrAAAAAXRSTlMAQObYZgAAATRJREFUeAHV1YGJdCEQA+C/hbTwWkgLacEWbGHa/y/sIB6y8PQAmXDg+XY+DCD470sw59vQfVmubqrnefiQkjjwdVm/rpUe/qRRDkngvixfN6VkKLWW0va+LFoXwCplasu0Sy7JcnUbhv3IQVtuMpyCC7JkXVtMNIctlf9jzQVZsa6tsWOqQVdpkLkhy9VFzotOrnJawjnADVm4rt0knZWIGQA3ZNm6eyFxQRau29Ff/zm/5Aad5eaRVesCXTGu9XLLqZHwthseSRzLblm1riJCno0cjISRMuRERNK/y74lUbhuD0ekfxszlmGjXMMxPZVzXWxJw7J1NeQ8o9zP39k7TiWAQ9kr1wXkCdvpfn/W+TuDPvRILmf215JA2brO1nu4yt0HePMRNixd923OpeE5rVv3PyoJAr/dh+bcAAAAAElFTkSuQmCC);
  background-size: contain;
  animation: animate-transform-sprite-tank 0.1s steps(3) infinite;
}

.tank.enemy .transform-sprite {
  /* background-image: url(../image/tank-enemy-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVwAAAAmBAMAAAB69j4MAAAAFVBMVEVhcAAAAABVVVWqqqpVVQH/////qgH67CcrAAAAAXRSTlMAQObYZgAAATFJREFUeF7V1dENwjAMhGFWuBW8gle4FbpC9h8B3DgYAw81PEQ+IaUgfeovFam378PrboVtkN1yARyP6aG25HfL/rkGVWw6zNo1sFf2zw3pjTKGSNgNsnsu3udSTRrNdpkdsmPuYVNP9E07nC4bcmCDbJn7OcfrwUimMIkNsmNu7Kt1agd8Y5dsnAtg/vvFtsRYV+qHyirfIbvmnnBO3uaNYafeIPvmHoraNsi+uQDIwifJCsyyAGmyW25ofYzynK7J2vMrBQgMViT/kC1zg5LT0i0d0ylPSiYL/CxZkkDrXHJakip+arTYaQXn8KtESKAk2TgXoC5pxk9JLctKuikrMt20JLvmho0HMq3ItJJ+zxJARSZKvSyBnrn1F7HLoLxKswRKL/6WuaEv729Yl/1y72yC9hX9fglvAAAAAElFTkSuQmCC);
  background-size: contain;
}

.tank.stopped .transform-sprite {
  /* show only one frame. */
  animation: none;
}

.van,
.van.enemy {
  /* background-image: url(../image/van.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABgBAMAAABF14lVAAAAFVBMVEVhcAAAAAAOqgIFVQFVVQGqqqr/qgHwctMVAAAAAXRSTlMAQObYZgAAAPVJREFUeF7t1tENwyAQA1BW8AqscCvcClmB/Ucosdq4RWrBUj9aCf/leAq6H4vSg08pzDoD8kxkRGTWnjhTGcBiVOeJzgQTdA7LjPri2uUSdBYLMrnWxOg8Nrh2uQQdTBZV8GR0msNhRIJU2sllNfP5Xio6zh0GZE2KuFjc2WNusMyu6LQEXVeMycDcrVxAWWUkx3FgiOalZ40xXWV3RRnmLsMbBp9pI0Vzh/1Pv+1+g8F+ut92v6mC5mzeb6qaCVssLnhMn7OqEfOLS+sVm32/33a/7X7b/caqmTzMFpkKavJ+m7B51fAWm+nnI4PPVFCKbnHYDY667Xazq7O1AAAAAElFTkSuQmCC);
  width: 38px;
  height: 16px;
  background-size: 38px 48px; /* retina sprite, 76 x 96 -> 36 x (16px * 3) - vertical sprite */
  z-index: 2;
}

.van.enemy {
  /* background-image: url(../image/van-enemy.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABgBAMAAABF14lVAAAAElBMVEVvcm0AAAD///9VVVWqqqr/qgHVJvJmAAAAAXRSTlMAQObYZgAAAOpJREFUeAHt1oGlhDEQBOC/hWlhW9gWpoX038qTjPcP4cWu5zhkOC57H1mHkWcFx8iUGRBKZkTyN7lCoM6kCGr8Ih8TqDMpeDxopS8NJmU2xot0Z529ClZDyKrDwgtLDRox+8yXLGfE7LJ1iAj9Mp1VBKPHYipdoHuGlcYJlBkpRfofEPO4zpy0kqPmDTYDaLTH8xZb6+LZ43mT4Q+GPtOqO/O8zm6/3X67/fa5fiN5Lq4ic6VUi6vA8L/iikojkeizR2vWiuv5rn67/Xb77b7f5gdldn6YudBaTMdz1XQYduZl2sxHx4VWZz/n9TwlJNQdrAAAAABJRU5ErkJggg==);
}

.infantry,
.engineer {
  width: 11px;
  height: 11px;
  overflow: hidden;
  z-index: 3;
  /* on top of helicopter, bunkers etc. */
}

.infantry .transform-sprite {
  position: absolute;
  width: 55px;
  height: 11px;
  /* background-image: url(../image/infantry-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAAAWBAMAAADTBLRkAAAAElBMVEUAAAAAAAAFVQEOqgKrAgFVVQGRaOXhAAAAAXRSTlMAQObYZgAAAHNJREFUeF7Vy7ENw0AMQ9Gs8FfgClzBK2j/VRLC5+Aqw4IqqxBf8z+/A8h2OOqOgwbf1oHIdTjqLEuiwWkHggZnnSwW/ZCzTr5oiWAnIeycdCBLd50ti5Vhw6QLqv4dVxefqlrOEE+6REAYn9gNLGfyBt0XHmBSe855D0sAAAAASUVORK5CYII=);
  background-size: 55px 11px;
  /* NOTE: sprite is backwards in sequence. reverse restores proper order. */
  animation: animate-transform-sprite-infantry 400ms steps(5) infinite reverse;
}

.infantry.enemy .transform-sprite {
  /* background-image: url(../image/infantry-enemy-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAAAWBAMAAADTBLRkAAAAElBMVEUAAAAAAACrAgGqqqpVVVVVVQF94vfuAAAAAXRSTlMAQObYZgAAAHFJREFUeAHVy0ENRCEMAFEsjIVvoRawgH8r20kvbPbU7ek3pLwQZuUAePc46J6HBt/V4QR0OOrCCRqcdQToBifdQm4anHUrvTd8UUtxEznrpIf6EMmf7n5MMuqEq8w5qqykLp2jJ52sVYZUuXAb0P93H1CLWeswBFA1AAAAAElFTkSuQmCC);
  /* proper L -> R order, in this case. */
  animation: animate-transform-sprite-infantry 400ms steps(5) infinite;
}

.infantry.stopped {
  /* note: 1x-scale image. */
  background-image: url(data:image/gif;base64,R0lGODlhCgALAPIFAAAAAAVVAVVVAQ6qAqsCAQAAAAAAAAAAACH5BAUIAAUALAAAAAAKAAsAAAMmWAoM+gUQ4mCc9bHQ2BoBGHAfB5gf2CyA6EUtNwxe3KiRIDS6kwAAOw==);
  background-repeat: no-repeat;
}

.infantry.stopped .transform-sprite {
  display: none;
  animation: none;
}

.infantry.enemy.stopped {
  /* note: 1x-scale image. */
  background-image: url(data:image/gif;base64,R0lGODlhCwALAPIFAAAAAFVVAVVVVaqqqqsCAQAAAAAAAAAAACH5BAUNAAUALAAAAAALAAsAAAMmWAoM+osQB+OEjQ32wPggVWjahpWCuHhCKmrp4C5yUy9B4AC5kwAAOw==);
  background-repeat: no-repeat;
}

.engineer {
  width: 10px;
  /* slightly smaller than infantry. */
}

.engineer .transform-sprite {
  /* background-image: url(../image/engineer-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAWBAMAAADEJiStAAAAGFBMVEVlYXQAAACrAgH///+qqqoFVQEOqgJVVQGZORm0AAAAAXRSTlMAQObYZgAAAH5JREFUeF6ty9EJAzEQA9FrYVq4FtxCWlALasHtR7DBkI/Ashd/2A/huXIA8nQ1SQDum6bGyVrFlubJCwHQ1TCxLImm5gkImpol4LikI//WJElkKYiQDAFY+tb59zQBFcHCJsSW9Z8ECmZvaqnrylAI8Tip9QAofGagEAbD5A0k2ZOPr2exRwAAAABJRU5ErkJggg==);
  background-size: 50px 11px;
  width: 50px;
  height: 11px;
  animation: animate-transform-sprite-engineer 400ms steps(5) infinite;
}

.engineer.stopped {
  background-image: none;
}

.engineer.stopped .transform-sprite {
  animation: none;
  display: block;
}

.engineer.enemy .transform-sprite {
  /* background-image: url(../image/engineer-enemy-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAWBAMAAADEJiStAAAAFVBMVEUAAAAAAACqqqpVVVX///+rAgFVVQFiAgftAAAAAXRSTlMAQObYZgAAAH9JREFUeF6dy0ENACEMRFEsjIVaqAUsrAX8S9gZ4NBwaqYh8ELzBwccPl25yfepastP5kRTVgJNICZ6MpPYQ1bN+ldlJjSwWZVXz9ZOBqQE0JSX0JH5aEhEFa6sRNLB3gb1JOWLgpno1XW4FnF4E1HgijQTaV+HHCU3rQRAWskPrR5q62ug4KMAAAAASUVORK5CYII=);
}

.parachute-infantry,
.parachute-infantry .transform-sprite {
  width: 14px;
  /* shorter until parachute is deployed. */
  height: 11px;
  /* ensure they display in front of bunkers. */
  z-index: 2;
}

.parachute-infantry .transform-sprite {
  /* background-image: url(../image/parachute-infantry.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAADIBAMAAAAJjJyeAAAAGFBMVEUAAAAAAAD///8OqgIFVQGrAgFVVQGqqqqdrCCEAAAAAXRSTlMAQObYZgAAANZJREFUeF7t1NENgzAMBFBWuBW6glfIClkhK3T9nsiprmwHtVL7UziB5MdHBOKSjYHCMZG47QFQkFAy8UpESnJJMCsSeptMkDMcIqd7nwqUyTsVKBvQqEipNTM5ktJVEySw4FwLKKi1tNLnHAO8V1Qyj/O/vdIQualHUiJNSoHeIyrzqpXnjOeVn1Bb4BcPrKtZeKakzZ9gC7Yj6gtaQZlAolv4iJKZnKmfgDUxRs19AlDTJ+eZA+aAva8JEkj89eZWFZzvb27V26iKY4BsCzL7s4pXtzwPguvJ4SThr2sAAAAASUVORK5CYII=);
  background-size: 14px 100px;
  background-position: 0px -60px;
}

.parachute-infantry.enemy .transform-sprite {
  /* background-image: url(../image/parachute-infantry-enemy.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAADIBAMAAAAJjJyeAAAAGFBMVEUAAAAAAAD///+qqqpVVVVVVQCqAACrAgE5Mgm0AAAAAXRSTlMAQObYZgAAANtJREFUeF7t1dENgzAMBNCucCt0Ba+QFbJCVmD9nmuEq14MaqX+FE4g+fERIXQJNwZrOAqJ+zMAlI41SrwSQiI9JZiKxPo2SpCME8LwGCGh22mUkvaxUcJQa2ZhIRVXQThRMNYClB4KsdIX7B28K0aER/nfXsUgvDmXBSEl7XQJs0eU8qpV5oznVVSJpN6YVTIorwMreRxsmdLiN2EF2x5pv5twMwFh2vERU2ZuZX5X1ETvBX0CMGdOyTMHzA7HqAknhL/e3GsVhEebO+ttIWHvIFtBxp9NeXUr8wDswsnh3MFmywAAAABJRU5ErkJggg==);
}

.parachute-infantry.parachute-open,
.parachute-infantry.parachute-open .transform-sprite {
  height: 19px;
}

.parachute-infantry.parachute-open .transform-sprite {
  background-position: 0px 0px;
  animation: parachute-swing 1s ease-in-out alternate infinite;
}

/* applied to sprites being actively targeted / tracked - excluding radar item sprites */
.smart-missile-tracking:not(.radar-item)::after,
.smart-missile-tracking-active:not(.radar-item)::after,
.smart-missile-tracking-removal:not(.radar-item)::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0px) scale3d(0.75, 0.75, 1);
  opacity: 1;
  transition: transform, opacity 0.33s ease-in-out;
  width: 13px;
  height: 13px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 12px;
  vertical-align: top;
  content: "⦿";
  color: #fff;
  background: #ff0000;
  overflow: hidden;
  border-radius: 100%;
  z-index: 4;
}

.smart-missile-tracking::after {
  animation: drop-in 0.33s ease-in-out;
}

.smart-missile-tracking-active::after {
  animation: blink 0.25s ease-in-out infinite;
}

.smart-missile-tracking-removal::after,
.smart-missile-tracking-removal:not(.radar-item)::after {
  animation: drop-in 0.33s reverse ease-in-out;
  /* final state once animation finishes */
  opacity: 0;
}

.smart-missile.smart-missile-tracking::after {
  animation: drop-in-small 0.25s ease-out;
  transform: translate3d(-50%, -50%, 0px) scale3d(0.5, 0.5, 1) rotate3d(0, 0, 1, 0deg);
}

.radar-item.smart-missile-tracking-active {
  animation: blink 0.25s infinite;
}

.radar-item.smart-missile-tracking-active:not(.helicopter) {
  /* make the missile target obvious on the radar. */
  /* helicopters are a special border-only case. */
  background-color: #ff0000 !important;
  border-color: #ff0000 !important;
}

.radar-item.helicopter:not(.enemy).smart-missile-tracking-active {
  /* player's helicopter */
  border-left-color: #ff0000 !important;
}

.radar-item.helicopter.enemy.smart-missile-tracking-active {
  /* enemy helicopter */
  border-right-color: #ff0000 !important;
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0px) scale3d(1.75, 1.75, 1) rotate3d(0, 0, 1, 90deg);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0px) scale3d(0.75, 0.75, 1) rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes drop-in-small {
  from {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0px) scale3d(1, 1, 1) rotate3d(0, 0, 1, 90deg);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0px) scale3d(0.15, 0.15, 1) rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes tracking-active {
  0% {
    transform: translate3d(-50%, -50%, 0px) scale3d(0.75, 0.75, 1);
  }
  50% {
    transform: translate3d(-50%, -50%, 0px) scale3d(0.33, 0.33, 1);
  }
  100% {
    transform: translate3d(-50%, -50%, 0px) scale3d(0.75, 0.75, 1);
  }
}

@keyframes parachute-swing {
  from {
    transform: rotate3d(0, 0, 1, -12.5deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 12.5deg);
  }
}

@keyframes scrollText {
  from {
    transform: translate3d(0%, 0px, 0px);
  }

  to {
    transform: translate3d(-100%, 0px, 0px);
  }
}

.missile-launcher.enemy.exploding,
.van.enemy.exploding,
.tank.enemy.exploding,
.infantry.enemy.exploding,
.engineer.enemy.exploding,
.tank .sub-sprite,
.left-arrow-sign {
  /* horizontal flip tricks */
  filter: FlipH;
  transform: scaleX(-1);
}

.infantry.enemy.exploding,
.engineer.enemy.exploding {
  /* stupid display fix */
  height: 22px !important;
}

.tank.enemy .sub-sprite {
  /* no flip in certain cases */
  filter: unset;
  transform: none;
}

.helicopter {
  top: 0px;
  width: 48px;
  height: 15px;
  /* cloaking opacity effect */
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}

.helicopter.respawning .transform-sprite {
  top: 15px;
}

.helicopter.respawning-active .transform-sprite {
  transition: top 1.5s ease-in-out;
  top: 0px;
}

.helicopter.rotated-left,
.helicopter.rotated-right {
  /* background-image: url(../image/helicopter-rotating.png) !important; */
  /* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAMAAAAT6xnzAAAAD1BMVEUAAAAAAAAOqgIFVQGqqqqFWKY8AAAAAXRSTlMAQObYZgAAAWxJREFUeNrV1stuwzAMRNHc4fz/Nxc0batyGlMu0EVnEWWhAwLjl14j7HmtB9thPyI4IkiybqwIM6URSBGyRzqPvRkxcvVXAmxEKQFUGZ4PDRQ5bRydAINMxsfOsmC47RFIA8c0WlPF2YaoIYfpLim2qvSTNCYisITiNII7kUbGaDdG0h2xNzOVLbWlwdx1qESPhtHKLTpQXafeDCWoEl9dpru+lv8a4DHQQ4Qz/O0UsCIEj4TikUmBcIgHQ0C1PBCIdVMCkSZYAFwItMKWBOMF2BnOjWLvOTqS0Xi/rD1bRSIjwWrHNUOkWe84BElXyHg/1O/vjwR6fiQQDWFKCkG363uUxLyDT6eEEuKN2GOAMvtfS0mAH7vNxZ6++vsKN92AYP76rwh8bs2Vm34PAU6Ri6UE3ZCasgFiWYSwRXcOxDLahTBWCmiOL/LUMki3YxQxtZugmzLEAP17VSdw+xjXFlDtT9+Iy1P7cf8XxGwI5RzMHTkAAAAASUVORK5CYII=) !important; */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAMAAAAT6xnzAAAAElBMVEXQuJigcI8AAAAOqgIFVQGqqqoXqHx8AAAAAXRSTlMAQObYZgAAAXRJREFUeNrV1tGOgzAMRNHojuf/f3lrEpEStTistA87L1DJp66cEtJmGGn7wXbYjwiOCGhPjBVhLikEehH5LZXHPoyYWf1KgIMoJYB6pufLBDo5bQbGV7aPxqNyWHDjdo5AGhgiaJVJJNmGNC/RhqmWFFvQuwxSmIjAEorTCO5EGhmjw4CbpDtiw9uM1VMODa6zDnVRo2m08xedqK9TbaYSJAlaFWbGh/ZfAzwGeohwhr/tAlaE4JFQPDIpEA7xoAmoX/ZFQ7Rtc4gkeRtsABYCpbAlwdwAK8NZKMacoyIZzf1l79nqJDIS7M649xB7Bmv8OEi6Q5j7A5nfHwn0/EhQr88lKQRV1XuUxCtZq5jpQrCSWWUrM24tJQE+z7aBfXnrjyvczAYEy9u/Fg2fpZJutydME8dNCrBcvCYH6V0OQGyLELaozoFYRudiGysFFMcX+TJlkG7bKOIy3QRVlykmqPdVncAS1Js3oF6fvhDLU/u1/gdTgA0qsEkc6gAAAABJRU5ErkJggg==) !important;
  width: 50px;
  height: 20px;
  animation: rotateleft 0.33s steps(3);
}

.helicopter.rotated-left .transform-sprite,
.helicopter.rotated-right .transform-sprite {
  /* hide while rotating */
  display: none;
}

.helicopter.rotated-left.enemy,
.helicopter.rotated-right.enemy {
  /* hack for enemy case */
  /* background-image: url(../image/helicopter-rotating-enemy.png) !important; */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAMAAAAT6xnzAAAAElBMVEXwlDYAAAAODg62trZhYWHz8/N+fygFAAAAAXRSTlMAQObYZgAAAYxJREFUeNrV1lluwzAMBFCJQ97/yh0uiWIVNeUC/SiBLA74MjEd2R6rpGqcl5iZmj0iYqrKlEcxUDW5VJcCEthHdV7MwkBW7X4nrCBwGVtZy8sPE0jytvqaCVGR3Vh1lp3Txrydo+fHbymhc7SGCD41ogwZldMdUjGDW3WTpDGqRICQvAya3aGBiQnSTJsA7ohZmDXsqHZoItdZa4X0aBmc/EUXyuPUm6UgLEonvaqqjfFfS0QeAzxEYl7ytykS5zSiRwL6yLiYmEbzIGSSTGPMuRiTj2MTIgiNyknGRtqcOl/OGU+xJDsj7MhGSM1ZO+KFdX45W1tJ9LXqD2csmQE5My5YIBCnJ2SdH/L597cEeH5L0B+fS7kg6bo+C05sJ3vXh07xPYVgBcCr3lpdLDaxLuvedbnq16vIzWxGrscSSXoxpr1bwbo7iiVGxhDErjhoQyIlgOixUPi0pLsP9G8lSUHCbRf3KQDVZcr+2W0Mey7TddClLNGBEhZdb2DtMs4Woux334ht1f7Y/wU1DQzzkO5mTgAAAABJRU5ErkJggg==) !important;
}

.helicopter.rotated-right {
  animation: rotateright 0.33s steps(3);
}

.helicopter.rotated-left.enemy {
  /* backwards */
  animation: rotateright 0.33s steps(3);
}

.helicopter.rotated-right.enemy {
  /* backwards */
  animation: rotateleft 0.33s steps(3);
}

.helicopter.cloaked {
  opacity: 0.33;
}

#radar .helicopter.cloaked {
  visibility: hidden;
}

.helicopter.enemy,
.helicopter.enemy.facing-left,
.helicopter.enemy.facing-right {
  width: 55px;
  height: 18px;
  overflow: hidden;
}

.helicopter.enemy .transform-sprite {
  /* background-image: url(../image/helicopter-enemy-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbgAAAAkBAMAAAAJNzIMAAAAD1BMVEUAAACqqqoAAABVVVX///8gusNdAAAAAXRSTlMAQObYZgAAAPpJREFUeF7t2cGNgCAQhWFamBb+FmyB/mtakNW3IjGS7GUY30Vi5gt5hzmRbqElvQiPmRN9/uO2aOVytmy8HG2porBLeCFE+jB/21cODIDpnbP5nRPrM3lb4HLy2fYAD0MuWJhy1VS0/WYs9xp4YOuXk7JT2R4YM8MBC1IOKKZwqSEEq8EBi1EOckHVZSkN9JsCHliAcoClxuTa2nKNtThhS5fTChxLILe1nKfzJ3hgC5cT01zPRqfNCVu+XM/GTt7AA4tTTkpM89JuWIByPLiDoDhhAcolAC0iu4KtG1ZcsPXLibaY6YMGfLB45fQA8jdO2FfuHg8sbLkf0X1rKV2d4aIAAAAASUVORK5CYII=);
  width: 220px;
  height: 18px;
  background-size: 220px 18px;
  animation: animate-transform-sprite-helicopter-enemy 520ms steps(4) infinite;
}

.helicopter.enemy.facing-left .transform-sprite {
  /* background-image: url(../image/helicopter-enemy-sprite-horizontal-facing-right.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAASCAQAAACasXjOAAABHElEQVRYw+3Z6w7CIAwF4L6kL8lLYuZuBbpS3IFfh0aNhvWDjJuZSLTkFzE7/xt3Rd/G2wAsOTmxlXS86hK9cWk4MsJd0bdgG04DfOOeIy2dcV0NOuMgfQv7aSDrf004GD0uQ5mooTTRlQeoTxX3suKS1FCalPc5hOnx0ZLJI6mhNH1xAMzWRn6DeyWVLVObpOkEvckpzvlrw/LF7e/G2KOG0toU/imqnMo2d4K/z5qkhtL0BumtuNYWWtcvR4o5WqihtA20E0V/6zWn7h41kHauzm3lEa4LUkNr5cZqTet+wueFweCooTQRbwu1qDHOOoFRg2gPxT0Rlf9F7GXiuobaSs1vRJGu+iYQiBpUE/dByISHE9RwXCioTdO+GVvwDqsWiS4AAAAASUVORK5CYII=);
}

.helicopter.dead {
  display: none;
}

.gunfire {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 2px;
  height: 1.5px;
  background-color: #ccc;
  background-color: rgb(156,159,8);
  z-index: 2;
  border-radius: 100%;
}

.gunfire.expired {
  background-color: #555;
}

.smart-missile {
  position: absolute;
  width: 16px;
  height: 15px;
  /* background-image: url(../image/smart-missile.png); */
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAK0lEQVR4AWOgHhgF/wlgwgaAwSrG/6uZUDGxhv/HMIQwxnDdf/LwwINRAADw7UafvPxRawAAAABJRU5ErkJggg==) no-repeat 0px 0px;
  /* a little transition on missile direction changes, as vX/vY can be pretty much immediate */
  transition: transform 0.2s ease-none;
  opacity: 1;
}

.smart-missile.expired {
  transition-property: transform, opacity;
  animation: blink 0.125s infinite;
}

.smart-missile.rubber-chicken {
  /* heh */
  /* background: transparent url(../image/rubber-chicken.gif) no-repeat 0px 0px; */
  background: transparent url(data:image/gif;base64,R0lGODlhIAAJAPcAANfXOP/qK//rJP/rM//sK//uKf/xMf/yKf/zJv/yM//zL//1K//zP//2MP/3Kf/2O//5Jv/4MP/4NP/4Nv/9Jf//H///Iv//Kf//Kv//OP//Of//Ov//O///Pf//Pv//P///QP//QRcFFf//SP//Sf//S///TP//Tv//T///Uf//Uv//VP//Vf//Xf//Xv//ZCAcCzEeGigiFywoCEAmJDQvCd4AAEsrHjk1Ez04GVg1LlBGDVVOE6lDOcNDAGBgFf4yMbZQNHRnFpBiT89dSNphQNdhS4qAJbh1IZWGF5CQQv+Iaf+KbP+LY/+PZf+QasfALv+wafu9A9DHNePMAObPJevUIOnWJPLaHO/ZNfDdIfDePfLjHvrkEP3lJvznO/3pLJqaLaioF6ioJicnCrGnFy8vDqioLqioMjY2Du/bNUQ+DD8/EcO0KMm2JmllC2pqGHNzD/PnSYZ4Jt7OL///Q5OIG//1LlhWJWRWGK2cIP/+LZKMLCglDLy8Yf/3HTErCf//RP//Tf//N7GlM//iL+PSKP//Rv//Rz45FT46FpuMHv//I6+pL//sLxYUCQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBwAAACwAAAAAIAAJAEAItwABCBxIEEAjPooKKlzIsCGghhAL1jmhAsUIDhYueMgQgAADKFMiQHCAgIsPERAFBRKEaAOjP44eRRQ4hMmSJk6eRBlRyIAHEBsUJHjAoQ6JCVquZElSgyASHjAg4uEwaM8dQ31maj1kgsWKEhgqaKAw4IjCGT+A2BBII4YOgTKU+HnhogULEyE8fNjQIYWXAA0kLDggAEsXKVRwCLxRxAiRHkHyJNqxSA+hLV/AFLBSRUjDHAACAgAh+QQFBwB3ACwAAAIAIAAHAAAIqwDvCBxIUCAbOHHerCnIsCFDMmFYrCiBoYIGCgPUCGE44wcQGw4FAjihAsUIDhYueMgQgACDLFCmRIDgAAEXHyLu0IihQ6AMJS9ctGBhIoSHDxs6pPASoEEDCQsOCMDSRQoVHEOYLGni5EmUEQY8gNigIMEDDnVITNByJQuDJDUIIuEBQ+CNIkaI9AgyZ0cbOnK2fAFTwEoVN0dC5ggp0EwaNGfGiCljhzHBgAA7) no-repeat 0px 0px;
  background-size: contain;
  background-position: 50% 50%;
}

#world.rubber-chicken-mode ul.stats-bar .missiles em {
  /* background: transparent url(../image/rubber-chicken-static.png) no-repeat 0px 0px; */
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAJCAIAAADcu7ldAAAABnRSTlMA1wDXADj1tz/zAAABj0lEQVR4AWK4ft0CP1q/Un9Sj46dlRiQTQYiYAGAtXFYCDUAg+h/bds327Zt28ZDtMt4lPbZtm3b7qRd1odZzczx9pQAPdBiX4E1xZFmaWmJ1/cJAAcwP1Yr0AUxNv4wq/T184v7AliCPXiAO9iBLPwDHfYkmFFLSZA4G5GXfh4c/GVfVaVfEK4DMANHcAUnsAY9EAUZMARtpuWYlWPFqKJQsbFCg01ltiTZkGFFcnnkb4mZ8O3JlyOAsaS4yt+f3hqKJ6XSot+yskxzc0MgHAIhADzAHkyOe41AFwzAZW9M8oixrsymOmtyLMswI77c/Xt79P1O3qORWkFH45OQFepESjxJMaSGkRlBVizZMWDNsBJLKseNxqDLihLLaqzrgR6YgQ2bmot9IlPt4gtdBzOd2iZuoo8SKztKFUP9hBVkuKFB5K0tdyvR4Xqi9/lYj5XOltsCTFLCJOwsRQPceGf3yK2do7BxqfGHe7Z/nlv/fanz/53m6ysKz86rlqTjS7u2FpLQOCAVGWpzEq8YADuJD/9bkEwkAAAAAElFTkSuQmCC);
  background-position: 50% 33%;
  background-size: 16px 4.5px;
  background-repeat: no-repeat;
  min-width: 16px;
}

.smart-missile.banana,
#world.banana-mode ul.stats-bar .missiles em {
  /* background: transparent url(../image/banana.png) 50% 0px no-repeat; */
  /* https://www.shutterstock.com/image-vector/set-cartoon-banana-drawings-single-peeled-1205236333 */
  background-image: url(data:image/png;base64,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);
  background-position: 50% 0px;
  background-size: contain;
  background-repeat: no-repeat;
}

#world.banana-mode ul.stats-bar .missiles em {
  /* background: transparent url(../image/banana.png) 50% 0px no-repeat; */
  margin-top: -2px; /* height align tweak */
}

.smart-missile.rubber-chicken {
  width: 24px;
  height: 12px;
}

.smart-missile.banana {
  width: 12px;
  height: 15px;
  background-position: 50% 50%;
}

.smart-missile.spark {
  border: none;
}

.helicopter-trailer,
.smart-missile-trailer {
  position: absolute;
  width: 1px;
  height: 1px;
  background-color: rgb(156,159,8);
  transition: opacity 0.5s ease-in-out;
}

.helicopter-trailer {
  background-color: #666;
}

.smoke {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 9px;
  height: 9px;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 9px 9px;
  z-index: 4;
}

.smoke .transform-sprite {
  width: 90px;
  height: 9px;
  /* background: transparent url(../image/smoke-sprite.png) no-repeat 0px 0px; */
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAJBAMAAABAnCZoAAAAD1BMVEUAAAAAAACioqJNTU3////HZUzpAAAAAXRSTlMAQObYZgAAAJtJREFUeAGFyrFNwDAYROF3XiB3pgecUdhfYhNwJjC/FYkiBVzx6RWHktyU5p/l7KN4GZTh7zVdxuIohE1iNmjzfK/DAlIcElJVNk7xfIMm6gvcXNRQenEXFOamifkGi4XmKjIBvsrMiW3woEjR4PVifbcLMpmsd1hg1mdMG4CuzS4yzuGcRVXYoJse+jD0jyK7UJJf/CQBdqAAP+1FI9VBsdXAAAAAAElFTkSuQmCC) no-repeat 0px 0px;
}

.base {
  width: 102px;
  height: 25px;
  overflow: hidden;
}

.base .transform-sprite {
  width: 510px;
  height: 25px;
  /* background-image: url(../image/base-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAf4AAAAZCAMAAADnh7yZAAAAG1BMVEUAAAAFVQEOqgJVVQEAAAD/qgGrAgGqqqr////9eV1TAAAAAXRSTlMAQObYZgAAAfFJREFUeNrt14FuwyAMBFBzEIf//+JZXpJrhpJtGu5KxVVVi93wlBZRIb8IJDBE3ic6vsEAeBvkOfeh8Yhqt28M32LxCiokUiGiMQoJVRIhClCLpQJ9mOU01AbDUxTV/soFEqigFq1AqIItIn2Yk4OvVlEVjVYMCb8XPEGBIbUCwQqBHszSMoSKXu9nqrmHIqZUlkZW4AlWCPxFIbNc3Uy52/y1as5rB4VMtGJMkEKE4xCFg3uly1ouwIVVVQ3popCJVQSWeIUJUIh0UNr/mCQMysXvsoiqmpGlj4Jiz2CFQqwiYyhk5MzwDYDiUsMsakYp69pLSU9QRKZyeb7UhkmwR2mZvC5meNbfKvKfikzlngHSHuyvnn2ULbCwboWpDKuQwXlC5M88Vo/C4e/FPJUBFTJAOjn5UjkW4Kbtn5vKYAqZZAgdUMlUvIgv2xAOxTKVkRQyvnIKkx7TNK5bUxlHIQO/YnlIYprGXWsqoyhkUgIXWbOamsZtaypjKYLUNVMZSpGUckbCt8kZP8pUBlNSBhIDD0s8WrjFuuPU99JUhlFgCI+MFl7mJ0cypzlZpcoKpjKCAiC5Q8TCachYXNmdo9QqW6by0grc8BaJYxbOSwZ5C/vtTnQqTeV1FUd8lW0ztooXOXiIlxqk2XOm8prKBwo1M21YfofeAAAAAElFTkSuQmCC);
  animation: animate-transform-sprite-base 1000ms steps(5) alternate infinite;
}

#battlefield.snow .base .transform-sprite {
  background-image: url(../image/base-sprite-horizontal-snow.png);
}

.base.enemy .transform-sprite {
  /* background-image: url(../image/base-enemy-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAf4AAAAZCAMAAADnh7yZAAAAGFBMVEXqAf9VVVWqqqpVVQEAAAD/qgGrAgH////ZlLQxAAAAAXRSTlMAQObYZgAAAeZJREFUeNrt191uqzAQRlFmj7Hf/40Pv/kgwqdVYaq48r5KcDIrxAQpw89jCE3M3yn/HQcYVLOMnN/ZFsIhIOdwRkDoz5ZCuJLFhCiCcqYQq0BJUwWi94X/3XJGHvm+ohUx4QqUnAoximIrUMlDzgne3JPy1MakX1KIVqCUBIQp6hnFc67fxXISIkbKyI8VRUlCWlfWQhVR9xXcc6lCFEi1kxmnuKkIiVKEhCpKTIiibpyLYoZyqS2S7l/LUupItMIsRCuiwhR1T1EOE5SHsbIziUHZcHJ4QIGUCFRUqKKaUiAlhzyOl0YC1uli5PCIYrGKhnblYoeXnBG/2BjDsDdG0ZIydOWUuxtrZgA+ZUs6voTtwYnpSpuKL+3zzOT4kfE1TrgoutKiAoe3w+tSqjp+UmyH6Ep7Cno/vN1C2EfaxsgBKYYtk7rSnGJTSdlbSdUXMGNmutKiMh5Kpi6W6gtMTFcaVCypi2tJ1RcwzAa60pjyaHSlKYVv5c6XGe5mXWlNsSnNcwDbA3f9zVRsmQI3N+tKM8o62I4dj0g+vc6dlyMdM3yG6EoLCsC1A3qIz62HxGjdj9D8GAO68tHKaaifIQSBb4EUqfocvi+uHkBXPldRgF9By0D1ovXk6Oy2z8YGdeUzlX/BTTI+8hNXigAAAABJRU5ErkJggg==);
}

#battlefield.snow .base.enemy .transform-sprite {
  background-image: url(../image/base-enemy-sprite-horizontal_snow.png);
}

.end-bunker {
  /* background-image: url(../image/end-bunker.png); */
  width: 41px;
  height: 19px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAAmBAMAAAClsdF/AAAAElBMVEUAQAgAAACqqqoFVQEOqgJVVVUcH7oQAAAAAXRSTlMAQObYZgAAAQVJREFUeAGd1IGNgzAUg2GyAV7hrfBW+Fe4/Ve5w7KCQOJKarUoenxyaEvZkqGn7Ns1ek7EbKwj3QVVHOm/AFxb9a/UtRHagekav/ps1UepVNrlZGhP6WVK9VmmVBVwl/jtLMoReaFZZPNcqF5JZfOAkHPRgfCtvF2CD1l/KTsbVhHW0ctyqJpQQ5Im2Ptr3/RSalM5+UwUPzpSzK+tioIlqfasTKn8cAdtDH2UtnGXvhnGTXqq856DYt6K5L9RPqNtTUJn+7s0pJtViWXolEAgzbKUTKCKU3pdPnaeOOOV3OcTkaQjxYzc6IxPMo2pnTBy0vuj9pR7BiQZzGjmaXCWJvvT4BcztvltvcMAngAAAABJRU5ErkJggg==);
  background-size: contain;
}

#battlefield.snow .end-bunker {
  /* snow version */
  background-image: url(../image/end-bunker_snow.png);
  margin-bottom: -0.5px;
}

.end-bunker.enemy {
  /* background-image: url(../image/end-bunker-enemy.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAAmBAMAAAClsdF/AAAAD1BMVEU2NjYAAACqqqpVVVWSkpIPhYBJAAAAAXRSTlMAQObYZgAAAQJJREFUeAGd1IetAzEMg2F7g+MKWoEr/Puv9IpA2OnlmGYoH6TrI5l6lmNcR8+zTDrWf+yCKv5j2wDXXfVS6rojuAPLmX57d9VbqbRsR6QDI+llmuq9TFNVwK2kP50v5Yy8ollkeDZUH0lleEDIXjgQzsqbTeivrE9KZ2AVYY7+Wk6VCW1IYhpnvo6hD6WGqpN9orD+U6zDVkXBV1LuWjWlcuL+qWnY39KYt7Ivhnkju6p9zUGxLkVyb1T/o/GdBGf8rWyIzbeSlqFLAoGYr6XUBKrYstddsfPEmR/JYz0RSRwpVtQdO/OdTMe0XTBy0dtH7ZZHCiQprGjlWWE3TY5nhV91M/kpnmFxRQAAAABJRU5ErkJggg==);
}

#battlefield.snow .end-bunker.enemy {
  background-image: url(../image/end-bunker-enemy_snow.png);
}

.super-bunker {
  /* background-image: url(../image/super-bunker.png); */
  /* background-image: url(../image/super-bunker-mac.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAAA4BAMAAADOYk2aAAAAFVBMVEUAAACHVAAAAACzhwCzh1SWlpZUVFQSSjN3AAAAAXRSTlMAQObYZgAAAXBJREFUeF611tGRwyAMRVHGHbwOMmpBLbwW1ML2X8J6gwYJL/4x8v2M4zMoJDitd8iDPi0nj0rAIWJUVfzFv1SZwjcFtAd+y+uQp4TEIsxIzYbqCnECcINjGfKckLEIMqYcb+UUYgwvLUN2COlECEpgTaQtQTYKCR0BYdAV4rZSggHkbR1EwH415ELCfnoGmJG3gpcMFhGHbPZpsl0TMxg2KiLyR7X8QfXXpkvkuFRDwBsEE+FxpB4dqSK2q/hqtSZ7W9rqiOmzIq9H0GI/vGIijNAgHmaCLxGAC8kAREgQEMGMvEaEEYed0Oe4EHyDuC2I2+oI+0Yzng+CfKAEcV4wsxgFHoqIQ8TmEyUMwSBiH/LTk/DnyB4hTWhXgmeXQSwRzARZQ/ggYXBBwOl5EPZBjj3Cz04uCM47Yoh/zkkgpLUiYh7Ercsg6LcxGzyrI7hsGgTAIMaOvk8A/wn4jY4VE7K8fyYiEgihE8cO8WntFyRzVk/TGxMdAAAAAElFTkSuQmCC);
  width: 66px;
  height: 28px;
  background-size: contain;
}

#battlefield.snow .super-bunker {
  /* snow version */
  background-image: url(data:image/png;base64,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);
  background-size: contain;
}

.barb-wire {
  /* background-image: url(../image/barb-wire.png); */
  width: 18px;
  height: 11px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAWCAYAAACosj4+AAAAjklEQVR4AdXUCQqFMAyE4bn/AXrdkS2AYONPrF0GwtK853zgop/j2yyOO7O03JGZOH8AecgzQIojrbWnKeGMpg7iqKyoUgj+l4K8A4gX5sUUlu3ljUDSG4CCOewskEV/iM4BFICliSBRkOogfK58Px9E9sKgSPWWgb1OANVf5/oHc0dQJ+gC4yfPaFAEYy71t0ySwdyXYwAAAABJRU5ErkJggg==);
  background-size: contain;
}

.cactus {
  /* background-image: url(../image/cactus.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQCAYAAAArij59AAAASUlEQVR42qWPMQoAIAwDq+Dq7/ykn6xkqhhCBgOZeknbuDV3z3hEwFgtLSBrMYRFiho4pRsY8A0IFlDmexjy6/xHZQb0UO39Bw4+dFDBHMZp3QAAAABJRU5ErkJggg==);
  width: 8px;
  height: 16px;
}

.cactus2 {
  /* background-image: url(../image/cactus2.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAZCAYAAADXPsWXAAAAoUlEQVR4AaWTUQrDMAxDl/1sB0wuuRwyox8q+nhFMRGYUhc/JCd9BS2rujQ8RgZFwGe2q+oQAeRCEKh9J6ockSDgBCKuEEcDAPl5vxinByfeZOsckXeAcaz3nW+HsHXutcdl053QE8D23fqV49Q7O8kQLgHuOB2OEwchCjnJxXckuNj8AXEQIUFwWwG0K9gROMk6drKOnQjAEFbVSRbvJEP+nXp3mMre38sAAAAASUVORK5CYII=);
  width: 17px;
  height: 25px;
}

.landing-pad {
  width: 81px;
  height: 7px;
  overflow: hidden;
  /* cover all ground units */
  z-index: 5;
}

.landing-pad .transform-sprite {
  /* background-image: url(../image/landing-pad-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUQAAAAHCAYAAABwUTSwAAAAtUlEQVR4Ae3WgQYCQRRG4ZX0dvuS04Nu242D2/Y3AMb5ObACn5nRdu54VxuP6vOtcqw8MDqHk4bTw+l5v1U4ZV/mwlnLvnPTcAPPCz39GGJ2havh1GNIwVfDZpjua/at3L/7CtxPZNcvazIjDfuwuyj6asjS2Yu+GrJ4X3kxxxhU36yVnTTUUMMFDPd9P1r8iMiuvDTUUMMlDPmHWGVca3CkoYYaLmPIvjB5TS3jaaihhksYvgDWFPBi+PT8mgAAAABJRU5ErkJggg==);
  width: 324px;
  height: 7px;
  animation: animate-transform-sprite-landing-pad 1000ms steps(4) infinite;
}

.sand-dune {
  /* background-image: url(../image/sand-dune.png); */
  background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAICAYAAABUHMdEAAAAiklEQVR4Ac2UUQoDIRBD1TvaS/aOSaWKxBIEh9IaeKiLH3k77KYvhgGuCZXc0OCZyTelrytXiFEh0eBSstak+7H2/eCvYhRmeUjZHTCiKoaPuzkiFRBoFCPgeZgJcS+2m1YkKgBTJsyRmEz0+MdB4TcC5rmRmkLwE3PIm4hK+GKhuyoEc3bfJIbkC4kCR2EUx824AAAAAElFTkSuQmCC);
  width: 51px;
  height: 8px;
}

.sand-dunes {
  /* background-image: url(../image/sand-dunes.png); */
  background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAALCAYAAAAz46C7AAAA4klEQVR4AeXV4QrCMAwE4LbPaPqSvmOqyE7qLVvD/ZDBCkd0Ck0/Ui0XXiOVuy0GGMPHz3rWKe1GaAwzgZiVb/WtIoACmr9zZayRyRrGATLXML5VQkOuMF37JnjxoSI0rCxMnz6z/esJq53t/f8rwSDUcHhovjYM9GCwBd5yb3269B9RHJQPt2gaCb/XQ7A8Tvys8Z4xmA5TMTEfEIbRG69LMKAxVBf2FqZrpKbm4AoJ0cH4+VFdxZN7MlplNLyZ/1LNdBTEdTDCOgPTJ4sq9dt40kryKulQ3YrS/ClYHksPoF5HN4gGUuXOkQAAAABJRU5ErkJggg==);
  width: 73px;
  height: 11px;
}

.checkmark-grass {
  /* background-image: url(../image/checkmark-grass.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKCAYAAABv7tTEAAAAUElEQVR42pXPUQoAIQiE4VbYI3pJO6Q9/jDLLBkEKX0OrptTVf37YcfTAqSO5iHQAGoDLVBIAvAL3rQTqXVHIA0SQxJrmAigAQS4HVdm9vQet1hn5UKvbV8AAAAASUVORK5CYII=);
  width: 13px;
  height: 10px;
}

.flower {
  /* background-image: url(../image/flower.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAAOElEQVQYV2NgQAOrVjH9RxfDULCaifE/EQpX4VeAUxFrKON/EMamCF2OgQ/qDpgiPlzugkmgKwAAUjMg7e8i7PwAAAAASUVORK5CYII=);
  width: 9px;
  height: 7px;
}

.flowers {
  /* background-image: url(../image/flowers.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKCAYAAADVTVykAAAAa0lEQVR42qWPwQ3AMAgD2w7Q/WfIkrS/a2WJk4g/iTHGcHxR6yxY1OMdYRIg2nRBD7jXVb+eFzB0DaeevAnY0/1IH8CV6Fl3f9NjAfzR4eb3Iz1gX/clfQC1vF79vqQHJNDNLwtMkIFdj3kesSjNPyjXA1UAAAAASUVORK5CYII=);
  width: 32px;
  height: 10px;
}

.tree {
  /* background-image: url(../image/tree.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA2BAMAAAB6nqfTAAAAElBMVEUAAMgAAAAFVQFVVQGqVQEOqgJc9w+XAAAAAXRSTlMAQObYZgAAAM5JREFUeF6109EJBCEMBuGkA6eFtLAtpIX038pxYQOiRu7l5m35+GURlDflbcgaFQsoRISFma07ZmLdWGXzjIWYRgVl1JCdasgMEQZmjJ5ypjPlAdRvciam8yJSKkZPiDAdNZFdSYmSlbhQfS7GDxS2dSc7E9yp6U5fOziIdjQkZ7AhIqI9CcCTW8MoSdIj1aNIy5LnN6Eb5ahmzuN+eH9adHi14N8gkCXtSXg840JjJ9xxQLb0pSF7SRT8nfxO/YGjJxKa+913FPXX67/QB9oNgTqA34bRAAAAAElFTkSuQmCC);
  background-size: contain;
  width: 26px;
  height: 27px;
}

#battlefield.snow .tree {
  background-image: url(../image/tree_snow.png);
  background-size: contain;
}

.palm-tree {
  /* background-image: url(../image/palm-tree.png); */
  width: 18px;
  height: 22px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAsBAMAAAD/fQfGAAAAElBMVEUAAAAAAAAFVQGqVQEOqgJVVQEksNGeAAAAAXRSTlMAQObYZgAAAKdJREFUeF6d0OEJxSAMhVGzQb4VXCErdIXuv8ozXlv6Iv3TW2jgmAtiGzEAn8ObwoyGxDiOfkCOtcaTWEs9M4fW+CeuJea31qhESwHQb/gLAdNjACruBKYyXdYMp9CIJCbCRnofI+WEBuspEOF5ePeAQKeV7CaypwYX+SBPMg06pp4iohJwPkj9SolBIQi8UO19JyMqIaq9jb5eK96oXsv3a1F7tVnpB0hEMc8NWqFUAAAAAElFTkSuQmCC);
  background-size: contain;
}

.rock {
  /* background-image: url(../image/rock.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAANCAQAAAAOR/aSAAAATklEQVR4AXXR0QmAAAgE0JZ0yZY0CHpkZ3fYTw+FOkZ69BNEFoico5gjSLB2BNrg38u6B6okWg/CchO0sPKEXgyu2DSZQTp+yfo5BVXkAnmjDK23drGwAAAAAElFTkSuQmCC);
  width: 18px;
  height: 13px;
}

.rock2 {
  /* background-image: url(../image/rock2.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALCAQAAAAOu8/qAAAAQUlEQVR4AW3OQQrAIBADwHzST/rJForTzUHDXjIETJLnkhzw9ncbpkqBfykLpjZoDakskM1tpXBFg+KHUAoOTsALvfW97SZUC7cAAAAASUVORK5CYII=);
  width: 13px;
  height: 11px;
}

.gravestone {
  /* background-image: url(../image/gravestone.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAAXklEQVR42sWOQQrAMAgE20fmk37SsIchYhCKCBWGbIQdfD6MF7TGBWNmelpSZIgyLSmyip5Qbyj3hZSnL4xF8r8XOiAsMn+oRWu9QoWYgR3c0iwip30lIh9YDnCEk2xXYisI3YlXMQAAAABJRU5ErkJggg==);
  width: 20px;
  height: 13px;
}

.grave-cross {
  /* background-image: url(../image/grave-cross.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAJCAYAAADkZNYtAAAALklEQVQY02NgwAJWrVr1n4FYQLRikEIYpq7JtFMcGsr4H4ZJUoShCVkROkZXAwCKlTQzKK8YLQAAAABJRU5ErkJggg==);
  width: 11px;
  height: 9px;
}

.terrain-item {
  /* all these things: rocks, graves, trees, barb wire etc. */
  z-index: 5;
}

.left-arrow-sign,
.right-arrow-sign {
  width: 28px;
  height: 25px;
  z-index: 2; /* ground units go in front of these */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAyCAYAAAAJHRh4AAAAkUlEQVR4Ae3YAQbFMBCE4b19b5DD5TJbRGGs0iC64x9+gMQH70lDlh7VS7Nq3BijdRUyzYCSwOKKzgkU4LlyrgB2B64ANgZKALsDNYC7wJz/DCBARyC/ogD5owfIa4IHL8BeAXT+8Bu2QFm+VRx0pv37y3kAP00ueKaH7e/0/QABAgQIECBAgAABAgQIEKAB8AZSFQlSyJWxoAAAAABJRU5ErkJggg==);
  background-size: contain;
}

#battlefield.snow .left-arrow-sign,
#battlefield.snow .right-arrow-sign {
  background-image: url(../image/right-arrow-sign-mac_snow.png);
}

.right-arrow-sign {
  /* horizontal flip tricks */
  filter: FlipH;
  transform: scaleX(-1);
}

.helicopter,
.helicopter.facing-left,
.helicopter.facing-right {
  width: 48px;
  height: 15px;
  overflow: hidden;
  z-index: 4; /* show on top of landing pad */
}

.helicopter .transform-sprite {
  width: 192px;
  height: 15px;
  /* background-image: url(../image/helicopter-sprite-horizontal.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAeBAMAAADX8tQLAAAAElBMVEVvcm0AAAALogUFTQKioqJNTU2sj7QCAAAAAXRSTlMAQObYZgAAARVJREFUeF7dl9EJAzEMQ7OCVvAKXkErdP9Vit2LuEBbTCGQ+vUn0Cdxoh/pDWCMAWAE4BdCCaDTCmTd+LUfLPL/A4jgSmMFxB0N0PHO4g/xYz/Ee1/8/wAQ9PWRpk2jmbm7hTgB6KHX/O39DQaA7o4F0hlekN/RoETV393fY4ACboms5PLDAXVV1P3d/X0GvPV08DT1q5F1f3d/jwHAy7wFFDZFlDjL7zGAkYDwNaybg2ZaUPd39zcYsPzZyjimhklGkrTCxqj5m/tbDNALx2QmQDpDMg8U0BtNxd/X32WAWBPp4RGf8GdCVweq/ub+dgOUsOTylDjQbzdACZjEmUVwmt9zAD5iOMzvOoAkjSYEcJjfYcATY786BTZOd+0AAAAASUVORK5CYII=);
  background-size: 192px 15px;
  animation: animate-transform-sprite-helicopter 360ms steps(4) infinite;
}

.helicopter.facing-left .transform-sprite {
  /* background-image: url(../image/helicopter-sprite-horizontal-facing-left.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAPCAMAAACFvDBUAAAAFVBMVEVvcm1vcm0AAAALogUFTQKioqJNTU0oMm20AAAAAXRSTlMAQObYZgAAAOJJREFUeNrVldGKhDAQBIea9P7/J5+boeVC9m6zgrKWoINWN+QhMbQIEYgoeGNuAP0eI1iZONrPhHhJgIjif78U1cfYGfyYOd7vTLbWMlMpZ8b+Jlj2QZsvrutPAT2Rz6SaY2Z7+bnPNf1AzVSidZxNDw6s+5f1Zx+h7YGXSUmf+VzZj/UsaQzUA77Tz5T3jCVPYI744vz+YF9cYhwAfp9yxLLvY+70fgdqmc+573f7039m1Qf6/fz+gPIr8ehXT9ofIou+ObXfgH0ns3Mfn3HD18hd/CD5kzv4ATmj1Abf7/8A7KIYvrBb3MYAAAAASUVORK5CYII=);
}

.turret,
.turret .sub-sprite {
  /* background: transparent url(../image/turret.png) 0px 0px no-repeat; */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAABACAYAAAAXiCerAAAAc0lEQVR4Ae2X4QbGMAxFv6/vuJfMS2YrZXMJcc30xzlcI/TMdCH5OQBArlT1viSO/3ze0VqFHqijLxAqQUMIu5ESXxQRV8YbouH/M4j6EhXNuFdvd7t+1maiGZHkx70GAAAAYJDPca8a/XqL3xLocNVZ/E5FZMmB/QqckgAAAABJRU5ErkJggg==);
  width: 18px;
  height: 15px;
}

.turret.enemy,
.turret.enemy .sub-sprite {
  /* background-image: url(../image/turret-enemy.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAABACAQAAAC9ge8gAAAAYUlEQVR4Ae2VQQqAMAwE96v9WB7gJ0dEWlJSzEEPKpm9BDqnBLp6OwUizFFpCOEmT3+Yo1l0QhT/BGcSacNyyWgflBgSlwvIr489Jqkr3LtdTlEUBUcM9x2uStFGc2pRijsBNp8rNWub3gAAAABJRU5ErkJggg==);
}

.turret .sub-sprite {
  background-position: 50% -16px;
  height: 31px !important;
  top: -5px;
}

.turret:not(.destroyed):not(.firing):not(.exploding) .sub-sprite {
  animation: scan 2s linear alternate infinite;
}

.turret.destroyed {
  background: transparent;
}

.turret.destroyed .sub-sprite {
  /* bottom-align dead sprite */
  top: auto;
  bottom: 0px;
  height: 3px !important;
  background-position: 50% 100%;
}

.bomb {
  position: absolute;
  bottom: initial;
  top: 0px;
  left: 0px;
  width: 13px;
  height: 12px;
  z-index: 2;
}

.bomb .sub-sprite {
  /* background-image: url(../image/bomb.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAkCAMAAABllkCwAAAAD1BMVEX7BwAAAACrAgGqqqr///+eN7uQAAAAAXRSTlMAQObYZgAAAFJJREFUeNqlzkEKwCAQQ1FjvP+ZG6JMaKG24N89hoG0XXClQRIr3aQ+k0bJt9QO8ntAs8aYUQhRO0L0ovqibJXxa+ltHPiYGpHvtzUkaueCFU5dNPkBHwXKHSEAAAAASUVORK5CYII=);
  background-position: 0px 0px;
}

.bomb.spark .sub-sprite,
.bomb.explosion-large {
  animation: none;
  /* background-image: url(../image/explosion-spark.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAHklEQVR4AWMAgtVMjHASB///KhgHyALygQjCQFcPAKZrC8ti0oamAAAAAElFTkSuQmCC);
  background-position: 0px 0px;
  width: 5px;
  height: 5px;
}

.smart-missile.spark,
.gunfire.spark {
  background-color: transparent;
  /* background-image: url(../image/explosion-spark.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAHklEQVR4AWMAgtVMjHASB///KhgHyALygQjCQFcPAKZrC8ti0oamAAAAAElFTkSuQmCC);
  background-position: 0px 0px;
  width: 5px;
  height: 5px;
  z-index: 5;
}

.bomb.explosion-large {
  width: 51px;
  height: 22px;
  margin-left: -26px;
  background: none;
}

.bomb.explosion-large .sub-sprite {
  animation: largeexplosion 0.5s steps(5);
  /* background-image: url(../image/explosion-large.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAABuBAMAAAB4nzYwAAAAD1BMVEUAAACrAgH/qgH///9VVQEPaMayAAAAAXRSTlMAQObYZgAAAjZJREFUeAHt00HOGzcMxfE/pR7gkbqAyFxglBO0979UK3gEDPzBQYCmmyK/xQj2mydyYfNL/WbGJ+Kz9oNkGh+Uf7i1WerPPz5sWOF8EPXXh8wsGr/9JwwDufjK54VVLr6w+hYRVSF9iTKrKqrKebMbVSO/Z+qt5LuSo0Ylb0Z88/LvFfV11qoVe1o479zrH76W+Mp94/9E3UCYYQDiECCBqtJd9gw1PJBVRGUuup8M87VcqqxtxLxOSTa+VZrViHCvXBVpvPjKTK/M1xlZQ3c2onbj9dPIfaaf1v6mMrO2HdXZwqJGlEeke5TvXNxWZeR+VHnlvsJPbb+acY/az3Ruu5Ird2HvXpnjbsl8xBhRW46oHBzC3L3Cq0JrpdR5sh3nwgbGvyRe3CVAPEUX5pXlDcC4CS+BVxtaYsLFYYOOFdDa7N1Ef/7FaZMLmFAOR0zgMqADveU4o6y6cUtBKz97Wonb7A5knllecGpXYr2l0Bl1nBvFJmIYR2/q6Ezop2WG0YRaOp0tBFwgCUpcnBaBAGTJvhCu9BPNs6FgCVryYg2wedGB5mDN7wS7DAY7Y8GrKYCOAK/GhO1yMG4XmFelBHAfD+5i6/xaE3gyGhMaW3tsB1Pw1DnEbRpw2dv180fDDVpjM27G9nbL5KyHg3mC8WTn5RQXPGKdT80k9nlWbwLMwEgXPKnBNqdP0GOGOAw7+1l/RNfkeJTEcbo60XNfRwiOBogJx+SnCMCmMRudNx0Exs/5GzzTOTP5KQ0MAAAAAElFTkSuQmCC);
  /* default state */
  background-position: 0px -110px;
}

#world-wrapper.jammed #radar {
  visibility: hidden;
}

#world.tutorial-mode #world-wrapper.jammed #radar {
  /* don't fully hide in tutorial mode. */
  opacity: 0.5;
  visibility: visible;
}

#radar .sprite {
  position: absolute;
  background: none;
  top: 0px;
  left: 0px;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  border-color: #ccc;
  margin-left: -1.5px;
  /* avoid border color bleed */
  background-clip: padding-box;
  /* align things like balloon + chain with bunkers. */
}

/* .friendly? */
#radar .sprite {
  background-color: rgb(23,160,7);
  content-visibility: auto;
  contain-intrinsic-size: 2px 2px;
}

#radar .sprite.enemy {
  background-color: #ccc;
}

#radar .sprite.bunker,
#radar .sprite.super-bunker {
  /* friendly */
  width: 3px;
  height: 1px;
  margin-left: -1.5px;
  background-color: rgb(23,160,7);
  border: 1px solid rgba(23,160,7,0.75);
  border-bottom-color: rgb(23,160,7);
  /* round corners */
  border-radius: 1px 1px 0px 0px;
}

#radar .sprite.super-bunker {
  height: 1.25px;
  width: 5px;
  margin-left: -2.5px;
  height: 1px;
}

#radar .sprite.balloon {
  width: 1px;
  height: 1px;
  margin-left: -0.5px;
  background-color: #fff;
  border: 1px solid #fff;
  /* ever-so-slightly elliptical. */
  border-radius: 0px 3px 0px 3px;
}

#radar .sprite.balloon,
#radar .sprite.bunker.enemy,
#radar .sprite.super-bunker.enemy {
  /* yellow-ish tinge */
  background-color: rgb(156,159,9);
  border-color: rgb(156,159,9);
}

#radar .sprite.smart-missile {
  position: absolute;
  top: auto;
  left: 0px;
  bottom: auto;
  width: 1px;
  height: 1px;
  margin-left: -0.5px;
  border-radius: 100%;
  border: 1px solid transparent;
}

#radar .sprite.smart-missile.enemy {
  background-color: red;
}

#radar .sprite.helicopter {
  width: 0px;
  height: 0px;
  font-size: 0px;
  margin-left: -1.5px;
  background-color: transparent;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid rgb(23,160,7);
  animation: blink 0.5s infinite;
}

#radar .sprite.expired {
  /* gunfire, etc. */
  opacity: 0.4;
}

#radar .sprite.bomb {
  width: 2px;
  height: 2px;
  margin-left: -1px;
}

#radar .sprite.shrapnel,
#radar .sprite.shrapnel.enemy,
#radar .sprite.bomb.enemy,
#radar .sprite.gunfire.enemy {
  background-color: red;
}

#radar .sprite.shrapnel,
#radar .sprite.gunfire {
  width: 1px;
  height: 1px;
  margin-left: -0.5px;
  /* hackish repositioning fix */
  content-visibility: auto;
  contain-intrinsic-size: 1px 1px;
}

#radar .sprite.van,
#radar .sprite.missile-launcher {
  width: 2px;
  height: 2px;
}

#radar .sprite.infantry,
#radar .sprite.parachute-infantry,
#radar .sprite.engineer {
  width: 0.55px;
  margin-left: -0.275px;
  height: 2px;
}

#radar .sprite.engineer {
  width: 0.75px;
  margin-left: -0.375px;
}

#radar .sprite.parachute-infantry {
  margin-top: 1px;
  /* hackish repositioning fix */
}

#radar .sprite.smart-missile {
  width: 2px;
  height: 2px;
  margin-left: -1px;
}

#radar .sprite.base,
#radar .sprite.end-bunker {
  width: 3px;
  height: 2px;
  margin-left: -1.5px;
}

#radar .sprite.dying {
  animation: blink 0.25s infinite;
}

#radar .sprite.dead {
  display: none;
  /* just in case */
  /* will-change: initial; */
  transform: initial;
}

.tank.exploding,
.van.exploding,
.missile-launcher.exploding,
.tank.enemy.exploding,
.bunker.exploding,
.helicopter.exploding,
.turret.exploding {
  width: 79px;
  height: 32px;
  /* background-image: url(../image/explosion-shrapnel-2.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAAGABAMAAAAe0yJgAAAAGFBMVEUAAACrAgH/qgGqqqoAAAD///9VVVWqqgL+5cU2AAAAAXRSTlMAQObYZgAAA2NJREFUeF7t2DFPJEcQxfF/TQuc1ivP5tsN5H3XQD4Hdnxg4S+AdLEzvr41iUEedrclEyBf/5IN9ulJI61qaosPNwzmHDD962s5K2Or7DEJDBp1QsJAm5y+sVdolVq7s1CW2yZnKPZSzlk5aO3ZtAa1DZpUSqhIuaQ/flTbheaFLYsSyrmspen352YPOVSyszErl9gpR4l0e9emUoqy2DJFfnwqJUoB+VTyWqltpXYlyuqqUCVKKVl5nyHxhqns4nGNXT2GA5w9lpLDN40RykXl6nL2CaNVe4oo2QE8tddGsxxSXOVlmZA7k3KO7IDJeMtUFA9zOFh2m/I/jSFeGZNUirQsRuQ7JklRArAyV16ZYimme/fJ05dm2SXFHqD9+jbo01T2hgAaCXPEilSpHGC88cLHGgaTc5zMWGGcIpM5eAKqGYgDdK/FUaLVBm7Ou8ykJcuUdEczJN7nWrRyTOd1kmbnfdKjIoqIC7AHLRxgUXJImC5qtSIJ+OWvTQyLUOyUcK9mUTLv83kuJR7E6gu2ZOddJn3TTlH2MslMZeE9zqycL+fZuVbZVYt7ZwtbzJZF0rKkpqfspvx+Y2Byn+dw0M2DA2ILA7t3X2uBKOIQdwnAHVzZjR4SfZyfwFBpdFnfuV2uI/e9WC2cLmbiFMMtNZxGxTjCcYB1f8SPNmIhEqRnjlLkuHRo59WwY48xl6Lv7dea2oRzkIWWJe+vI6dGcJDB5fKkvYUnjtNS5oKZsMk5zPWblFPDkfxQ0h3cmR3g7HDOlgVzXIvxPR2bKuGs5vBNZtMIrPPRjGPcXz8/tWF9+f93yYzaFfwqp8vXTJ/eQq5VARonpEYF6p+VkyqQnitdzm87g7ftZNBdBinxYRwSMJ3OOYlWceekpDtOcwwTZpxiTlx0zR5MF/X0NMMS7pUjwnnV02gGYz6e9MLnVPloRusrlTtdLHcGI9/RJX1pfY/fSKxSo8/5TaXLzY/OYOsdpCnxPzB+k6c00idboobUH2y1L6g7+pjoExcct10mGke8WSZa93z88LHXbj7NfByGFz6pcXdMtfPueHbbeXdMzx91d+yRGs5HS/x8hnHR2xqe6XPW+AQr189wv6Xrftup8tkMw8uYj8O4OY6bY79hLPXDMAzDMC71wzAMw/hz9DdaR2UkT+rrdQAAAABJRU5ErkJggg==);
  background-size: auto;
  background-position: 0px -384px;
  /* default state */
  background-repeat: no-repeat;
  animation: explosionshrapnel2 1s steps(12);
  animation-fill-mode: forwards; /* Stay on last frame when finished */
}

.tank.exploding {
  /* align with where tank was */
  margin-top: -12px;
}

.helicopter.exploding,
.missile-launcher.exploding,
.turret.exploding,
.van.exploding {
  /* align with where unit was */
  margin-top: -16px;
}

.bunker.exploding {
  /* bunker is normally 52px */
  margin-left: -14px;
  margin-top: -7px;
}

.turret.exploding {
  /* adjust for larger explosion sprite */
  margin-left: -30.5px;
}

.van.exploding {
  /* 32px -> 79px */
  margin-left: -28px;
}

.sprite .energy-status {
  position: absolute;
  bottom: 0.1px; /* hackish, rounding fix */
  left: 0px;
  width: 100%;
  height: 1px;
  font-size: 0px;
  border: 0.25px solid #000;
  border-radius: 1px;
  background-color: #33cc33;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-out;
  transition-property: width, height, left, background-color, opacity;
}

.sprite.balloon .energy-status {
  /* pull down slightly, and make more visible */
  bottom: -1px;
  height: 1.5px;
}

.sprite.parachute-infantry .energy-status,
.sprite.infantry .energy-status {
  height: 0.5px;
}

.sprite.super-bunker .energy-status {
  /* special case: improve legibility */
  bottom: auto;
  top: 3.25px;
  height: 1.5px;
}

.sprite.enemy .energy-status,
.helicopter.facing-left .energy-status {
  /* right-align on certain units, i.e., flipped helicopter w/custom width */
  left: auto;
  right: 0px;
}

.sprite .sub-sprite {
  /* explosion / burning overlays */
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.bunker.burning {
  background-image: none;
}

.bunker.exploding .sub-sprite,
.bunker.burning .sub-sprite {
  /* background-image: url(../image/bunker-burning.gif); */
  background-image: url(data:image/gif;base64,R0lGODlhNAAJAKEDAAAAAKpVAaqqAv///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJGQADACwAAAAANAAJAAACVZyPqcvtKZ6cLSAR7dI7cRcxWfCFlPOdquk9aYRZmJCmRv2RB/uSAkAKAH62Q44T1DECsx0w+RwqfAgmZkAC/njYoLQrzHqtI8wwJARIhbNz1/xkBwoAIfkECRkAAwAsAAAAADQACQAAAlOcj6nL7SmePGFGJmJVe/qnBZ0xJmVzDunHpedqRFmVCaVrwiYkCoAYAPhgIxEF+CLVDkPkL3hB9KRL0c8XVT2tF+Bze82oAhlhF4DWmLGhMthWAAAh+QQJGQADACwAAAAANAAJAAACU5yPqcvtKd4KUFoRKdKKv1g5WeBZn4mmpRlhFCaUYFKSTA2RAkAGwI4zeGzC3uoQgB2ARp5vhkxulCTeDkppgnpOpy+JGeiuW4A588OkxWAzN1YAADs=);
  background-position: 50% 100%;
  background-repeat: no-repeat;
}

.bunker.dead {
  display: block;
  width: 52px;
  height: 4px;
  margin-top: 21px; /* to get 25px height, align with bottom */
  /* background-image: url(../image/bunker-dead.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAEAgMAAAC8bPTVAAAADFBMVEUAAAAAAACqVQGqqgKrKM85AAAAAXRSTlMAQObYZgAAAD1JREFUCB1j4v35jwEImBqAmIFJ9+F8EKNOq4GB8wPTnwtnHJg2cBZ9/MAxv4Gp+I+tzdozUg1PeJZv0AMA4/wUXgTuWxIAAAAASUVORK5CYII=);
}

.tank.exploding {
  margin-left: -11px;
  /* offset for 57-pixel-wide normal tank */
}

#bottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  margin-bottom: -2.5em;
  font-size: 0.65em;
  /* fit at 1024px width */
  color: #666;
}

#bottom .rotate-hint {
  display: none;
}

#bottom.rotate-hint .rotate-hint {
  display: inline;
}

#bottom.rotate-hint .rotate-hint .text {
  color: #fff;
  font-weight: bold;
}

.sprite.missile-launcher.building {
  margin-top: 18px;
}

.sprite.tank.building {
  margin-top: 18px;
}

.sprite.van.building {
  margin-top: 16px;
}

.sprite.infantry.building,
.sprite.engineer.building {
  margin-top: 11px;
}

.sprite.ordering {
  transition: margin 2s;
  /* TODO: remove margin-bottom once all bottom-aligned things are out */
  margin-bottom: 0px !important;
  margin-top: 0px !important;
  /* override .building rules */
}

.sprite.recycling {
  /* units drop "below", in reverse of ordering */
  /* (when applied as .building.recycling) */
  transition: margin 2s;
}

#radar .sprite.helicopter.enemy {
  background-color: transparent;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid transparent;
  border-right: 3px solid #ccc;
}

#radar .sprite.turret {
  width: 1px;
  height: 2px;
  background-color: rgb(23,160,7);
}

#radar .sprite.turret.enemy {
  background-color: #ccc;
}

#radar .sprite.turret.destroyed {
  opacity: 0.5;
}

#game-fps {
  position: absolute;
  right: 0.33rem;
  top: 0px;
  font-size: 75%;
  text-align: right;
  color: #666;
}

.shrapnel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 12px;
  height: 12px;
}

.shrapnel .transform-sprite {
  /* note: active width is 48px, but background image will be repositioned so only one type shows. */
  width: 12px;
  height: 12px;
  /* background-image: url(../image/shrapnel.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMBAMAAADWlCNiAAAAElBMVEVVVQGqqqqrAgH/qgH///8OqgK+qm9ZAAAAAXRSTlMAQObYZgAAAHBJREFUGBkFwQFxw0AQBDD5QuCdEljvF0AmRpBOAZQ/mkoAAADwLBggAB4JtGAEYL/vxuyCHRCcXym93+ABx1icz2K+P2VmF6snmsHs32LehWtB4fi5i76wXC9okDbMBNYGC1xl8AcJHCBhAgAAAIB/0M0J+ZocFDIAAAAASUVORK5CYII=);
  background-position: 0px 0px;
  animation: spinning3d 0.5s linear infinite;
}

.shrapnel.reverse .transform-sprite {
  /* opposite spin direction */
  animation-direction: reverse;
}

.shrapnel.stopped .transform-sprite {
  animation: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.cloud1,
.cloud2 {
  left: 0px;
  top: 0px;
  /* clouds hide helicopters. */
  z-index: 5;
}

.cloud1 {
  /* background: url(../image/cloud-1.png) no-repeat 0px 0px; */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAAAdAgAAAAA34V4dAAAAAnRSTlMAAHaTzTgAAAI6SURBVHgBbc9BaxNBGMbxZ8okogeZkaSSFrRC288xKbOtvW1kU0iD1UJ2anLIsQdPFUoPnhLIhswWoR66uG/o6qWHpCB+CkE86KVRV+gH0ItsWqSCv/f45z08uEYADP9TRlYYFACO6zjXZUBrhez+bXMnPbCa7QFKSqWuPVXaFGONIlcKsd0PGKaYZFC5vtm4kYwCtlple89eXn1pT0kJlAYF8t2iHem8ebqPjJCHnaojO2BuIJn5Ga13UOpcrbn1escYv+wCYIfj4YFyVhrTDc7yTDl8a0M3GzB7kdBRzroCALYmSSXfJkpP1cjas3E6HC2bBrI2F42P6jak93u3v7SqfpvGyeZZFwxArk5JrJ2QzoiOgyIN6ceQOuxy1WxTAbWQKPK0SYnoF3kF7eKOgu5xl/P1NNaKlShrcbcWALA9gdpiWRS2hqNi7Rtlop1+AQBTkLu1QLPV9nBk0vG0JQ0NyAW59DgmUxHFcDP9PS2RtcUykPNbH59T9MnqtfFBO4mbfRPaYw8CuPf5zZPYtmhidiNn0LfBcpxQFV8B5OnFljW7JrFJjPxDM7NvwsnKecCBolOYO63aOqXUiJjcm39XivwPFU8BWutZijfMyab/yCqVb5/wlu1xBQASNw8ntvo9d//C55inpuoa4zoAGICaPe+2cLc5AE8ocrk/EFCYWvQDt76fMy7QatqC7C64AlNSeVpJHw4vOONXnoO8w3GFMQC6AjA8qAgsAQp/MXABCIBzNbN9Gf4AGXLZuRdaZoUAAAAASUVORK5CYII=);
  width: 102px;
  height: 29px;
}

.cloud2 {
  /* background: url(../image/cloud-2.png) no-repeat 0px 0px; */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH0AAAAiAgAAAAAdg5F6AAAAAnRSTlMAAHaTzTgAAAKuSURBVHgBdcwxaxxHGIfx/ytmDinVu2ZPQoY0JknhPv2s2TUpZ8W8B3MmDgTNJnsCdW4CCU7hIl0Udhf2au2BRvjArQL5Fko+gV1cIB8gaXKLhLEQ/tUPD94jwOCjDDhVBqawN+k9qsyOPGkAFrcN40M7Tu91RxaASlSRs+ExvMNXJyc9a5ArJ2cmLTTu4oPLq/5YgdsC9hfrl14U40P6x7goATrtXfFt8/jtRW8BZtziDFL1Dtg5/f3CPmqKb56HY+SagBGBxCQiGunhJq4HI0gO562CNbihZr6BsoZw0Mu8slSqYhpMUjcGI1NcbcJLKAIKSQuRXRjolB7GASM7ncdVJYxbVhFUCfjT128x0osYRRwoNUrGjjhNXJlf//e6B0bzVpiYISXoO8mRiohumGTuAFCe6ULBAsWszfDwWEiqOizrpmTNAO07MJOIKWS1dDx9cyZ93S2HTrCHHEDdGqj9zUbkh1j15un3757NlnHofWM+e4St6GCyRYxxE1fD8Cv8VdxahFcGP88J+CQY4CBe/rOOdR1nDtPHcWvVW8qhDfAbA8kijrquq1vOwjjwQYkIRoaVvqi3SX0hvgsGfhEXq859+vfCW2Bkvqw6f7Fahk7CX07tr6qu98lkvY7nY2Ggr/tyv/ODhHD9go2f93UXTFm1vlUASFEIJq1Xc3/GRykwCV/03j3gaaYdRocv03SS/emDy0kZaopZ/Xmb755D2QRbPKlhDl+1Vd+CDRpwIZLzzr8voIDRg3WxW2Wh9bao3I5R4IwZT+M54wZdhb42s8rl+8PqyZMzBUWkdSu4QXRydTmwThQ9++Prdm82t2cAU2ZxSxWz0BByO/spnqeTuHn3VQNAKbw3dRk0JbUPZYbnQ8u4K8kII5dmgFLO4h7GFgFsAUMaH2Nw3/+C2uVrQe2QSQAAAABJRU5ErkJggg==);
  width: 125px;
  height: 34px;
}

#stats-endgame {
  position: absolute;
  display: none;
  left: 50%;
  width: 22em;
  margin-left: -11em;
  margin-top: 13em;
}

#stats-endgame table {
  border: 1px solid #009900;
  width: 100%;
  color: #eee;
}

#stats-endgame table th,
#stats-endgame table td {
  background-color: rgba(0,153,0,0.25);
}

#stats-endgame table thead th {
  padding: 0.25em;
}

#stats-endgame table thead th:first-of-type {
  background-color: transparent;
  border-color: transparent;
}

#stats-endgame table td {
  border-top: 1px solid #009900;
}

#stats-endgame table th,
#stats-endgame table td {
  border-left: 1px solid #009900;
  padding: 0.25em 0.33em;
  min-width: 2em;
}

#stats-endgame table th:first-of-type,
#stats-endgame table td:first-of-type {
  border-left-color: transparent;
}

#game-tips {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#game-tips .tips-container {
  position: absolute;
  top: 23.5%;
  left: 50%;
  margin: -0.5em auto 0px -225px;
  padding: 0px;
  width: 450px;
  color: #707070;
  text-shadow: 0px 1px 0px #000;
  overflow: hidden;
  display: none;
}

#world.tutorial-mode #game-tips .tips-container {
  color: #999;
}

#world.tutorial-mode #game-tips .tips-container b {
  color: #fff;
}

body.game-over #game-tips .tips-container {
  top: 30%;
}

#game-paused {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  font-size: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  text-align: center;
  color: #ccc;
  text-shadow: 0px 1px 0px #000;
  z-index: 10;
  display: none;
}

#game-paused p {
  padding: 0.25rem 0.5rem;
  margin-top: -0.25rem 0px 0px 0px;
}

body.game-paused #game-tips .tips-container {
  /* hide, vs. display: none which will reset CSS animations. */
  visibility: hidden;
}

body.game-paused #game-tips .tips-container .tip,
body.game-paused #game-tips .tips-container .animation-node {
  /* pause tip scrolling effect */
  animation-play-state: paused;
}

body.game-paused #game-paused {
  display: block;
}

body.game-paused.game-menu-open #game-paused,
body.game-paused.prefs-modal-open #game-paused {
  /* hide even when paused, in certain cases. */
  display: none;
}

#game-tips .tips-container .tips-fader {
  /* overlay tips */
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /**
   * gradient generated via this useful tool...
   * cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%280\%2C0\%2C0\%2C1\%29\%205\%25\%2C\%20rgba\%280\%2C0\%2C0\%2C0\%29\%2020\%25\%2C\%20rgba\%280\%2C0\%2C0\%2C0\%29\%2050\%25\%2C\%20rgba\%280\%2C0\%2C0\%2C0\%29\%2080\%25\%2C\%20rgba\%280\%2C0\%2C0\%2C1\%29\%2095\%25\%29\%3B'
   */
  background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,1) 100%);
}

#game-tips .tips-container #game-tips-list {
  position: relative;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

#game-tips.active .tips-container {
  display: block;
}

#game-tips .tips-container .tip,
#game-tips .tips-container .animation-node {
  font-size: 0.5rem;
  line-height: 0.5rem;
  animation: scrollText 12s linear;
  padding: 1px;
  /* "ticker-tape" style? */
  /* animation-timing-function: steps(100); */
}

#game-tips .tips-container .animation-node {
  /* used to trigger `onanimationend()` events for tip display. */
  position: absolute;
  top: -1px;
  left: 0px;
  height: 0px;
  visibility: hidden;
}

#game-tips .tips-container .tip:not(.hide-on-mobile),
#game-tips .tips-container .animation-node:not(.hide-on-mobile) {
  display: inline-block;
  width: 32rem;
}

#world.tutorial-mode #game-tips .tips-container {
  width: 30rem;
  margin-left: -15rem;
}

body.is-mobile #world.tutorial-mode #game-tips .tips-container {
  /* just a bit smaller. */
  font-size: 1em;
}

body.is-mobile #game-tips #game-announcements {
  /* a bit smaller. */
  width: 75%;
}

#world.tutorial-mode #game-tips .tips-container h3 {
  font-size: 1em;
  color: #fff;
}

#world.tutorial-mode #game-tips .tips-container .tips-fader {
  /* don't overlay when in tutorial mode. */
  display: none;
}

#game-tips #game-announcements {
  /* overlay-type thingy */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  font-size: 0.45rem;
  line-height: 0.45rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  color: #999;
}

#world.tutorial-mode #game-tips #game-announcements {
  /* this is nicer to read vs. huge blocks of chicago. */
  font-family: 'JetBrains Mono', 'SF Mono', 'Lucida Console', 'Terminal', Monaco, monospace;
}

#game-tips #game-announcements p {
  white-space: normal;
  overflow: visible;
}

#game-tips #game-announcements img {
  vertical-align: middle;
}

#game-tips #game-announcements span:not(.hide-on-mobile) {
  display: block;
  width: 100%;
}

#game-tips.has-announcement #game-tips-list {
  opacity: 0;
}

#game-tips.has-announcement #game-announcements {
  opacity: 1;
}

#world.tutorial-mode #game-tips.has-announcement #game-announcements {
  position: relative;
  margin-top: -1rem;
}

@keyframes bomb {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px -33px;
  }
}

@keyframes bomb-rotate {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes largeexplosion {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px -110px;
  }
}

@keyframes explosionshrapnel2 {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px -384px;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes sorta-blink {
  50% {
    opacity: 0.65;
    transform: scale3d(1.1, 1.1, 1.1);
  }
}

@keyframes rotateleft {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px -60px;
  }
}

@keyframes rotateright {
  from {
    background-position: 0px -40px;
  }
  to {
    background-position: 0px 20px;
  }
}

@keyframes scan {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(90deg);
  }
}

@keyframes animate-transform-sprite-tank {
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to {
    transform: translate3d(-174px, 0px, 0px);
  }
}

@keyframes animate-transform-sprite-infantry {
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to {
    transform: translate3d(-55px, 0px, 0px);
  }
}

@keyframes animate-transform-sprite-engineer {
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to {
    transform: translate3d(-50px, 0px, 0px);
  }
}

@keyframes animate-transform-sprite-helicopter {
  /* is translate vs. translate3d() any better? */
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to {
    transform: translate3d(-192px, 0px, 0px);
  }
}

@keyframes animate-transform-sprite-helicopter-enemy {
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to {
    transform: translate3d(-220px, 0px, 0px);
  }
}

@keyframes animate-transform-sprite-base {
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to {
    transform: translate3d(-510px, 0px, 0px);
  }
}

@keyframes animate-transform-sprite-landing-pad {
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to {
    transform: translate3d(-324px, 0px, 0px);
  }
}

@keyframes tv-static {
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to {
    transform: translate3d(0px, -320px, 0px);
  }
}

@keyframes genericexplosion {
  from {
   background-position: 0px 0px;
  }
  to {
    background-position: 0px -250px;
  }
}

/* small */
@keyframes genericexplosionsmall {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px -45px;
  }
}

@keyframes balloonright {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px -128px; /* original yellow version: 0px -135px */
  }
}

@keyframes balloonleft {
  from {
    background-position: 0px -128px;  /* original yellow version: 0px -120px */
  }
  to {
    background-position: 0px 0px;
  }
}

@keyframes rotating3d {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes spinning3d {
  from {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

@keyframes pulse {
  from {
    transform: scale3d(0.66, 0.66, 1);
  }
  to {
    transform: scale3d(0.33, 0.33, 1);
  }
}

#tutorial {
  display: none;
}

#game-announcements .instructions {
  margin: 0.75em 0px;
}

#help {
  float: right;
  margin-left: 1em;
  margin-right: 1em;
}

body.is-mobile #help {
  margin-left: 2em;
}

@media screen and (orientation: portrait) {
  body.is-mobile #help {
    margin-left: 0.25rem;
  }
}

#help a {
  color: #009900;
  text-decoration: none;
}

#help a.static {
  display: inline;
}

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

#help a.start,
#help.inactive a.start {
  display: inline;
}

#help {
  font-size: 1em;
}

/* "Green line" mode */
#world.x-ray .sprite {
  background: transparent !important;
  outline: 1px solid #339933;
}

#player-status-bar {
  font-size: 55%;
  color: #999;
  text-shadow: 0px 1px 0px #000;
  text-align: center;
}

#player-status-bar .spacer {
  min-width: 5%;
}

body.is-mobile #bottom .toggle-sound,body.is-mobile #player-status-bar .inventory-item,body.is-mobile #player-status-bar .spacer {
  /* hide outright */
  display: none;
}

body.is-mobile #player-status-bar .stats-item {
  /* less items, so center-align. */
  text-align: center;
}

#player-status-bar span.letter-block {
  display: inline-block;
  color: #777;
  vertical-align: middle;
  min-width: 6px;
  height: 10px;
  line-height: 10px;
  border: 0.5px solid rgba(48,48,48,0.33);
  background-clip: padding-box;
  border-radius: 2px;
  padding: 0px 3px;
  text-align: center;
  background: rgba(32,32,32,0.75);
  margin-top: -1px;
  /* align with nearby text, e.g., bomb count */
}

body.is-mobile #player-status-bar span.letter-block {
  display: none;
}

body.is-mobile div#player-status-bar {
  z-index: 4;
}

body.is-mobile #player-status-bar .inventory-item:hover,
body.is-mobile #player-status-bar .inventory-item:active {
  background-color: #999;
  border-color: #fff;
}

#player-status-bar .inventory-item a {
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  /* annoying vertical alignment fix */
  margin-top: -1px;
}

#player-status-bar .inventory-item a.missile-launcher,
#mobile-controls li.inventory-item a.missile-launcher {
  /* background-image: url(../image/missile-launcher-static.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAASCAMAAAAnpt3PAAAAHlBMVEUAAQAAAABgYAACYAAJtAD/tACzAAC0tLSqqqpVVQEP4VSqAAAAAXRSTlMAQObYZgAAAMBJREFUeNqN0IEKwzAIBNBetDX7/x/eiWZKYWmPElB8mOZ4G1RYvWeDkaGqTw6eYnKKiGLQ7c24Lp7F3MHdoxm2mJKdxVqQKWMGZJ/bmGC4//Y1umERhFr1t01xvxjTjBniCc3IXIky6IxjuO8xoBjVcp2ZdcMWmQUj5HRjyDjIVMvovF8uWV7dyT5U6ZLpikR62TsoRwYIesoVXCwG4kmczTkR5yaaExLMqw/rOI9/geYEEw038T2xPtEvuWFt4gvAPggZ6Ysf1AAAAABJRU5ErkJggg==);
}

#player-status-bar .inventory-item a.missile-launcher {
  background-size: contain;
  background-position: 50% 50%;
  width: 27px;
  height: 9px;
}

#mobile-controls li.inventory-item a.tank,
#player-status-bar .inventory-item a.tank {
  /* background-image: url(../image/tank-static.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAASCAMAAAA9mj1BAAAAGFBMVEVhcAAAAAAFVQFVVQFVVVUOqgKqqqr/qgGVIxTWAAAAAXRSTlMAQObYZgAAAMFJREFUeNqV0IEOgzAIBNCVQvn/P16PnVI0TbqLscPdi8TPJm3NprNTvXfrZiJixxhKus34hKA28aGM9mTulHuLhd4S1EFpX4m6pw2Z1DkwtuRHYVulcr2VvzdvhXXOoFe9yAQZ9nPPOIIGrCkWLmWEpMSY8k3/i9lKRxvHF7JI0Xuhx35lccU4JkwqqhpdZVEJlVJxQ+tJh86gjf+ygzkMT0XMWqFyydIRzutzG6PQ1oT76rJZnOU59qdMe/x9K/wCOlII8vghfyEAAAAASUVORK5CYII=);
}

#player-status-bar .inventory-item a.tank {
  background-size: contain;
  width: 29px;
  height: 9px;
}

#player-status-bar .inventory-item a.van,
#mobile-controls li.inventory-item a.van {
  /* background-image: url(../image/van-static.png); */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAgBAMAAABKj4M5AAAAFVBMVEVhcAAAAABVVQEFVQEOqgL/qgGqqqooo0ftAAAAAXRSTlMAQObYZgAAAKFJREFUeF6VzsERAyEMQ1FaUAtqwS24hW2B/ksIjjY4HJJZ/RMj3gyMFf411GMGsApGBJmrqPId4DCpuum7hoScwcjIw13bEXIOCzFV7Gom57HTXdsRciaLbLiYXO8wmFDDUsWUzZL8freUnHaDAUxKbBY3++wGI5mahSsd924xVLhtu0D3mFVzTpyh91E9YWopLje6Y/cZfjD4rL/a9e6wF9MGwLd0KLg4AAAAAElFTkSuQmCC);
}

#player-status-bar .inventory-item a.van {
  background-size: contain;
  width: 22px;
  height: 9px;
}

#player-status-bar .inventory-item a.infantry,
#mobile-controls li.inventory-item a.infantry {
  /* background-image: url(../image/infantry-static.gif); */
  background-image: url(data:image/gif;base64,R0lGODlhCgALAMIFAAAAAAVVAVVVAQ6qAqsCAf///////////yH5BAEIAAcALAAAAAAKAAsAAAMmeAoM+gcQ4mCc9bHQ2BoBGHAfB5gf2CyA6EUtNwxe3KiRIDS6kwAAOw==);
}

#player-status-bar .inventory-item a.infantry {
  background-size: contain;
  width: 8px;
  height: 9px;
}

#player-status-bar .inventory-item a.engineer {
  /* background-image: url(../image/engineer-static.gif); */
  background-size: contain;
  width: 8px;
  height: 9px;
}

#player-status-bar a {
  /* inventory ordering */
  filter: grayscale(0);
  transition: filter 0.33s ease-out;
  transition-property: filter, opacity;
}

/* grey out items when ordering is not possible. */
#player-status-bar.can-not-order-missile-launcher .missile-launcher,
#player-status-bar.can-not-order-tank .tank,
#player-status-bar.can-not-order-van .van,
#player-status-bar.can-not-order-infantry .infantry,
#player-status-bar.can-not-order-engineer .engineer,/* and mobile controls */
#mobile-controls.can-not-order-missile-launcher .missile-launcher,
#mobile-controls.can-not-order-tank .tank,
#mobile-controls.can-not-order-van .van,
#mobile-controls.can-not-order-infantry .infantry,
#mobile-controls.can-not-order-engineer .engineer {
  filter: grayscale(1);
  opacity: 0.5;
}

#mobile-controls {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 290px;
  margin-top: 64px;
  /* offset for top bar, etc. */
  display: none;
  z-index: 6;
  /* sit atop clouds */
}

body.is-mobile #mobile-controls {
  display: block;
}

#mobile-controls .mobile-controls-left,
#mobile-controls .mobile-controls-right {
  position: absolute;
  bottom: 0px;
  /* bottom-align */
  vertical-align: bottom;
  width: 100px;
  overflow: hidden;
}

@media screen and (orientation: portrait) {
  /* mobile, portrait: smaller controls. */
  body.is-mobile #mobile-controls .mobile-controls-left,
  body.is-mobile #mobile-controls .mobile-controls-right {
    min-width: 50px;
    width: 10%;
  }
}

#mobile-controls .mobile-controls-left {
  left: 0px;
}

#mobile-controls .mobile-controls-right {
  right: 0px;
}

body.is-mobile.notch-at-left #mobile-controls .mobile-controls-left {
  /* iPhone X, landscape mode: avoid overlapping notch at left. */
  left: env(safe-area-inset-left);
}

body.is-mobile.notch-at-right #mobile-controls .mobile-controls-right {
  /* iPhone X, landscape mode: avoid overlapping notch at right. */
  right: env(safe-area-inset-right);
}

#mobile-controls .mobile-controls-left {
  padding-left: 2px;
}

#mobile-controls .mobile-controls-right {
  padding-right: 2px;
}

#mobile-controls .mobile-controls-left li,
#mobile-controls .mobile-controls-right li {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

#mobile-controls li {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  line-height: 1rem;
  margin: 0px;
  margin-bottom: 1px;
  padding: 0px;
  border: 1px dotted rgba(255,255,255,0.133);
  border-bottom-color: transparent;
  vertical-align: middle;
  text-align: center;
  font-size: 7px;
  /* microfiche, but OK on mobile. */
  /* image/checkerboard-black-mask-75percent.png */
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlO/ABXOf08AAAAVSURBVHgBYwiFAoZVUEC8yKjIqAgAdHP/Abts7zEAAAAASUVORK5CYII=);
}

#mobile-controls li:last-of-type {
  border-bottom-color: rgba(255,255,255,0.133);
}

#mobile-controls li a {
  position: relative;
  display: flex;
  color: #ccc;
  text-shadow: 0px 1px 0px #000;
  text-decoration: none;
  background-color: rgba(0,0,0,0.1);
  align-items: center;
  width: 100%;
  height: 100%;
}

#mobile-controls li.inventory-item a {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  line-height: 1.5rem;
  background-repeat: no-repeat;
  /* filter, etc., for when greying out. */
  filter: grayscale(0);
  transition: background-color 0.33s ease-out;
  transition-property: background-color, filter, opacity;
}

#mobile-controls li a.active {
  background-color: rgba(27, 107, 27, 0.45);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* immediately go light. fade on release. */
  transition-duration: 0;
}

#mobile-controls li span {
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  line-height: 1rem;
  letter-spacing: 0.05rem;
  /* ignore events, let the link get it. */
  pointer-events: none;
}

#mobile-controls li.inventory-item a.engineer,
#player-status-bar .inventory-item a.engineer {
  /* background-image: url(../image/engineer-static.gif); */
  background-image: url(data:image/gif;base64,R0lGODlhCgALAMIFAFVVAQVVAQAAAA6qAqsCAf///6qqqv///yH5BAEIAAcALAAAAAAKAAsAAAMqeCosek0Q4lYpkj5RjAgR0w0BGYCcQTJoM6zMIpgxNINvfLsgBACNnyMBADs=);
}

#mobile-controls li.inventory-item a.infantry,
#mobile-controls li.inventory-item a.engineer {
  background-size: 12%;
}

#mobile-controls li.inventory-item a.parachute-infantry {
  /* background-image: url(../image/parachute-infantry-static.png); */
  background-size: 12%;
}

#mobile-controls li.inventory-item a.smart-missile {
  /* background-image: url(../image/status-missile.png); */
  background-size: 10%;
  background-position: 50% 50%;
}

#mobile-controls li.inventory-item a.ammo {
  /* background-image: url(../image/status-ammo.png); */
  background-position: 50% 50%;
}

#mobile-controls li.inventory-item a.bombs {
  /* background-image: url(../image/status-bombs.png); */
  background-position: 50% 50%;
}

@media screen and (orientation: portrait) {
  /* hide text when in portrait mode. */
  /* only show if on a very wide device, e.g., ipad / tablet. */
  body.is-mobile #player-status-bar span.letter-block {
    display: none;
  }

  body.is-mobile #mobile-controls li span {
    display: none;
  }

  /* smaller inventory sizes */
  #mobile-controls li.inventory-item a.tank,
  #mobile-controls li.inventory-item a.missile-launcher {
    background-size: 66%;
  }

  #mobile-controls li.inventory-item a.van {
    background-size: 25%;
  }

  #mobile-controls li.inventory-item a.infantry,
  #mobile-controls li.inventory-item a.engineer {
    background-size: 25%;
  }

  /* helicopter weapons */
  #mobile-controls li.inventory-item a.parachute-infantry,
  #mobile-controls li.inventory-item a.ammo {
    background-size: 25%;
  }

  #mobile-controls li.inventory-item a.smart-missile {
    background-size: 20%;
  }

  #mobile-controls li.inventory-item a.bombs {
    background-size: 6.5%;
  }
}

body.is-mobile.game-over #mobile-controls {
  /* hide when game is over. */
  display: none !important;
}

#world-wrapper {
  transition: filter 0.5s ease-in;
}

body.game-paused #world-wrapper {
  /* side note: applying this to body throws off positioning in Firefox. */
  filter: grayscale(100%);
}

body.game-paused .sprite {
  animation: none !important;
}

#body-height-element {
  /* shenanigans for measuring true body height on iOS Safari when URL bar is showing. */
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1px;
  height: 100%;
  visibility: hidden;
  /* just in case */
  pointer-events: none;
}

.joystick,.joystick-point {
  position: absolute;
  /**
   * hide for now. safari has some sort of redraw bug
   * on desktop + iOS, the outer border gets gaps
   * when the inner joystick nub is moving around.
   */
  /* border: 1px dotted rgba(255,255,255,0.33); */
  border-radius: 100%;
  /* prevent other events on the joystick itself? */
  pointer-events: none;
  /* include border in w/h so centering works */
  box-sizing: border-box;
}

.joystick {
  /* TODO: fix dimension -> scale calculations.: D */
  width: 100px;
  height: 100px;
  opacity: 0;
  background-color: rgba(27,107,27,0.25);
  transform: scale(0.125);
  transform-origin: 50% 50%;
  transition: all 0.15s ease-in-out;
  transition-property: opacity, transform;
}

.joystick.joystick-active {
  opacity: 1;
  transform: scale(1);
  /* slightly longer when appearing */
  transition-duration: 0.2s;
}

.joystick-point {
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  margin: -25% 0px 0px -25%;
  background-color: rgba(27,107,27,0.45);
  /* image/checkerboard-black-mask-75percent.png */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlO/ABXOf08AAAAVSURBVHgBYwiFAoZVUEC8yKjIqAgAdHP/Abts7zEAAAAASUVORK5CYII=);
}

/* for mobile. */
#pointer {
  position: absolute;
  width: 13px;
  height: 13px;
  top: 50%;
  left: 50%;
  margin: -6.5px 0px 0px -6.5px;
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAQAAADY4iz3AAAAJklEQVR4AWNAAv/BECv4/5/WUv9hECqFgEABTABWhEcXPR2PJwwBYldZpwyOHyUAAAAASUVORK5CYII=);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 1;
  display: none;
}

body.is-mobile #pointer {
  display: block;
}

#mobile-landscape-tip {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  margin-top: -1.5rem;
}

@media screen and (orientation: portrait) {
  body.is-mobile #mobile-landscape-tip {
    display: block;
  }
}

body.is-mobile .hide-on-mobile,
body:not(.is-mobile) .mobile-only {
  display: none;
}

@media screen and (orientation: portrait) {
  #game-paused .mobile-only {
    font-size: 0.75rem;
  }
  body.game-paused #mobile-controls {
    display: none;
  }
}

#notification-toasts {
  position: absolute;
  top: 0px;
  right: 8px;
  width: 12rem;
  height: 67%;
  margin-top: 96px;
  overflow: hidden;
}

#notification-toasts.left-aligned {
  right: auto;
  left: 8px;
}

.notification-toast {
  position: relative;
  top: 0px;
  text-align: right;
  color: #999;
  left: 100%;
  opacity: 0;
  transition: all 0.33s ease-in-out;
  transition-property: margin, opacity;
  will-change: transform;
}

#notification-toasts.left-aligned .notification-toast {
  text-align: left;
}

.notification-toast.toast-active {
  /* bring text into view */
  left: 0%;
  opacity: 1;
  /* and, a little slower */
  transition-duration: 0.5s;
}

.notification-toast.toast-expiring {
  /* fade */
  opacity: 0;
}

.notification-toast.toast-expired {
  /* vertical collapse, not quite a full line */
  margin-top: -0.9rem;
  /* account for annoying vertical shift */
  top: -3px;
}

.notification-toast.double-height.toast-expired {
  /* vertical collapse, works OK for two lines?? */
  margin-top: -1.3rem;
}

.notification-toast span {
  display: inline-block;
  font-size: 6px;
  border: 1px solid transparent;
  padding-bottom: 1px;
  background: rgba(0,0,0,0.25);
}

.notification-toast .fraction,
#queue .fraction {
  /* "slash" character */
  font-size: 110%;
  font-style: normal;
}

.notification-toast sup.nsf,
#queue sup {
  position: relative;
  font-size: 75%;
  /* pull closer to text at left */
  margin-left: -1.5px;
  /* super-script: closer to fraction "slash" */
  top: 1px;
  right: -1px;
}

.notification-toast sup:not(.nsf) {
  /* bump out a bit, e.g., tank[3] - multiple tanks being ordered */
  padding-left: 0.5px;
}

#queue span.fraction-wrapper {
  /* building queue: nudge a little */
  position: relative;
  top: -1px;
  left: 3px;
}

#queue .queue-item.has-counter .fraction-wrapper {
  /* hackish - so numbers don't overlap */
  display: inline-block;
  transform: scale3d(0.9, 0.9, 1);
}

#queue .queue-item.has-counter.over-ten .fraction-wrapper {
  /* hackish - so numbers don't overlap */
  display: inline-block;
  transform: scale3d(0.75, 0.75, 1);
}

.notification-toast sub.nsf,
#queue sub {
  position: relative;
  font-size: 75%;
  /* sub-script: closer to fraction "slash" */
  top: -1px;
  left: -1px;
}

#queue sup,
#queue sub {
  font-size: 65%;
}

#queue sup {
  margin-left: 0px;
  left: 0.5px;
}

#queue sub {
  left: -0.5px;
}

#queue .fraction {
  font-size: 75%;
}

/* prefs + modal stuff - based on original 68K Macintosh UI */

#game-prefs-modal {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0px); /* scale3d() will be updated via JS */
  zoom: 2; /* zoom up, and then scale down looks better where supported (Chrome + Safari) */
  border: 0.5px solid #000;
  width: 20rem; /* 224px; */
  z-index: 11;
  /* collapse */
  font-size: 0px;
  overflow: hidden;
}

/* prototype stuff, not presently in use */
/*

.finder.modal {
  display: none;
}

.finder .title-bar {
 position: relative;
 overflow: hidden;
 background: rgb(243,243,243);
 border: 0.5px solid rgb(218,218,255);
 border-bottom-color: rgb(179,179,218);
 border-right-color: rgb(179,179,218);
 text-align: center;
}

.finder .title-bar-label {
  position: relative;
  display: inline-block;
  background: rgb(243,243,243);
  padding: 0px 4px;
  margin-top: -0.75px;
  text-align: center;
  font-family: Chicago, "FA Sysfont C", courier, sans-serif;
  font-size: 7px;
  font-weight: normal;
  color: #000;
}

.finder .title-bar-stripes {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgb(243,243,243);
  border-left: none;
  border-right: none;
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAECAYAAADvRz3UAAAAH0lEQVR42uXOMREAAACCQPsHoK7GYJC73wlQkz9w3wBa+rBBgfHfewAAAABJRU5ErkJggg==);
  background-size: 8px 1px;
}

.finder .close-button-wrapper {
  position: absolute;
  z-index: 2;
  top: 0.5px;
  left: 3px;
  background: rgb(243,243,243);
  width: 6.5px;
  height: 6.5px;
}

.finder .close-button-outer,
.finder .close-button-inner {
  width: 5px;
  height: 5px;
  box-sizing: border-box;
}

.finder .close-button-outer {
  width: 5.5px;
  height: 5.5px;
}

.finder .close-button-outer,
.finder .close-button-inner {
  position: absolute;
  top: 0.5px;
  left: 0.5px;
  background: rgb(192,192,192);
  border: 0.5px solid rgb(84,84,135);
}

.finder .close-button-outer {
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.finder .close-button-inner {
  margin-top: 0.5px;
  margin-left: 0.5px;
  background: transparent;
  border-color: rgb(218,218,255);
}

*/

#game-prefs-modal .body {
  position: relative;
  border-top: 0.5px solid #000;
  background: rgb(243,243,243);
  height: 10rem;
  font-family: geneva, verdana, arial, sans-serif;
  font-size: 5px;
  color: #000;
  overflow: auto;
  /* Firefox may show scaled-up scrollbars - this corrects it. */
  scrollbar-width: thin;
}

#game-prefs-modal {
  width: 228px;
}

#game-prefs-modal .body {
  /* border all the way around */
  border: 0.5px solid #000;
}

#game-prefs-modal textarea {
  width: 23rem;
  height: 16rem;
  font-family: geneva, verdana, arial, sans-serif;
  font-size: 10px;
  color: #000;
  transform: scale3d(0.33, 0.33, 1);
  transform-origin: 0px 0px;
}

#game-prefs-modal fieldset {
  margin: 4px;
  border: 0.75px solid #000;
}

#game-prefs-modal fieldset legend {
  font-family: Chicago, "FA Sysfont C", courier, sans-serif;
  font-size: 7px;
  vertical-align: middle;
}

#game-prefs-modal fieldset ul {
  list-style-type: none;
}

#game-prefs-modal fieldset ul,
#game-prefs-modal fieldset ul li {
  margin: 0px;
  padding: 0px;
}

#game-prefs-modal fieldset ul li {
  margin-top: 1px;
  margin-bottom: 4px;
}

#game-prefs-modal ul.less-bottom-spacing li {
  margin-bottom: 0px;
}

#game-prefs-modal fieldset ul li:last-of-type {
  margin-bottom: 1px;
}

#game-prefs-modal fieldset ul li.less-bottom-spacing {
  margin-bottom: 3px;
}

#game-prefs-modal fieldset ul li ul li {
  display: inline-block;
  margin-right: 2px;
}

#game-prefs-modal fieldset p {
  margin: 0px;
  padding-top: 1px;
  padding-bottom: 3px;
}

#game-prefs-modal .compact,
#game-prefs-modal ul.compact li {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

#game-prefs-modal fieldset ul li p {
  margin-bottom: 0px;
  padding-bottom: 0px;
  margin-left: 9px;
}

#game-prefs-modal fieldset ul li p,
#game-prefs-modal .indented {
  margin-left: 9px;
}

#game-prefs-modal .non-indented {
  margin-left: 0px;
}

#game-prefs-modal fieldset ul li p.options-heading {
  margin-left: 0px;
}

#game-prefs-modal input,
#game-prefs-modal label {
  vertical-align: middle;
}

#game-prefs-modal input {
  margin: 0px;
  padding: 0px;
  width: 7px;
  height: 7px;
  margin-top: -1px; /* vertical align w/text */
}

#game-prefs-modal input[type="checkbox"] {
  margin-top: -2px;
}

#game-prefs-modal input[type="radio"],
#game-prefs-modal input[type="checkbox"] {
  position: relative;
  /* https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */
  -webkit-appearance: none;
  appearance: none;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateY(-0.5px);
}

#game-prefs-modal input[type="checkbox"] {
  border-radius: 1px;
}

#game-prefs-modal input[type="checkbox"]::before,
#game-prefs-modal input[type="radio"]::before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  content: '';
  line-height: 7px;
  border-radius: 50%;
  transform: scale(0.66);
  visibility: hidden;
  background: #000;
}

#game-prefs-modal input[type="checkbox"]::before {
  background: transparent;
  content: '×';
  text-align: center;
  line-height: 7px;
  height: 7px;
  font-size: 10px;
  margin: -1.5px 0px 0px -0.5px;
  vertical-align: middle;
  font-weight: bold;
  border-radius: 0px;
}

body.is_firefox #game-prefs-modal input[type="checkbox"]::before {
  margin-top: -2px;
}

#game-prefs-modal input[type="radio"]:checked::before,
#game-prefs-modal input[type="checkbox"]:checked::before {
  visibility: visible;
}

#game-prefs-modal input[type="checkbox"]:active {
  opacity: 0.75;
}

#game-prefs-modal input[type="checkbox"]:active::before {
  transform: scale(0.5);
  opacity: 0.5;
  visibility: visible;
}

#game-prefs-modal input[type="checkbox"]:active,
#game-prefs-modal input[type="checkbox"]:focus {
  background: #ccc;
}

#game-prefs-modal input[type="radio"]:active::before {
  visibility: visible;
  transform: scale(0.4);
  transform-origin: 50%;
}

#game-prefs-modal input[type="radio"]:focus::before {
  animation: pulse 0.5s ease-in-out infinite alternate-reverse;
}

#game-prefs-modal input[type="radio"]:disabled,
#game-prefs-modal input[type="checkbox"]:disabled {
  opacity: 0.33;
}

#game-prefs-modal input[type="radio"]:focus-visible,
#game-prefs-modal input[type="checkbox"]:focus-visible {
  /* hide outline, because we have the animation */
  outline: none;
}

#game-prefs-modal .label-text {
  font-weight: bold;
}

body.is_safari #game-prefs-modal .label-text {
  letter-spacing: -0.25px; /* :shake_fist: */
}

#game-prefs-modal p {
  margin: 0px;
  padding: 0px;
  margin-top: 0.1rem;
  margin-left: 0.25rem;
  margin-bottom: 0.5rem;
  margin-right: 0.25rem;
}

#game-prefs-modal button {
  position: relative;
  font-family: Chicago, "FA Sysfont C", courier, sans-serif;
  font-size: 7px;
  font-weight: normal;
  color: #000;
  margin: 0px;
  background: #fff;
  padding: 0.5px 5px;
  border: 0.25px solid #000;
  border-radius: 2px;
  margin-right: 0.2rem;
  min-width: 1.75rem;
  cursor: pointer;
}

#game-prefs-modal button.primary {
  /**
   * Most, but not all browsers can do a double-border this way,
   * where the outline follows border-radius styling as well.
   * Guess who the exception is ... :D ... see the next rule.
   */
  outline: 1px solid #000;
  outline-offset: 0.5px;
}

#game-prefs-modal button.primary {
  /**
   * IRONY: Safari doesn't apply border-radius to outlines, but
   * everyone else does; and this is for the 68K classic mac UI.
   * So, we'll use box-shadow shenanigans. :P
   */
  outline: none;

  /* original button border, a little bigger */
  border-width: 0.5px;

  /* inner white, followed by outer black borders */
  box-shadow:
    0 0 0 0.5px #fff,
    0 0 0 1.5px #000;

  /* Safari collapses buttons more than the others. :/ */
  padding: 0.5px 10px;
}

#game-prefs-modal button:active {
  background: #000;
  color: #fff;
}

/* outer -> inner */
#game-prefs-modal .border-3 {
  border: 0.5px solid rgb(218,218,255);
  border-bottom-color: rgb(135,135,179);
  border-right-color: rgb(135,135,179);
}

#game-prefs-modal .border-2 {
  border: 0.5px solid rgb(205,205,205);
}

#game-prefs-modal .border-1 {
  border: 0.5px solid rgb(135,135,179);
  border-bottom-color: rgb(218,218,255);
  border-right-color: rgb(218,218,255);
}


.flying-ace {
  /* obligatory: the Flying Ace, on the doghouse. "Snoopy vs. The Red Baron" - from "It's The Great Pumpkin, Charlie Brown!" */
  width: 25px;
  height: 40.5px;
  background: url(../image/flying_ace.png);
  background-size: contain;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}