/*

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

  ---------------------------------------------
  A R M O R  A L L E Y  ::  R E M A S T E R E D
  --------- 10th Anniversary Edition ----------

  A browser-based interpretation of the Macintosh + MS-DOS releases of Armor Alley.

  Game, overview, tutorials etc.
  https://armor-alley.net/

  Quick video overview (3m 45s)
  https://youtu.be/oYUCUvg02rY

  Source code:
  https://github.com/scottschiller/ArmorAlley/

  Original development and history (2013)
  https://www.schillmania.com/content/entries/2013/armor-alley-web-prototype/

  Original game Copyright (C) 1989 - 1991, Information Access Technologies.
  https://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.

  New game provided under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License:
  https://creativecommons.org/licenses/by-nc/3.0/

  General disclaimer: This is a fun personal side project. The code could be tightened up a bit.

  This release:     V2.01.20230520
  Previous release: V2.0.20230501
  Original release: V1.0.20131031

  For revision history, see README.md and CHANGELOG.txt.

*/

@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-display: swap;
}

@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;
  font-display: swap;
}

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

body, input {
  /* 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;
}

body {
  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;
  /* more scroll aversion */
  overflow: hidden;
}

body.game-started {
  /* on mobile especially, aggressively disable selection. this is a game, not a document. ;) */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
  /* prevent pinch-to-zoom and scroll */
  touch-action: none;
}

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

#world,
#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: 34px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(27,107,27,0.45);
  background-image: url(../image/checkerboard-black-mask-50percent.png);
  background-size: 64px;
  z-index: 10;
  transform: scale3d(1,1,1);
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
}

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

#world-overlay.fade-out {
  transition: all 2s ease-in-out;
  transition-property: background-image, opacity, transform;
  opacity: 0;
  transform: scale3d(1.2,1.2,0);
  transform-origin: 50% 50%;
  pointer-events: none;
}

#mtv-bnb-in {
  position: absolute;
  top: 0.5px;
  left: 0px;
  width: 100%;
  height: 75%;
  background: url(../image/virtual_stupidity_overlay.webp);
  background-position: 0px 0px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  transform: translate3d(-0.75%, -61.5%, 0);
  opacity: 0;
  transition: opacity 0.25s ease-in;
}

body.bnb #mtv-bnb-in {
  opacity: 1;
}

#bnb-vs {
  position: absolute;
  bottom: -8px;
  left: 0px;
  width: 100%;
  height: 135%;
  /* https://www.steamgriddb.com/game/5248723 */
  background: url(../image/virtual_stupidity_steamgriddb.webp);
  background-position: 100% 100%;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  transform: translate3d(-35%, 0%, 0);
  filter: drop-shadow(0px 1px 0.5px rgba(0,0,0,0.5));
  opacity: 0;
  transition: opacity 0.25s ease-in;
}

body.bnb #bnb-vs {
  opacity: 1;
}

#mtv-bnb-in,
#bnb-vs {
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
}

body.is_safari #mtv-bnb-in,
body.is_safari #bnb-vs {
  /* Safari does better with this here, ironically, vs. optimize-contrast */
  image-rendering: optimizeQuality;
}

#logo {
  position: absolute;
  top: 27%;
  left: 50%;
  width: 391px;
  height: 67px;
  /* -ve margins for centering; will scale */
  margin-left: -195.5px;
  margin-top: -33.5px;
  /* background: transparent url(../image/aa-logo.png) no-repeat 0px 0px; */
  background: transparent url(../image/armor-alley-wordmark-colour.webp) no-repeat 50% 72%;
  background-size: contain;
  image-rendering: optimizeQuality;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  border-top: 12px solid #444;
  padding-top: 20px;
}

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

body:not(.game-started) #mobile-controls {
  visibility: hidden;
}

#world.blurred #world .sprite,
#world.blurred #mobile-controls {
  opacity: 0;
}

#world.no-blur #world .sprite,
#world.no-blur #mobile-controls {
  opacity: 1;
}

#world.blurred #player-status-bar,
#world.blurred #battlefield,
#world.blurred #mobile-controls,
#world.blurred #pointer {
  filter: blur(2px);
  transition: all 1.5s ease-in-out;
  transition-property: filter, opacity;
}

#world.blurred.no-blur #player-status-bar,
#world.blurred.no-blur #battlefield,
#world.blurred.no-blur #mobile-controls,
#world.blurred.no-blur #pointer {
  filter: none;
}

#game-menu {
  margin-top: 60px;
  display: none;
  text-align: center;
  color: #ccc;
  /* don't exceed the screen width (e.g., mobile phones in portrait mode.) */
  width: 100%;
  font-size: 10px;
}

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

#game-menu h2 {
  position: relative;
  /* ensure this clips the BnB overlay, when showing */
  z-index: 10;
  font-weight: normal;
  font-size: 10px;
  color: rgb(225,150,50);
  border-top: 0.5px solid rgb(190,120,50);
  padding-top: 0.5em;
}

#game-menu label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  border: 0.5px solid #999;
  border-radius: 3px;
  padding: 2px 4px;
}

body.is_safari #game-menu label,
body.is_safari #game-menu select {
  /* Safari shenanigans. :/ */
  height: 20px;
}

body.is_safari #game-menu select {
  /* Safari desktop-specific hacks to remove "gloss" */
  /* https://stackoverflow.com/questions/7638677/how-can-i-remove-the-gloss-on-a-select-element-in-safari-on-mac/57510283#57510283 */
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23ffffff'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 16px) 60%;
  background-repeat: no-repeat;
  text-indent: 16px;
  padding-right: 32px;
  border-radius: 6px;
  border-color: #fff;
}

body.is-mobile.is_safari #game-menu select {
  /* iOS-specific shenanigans */
  background-size: 8px;
  background-position: calc(100% - 10px) 65%;
  text-indent: 8px;
  border-radius: 3px;
  top: 0.5px;
  height: 24.5px;
  padding-right: 24px;
}

#game-menu label:hover {
  border-color: #fff;
}

#game-menu .cta {
  display: inline-block;
  box-sizing: border-box;
  color:#ccc;
  border: 1px solid green;
  font-size: 1em;
  line-height: 1.5em;
  padding: 4px 6px;
  /* text-align: center; */
  text-decoration: none;
  background-color: #003300;
  background-color: rgba(0,102,0,0.5);
  cursor: pointer;
}

#game-menu .cta:last-of-type {
  padding-right: 0px;
}

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

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

#game-menu form {
 display: block;
 width: 100%;
}

#game-menu form input {
  cursor: pointer;
}

#game-menu form input[type="radio"] {
  position: relative;
  top: 0.5px;
  margin: 0px;
  padding: 0px;
  transform: scale(0.8);
  transform-origin: top;
  vertical-align: middle;
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radio button appearance */
  display: inline-block;
  width: 1em;
  height: 1em;
  padding: 2px;
  /* background-color only for content */
  background-clip: content-box;
  border: 1px solid #ccc;
  background-color: transparent;
  border-radius: 50%;
}

#game-menu form input[type="radio"]:checked {
  background-color: #fff;
}

#game-menu .cta-checkbox {
  position: relative;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
  /* vertical align shenanigans */
  margin-top: -2px;
}

#game-menu .checkbox-wrapper {
  display: inline-block;
  vertical-align: top;
  margin-right: 0.125em;
}

#game-menu .cta-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  display: grid;
  place-content: center;
  font: inherit;
  color: currentColor;
  width: 1.1em;
  height: 1.1em;
  border: 0.5px solid #999;
  border-radius: 0.1em;
  transform: translateY(0.2em);
  cursor: pointer;
}

#game-menu .cta-checkbox input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  visibility: hidden;
  box-shadow: inset 1em 1em #fff;
  /* check mark */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

#game-menu .cta-checkbox input[type="checkbox"]:checked::before {
  visibility: visible;
}

#game-menu .cta-checkbox:hover {
  animation: none;
  background: transparent;
}

#game-menu .emoji {
  display: inline-block;
  font-size: 1.25em;
  line-height: 1.25em;
  vertical-align: bottom;
  pointer-events: none;
}

#exit {
  display: none;
}

#exit.visible {
  display: inline;
}

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

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

#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;
  /* for initial game fade */
  transition: filter 0.5s ease-in;
}

#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: 0px;
  }
  body.is-mobile #game-status li:last-of-type {
    margin-right: 0px;
  }
}

#game-status {
  position: absolute;
  top: 4px;
  left: 1px;
  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.5px;
  font-size: 0px;
  min-width: 10px;
  transform: scale(0.85);
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
  /* earlier "jetbrains mono" version */
  /*
  margin-left: -0.33rem;
  margin-top: 0.5px;
  font-size: 0px;
  min-width: 10px;
  transform: scale(0.9)
  */
}

body.is-mobile #funds-count {
  margin-top: 1.25px;
}

#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 {
  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,
#radar-scrubber {
  height: 32px;
}

#radar-container {
  position: relative;
  overflow: hidden;
  background: rgb(14,54,14);
  background-image: url(../image/checkerboard-black-mask-50percent.png);
  background-size: 64px;
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
}

#radar-scrubber {
  position: absolute;
  top: 1px;
  left: 0px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.25);
  width: 32px;
  opacity: 0.5;
  border: 0.5px solid #339933;
  border-top: none;
  border-bottom: none;
  z-index: 99;
  cursor: grab;
}

#radar-scrubber.active {
  /* background-image: none; */
  /* background-color: rgba(0,0,0,0.25); */
  opacity: 0.75;
}

#radar-scrubber.active {
  cursor: grabbing;
}

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

#radar-jammed-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 11;
  pointer-events: none;
  /* mix-blend-mode: hard-light; */
}

#radar-jammed-overlay .noise,
body.bnb .tv-noise-overlay {
  /**
   * "TV Static Noise Effect" - Ana Travas
   * https://codepen.io/anatravas/pen/vyOwOZ
   */
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: -500px;
  left: -500px;
  background: transparent url(../image/noise-tv.png) 0px 0px;
  image-rendering: optimizeSpeed;
  background-size: 250px 250px;
  opacity: 0;
  transition: opacity 0.25s ease-in;
}

#radar-jammed-overlay .noise {
  background-image: url(../image/noise-green-tint.png);
  background-size: 150px 150px;
}

#radar-jammed-overlay.active .noise,
body.bnb .tv-noise-overlay {
  animation: noise 1s steps(8, end) infinite both;
  opacity: 0.67;
}

#radar-jammed-overlay.static .noise {
  animation: none !important;
  background: rgba(0,48,0,0.45) !important;
}

body.bnb .tv-noise-overlay {
  filter: blur(0.25px);
  background-size: 100px 100px;
  /* faster */
  animation-duration: 0.5s;
  opacity: 0.4;
}

body.game-paused #radar-jammed-overlay.active .noise,
body.game-paused .tv-noise-overlay {
  animation: none;
}

.tv-screen-container {
  position: absolute;
  top: 30px;
  left: 50px;
  right: 50px;
  bottom: 70px;
  overflow: hidden;
}

body.bnb .tv-screen-container {
  background: #000;
}

@keyframes noise {
  0% {
    transform: translate3d(0px, 0px, 0px);
    background-position: 0px 0px;
  }
  100% {
    transform: translate3d(500px, 0px, 0px);
  }
}

#tv-display {
  display: none;
}

body.bnb #tv-display {
  display: block;
}

#tv-display,
.tv-display-title-screen {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 409px;
  height: 320px;
  /* center, and slightly smaller */
  transform: translate(-50%, -50%) scale3d(0.5, 0.5, 1);
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s ease-in;
  transition-property: transform, opacity, filter, position;
}

#tv-display.widescreen {
  /* align better with tutorial mode window */
  top: 53%;
}

.tv-display-title-screen {
  top: 48%;
  /* note: intentionally warping the TV a bit to fit the screen. */
  transform: translate(-50%, -50%) scale3d(1.175, 1.15, 1.2);
  opacity: 1;
  z-index: 11;
  overflow: hidden;
}

body.bnb #tv-display.active {
  transform: translate(-50%, -50%) scale3d(0.5, 0.5, 1);
  opacity: 1;
}

#tv-display #tv,
.tv-display-title-screen .tv {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 409px;
  height: 320px;
  /* https://pngtree.com/freepng/color-tube-television-screen-to-gold_7430214.html */
  background: transparent url(../image/pngtree.com_color_tv.webp);
  background-size: contain;
}

#tv-display.widescreen #tv {
  background: transparent url(../image/pngtree.com_color_tv_widescreen.webp);
  background-size: contain;
  background-position: 0px 21.5px;
  background-repeat: no-repeat;
}

.tv-display-title-screen .tv,
.tv-display-title-screen .tv-noise-overlay {
  opacity: 1;
  transition: opacity 0.175s ease-out;
  transform: scale3d(1.0, 1.0, 1.0);
  transition-property: opacity, transform;
}

body:not(.bnb) .tv-display-title-screen .tv,
body:not(.bnb) .tv-display-title-screen .tv-noise-overlay {
  opacity: 0;
  transform: scale3d(0.98, 0.98, 0.98);
}

#tv-display video,
.tv-display-title-screen video {
  position: absolute;
  top: 34px;
  left: 60px;
  width: 288px;
  height: 212px;
}

#tv-display.widescreen video {
  top: 33px;
  left: 59.5px;
  width: 290px;
  height: 214px;
}

.tv-display-title-screen video {
  left: 30px;
  width: 350px;
  height: 71%;
}

#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;
  /* in case there's overflow, hide the wrapped items */
  min-height: 32px;
}

#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-size: 2px 2px;
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
  margin-top: 3px;
  opacity: 0.9;
}

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

#repair-complete {
  position: absolute;
  background: transparent url(../image/status-repair-complete.png) 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;
}

body.bnb:not(.is-mobile) #aa ul.stats-bar li.inventory-item:first-of-type {
  /* centering shenanigans */
  margin-left: 16px;
}

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;
}

body.is_iphone #stats-bar .letter-block,
body.is_iphone #status-bar .letter-block {
  /* NOTE: #stats-bar and #status-bar are both valid. :P */
  /* dammit. */
  display: none;
}

#stats-bar.hide-inventory li.inventory-item,
#stats-bar.hide-weapons-status .stats-item,
#stats-bar.hide-keyboard-labels .letter-block,
#status-bar.hide-keyboard-labels .letter-block {
  /* user has chosen to hide via game prefs */
  /* NOTE: #stats-bar and #status-bar are both valid. :P */
  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%;
}

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;
  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.weapons-item a.parachute-infantry,
.static-sprite.parachute-infantry {
  background: transparent url(../image/parachute-infantry-static.png) no-repeat 0px 0px;
}

#player-status-bar.enemy .infantry-count em,
#mobile-controls.enemy li.weapons-item a.parachute-infantry {
  background: transparent url(../image/parachute-infantry-enemy-static.png) no-repeat 0px 0px;
  background-size: contain;
}

#mobile-controls.enemy li.weapons-item a.parachute-infantry {
  background-size: 28%;
  background-position: 50% 50%;
}

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.weapons-item a.smart-missile {
  background-image: url(../image/smart-missile.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 75%;
}

ul.stats-bar .missiles em {
  transform: rotate(-5deg);
}

ul.stats-bar .ammo em,
#mobile-controls li.weapons-item a.ammo {
  background-image: url(../image/status-ammo.png);
  background-repeat: no-repeat;
  background-position: 2px 1px;
  background-size: 80%;
}

#mobile-controls li.weapons-item a.ammo {
  background-size: 14px 8px;
}

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

ul.stats-bar .bombs em,
#mobile-controls li.weapons-item a.bombs {
  background: transparent url(../image/status-bombs.png) no-repeat 0px 0px;
  background-size: 75%;
  background-position: 50% 1px;
}

#mobile-controls li.weapons-item a.bombs {
  background-size: 3px 11px;
}

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;
}

#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: 100%;
  height: 100%;
}

#stars {
  /* GPU parallax, where possible */
  position: absolute;
  top: 34px;
  left: 0px;
  /* will be adjusted according to browser width + a percentage of battlefield width. */
  width: 110%;
  left: -10%;
  height: 352px; /* 320 (battlefield height) + top offset */
  /* background: transparent url(../image/star-background.png); */
  background-image: url(../image/star-background.png);
  background-size: 256px 136px;
}

.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.cloud3,
.sprite.gunfire,
.sprite.smart-missile,
.sprite.van,
.sprite.missile-launcher,
/* bunkers go green when overlapping with ground units, i.e., tanks? */
.sprite.bunker,
.sprite.end-bunker,
.sprite.super-bunker,
/* all terrain items need acceleration? */
.sprite.terrain-item,
.smoke .transform-sprite,
.sprite.shrapnel,
.cornholio,
.gunfire,
.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;
}

.radar-item:not(.radar-item--animated) {
  /* terrain items, bunkers, etc., on radar don't move. */
  will-change: unset;
}

/* firefox complains if we have too many elements using will-change. */
body.is_firefox .sprite.shrapnel,
body.is_firefox #radar .radar-item--animated {
  will-change: unset;
}

.smoke {
  will-change: transform, opacity;
}

/*
.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_mac.png);
  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);
  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_mac.png);
  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-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;
  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;
  margin-left: 1.2px;
}

.chain.jerking {
  /* "Check it out, Beavis... I'm jerking my chain." ⛓️✊🤣 uh-huh huh huh. */
  animation: jerkingmychain 0.69s alternate infinite;
}

.missile-launcher {
  width: 54px;
  height: 18px;
  background-image: url(../image/missile-launcher.png);
  background-size: 54px 72px;
  background-repeat: no-repeat;
  z-index: 2;
}

.missile-launcher.enemy {
  background-image: url(../image/missile-launcher-enemy.png);
  background-size: 54px 72px;
  background-repeat: no-repeat;
}

.tank,
.tank.enemy {
  width: 58px;
  height: 19px;
  z-index: 2;
  background-image: none;
}

.tank .transform-sprite {
  width: 174px;
  /* 58px x 3 frames */
  height: 18px;
  background-image: url(../image/tank-sprite-horizontal.png);
  background-size: 174px 18px;
  animation: animate-transform-sprite-tank 0.1s steps(3) infinite;
}

.tank.enemy .transform-sprite {
  background-image: url(../image/tank-enemy-sprite-horizontal.png);
  animation: animate-transform-sprite-tank 0.1s steps(3) infinite;
}

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

.van,
.van.enemy {
  background-image: url(../image/van.png);
  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);
  }

.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-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);
  /* proper L -> R order, in this case. */
  animation: animate-transform-sprite-infantry 400ms steps(5) infinite;
}

.infantry.stopped {
  background-image: url(../image/infantry-static.gif);
  background-size: 10px 12px;
  background-repeat: no-repeat;
}

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

.infantry.enemy.stopped {
  background-image: url(../infantry-enemy-static.png);
  background-size: 10px 12px;
  background-repeat: no-repeat;
}

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

.engineer .transform-sprite {
  background-image: url(../image/engineer-sprite-horizontal.png);
  background-size: 50px 11px;
  width: 50px;
  height: 11px;
  animation: animate-transform-sprite-engineer 400ms steps(5) infinite;
}

.sprite.engineer:not(.enemy).building {
  margin-top: 23px;
}

body.bnb .engineer:not(.enemy).beavis,
body.bnb .engineer:not(.enemy).butthead {
  height: 30.66px;
}

body.bnb .engineer:not(.enemy).beavis .transform-sprite {
  /* https://www.spriters-resource.com/genesis_32x_scd/beavisandbutthead/sheet/44963/ */
  background-image: url(../image/beavis-walking.png);
  animation: animate-transform-sprite-engineer-bnb 800ms steps(10) infinite;
}

body.bnb .engineer:not(.enemy).butthead .transform-sprite {
  /* https://www.spriters-resource.com/genesis_32x_scd/beavisandbutthead/sheet/44963/ */
  background-image: url(../image/butthead-walking.png);
  animation: animate-transform-sprite-engineer-bnb 800ms steps(10) infinite;
}

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

body.bnb .engineer:not(.enemy).beavis .transform-sprite,
body.bnb .engineer:not(.enemy).butthead .transform-sprite {
  width: 143.33px;
  height: 30.66px;
  background-size: 143.33px;
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
}

body.bnb.is_safari .engineer:not(.enemy).beavis .transform-sprite,
body.bnb.is_safari .engineer:not(.enemy).butthead .transform-sprite {
  /* Safari does better with this here, ironically, vs. optimize-contrast */
  image-rendering: optimizeQuality;
}

body.bnb .engineer:not(.enemy).beavis.stopped,
body.bnb .engineer:not(.enemy).butthead.stopped {
  /* "whilst headbanging" */
  width: 18.25px;
  height: 32px;
  /* correction for positioning */
  margin-top: -1.5px;
}

body.bnb .engineer:not(.enemy).beavis.stopped .transform-sprite {
  /* https://www.spriters-resource.com/genesis_32x_scd/beavisandbutthead/sheet/44963/ */
  background-image: url(../image/beavis-headbang.png);
}

body.bnb .engineer:not(.enemy).butthead.stopped .transform-sprite {
  /* https://www.spriters-resource.com/genesis_32x_scd/beavisandbutthead/sheet/44963/ */
  background-image: url(../image/butthead-headbang.png);
}

body.bnb .engineer:not(.enemy).beavis.stopped .transform-sprite,
body.bnb .engineer:not(.enemy).butthead.stopped .transform-sprite {
  background-size: 73px 32px;
  width: 73px;
  height: 32px;
  animation: animate-transform-sprite-engineer-headbang-bnb 400ms steps(4) infinite;
}

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

.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);
}

.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-size: 14px 100px;
  background-position: 0px -60px;
}

.parachute-infantry.enemy .transform-sprite {
  background-image: url(../image/parachute-infantry-enemy.png);
}

.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;
}

.sprite:not(.balloon).exploding.smart-missile-tracking:not(.radar-item)::after,
.sprite:not(.balloon).exploding.smart-missile-tracking-active:not(.radar-item)::after,
.sprite:not(.balloon).exploding.smart-missile-tracking-removal:not(.radar-item)::after {
  top: auto;
  /* reposition so tracking dot stays in the right place - bunker is normally 25px in height */
  bottom: 0px;
}

.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.first-time {
  margin-top: -1px;
}

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

.helicopter.respawning-active .transform-sprite,
#world.blurred.no-blur .helicopter.respawning-active .transform-sprite {
  transition: all 1.5s ease-in-out;
  /* filter: blur() may be applied during game start */
  transition-property: top, filter;
  top: 0px;
}

.helicopter.rotated-left,
.helicopter.rotated-right {
  background-image: url(../image/helicopter-rotating.png) !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;
}

.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);
  width: 220px;
  height: 18px;
  background-size: 220px 18px;
  animation: animate-transform-sprite-helicopter-enemy 520ms steps(4) infinite;
}

.helicopter.enemy.facing-left .transform-sprite {
  /* updated sprite */
  background-image: url(../image/helicopter-enemy-sprite-horizontal-facing-right.png);
}

.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: 15px;
  height: 4px;
  background-image: url(../image/smart-missile.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-size: 15px 4px;
  /* a little transition on missile direction changes, as vX/vY can be pretty much immediate */
  transition: transform 0.2s ease-none;
  opacity: 1;
}

#battlefield .smart-missile:not(.armed),
.smart-missile.expired {
  /* blink initially, until armed - and when 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-size: contain;
  background-position: 50% 50%;
}

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

#world.banana-mode #mobile-controls li.weapons-item a.smart-missile {
  background-position: 50%;
  background-size: 42%;
}

#world.rubber-chicken-mode #mobile-controls li.weapons-item a.smart-missile {
  background-position: 50%;
  background-size: 69%;
}

#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: 9px;
  height: 108px;
  background: transparent url(../image/smoke-sprite.png) no-repeat 0px 0px;
  background-size: 9px 108px;
}

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

.base .transform-sprite {
  width: 520px;
  height: 26px;
  background-image: url(../image/base-sprite-horizontal.png);
  background-size: 520px 26px;
  animation: animate-transform-sprite-base 1000ms steps(5) alternate infinite;
}

#battlefield.snow .base .transform-sprite {
  width: 510px;
  height: 25px;
  background-image: url(../image/base-sprite-horizontal-snow.png);
  background-size: 510px 25px;
  animation: animate-transform-sprite-base-snow 1000ms steps(5) alternate infinite;
}

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

#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-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);
}

#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);
  width: 66px;
  height: 28px;
  background-size: contain;
}

#battlefield.snow .super-bunker {
  /* snow version */
  background-image: url(../image/super-bunker_mac_snow.png);
  background-size: contain;
}

.barb-wire {
  width: 18px;
  height: 11px;
  background-image: url(../image/barb-wire.png);
  background-size: contain;
}

.cactus {
  width: 12px;
  height: 17px;
  background-image: url(../image/cactus.png);
  background-size: contain;
}

.cactus2 {
  width: 18px;
  height: 25px;
  background-image: url(../image/cactus2.png);
  background-size: contain;
}

.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);
  width: 324px;
  height: 7px;
  animation: animate-transform-sprite-landing-pad 1000ms steps(4) infinite;
}

.sand-dune {
  width: 51px;
  height: 8px;
  background-image: url(../image/sand-dune.png);
}

.sand-dunes {
  width: 73px;
  height: 11px;
  background-image: url(../image/sand-dunes.png);
}

.checkmark-grass {
  width: 15px;
  height: 10px;
  background-image: url(../image/checkmark-grass.png);
}

.flower {
  width: 11px;
  height: 8px;
  background-image: url(../image/flower.png);
}

.flowers {
  width: 34px;
  height: 11px;
  background-image: url(../image/flowers.png);
}

.flower-bush {
  width: 18px;
  height: 13px;
  background-image: url(../image/flower-bush.png);
}

.tree {
  width: 26px;
  height: 27px;
  background-image: url(../image/tree.png);
}

.tumbleweed {
  width: 18px;
  height: 15px;
  background-image: url(../image/tumbleweed.png);
}

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

.palm-tree {
  width: 18px;
  height: 22px;
  background-image: url(../image/palm-tree.png);
}

.rock {
  width: 18px;
  height: 13px;
  background-image: url(../image/rock.png);
}

.rock2 {
  width: 13px;
  height: 11px;
  background-image: url(../image/rock2.png);
}

.grass {
  width: 40px;
  height: 9px;
  background-image: url(../image/grass.png);
}

.gravestone {
  width: 20px;
  height: 12px;
  background-image: url(../image/gravestone.png);
}

.gravestone2 {
  width: 15px;
  height: 12px;
  background-image: url(../image/gravestone2.png);
}

.grave-cross {
  width: 13px;
  height: 10px;
  background-image: url(../image/grave-cross.png);
}

.terrain-item {
  bottom: auto;
  top: 0px;
  /* all these things: rocks, graves, trees, barb wire etc. */
  z-index: 5;
  background-size: contain;
}

.left-arrow-sign,
.right-arrow-sign {
  width: 28px;
  height: 25px;
  z-index: 2; /* ground units go in front of these */
  background-image: url(../image/right-arrow-sign-mac.png);
}

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

.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: 200px;
  height: 15px;
  background-image: url(../image/helicopter-sprite-horizontal.png);
  background-size: 200px 15px;
  animation: animate-transform-sprite-helicopter 520ms steps(4) infinite;
}

.helicopter.facing-left .transform-sprite {
  /* new sprite */
  background-image: url(../image/helicopter-sprite-horizontal-facing-left.png);
}

.turret,
.turret .sub-sprite {
  background: transparent url(../image/turret-sprite.png) 0px 0px no-repeat;
  background-size: 18px 64px;
  background-position: 50% 0px;
  width: 22px; /* 18 + a few pixels for turret rotation */
  height: 15px;
}

.turret.enemy,
.turret.enemy .sub-sprite {
  /* TODO: confirm image / colour for friendly vs. enemy */
  /* background-image: url(../image/turret-enemy.png); */
}

.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: 14px;
  height: 6px;
  z-index: 2;
}

.bomb .sub-sprite {
  background-image: url(../image/bomb.png);
  background-position: 0px 0px;
  background-size: 14px 6px;
}

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

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

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

.bomb.explosion-large .sub-sprite {
  animation: largeexplosion 0.66s steps(10);
  /**
   * "Dirt Explosion" by SrGrafo on DeviantArt
   * https://www.deviantart.com/srgrafo/art/Dirt-Explosion-774442026
   */
  background-image: url(../image/deviantart-Dirt-Explosion-774442026_1024x112.webp);
  background-size: 512px 51px;
  /* default state */
  background-position: -512px 0px;
  /* bottom-align */
  transform-origin: 50% 100%;
  transform: scale3d(0.75, 0.75, 1);
}

.bomb.explosion-large {
  height: 56px;
  width: 51px;
}

#world-wrapper.jammed #radar {
  visibility: hidden;
  display: none; /* better? */
}

#radar .sprite {
  position: absolute;
  background: none;
  top: 0px;
  left: 0px;
  width: 3px;
  height: 3px;
  background-color: rgb(23,160,7);
  border-color: #ccc;
  margin-left: -1.5px;
  /* avoid border color bleed */
  background-clip: padding-box;
  border-radius: 0.5px 0.5px 0px 0px;
  contain: strict;
}

/* .friendly? */
#radar .sprite:not(.helicopter) {
  /**
   * Performance observation -
   * `outline: 0.5px solid #000;` causes repaint in Chrome 110 on most radar items when gunfire happens.
   * filter: drop-shadow() seems to kill performance.
   * box-shadow seems to be OK.
   */
  box-shadow: 0 0 0 0.5px #000;
}

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

#radar .sprite.bunker,
#radar .sprite.super-bunker {
  /* friendly */
  width: 2px;
  height: 3px;
  margin-left: -1px;
  background-color: rgb(23,160,7);
  padding: 0.5px;
  border: 0.5px 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 {
  width: 4.5px;
  margin-left: -2.25px;
  height: 1.33px;
}

#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.bunker.enemy,
#radar .sprite.super-bunker.enemy {
  border-color: rgba(156,159,9, 0.75);
  border-bottom-color: rgb(156,159,9);
}

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

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

#radar .sprite.helicopter {
  width: 0px;
  height: 0px;
  font-size: 0px;
  margin-left: 0.5px;
  margin-bottom: -0.5px;
  background-color: transparent;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  border-left: 2.5px solid rgb(23,160,7);
  outline: none;
}

#radar .sprite.helicopter.local-player {
  animation: blink 0.5s infinite;
}

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

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

#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;
  border-radius: 1px;
}

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

#radar .sprite.infantry,
#radar .sprite.parachute-infantry,
#radar .sprite.engineer {
  width: 1px;
  margin-left: -0.5px;
  height: 2px;
  outline-width: 0.25px;
}

#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;
  outline: none;
}

#radar .sprite.end-bunker {
  border-radius: 1px;
}

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

#radar .sprite.base {
  border-radius: 0.5px 0.5px 0px 0px;
}

#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-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 {
  /* special case */
  background-image: none;
  animation: none;
}

.bunker.exploding,
.bunker.burning {
  /* bunker is normally 52px */
  margin-left: -30px;
  margin-top: -87px;
}

/* special case */
.bunker.exploding,
.bunker.burning {
  /* width: 96px;
  height: 71px; */
  width: 112px;
  height: 112px;
  z-index: 5; /* let nuke show on top of smoke */
  /* outline: 1px solid #ff33ff; */
  /* background-color: #999; */
}

.bunker .sub-sprite.nuke {
  /**
   * Commercial, licensed asset - $1.99 USD.
   * https://infectedtribe.itch.io/pixel-explosion
   * 96 x 71 x 16 frames, 100 ms per frame. spritesheet dimensions: 1536 x 71
   * https://graphicriver.net/item/pixel-explosion-set/15457666
   */
  background-image: url(../image/infectedtribe_itch_io-pixel_explosion.png);
  background-size: 2352px 112px;
  background-position: 112px 0px;
  background-repeat: no-repeat;
  transform-origin: 50% 100%;
  transform: scale3d(0.88, 0.88, 1);
  margin-top: -2px;
  visibility: hidden;
  z-index: 3;
}

.bunker.exploding .sub-sprite.nuke,
.bunker.burning .sub-sprite.nuke {
  /* go go go! */
  animation: nuke 1.5s steps(21);
  animation-fill-mode: forwards;
  visibility: visible;
}

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

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

/* new "generic" explosion */
.ephemeral-explosion {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  background-image: url(../image/explosion_by_tungkann_dam5o19.png);
  background-size: 1400px 100px;
  background-position: 0px 0px;
  /* default state */
  background-repeat: no-repeat;
  animation: ephemeralexplosion 0.75s steps(14);
  animation-fill-mode: forwards; /* Stay on last frame when finished */
  transform-origin: 50% 100%; /* bottom-align */
  transform: translate3d(-50%, -50%, 0) scale3d(0.5, 0.5, 1);
  z-index: 3;
}

@keyframes ephemeralexplosion {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -1400px 0px;
  }
}

.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%;
}

.cornholio {
  /* I am the great Cornholio! */
  display: none;
  width: 12px;
  height: 33.6px;
  /* show in front of bunkers */
  z-index: 1;
  /* hide until visible */
  margin-top: 33.6px;
  transition: margin-top 1s ease-in-out;
}

body.bnb .cornholio {
  display: block;
}

body.bnb .cornholio.visible {
  margin-top: 0px;
}

.cornholio .sub-sprite {
  /* https://www.spriters-resource.com/fullview/44963/ */
  background-image: url(../image/beavis-cornholio.png);
  /* original dimensions / 2.5 */
  width: 36px;
  height: 33.6px;
  background-size: auto 33.6px;
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
}

body.is_safari .cornholio .sub-sprite {
  image-rendering: optimizeQuality;
}

.cornholio.bow-down .sub-sprite {
  /* You must bow down to the almighty bunghole! */
  transform: translate3d(-12px, 0px, 0px);
}

.cornholio.threatening .sub-sprite {
  /* Are you threatening me!? */
  transform: translate3d(-24px, 0px, 0px);
}

.cornholio.hidden .sub-sprite {
  animation: none;
}

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

.bunker.exploding .sub-sprite.rubble-container,
.bunker.burning .sub-sprite.rubble-container {
  top: auto;
  left: 50%;
  bottom: 0px;
  height: 8px;
  /* always stay centered relative to bunker (larger when exploding etc.) */
  width: 52px;
  margin-left: -26px;
  overflow: hidden;
}

.bunker.exploding .sub-sprite.rubble,
.bunker.burning .sub-sprite.rubble {
  position: absolute;
  bottom: 0px;
  left: 0px;
  /* 52px * 3 frames */
  width: 156px;
  height: 8px;
  background-image: url(../image/bunker-burning-sprite-horizontal.gif);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  animation: burninating 0.66s steps(3) infinite;
  /* transition duration set via JS */
  transition: opacity;
}

.bunker.burning-out .sub-sprite.rubble {
  /* gradually hide the burning bits */
  opacity: 0;
}

@keyframes burninating {
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to {
    transform: translate3d(-156px, 0px, 0px);
  }
}

.bunker.burning,
.bunker.dead {
  display: block;
  width: 52px;
  /* room for burning animation */
  height: 8px;
  /* to get 25px height, align with bottom */
  margin-top: 17px;
  margin-left: 0px;
  background-image: url(../image/bunker-dead.png);
  background-position: 50% 100%;
}

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

#bottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: -2.35em;
  font-size: 0.65em;
  padding: 0px;
  color: #666;
}

.sprite.flame {
  background-image: url(../image/tank_flame.png);
  background-size: contain;
  width: 32px;
  height: 18px;
}

.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;
}

body.bnb .sprite.engineer.beavis.building,
body.bnb .sprite.engineer.butthead.building {
  margin-top: 31px;
}

.sprite.ordering {
  contain: layout;
  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: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  border-left: 2.5px solid transparent;
  border-right: 2.5px solid #ccc;
}

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

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

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

#game-fps {
  position: absolute;
  right: 3px;
  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-position: 0px 0px;
}

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

.cloud1,
.cloud2,
.cloud3 {
  left: 0px;
  top: 0px;
  /* clouds hide helicopters. */
  z-index: 5;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-size: contain;
}

.cloud1 {
  background-image: url(../image/cloud-1.png);
  width: 102px;
  height: 29px;
}

.cloud2 {
  background-image: url(../image/cloud-2.png);
  width: 116px;
  height: 28px;
}

.cloud3 {
  background-image: url(../image/cloud-3.png);
  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: 88px;
  left: 0px;
  width: 100%;
  /* single line height */
  height: 13px;
}

#world.tutorial-mode #game-tips {
  /* more space needed for tutorial instructions */
  top: 0px;
  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;
  border-radius: 32px;
}

#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;
}

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

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

body.is-mobile #game-tips .tips-container .tip,
body.is-mobile #game-tips .tips-container .animation-node {
  font-size: 6px;
  line-height: 6px;
}

@media screen and (orientation: portrait) {
  body.is-mobile #game-tips .tips-container .tip,
  body.is-mobile #game-tips .tips-container .animation-node {
    /* even smaller. */
    font-size: 4px;
    line-height: 4px;
  }
}

#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;
}

#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 .tips-container {
  overflow: visible;
}

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

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

@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: -512px 0px;
  }
}

@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 sorta-blink-alt {
  50% {
    background-color: rgba(27, 107, 27, 0.5);
    transform: scale3d(0.9, 0.9, 0.9);
  }
}

@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 jerkingmychain {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: -16px;
  }
}

@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(-200px, 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(-520px, 0px, 0px);
  }
}

@keyframes animate-transform-sprite-base-snow {
  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 pulse {
  from {
    transform: scale3d(0.66, 0.66, 1);
  }
  to {
    transform: scale3d(0.33, 0.33, 1);
  }
}

@keyframes nuke {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -2352px 0px;
  }
}

#tutorial {
  display: none;
}

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

#help {
  position: relative;
  display: none;
  float: right;
  margin-left: 1em;
  margin-right: 1em;
  top: 0.75px;
}

#help.active {
  display: inline-block;
}

body.network #help {
  display: inline-block;
}

body.network:not(.game-started) #help .pipe,
body.network:not(.game-started) #help #game-options-link {
  display: none;
}

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: 0.5rem;
}

/* "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 {
  position: relative;
  /* previously */
  /* min-width: 5% */
  width: 32px;
  /* centering / sizing shenanigans */
  left: -4px;
  padding-right: 5px;
}

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;
}

/* except when BnB, and landscape? */
@media screen and (orientation: landscape) {
  body.is-mobile #player-status-bar .spacer {
    display: inline-block;
  }
}

#bnb-now-playing {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 72%; /* cheap vertical alignment */
  /* note: nested opacity, individual images fade. */
  opacity: 0.75;
  display: none;
}

body.bnb #bnb-now-playing {
  display: block;
}

#bnb-now-playing .pow {
  /* cartoon "pow" outline */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale3d(1.2,1.2,0);
  transition: all 0.5s ease-in-out;
  transition-property: transform, opacity;
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
}

body.is_safari #bnb-now-playing .pow {
  image-rendering: optimizeQuality;
}

#bnb-now-playing .beavis {
  background: transparent url(../image/pow-beavis.webp) 50% 50% no-repeat;
  background-size: 75%;
}

#bnb-now-playing .butthead {
  background: transparent url(../image/pow-butthead.webp) 50% 50% no-repeat;
  background-size: 100%;
}

body.is-mobile #bnb-now-playing .beavis,
body.is-mobile #bnb-now-playing .butthead {
  background-size: contain;
}

#bnb-now-playing.beavis .beavis,
#bnb-now-playing.butthead .butthead {
  opacity: 1;
  transform: scale3d(1,1,1);
}
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 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,
.static-sprite.missile-launcher {
  background-image: url(../image/missile-launcher-static.png);
}

#player-status-bar.enemy .inventory-item a.missile-launcher,
#mobile-controls.enemy li.inventory-item a.missile-launcher {
  background-image: url(../image/missile-launcher-enemy-static.png);
}

#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,
.static-sprite.tank {
  /* TODO: replace with new asset */
  background-image: url(../image/tank-static.png);
}

#mobile-controls.enemy li.inventory-item a.tank,
#player-status-bar.enemy .inventory-item a.tank {
  background-image: url(../image/tank-enemy-static.png);
}

#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,
.static-sprite.van {
  background-image: url(../image/van-static.png);
}

#player-status-bar.enemy .inventory-item a.van,
#mobile-controls.enemy li.inventory-item a.van {
  background-image: url(../image/van-enemy-static.png);
}

#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,
.static-sprite.infantry {
  background-image: url(../image/infantry-static.png);
}

#player-status-bar.enemy .inventory-item a.infantry,
#mobile-controls.enemy li.inventory-item a.infantry {
  background-image: url(../image/infantry-enemy-static.png);
}

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

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

#player-status-bar.enemy .inventory-item a.engineer,
#player-status-bar.enemy .inventory-item a.engineer {
  background-image: url(../image/engineer-enemy-static.png);
}

#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: 300px;
  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-ordering,
#mobile-controls .mobile-controls-weapons {
  position: absolute;
  bottom: 0px;
  /* bottom-align */
  vertical-align: bottom;
  width: 57px;
  overflow: hidden;
}

#mobile-controls li.get-user-attention {
  background-color: rgba(27, 107, 27, 0.45);
  animation: sorta-blink-alt 0.5s ease-in-out alternate infinite;
}

#mobile-controls li.get-user-attention a {
  animation: sorta-blink 0.5s ease-in-out alternate infinite;
}

/* only blink inventory control when requested, if weapons are showing. */
#mobile-controls.inventory_active li.show_inventory_control.get-user-attention,
#mobile-controls.inventory_active li.show_inventory_control.get-user-attention a {
  background-color: inherit;
  animation: none;
}

@media screen and (orientation: portrait) {
  /* mobile, portrait: smaller controls. */
  body.is-mobile #mobile-controls .mobile-controls-ordering,
  body.is-mobile #mobile-controls .mobile-controls-weapons {
    width: 54px;
    /* collapse bullshit whitespace */
    font-size: 0px;
  }
}

/* TODO: make this configurable. */
#mobile-controls .mobile-controls-ordering,
#mobile-controls .mobile-controls-weapons {
  right: 0px;
}

@media screen and (orientation: portrait) {
  /* giant hack, for now */
  body.is-mobile #mobile-controls .mobile-controls-ordering,
  body.is-mobile #mobile-controls .mobile-controls-weapons {
    zoom: 1.25;
    /* left side, by default */
    right: auto;
    left: 0px;
  }
}

@media screen and (orientation: landscape) {
  /* giant hack, for now */
  body.is-mobile #mobile-controls .mobile-controls-ordering,
  body.is-mobile #mobile-controls .mobile-controls-weapons {
    zoom: 2;
  }
  body.is-mobile.notch-at-right #mobile-controls .mobile-controls-ordering,
  body.is-mobile.notch-at-right #mobile-controls .mobile-controls-weapons {
    /* HACKISH: offset for zoom */
    margin-right: calc(env(safe-area-inset-right) / 2);
    left: auto;
    right: 0px;
  }
  body.is-mobile.notch-at-left #mobile-controls .mobile-controls-ordering,
  body.is-mobile.notch-at-left #mobile-controls .mobile-controls-weapons {
    /* HACKISH: offset for zoom */
    margin-left: calc(env(safe-area-inset-left) / 2);
    left: 0px;
    right: auto;
  }

  body.is-mobile.notch-at-left #funds {
    margin-left: 4px !important;
  }

  body.is_standalone.notch-at-left #funds,
  body.is_standalone.notch-at-right #funds {
    /* "home screen" app, iOS Safari */
    margin-left: 24px !important;
  }

  /* #game-fps positioning */
  body.is-mobile #game-status li:last-of-type {
    right: 8px;
  }

  body.is_standalone #game-status li:last-of-type {
    right: 18px;
  }

  /* bottom bar */
  body.is-mobile.notch-at-left #bottom {
    padding-right: 12px;
  }
  body.is-mobile.notch-at-right #bottom {
    padding-right: 16px;
  }
  body.is-mobile #queue {
    left: 28px;
    top: 4px;
  }
}

body.is-mobile.notch-at-left #notification-toasts {
  margin-left: env(safe-area-inset-left) !important;
}

body.is-mobile.notch-at-right #notification-toasts {
  margin-right: env(safe-area-inset-right) !important;
}

#mobile-controls .mobile-controls-weapons,
#mobile-controls .mobile-controls-ordering {
  padding-left: 2px;
  padding-right: 2px;
}

#mobile-controls .mobile-controls-ordering li,
#mobile-controls .mobile-controls-weapons li {
  margin: 0px;
  padding: 0px;
  margin-right: 2px;
  margin-bottom: 2px;
  width: 25px;
}

#mobile-controls li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 25px;
  box-sizing: border-box;
  line-height: 1rem;
  padding: 0px;
  border: 1px dotted rgba(255,255,255,0.15);
  /* border-bottom-color: transparent; */
  vertical-align: middle;
  text-align: center;
  font-size: 7px;
  border-radius: 100%;
  /* microfiche, but OK on mobile. */
  background: transparent url(../image/checkerboard-black-mask-75percent.png);
}

@media screen and (orientation: portrait) {
  #mobile-controls li {
    height: 25px;
  }
}

#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%;
  border-radius: 100%;
}

#mobile-controls li.inventory-item a,
#mobile-controls li.weapons-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.75) !important;
  /* immediately go light. fade on release. */
  transition-duration: 0ms !important;
}

#mobile-controls li span {
  /* text labels */
  /* hidden for now */
  display: none;
  /* TODO: maybe show later on landscape */
  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,
.static-sprite.engineer {
  background-image: url(../image/engineer-static.png);
}

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

#mobile-controls li.weapons-item a.parachute-infantry {
  background-image: url(../image/parachute-infantry-static.png);
  background-size: 39% !important; /* argh */
  background-position: 50% 50%;
}

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

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

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

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

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

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

@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: 80%;
  }

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

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

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

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

#mobile-controls li span.letter-block.show_options,
#mobile-controls li span.letter-block.show_inventory {
  display: block !important;
  top: 0px;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  font-weight: lighter;
  top: 0px;
  color: #666;
  letter-spacing: 0px;
  text-indent: 0px;
}

body:not(.is_safari) #mobile-controls li span.letter-block.show_inventory {
  /* Chrome on Android */
  line-height: 20.5px;
}

#mobile-controls li span.letter-block.show_options {
  font-size: 8px;
  line-height: 25px;
}

@media screen and (orientation: portrait) {
  #mobile-controls li span.letter-block.show_inventory {
    line-height: 23px;
    top: 0.25px;
    left: 0.25px;
  }
}

@media screen and (orientation: landscape) {
  #mobile-controls li span.letter-block.show_inventory {
    top: 1px;
  }
}

/* hide groups of controls until activated */
#mobile-controls li {
  /* visibility: hidden; */
  opacity: 0;
  pointer-events: none;
}

/* show items by category */
#mobile-controls.inventory_active li.inventory-item,
#mobile-controls.weapons_active li.weapons-item {
  opacity: 1;
  pointer-events: unset !important;
  /* ensure stacking order, too. */
  z-index: 2;
}

#mobile-controls li.show_inventory_control {
  /* always active / visible */
  opacity: 1 !important;
  pointer-events: unset !important;
}

#mobile-inventory-controls li {
  transition: opacity 0.1s ease-out;
}

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

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

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

.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-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;
  border: 1px dotted #333;
  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%;
  border: 1px dotted #333;
  background-image: url(../image/checkerboard-black-mask-75percent.png);
}

/* for mobile. */
#pointer {
  position: absolute;
  width: 13px;
  height: 13px;
  top: 0px;
  left: 0px;
  margin: -6.5px 0px 0px -6.5px;
  margin: 0px;
  /* cross image */
  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;
}

#pointer.enabled {
  display: block;
}

body.is-mobile #pointer {
  width: 6.5px;
  height: 6.5px;
  margin: -3.25px 0px 0px -3.25px;
}

#mobile-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 #game-tips .tips-container,
  body.game-paused #mobile-controls,
  body.game-paused #notification-toasts {
    visibility: hidden;
  }
}

#notification-toasts {
  position: absolute;
  top: 104px;
  right: 8px;
  width: 12rem;
  height: 256px;
  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;
}

body.is-mobile #game-prefs-modal {
  /* don't do this on mobile, at least iPads if we can tell. */
  zoom: 1;
}

/* TODO: move this into the prefs JS? */

/* iOS Safari hacks */
@media screen and (orientation: portrait) {
  body.is_iphone #game-prefs-modal {
    zoom: 1.85;
  }
  body.is_iphone.is_standalone #game-prefs-modal {
    /* "home screen"-specific version */
    zoom: 1.75;
  }
}

#game-prefs-submit {
  position: relative;
}

#game-prefs-cancel {
  margin-top: 5px;
  display: none;
}

#game-prefs-modal.is-network #game-prefs-cancel {
  display: inline-block;
}

/* hide once the game has started. */
body.game-started #game-prefs-modal.is-network #game-prefs-cancel {
  display: none;
}

/* volume control */

#game-prefs-modal .range-slider {
  appearance: none;
  width: 50px;
  height: 6px;
  background: transparent;
  border: 0.5px solid #000;
  border-radius: 6px;
  padding: 0px 0.5px;
  outline: none;
  margin-top: -0.5px;
  margin-bottom: 0px;
}

#game-prefs-modal .range-slider::-webkit-slider-thumb {
  appearance: none;
  width: 5px;
  height: 5px;
  background: #000;
  border: none;
  border-radius: 100%;
  cursor: pointer;
}

#game-prefs-modal .range-slider::-moz-range-thumb {
  appearance: none;
  width: 5px;
  height: 5px;
  background: #000;
  border: none;
  border-radius: 100%;
  cursor: pointer;
}

.finder {
  position: absolute;
  top: 80px;
  top: 17%;
  left: 20px;
  border: 0.5px solid #000;
  transform: scale(2.16);
  transform-origin: 0px 0px;
  filter: invert(1);
}

#editor-window-help {
  display: none;
  top: 17%;
  left: 312px;
}

.finder .title-bar {
 position: relative;
 height: 7px;
 overflow: hidden;
 background: rgb(243,243,243);
 border: 1px solid transparent;
 border-left-width: 0px;
 border-right-width: 0px;
 text-align: center;
}

.finder .title-bar-label {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0px);
  background: rgb(243,243,243);
  padding: 0px 3px;
  margin-top: -0.5px;
  text-align: center;
  font-family: Chicago, "FA Sysfont C", courier, sans-serif;
  font-size: 6.5px;
  line-height: 8px;
  white-space: nowrap;
  font-weight: normal;
  color: #000;
}

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

.finder .title-bar-label,
.finder .title-bar-stripes {
  pointer-events: none;
}

.finder.active {
  outline: 0.5px solid #666;
}

.close-button {
  position: absolute;
  z-index: 2;
  top: 0.75px;
  left: 3.75px;
  background: rgb(243,243,243);
  width: 4.5px;
  height: 4.5px;
  border: 0.25px solid #000;
  outline: 0.25px solid rgba(255,255,255,0.67);
  border-radius: 0.25px;
}

.close-button:active {
  background-image: url(../image/apple-close-asterisk.png);
  background-size: contain;
}

.finder .body {
  position: relative;
  border-top: 0.5px solid #000;
  background: rgba(243,243,243, 0.75);
  padding: 1em;
  font-family: geneva, verdana, arial, sans-serif;
  font-size: 5px;
  color: #000;
  /* overflow: auto; */
  overflow: hidden;
  /* min-width: 16em; */
  width: 23em;
}

.finder .body .grid p {
  margin-bottom: 0.75em;
}

.finder .body ul.row {
  position: relative;
  display: block;
  width: 100%;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  font-size: 0px;
}

.finder .body ul.row li {
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  padding: 1px;
  border: 0.25px solid #999;
  text-align: center;
  font-size: 5px;
}

.finder .body ul.row + ul.row li {
  border-top: none;
}

.finder .body ul.row li:not(:last-of-type) {
  border-right: none;
}

#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 helps a bit. */
  scrollbar-width: thin;
}

#game-prefs-modal {
  width: 228px;
  /* sight centering tweak */
  margin-top: -15px;
}

#game-prefs-modal.is-network {
  /* leave room for level preview in radar area */
  margin-top: 0px;
  top: 54%;
}

#game-prefs-modal p {
  padding-top: 1px;
}

#game-prefs-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}

#game-prefs-header .aa-logo {
  width: 161.5px;
  height: 25px;
  margin-top: 3px;
  margin-right: 6px;
  image-rendering: smooth;
  image-rendering: -webkit-optimize-contrast;
}

#game-prefs-header .column {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-self: center;
}

#game-prefs-header .column:last-of-type {
  margin-right: 2px;
}

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

#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-container {
  position: relative;
  /**
   * Scrollbar shenanigans
   * Render small so the scrollbar size is right,
   * then zoom up the inner contents.
   */
  zoom: 0.4;
  max-height: 800px;
  overflow-y: auto;
  /**
   * best we can do for Firefox, which doesn't support zoom
   * and thus scrollbars are larger due to transforms - long story.
   */
  scrollbar-width: thin;
}

body.is_firefox #game-prefs-modal .fieldset-container {
  /* zoom does not work in Firefox. native scrollbar will be large. */
  max-height: 320px;
}

#game-prefs-modal .fieldset-container fieldset {
  /* offset the above zoom, to get back to relative scale of 1 */
  zoom: 2.5;
}

@media screen and (orientation: landscape) {
  /* don't mess with scrollbars, just let the whole body scroll naturally. */
  body.is-mobile #game-prefs-modal .fieldset-container {
    max-height: unset;
  }
}

/**
 * System 7-style scrollbars
 * Hat tip: https://github.com/sakofchit/system.css/ (MIT)
 * https://github.com/sakofchit/system.css/blob/main/LICENSE
 */

#game-prefs-modal .fieldset-container::-webkit-scrollbar {
  width: 22px;
  background-color: #fff;
}

#game-prefs-modal .fieldset-container::-webkit-scrollbar-track {
  /* black checkerboard pattern */
  background: #fff url(data:image/gif;base64,R0lGODlhBAAEAKEBAAAAAP///////////yH5BAEKAAEALAAAAAAEAAQAAAIGBBKGqAkFADs=);
  background-size: 4px 4px;
  width: 10px;
  border-left: 3px solid #000;
  image-rendering: -webkit-optimize-contrast;
}

#game-prefs-modal .fieldset-container::-webkit-scrollbar-thumb {
  width: 20px;
  box-sizing: content-box;
  background-color: #fff;
  border: 2px solid #000;
  border-right: none;
}

#game-prefs-modal .fieldset-container::-webkit-scrollbar-button:horizontal:start:decrement,
#game-prefs-modal .fieldset-container::-webkit-scrollbar-button:horizontal:end:increment,
#game-prefs-modal .fieldset-container::-webkit-scrollbar-button:vertical:start:decrement,
#game-prefs-modal .fieldset-container::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
}

#game-prefs-modal .fieldset-container::-webkit-scrollbar-button:vertical:start {
  background-repeat: no-repeat;
  height: 23.38px;
  background-image: url(../image/icon/scrollbar-up.svg);
}
#game-prefs-modal .fieldset-container::-webkit-scrollbar-button:vertical:start:active {
  background-repeat: no-repeat;
  height: 23.38px;
  background-image: url(../image/icon/scrollbar-up-active.svg);
}
#game-prefs-modal .fieldset-container::-webkit-scrollbar-button:vertical:end {
  height: 23.38px;
  background-image: url(../image/icon/scrollbar-down.svg);
}
#game-prefs-modal .fieldset-container::-webkit-scrollbar-button:vertical:end:active {
  background-repeat: no-repeat;
  height: 23.38px;
  background-image: url(../image/icon/scrollbar-down-active.svg);
}

#game-prefs-modal .fieldset-container::-webkit-scrollbar {
  width: 22px;
  background-color: #fff;
}

#game-prefs-modal a {
  color: #000;
  border-radius: 1px;
}

#game-prefs-modal a:not(.no-hover):hover {
  background-color: #000;
  padding: 0.25px 1px;
  margin: -0.25px -1px;
  color: #fff;
}

.mac-classic fieldset:first-of-type {
  margin-top: 1px;
}

.mac-classic fieldset {
  margin: 4px;
  border: 0.75px solid #000;
}

.mac-classic fieldset legend,
.mac-classic h3 {
  font-family: Chicago, "FA Sysfont C", courier, sans-serif;
  font-size: 7px;
  vertical-align: middle;
}

body.is_safari:not(.is-mobile) .mac-classic b {
  letter-spacing: -0.5px;
}

.mac-classic b {
  letter-spacing: 0px;
}

.mac-classic h3 {
  font-weight: 300;
  margin-top: 0px;
  margin-bottom: 0.5em;
}

.mac-classic ul {
  list-style-type: none;
}

.mac-classic ul,
.mac-classic ul li {
  margin: 0px;
  padding: 0px;
}

.mac-classic ul li {
  margin-top: 1px;
  margin-bottom: 4px;
}

.mac-classic ul.partial-bottom-spacing li {
  margin-bottom: 2px;
}

.mac-classic ul.less-bottom-spacing li {
  margin-bottom: 0px;
}

.mac-classic ul li:last-of-type {
  margin-bottom: 1px;
}

.mac-classic ul li.less-bottom-spacing {
  margin-bottom: 3px;
}

.mac-classic ul li ul li {
  display: inline-block;
  margin-right: 2px;
}

.mac-classic p {
  margin: 0px;
  padding-top: 1px;
  padding-bottom: 3px;
  letter-spacing: -0.12px;
}

.mac-classic .compact,
.mac-classic ul.compact li {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.mac-classic li.inline-option {
  display: inline-block;
  margin-right: 3px;
}

.mac-classic ul li p {
  margin-bottom: 0px;
  padding-bottom: 1px;
  margin-left: 9px;
}

.mac-classic ul li p,
.mac-classic .indented {
  margin-left: 9px;
}

.finder.mac-classic p.non-indented,
.mac-classic .non-indented {
  margin-left: 0px;
}

.mac-classic ul li p.options-heading {
  margin-left: 0px;
}

.mac-classic input,
.mac-classic label {
  vertical-align: middle;
}

.mac-classic input[type="text"] {
  font-size: 6px;
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: 0.5px solid #000;
  padding: 2px;
}

.mac-classic input[type="text"]:focus {
  outline: none;
}

.mac-classic select {
  font-family: Chicago, "FA Sysfont C", courier, sans-serif;
  font-size: 10px;
  font-weight: normal;
  text-indent: 2px;
  margin: 0px;
  /* vertical align shenanigans */
  margin-top: -2px;
  margin-left: 2px;
  padding: 0px;
  padding-right: 2px;
  vertical-align: middle;
  /* look similar to buttons */
  height: 19px;
  border-style: solid;
  border-radius: 2px;
  background: transparent;
  border-width: 0.5px;
  border-style: solid;
  border-color: #999;
  color: #ccc;
}

#game-prefs-modal select {
  font-family: geneva, verdana, arial, sans-serif;
  font-size: 10px;
  color: #000;
  border-color: #000;
  margin-left: 0px;
  margin-top: 1px;
  /* hacks: scale down, after using the larger font size. */
  transform: scale(0.5);
  transform-origin: 0px 0px;
  /* collapse the extra vertical space left, due to the transform */
  margin-bottom: -10px;
}

.mac-classic select:hover,
.mac-classic select:focus,
.mac-classic select:active {
  border-color: #fff;
}

.mac-classic input[type="checkbox"],
.mac-classic input[type="radio"] {
  margin: 0px;
  padding: 0px;
  width: 7px;
  height: 7px;
  margin-top: -1px; /* vertical align w/text */
}

.mac-classic input[type="checkbox"] {
  margin-top: -2px;
}

.mac-classic input[type="radio"],
.mac-classic 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);
}

.mac-classic input[type="checkbox"] {
  border-radius: 1px;
}

.mac-classic input[type="checkbox"]::before,
.mac-classic 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);
  transform-origin: 50% 50%;
  visibility: hidden;
  background: #000;
}

.mac-classic 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-mobile.is_safari .mac-classic input[type="checkbox"]::before {
  margin-top: -1.25px;
  margin-left: -1.25px;
}

body.is_firefox .mac-classic input[type="checkbox"]::before {
  margin-top: -1.8px;
}

.mac-classic input[type="radio"]:checked::before,
.mac-classic input[type="checkbox"]:checked::before {
  visibility: visible;
}

.mac-classic input[type="checkbox"]:active {
  opacity: 0.75;
}

.mac-classic input[type="checkbox"]:active::before {
  transform: scale(0.5);
  opacity: 0.5;
  visibility: visible;
}

body.is_firefox .mac-classic input[type="checkbox"]:active::before {
  margin-left: -0.35px;
  margin-top: -1.75px;
}

.mac-classic input[type="checkbox"]:active,
.mac-classic input[type="checkbox"]:focus {
  background: #ccc;
}

.mac-classic input[type="radio"]:active::before {
  visibility: visible;
  transform: scale(0.4);
  transform-origin: 50%;
}

.mac-classic input[type="radio"]:focus::before {
  animation: pulse 0.5s ease-in-out infinite alternate-reverse;
}

.mac-classic button:disabled,
.mac-classic input[type="radio"]:disabled,
.mac-classic input[type="checkbox"]:disabled {
  opacity: 0.33;
}

.mac-classic input[type="radio"]:focus-visible,
.mac-classic input[type="checkbox"]:focus-visible {
  /* hide outline, because we have the animation */
  outline: none;
}

.mac-classic .label-text {
  font-weight: bold;
}

body.is_firefox .mac-classic .label-text,
body.is_firefox .mac-classic .options-heading {
  letter-spacing: -0.125px;
}

body.is_safari .mac-classic .label-text,
body.is_safari .mac-classic .options-heading {
  letter-spacing: -0.25px; /* :shake_fist: */
}

.finder.mac-classic p {
  margin: 0px;
  padding: 0px;
  margin-top: 0.1rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

#game-prefs-modal.is-host .show-to-guest,
#game-prefs-modal.is-guest .show-to-host {
  /* selective hiding */
  display: none;
}

#game-prefs-modal .network {
  /* hide by default */
  display: none;
}

#game-prefs-modal.is-network .network {
  display: block;
}

/* make room for mac icons */
#game-prefs-modal.is-network #network-options,
#game-prefs-modal.is-network #gameplay-options,
#game-prefs-modal.is-network #traffic-control {
  margin-top: 5px;
}

#game-prefs-modal.is-network .network-icon {
  position: absolute;
  display: inline-block;
  vertical-align: top;
  width: 8px;
  height: 8px;
  background-image: url(../image/win95-networking-icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 2px 0px;
  /* shenanigans to hide the through-line */
  padding-left: 3px;
  padding-right: 2px;
  /* match #game-prefs-modal .body */
  background-color: rgb(243,243,243);
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
}

#game-prefs-modal.is-network .network-icon-inline {
  position: relative;
  background-size: 6px 6px;
  background-position: 0px 0px;
  padding: 0px;
  background-color: transparent;
  vertical-align: middle;
  margin-bottom: -2px; /* avoid messing up the line height */
}

#game-prefs-modal.is-network .hide-if-network {
  display: none;
}

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.25rem;
  min-width: 1.75rem;
  cursor: pointer;
}

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;
}

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 2px #000;

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

button:not(:disabled):active,
button.primary:not(:disabled):active {
  background-color: #000;
  color: #fff;
}

button.attention:not(:active) {
  animation: button-blink 1s steps(2) infinite;
}

@keyframes button-blink {
  /**
   * This is generally considered bad form, evil UX/UI,
   * and you should never do it.
   * ...Except in this one specific case, of course. 😇
   */
  from {
    box-shadow:
    0 0 0 0.5px #fff,
    0 0 0 2px #000;
  }
  to {
    box-shadow: 0 0 0 4px rgb(243,243,243), 0 0 0 2px rgb(243,243,243);
    border-color: transparent;
  }
}

.mac-system-waiting {
  /**
   * Hat tip: https://impossiblue.github.io/log/150406/index.html
   */
  /* image/apple-watch.gif */
  display: inline-block;
  width: 5.5px;
  height: 8px;
  background-image: url(../image/apple-watch.gif);
  background-size: 5.5px 8px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin-bottom: -1.75px;
  padding-left: 1px;
}

.mac-system-spinner {
  /* Hat tip: https://apple.stackexchange.com/questions/407893/where-are-are-the-counting-hand-cursors-used-in-macos */
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-bottom: -1px;
  margin-right: 1px;
  background-image: url(../image/mac-system-spinner.gif);
  background-size: contain;
  background-repeat: no-repeat;
}

#lock-step-indicator {
  display: none;
}

/* game menu screen */

#game-menu button.large {
  background: #009900;
  color: #fff;
  background: #eee;
  color: #333;
  font-size: 10px;
  line-height: 10px;
  padding: 4px 8px;
  vertical-align: middle;
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
}

#game-menu button.game-start {
  background: #009900;
  color: #fff;
  border-color: transparent;
  text-shadow: 0.5px 0.5px rgba(0,0,0,0.25);
}

#game-menu button.large.game-start:hover {
  color: #fff;
  background-color: #00aa00;
  filter: drop-shadow(0px 0px 3px #99ff99);
}

#game-menu button.large.game-start:active {
  filter: drop-shadow(0px 0px 1.5px #99ff99);
}

#game-menu button.large,
#game-menu .cta:not(label) {
  border: 1px solid transparent;
  transition: transform 0.05s;
  transition-property: background-color, color, filter, text-shadow, transform;
}

#game-menu button.large:hover {
  filter: drop-shadow(0px 0px 3px #fff);
  background: #fff;
}

#game-menu button.large:active {
  background: #ddd;
  filter: drop-shadow(0px 0px 1.5px #fff);
}

#game-menu button.large:active,
#game-menu .cta:not(label):active {
  transform: scale3d(0.9, 0.9, 1);
  transform-origin: 50% 50%;
}

/* 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;
}

/* "DOMFetti" - DOM confetti effect */

#domfetti-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* initially hidden, shown only with active explosions */
  display: none;
  pointer-events: none;
  filter: none;
}

.zone-post {
  width: 2px;
  margin-left: -1px;
  margin-bottom: -1px;
  height: 6px;
  border-radius: 1px;
  z-index: 4;
  bottom: 0px;
  background: rgb(135,84,0);
  overflow: visible !important;
  contain: layout !important;
  pointer-events: none;
}

.zone-flag {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 4;
  font-size: 4px;
  line-height: 4px;
  vertical-align: middle;
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 1px;
  padding: 1px;
  text-align: center;
  background: rgba(0,192,0,0.75);
  pointer-events: none;
}

body.edit-mode .sprite .zone-flag {
  top: 1px;
  left: 1px;
  border-radius: 2px;
}

.sprite.infantry .zone-flag {
  font-size: 3px;
}

.zone-post .zone-flag {
  top: 0px;
  left: 50%;
  font-size: 6px;
  line-height: 6px;
  padding: 1px 3px;
  transform: translate3d(-50%, -100%, 0);
}

button .network-icon {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-bottom: -2px;
  background: transparent url(../image/win95-networking-icon.png);
  background-size: contain;
}

#network-status {
  display: none;
}

#lights {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 10px;
  overflow: hidden;
  vertical-align: middle;
}

#lights .sub-sprite {
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  width: 64px;
  height: 10px;
  opacity: 0.75;
  background: transparent url(../image/lights.exe.png);
  will-change: transform;
}

.debug-rect:hover {
  outline: 1px solid #fff;
  background: rgba(0,0,0,0.75);
  z-index: 10;
}

#message-box {
  position: absolute;
  display: none;
  bottom: 0px;
  left: 25%;
  height: 13px;
  margin-bottom: -2px;
  text-align: center;
  width: 50%;
  z-index: 2;
}

#message-form {
  display: inline-block;
  width: 50%;
}

#message-form-input {
  display: block;
  width: 100%;
  margin: 0px;
  padding: 2px;
  background: rgba(0,0,0,0.9);
  border: 0.5px solid #339933;
  font-size: 7px;
  color: #33cc33;
  text-align: center;
}

#message-form-input:focus {
  outline: none;
  background-color: #006600;
}

#message-form-input::placeholder {
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder */
  color: #009900;
}

#network-options-chat-box {
  border: 0.5px solid #999;
  border-bottom: none;
}

#network-options-chat-scroll {
  position: relative;
  padding: 3px;
  max-height: 10em;
  overflow-y: auto;
  scrollbar-width: thin;
  border-color: #999;
}

#game-prefs-modal #network-chat-input {
  border-color: #999;
  border-radius: 0px;
}

/* grey out everything that isn't "exempt" and still available in-game within a shared network fieldset. */
#game-prefs-modal fieldset.sync-over-network.faded legend:not(.allow-in-game-updates),
#game-prefs-modal fieldset.sync-over-network.faded > ul > li:not(.allow-in-game-updates) {
  opacity: 0.67;
}

#game-prefs-modal fieldset.sync-over-network.faded-exclude-legend legend,
#game-prefs-modal fieldset.sync-over-network.faded > ul > li.allow-in-game-updates {
  opacity: 1;
}

/* ignore events on sub/transform sprites, and explosions */
body.edit-mode #battlefield .sprite:not(.sub-sprite):not(.transform-sprite):not(.ephemeral-explosion):not(.shrapnel):not(.gunfire):not(.helicopter):not(.smoke) {
  pointer-events: unset;
}

/* ignore events on certain "non-moveable" sprites */
body.edit-mode #battlefield .sprite:not(.end-bunker):not(.base):not(.exploding):hover { 
  outline: 1px solid #999;
  border-radius: 3px;
}

body.edit-mode #battlefield .sprite.selected:not(.exploding) {
  /* override :not(), ugh. */
  outline: 1px solid #009900 !important;
  /* background-color: #006600; */
  border-radius: 3px;
}

body.edit-mode #battlefield .sprite.newly-added-sprite,
body.edit-mode #battlefield .terrain-item {
  transition: margin ease-out 0.25s;
}

#battlefield .terrain-item.dynamically-added {
  transition: margin ease-in-out 0.75s;
}

body.edit-mode #battlefield .sprite.tank,
body.edit-mode #battlefield .sprite.newly-added-sprite.tank {
  /* annoying pixel shift */
  margin-top: -2px;
}

body.edit-mode #battlefield .sprite.newly-added-sprite {
  margin-top: 0px;
}

body.edit-mode #battlefield .terrain-item {
  margin-bottom: 0px;
}

body.edit-mode #battlefield .sprite.submerged,
body:not(.edit-mode) #battlefield .terrain-item.submerged,
body:not(.gravestones_helicopters) #battlefield .terrain-item.gs_helicopter,
body:not(.gravestones_infantry) #battlefield .terrain-item.gs_infantry,
body:not(.gravestones_vehicles) #battlefield .terrain-item.gs_vehicle {
  margin-top: 27px !important;
}

body.edit-mode #battlefield .terrain-item.submerged {
  margin-bottom: -27px;
}

body.edit-mode #battlefield {
  cursor: grab;
}

#battlefield #cutoff-line {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 0px;
  margin-bottom: -1px;
  border-top: 0.75px dotted #666;
  pointer-events: none;
  transition: height 0.25s ease-in-out;
  transition-property: height, margin;
}

#battlefield #cutoff-line.active {
  height: 32px;
  margin-bottom: 0px;
  pointer-events: initial;
}

#editor-window {
  display: none;
}

#editor-window .grid {
  position: relative;
}

#editor-window ul.inline-list {
  margin: 0px;
  padding: 0px;
  padding-bottom: 1em;
}

#editor-window ul.inline-list li {
  display: inline-block;
  min-width: 11em;
  margin-bottom: 0px;
}

#marquee {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 0px;
  opacity: 0;
  transition: opacity 0.125s ease-out;
  /* TODO: GPU */
  background: rgba(33, 99, 33, 0.25);
  border: 1px solid #339933;
  /* important: events need to fall through this, so JS sees clicks underneath. */
  pointer-events: none;
}

#editor-window .static-sprite {
  background-size: contain;
  background-position: 100% 50%;
  background-repeat: no-repeat;
}

#editor-window .static-sprite.default {
  width: 16px;
  height: 16px;
  background-image: url(../image/icon_savegame.png);
}

#editor-window .static-sprite.balloon {
  width: 19px;
  height: 8.5px;
  /* TODO: balloon-static.png? */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAiBAMAAAAHRyIyAAAAD1BMVEUAAAAAAADa2tqzh1SHVAC3ExoMAAAAAXRSTlMAQObYZgAAAKVJREFUeF6t1OEJxCAMQGGzQd4KrpAV3H+mM1BziJjLQd8/5SOUorZ3E9BtGW37ANsy2vd7R2MS2Dc8DQYx6WQsZubjZCOb1cWY/M54mCFg19DFSBnBLAutMZz9UmOUmRMyM5XRpMYapMxVLzOh39mIb6PG8h/iavYPu7jxGDOKTBsOAE7hxUFyhqRMz0MeYByH3LncmTozK11As/w6lx6H+lPzfh8GtaYB2nfp/AAAAABJRU5ErkJggg==);
  background-size: contain;
  background-repeat: no-repeat;
}

#editor-window .static-sprite.cloud {
  background-image: url(../image/cloud-1.png);
  width: 34px;
  height: 10px;
}

#editor-window .static-sprite.landing-pad {
  /* TODO: landing-pad-static.png? */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAHCAYAAABwWKHcAAAAXklEQVR4Ae3QgQXAUAyE4X/IN1u26gJdJpXHVdS1FIAcH0LAD5Bl72QDmbVlUaMaIORRfoWcgGpG0fEecuYCdqhyRNwAb/hOa6180JMxXC9aZfvgDaDRTEzVH/EZ7wKYR/MjFUCThgAAAABJRU5ErkJggg==);
  background-size: contain;  
  width: 40.5px;
  height: 3.5px;
}

#editor-window .static-sprite.turret {
  /* width: 18px, height: 15px; */
  width: 12px;
  height: 10px;
  /* TODO: turret-static.png? */
  background: url(data:image/png;base64,R0lGODlhEgAPAPIEAAAAAKpVAaqqAqqqqv///wAAAAAAAAAAACH5BAUKAAQALAAAAAASAA8AAAM0SLoEDixGMASUGIhw8dydt2ic+JXmCKaKA4YeFcxwttEsiZsP7YgOTu83Cc6OvhAAyTxeEgA7);
  background-position: 50% 0px;
  background-size: contain;
  background-repeat: no-repeat;
}

#active-sprite {
  position: absolute;
  bottom: 0px;
  right: 0px;
  filter: invert(1);
  height: 12px;
  width: 32px;
}

#editor-clipboard {
  display: none;
}

#editor-clipboard.active {
  display: inline-block;
}

#aa ul.inline-list {
  display: inline-block;
}

#aa ul.inline-list li {
  display: inline-block;
}

#aa ul.inline-list li:not(:first-of-type) {
  margin-left: 0.5em;
}
#battlefield video {
  pointer-events: none;
}

#tutorial-window {
  display: none;
  transform: scale(1) translate(-50%, -50%);
  transform-origin: 0px 0px;
  top: 50%;
  left: 50%;
}

#world.tutorial-mode #tutorial-window {
  display: block;
  opacity: 0;
  transition: opacity 1s ease-in;
}

#world.tutorial-mode #tutorial-window.active {
  opacity: 1;
}

body.game-paused #tutorial-window {
  display: none !important;
}

@media screen and (orientation: landscape) {
  /* scale up a bit; center of screen, avoid The Notch and such. */
  body.is-mobile #tutorial-window {
    left: 50%;
    top: 140px;
    transform: scale(1.5) translate(-50%, 0px);
    transform-origin: 0px 0px;
  }
}

@media screen and (orientation: portrait) {
  /* leave room for notifications. */
  body.is-mobile #tutorial-window {
    top: 180px;
  }
}

#tutorial-window .title-bar {
  image-rendering: smooth;
  image-rendering: -webkit-optimize-contrast;
}

#tutorial-window .body {
  min-width: 25em;
}

#tutorial-window .body img {
  filter: invert(1);
  vertical-align: middle;
}

#tutorial-window .body h3 img {
  vertical-align: top;
}

#tutorial-window .body p {
  margin-left: 0px;
  margin-right: 0px;
}

#tutorial-window .body p:not(:last-of-type) {
  margin-bottom: 3px;
}

#level-preview {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
}