/*

                                         ████▙   ▀████▌████▙  ▀█████   █████▀ ▄██████▄ ▀████▌████▙         ████▙   ▀█████▀    ▀█████▀     ▀████▐███▋▀█████▀ ▀█████▀ 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 {
  font-display: swap;
  /* https://www.jetbrains.com/lp/mono/ */
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  src: url(../font/JetBrainsMono/JetBrainsMono-Regular.woff2) format('woff2');
}

@font-face {
  font-display: swap;
  /**
   * font/DeValencia/README.txt
   * https://www.behance.net/manuelfcg
   */
  font-family: de_valenciaregular;
  font-style: normal;
  font-weight: 400;
  src: url(../font/DeValencia/de_valencia.woff2) format('woff2');
}

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

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

body,
input {
  /* Classic Mac OS-style "chicago" by default, with an array of safe fallbacks. */
  font-family: FA Sysfont C, JetBrains Mono, Menlo, Monaco, SF Mono,
    Lucida Console, Terminal, monospace;
}

body {
  /* who knows, for IE */
  -ms-interpolation-mode: nearest-neighbor;
  /* font trickery */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  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; /* deprecated. */
  image-rendering: -webkit-optimize-contrast;
  /* non-standard, but quite nice under Firefox */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  /* more scroll aversion */
  overflow: hidden;
}

body.is_safari:not(.is-mobile) {
  /**
   * Safari seems to rasterize before transform()-based scaling of text and images,
   * so things are soft and blurry. So be it; optimize image quality, vs. pixelated.
   */
  image-rendering: optimizeQuality;
}

/**
 * But wait! Not only do you get the Ginsu knife...
 * Wanna see some tricks? Here are some incredible hacks in CSS.
 * 2x parts of the document via zoom, then transform-scale down to 0.5 to keep things sharp.
 */
body.is_safari:not(.is-mobile) #top-bar {
  zoom: 2;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale3d(0.5, 0.5, 1);
  transform-origin: 0 0;
  width: 200%;
}

body.is_safari:not(.is-mobile) #world-overlay {
  zoom: 2;
  height: 200%;
  top: 17px;
  transform: scale3d(0.5, 0.5, 1);
  transform-origin: 0 0;
  width: 200%;
}

body.is_safari:not(.is-mobile) #world.tutorial-mode #tutorial-window {
  zoom: 2;
  transform: scale3d(0.5, 0.5, 1) translate(-50%, -50%);
  transform-origin: 0 0;
}

body.is_safari:not(.is-mobile).game-paused #game-paused {
  /* render 2x text, then scale down. */
  zoom: 2;
  transform: scale3d(0.5, 0.5, 1) translate(-50%, 0);
  width: 200%;
}

body.is_safari:not(.is-mobile) #help {
  font-size: 2rem;
  top: 1px;
  margin-right: 0.25em;
  margin-right: 8px;
  transform: scale3d(0.25, 0.25, 1);
  transform-origin: 100% 0;
}

body.is_safari:not(.is-mobile) #player-status-bar,
body.is_safari:not(.is-mobile) .sprite {
  /* Safari: given rasterization, keep things pixelated and sharp for sprites. */
  image-rendering: pixelated;
}

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

#aa {
  cursor: crosshair;
  cursor: url(https://github.com/GameSphere-MultiPlayer/GameSphere/assets/56786344/38f60723-c652-4f9e-8b43-0af658f2dc47), crosshair;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

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

#world-overlay {
  background: rgba(27, 107, 27, 0.45);
  background-image: url(https://github.com/GameSphere-MultiPlayer/GameSphere/assets/56786344/e357d108-3372-4331-95f9-fcb3c7b373e3);
  background-size: 64px;
  height: 100%;
  image-rendering: optimizeSpeed;
  left: 0;
  position: absolute;
  top: 34px;
  transform: scale3d(1, 1, 1);
  width: 100%;
  z-index: 10;
}

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

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

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

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

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

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

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

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

#logo {
  /* 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;
  border-top: 12px solid #444;
  height: 67px;
  /* Chrome prefers "auto" and renders more nicely this way. So be it. */
  image-rendering: auto;
  left: 50%;
  /* -ve margins for centering; will scale */
  margin-left: -195.5px;
  margin-top: -33.5px;
  opacity: 0;
  padding-top: 20px;
  position: absolute;
  top: 27%;
  transition: all 0.5s ease-in-out;
  /* hat tip: https://cubic-bezier.com/#.36,.12,.32,1.2 */
  transition-timing-function: cubic-bezier(.36, .12, .32, 1.2);
  transition-property: transform, scale, opacity;
  transform: scale3d(0.75, 0.5, 1);
  width: 391px;
  z-index: 11;
}

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

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

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

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

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

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

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

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

#game-menu h2 {
  border-top: 0.5px solid #be7832;
  color: #e19632;
  font-size: 10px;
  font-weight: 400;
  padding-top: 0.5em;
  position: relative;
  /* ensure this clips the BnB overlay, when showing */
  z-index: 10;
}

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

body.is_safari #game-menu label {
  padding-bottom: 2.5px;
  padding-top: 1px;
  top: 0;
}

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-position: calc(100% - 8px) 70%;
  background-repeat: no-repeat;
  background-size: 8px;
  border-color: #fff;
  border-radius: 3px;
  padding-right: 32px;
  text-indent: 8px;
}

body.is_safari #game-menu select:active,
body.is_safari #game-menu select:focus {
  /* evil, I know. */
  outline: none;
}

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

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

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

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

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

#game-menu .cta:focus,
#game-menu .cta:hover {
  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'] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* background-color only for content */
  background-clip: content-box;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 50%;
  /* create custom radio button appearance */
  display: inline-block;
  height: 1em;
  margin: 0;
  padding: 2px;
  position: relative;
  top: 0.5px;
  transform: scale(0.8);
  transform-origin: top;
  vertical-align: middle;
  width: 1em;
}

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

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

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

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

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

#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;
  pointer-events: none;
  vertical-align: bottom;
}

#exit {
  display: none;
}

#exit.visible {
  display: inline;
}

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

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

#world-wrapper {
  background: #000;
  /* mac style */
  border-bottom: 2px solid #875400;
  font-size: 11px;
  height: 384px;
  left: 0;
  position: absolute;
  top: 0;
  /* for initial game fade */
  transition: filter 0.5s ease-in;
  width: 100%;
}

#game-status-bar {
  border: 1px solid #17a007;
  border-left: none;
  border-right: none;
}

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

/* nested in #player-status-bar */
#spinner {
  animation: rotating3d 2s linear infinite;
  /* 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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4LjkyMSA5LjYzYS4zMjcuMzI3IDAgMCAwLS4yMTgtLjEzbC0xLjkwNy0uMjkyYTYuMjg0IDYuMjg0IDAgMCAwLS40MjctMS4wMmMuMTI1LS4xNzQuMzEyLS40MTkuNTYyLS43MzUuMjUtLjMxNi40MjctLjU0Ny41MzItLjY5M2EuNDAxLjQwMSAwIDAgMCAuMDgzLS4yNC4zMzYuMzM2IDAgMCAwLS4wNzMtLjIyOGMtLjI1LS4zNTUtLjgyMy0uOTQ1LTEuNzE5LTEuNzcxYS40MDIuNDAyIDAgMCAwLS4yNi0uMTA0LjMzOC4zMzggMCAwIDAtLjI1LjA5M2wtMS40OCAxLjExNWE2LjUxNCA2LjUxNCAwIDAgMC0uOTM3LS4zODZsLS4yOTEtMS45MTdhLjMwOS4zMDkgMCAwIDAtLjEyLS4yMjQuMzkzLjM5MyAwIDAgMC0uMjU2LS4wODhIOS44NDdjLS4yIDAtLjMyNi4wOTctLjM3NS4yOTEtLjA5LjM0Ny0uMTkuOTkzLS4zMDIgMS45MzdhNS45ODIgNS45ODIgMCAwIDAtLjk0OC4zOTZMNi43ODUgNC41MmEuNDQzLjQ0MyAwIDAgMC0uMjcxLS4xMDRjLS4xNTMgMC0uNDguMjQ4LS45ODQuNzQ0LS41MDQuNDk3LS44NDYuODctMS4wMjcgMS4xMmEuNDM5LjQzOSAwIDAgMC0uMDk0LjI0YzAgLjA4My4wMzUuMTY2LjEwNC4yNS40NjYuNTYyLjgzNyAxLjA0MSAxLjExNSAxLjQzN2E1LjE0IDUuMTQgMCAwIDAtLjQwNi45NTlsLTEuOTM3LjI5MWEuMzE0LjMxNCAwIDAgMC0uMTk4LjEzNi40MDEuNDAxIDAgMCAwLS4wODQuMjR2Mi4zMTJjMCAuMDkuMDI4LjE3Mi4wODQuMjQ1YS4zMjcuMzI3IDAgMCAwIC4yMTguMTNsMS45MDcuMjgyYy4wOTcuMzQuMjQuNjg0LjQyNyAxLjAzYTIxLjk4IDIxLjk4IDAgMCAxLS41NjMuNzM1Yy0uMjUuMzE2LS40MjcuNTQ3LS41My42OTJhLjQwMi40MDIgMCAwIDAtLjAxMS40OGMuMjcuMzc1Ljg0My45NTggMS43MTkgMS43NWEuMzU5LjM1OSAwIDAgMCAuMjYuMTE0LjM3NS4zNzUgMCAwIDAgLjI2LS4wOTNsMS40Ny0xLjExNWMuMjg0LjE0Ni41OTcuMjc0LjkzNy4zODZsLjI5MiAxLjkxN2EuMzEuMzEgMCAwIDAgLjEyLjIyNC4zOS4zOSAwIDAgMCAuMjU1LjA4OGgyLjMxM2MuMjAxIDAgLjMyNi0uMDk3LjM3NS0uMjkyLjA5LS4zNDcuMTktLjk5My4zMDItMS45MzdhNS45MiA1LjkyIDAgMCAwIC45NDgtLjM5NmwxLjQzNyAxLjEyNmEuNTEuNTEgMCAwIDAgLjI3MS4wOTNjLjE1MyAwIC40OC0uMjQ2Ljk4LS43NC41LS40OTIuODQzLS44NjggMS4wMy0xLjEyNWEuMzQ3LjM0NyAwIDAgMCAuMDk0LS4yMzkuNDAyLjQwMiAwIDAgMC0uMTA1LS4yNmMtLjUtLjYxMi0uODcxLTEuMDktMS4xMTQtMS40MzhhNi42OCA2LjY4IDAgMCAwIC40MDYtLjk0OGwxLjkyNy0uMjkxYS4zMTguMzE4IDAgMCAwIC4yMDgtLjEzNi40MDIuNDAyIDAgMCAwIC4wODMtLjI0VjkuODc0YS4zOTMuMzkzIDAgMCAwLS4wODMtLjI0NG0tNi4wMzEgMy4yNjVhMi41NyAyLjU3IDAgMCAxLTEuODg2Ljc4MiAyLjU3IDIuNTcgMCAwIDEtMS44ODUtLjc4MiAyLjU3IDIuNTcgMCAwIDEtLjc4MS0xLjg4NWMwLS43MzYuMjYtMS4zNjUuNzgtMS44ODZhMi41NyAyLjU3IDAgMCAxIDEuODg2LS43ODFjLjczNyAwIDEuMzY1LjI2IDEuODg2Ljc4MS41Mi41MjEuNzgxIDEuMTUuNzgxIDEuODg2YTIuNTcgMi41NyAwIDAgMS0uNzgxIDEuODg1Ii8+PC9zdmc+)
    no-repeat 0 0;
  background-size: contain;
  display: none;
  height: 12px;
  opacity: 0.67;
  /* gear spinner */
  position: absolute;
  right: 8px;
  top: 12px;
  width: 12px;
}

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

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

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

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

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

body.is_safari:not(.is-mobile) #funds-count {
  margin-left: -2px;
  /* safari 2x zoom hacks */
  margin-top: 0;
}

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

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

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

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

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

body.is_safari:not(.is-mobile) #queue {
  /* zoom shenanigans */
  top: 2px;
}

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

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

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

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

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

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

#queue .queue-item.complete {
  color: #999;
  filter: grayscale(0);
}

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

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

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

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

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

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

#radar-container {
  background: #0e360e;
  background-image: url(https://github.com/GameSphere-MultiPlayer/GameSphere/assets/56786344/e357d108-3372-4331-95f9-fcb3c7b373e3);
  background-size: 64px;
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
  overflow: hidden;
  position: relative;
}

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

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

#radar {
  filter: none;
  overflow: hidden;
  transition: filter 0.75s ease-in-out;
}

#radar,
#radar-jammed-overlay {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#radar-jammed-overlay {
  height: 100%;
  pointer-events: none;
  z-index: 11;
}

#radar-jammed-overlay .noise,
body.bnb .tv-noise-overlay {
  background: transparent url(https://github.com/GameSphere-MultiPlayer/GameSphere/assets/56786344/cc78fde9-a4da-4bfc-b03f-9d65507fbef8) 0 0;
  background-size: 250px 250px;
  bottom: 0;
  image-rendering: optimizeSpeed;
  left: -500px;
  opacity: 0;
  /**
   * "TV Static Noise Effect" - Ana Travas
   * https://codepen.io/anatravas/pen/vyOwOZ
   */
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.25s ease-in;
}

#radar-jammed-overlay .noise {
  background-color: rgba(0, 128, 0, 0.05);
  background-image: url(../image/noise-greyscale.png);
  background-size: 150px 150px;
  image-rendering: optimizeSpeed;
}

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

#radar-jammed-overlay.active .noise {
  /* lower "frame rate" on desktop reduce compositing work. */
  animation: noise 1.6s steps(8) infinite both;
  opacity: 1;
}

/**
 * iOS GPUs should be able to handle full-screen overlays,
 * higher "frame rate", and filters for a more subtle effect.
 */

body.is-mobile #radar-jammed-overlay {
  mix-blend-mode: soft-light;
}

body.is-mobile #radar-jammed-overlay .noise {
  animation: noise 0.5s steps(8) infinite both;
  /* tint everything somewhat green. */
  background-color: #060;
  background-image: url(https://github.com/GameSphere-MultiPlayer/GameSphere/assets/56786344/cc78fde9-a4da-4bfc-b03f-9d65507fbef8);
  background-size: 200px 200px;
}

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

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

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

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

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

#tv-display {
  display: none;
}

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

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

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

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

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

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

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

.tv-display-title-screen .tv,
.tv-display-title-screen .tv-noise-overlay {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  transition: opacity 0.175s ease-out;
  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 {
  height: 212px;
  left: 60px;
  position: absolute;
  top: 34px;
  width: 288px;
}

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

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

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

#player-status-bar {
  color: #999;
  font-size: 55%;
  /* and room for green bars */
  height: 48px;
  left: 0;
  /* so type lines up */
  line-height: 24px;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 0 #000;
  top: 34px;
  width: 100%;
}

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

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

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

body.is-mobile #top-bar #game-fps {
  display: none;
}

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

#fuel-bar {
  background-image: url(https://github.com/GameSphere-MultiPlayer/GameSphere/assets/56786344/2f54f461-a124-45f1-819a-1cdd6b07c346);
  background-size: 2px 2px;
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
  margin-top: 3px;
  opacity: 0.9;
  position: relative;
}

#fuel-bar,
#fuel-line {
  height: 5px;
  overflow: hidden;
  width: 100%;
}

#fuel-line {
  top: 0;
}

#fuel-line,
#repair-complete {
  left: 0;
  position: absolute;
}

#repair-complete {
  background: transparent url(../image/status-repair-complete.png) repeat-x 0 0;
  display: none;
  height: 13px;
  top: 35px;
  width: 100%;
  z-index: 1;
}

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

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

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

#stats-bar.hide-inventory li.inventory-item,
#stats-bar.hide-keyboard-labels .letter-block,
#stats-bar.hide-weapons-status .stats-item,
#status-bar.hide-keyboard-labels .letter-block,
body.is_iphone #stats-bar .letter-block,
body.is_iphone #status-bar .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: 0;
}

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

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

body.is_safari:not(.is-mobile) #ammo-count {
  /* fix shifting on Safari, especially, with three digits in tutorial mode. */
  min-width: 11px;
}
body.is_safari:not(.is-mobile) #bomb-count {
  min-width: 9px;
}

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

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

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

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

#mobile-controls li.weapons-item.missiles:not(.weapon-unavailable),
ul.stats-bar li.stats-item.missiles:not(.weapon-unavailable) .wrapper {
  /* no transition while switching to/from reloading state. */
  transition: none;
}

#mobile-controls li.weapons-item.weapon-reloading,
ul.stats-bar li.stats-item.weapon-reloading:not(.repairing) em {
  /* fade the missile icon while "reloading" */
  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 infinite alternate;
}

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

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

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

#mobile-controls li.weapons-item a.parachute-infantry,
.static-sprite.parachute-infantry,
ul.stats-bar .infantry-count em {
  background: transparent url(../image/parachute-infantry-static.png) no-repeat
    0 0;
}

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

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

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

/* 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 {
  height: 9px;
  min-width: 16px; /* accommodate rubber chicken mode */
  transform: rotate(-5deg);
  width: 10px;
}

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

#mobile-controls li.weapons-item a.smart-missile,
ul.stats-bar .missiles em {
  background-image: url(../image/smart-missile.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 75%;
}

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

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

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

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

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

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

#top-bar {
  contain: strict;
  height: 88px;
  z-index: 1;
}

#top-bar,
#world {
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

#world {
  height: 100%;
}

#battlefield {
  height: 100%;
  top: 0;
  /**
   * 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%;
}

#battlefield {
  left: 0;
  position: absolute;
}

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

/* bunkers go green when overlapping with ground units, i.e., tanks? */
/* all terrain items need acceleration? */
#radar .radar-item--animated,
.cornholio,
.gunfire,
.smoke .transform-sprite,
.sprite.balloon,
.sprite.bunker,
.sprite.chain,
.sprite.cloud1,
.sprite.cloud2,
.sprite.cloud3,
.sprite.end-bunker,
.sprite.gunfire,
.sprite.missile-launcher,
.sprite.shrapnel,
.sprite.smart-missile,
.sprite.super-bunker,
.sprite.terrain-item,
.sprite.van,
.turret .sub-sprite {
  /**
   * 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;
  contain: strict;
}

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

.smoke {
  contain-intrinsic-size: 9px 9px;
  content-visibility: auto;
  height: 9px;
  overflow: hidden;
  width: 9px;
  will-change: transform, opacity;
  z-index: 4;
}

.smoke,
.star,
.transform-sprite {
  left: 0;
  position: absolute;
  top: 0;
}

.star {
  width: 0.75px;
  height: 0.75px;
  border-radius: 100%;
  margin: -0.375px 0px 0px -0.375px;
  contain: strict;
}

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

/* hacks for radar items on desktop safari, where we apply body { zoom: 2 } shenanigans. */

body.is_safari:not(.is-mobile) .radar-item,
body.is_safari:not(.is-mobile) .radar-item--animated {
  margin-top: -1px;
}

body.is_safari:not(.is-mobile) .radar-item.bunker {
  margin-top: -2px;
}

.bunker,
.bunker.enemy {
  background-image: url(../image/bunker_mac.png);
  background-size: contain;
  height: 25px;
  width: 51px;
  z-index: 1; /* sit on top of chains. */
}

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

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

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

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

.balloon,
.balloon.enemy {
  background-image: url(../image/balloon_mac.png);
  /* initially, show neutral */
  background-position: 0 -60px;
  background-size: 38px 144px; /* 76 x 288 source image */
  height: 16px;
  margin-right: 0;
  /* allow status bar to hang out a bit */
  overflow: visible;
  width: 38px;
  z-index: 2;
}

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

.balloon,
.balloon.facing-right {
  background-position: 0 -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: 0 0;
  /* default when animation finishes */
}

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

.balloon.exploding {
  /* default when animation finishes */
  animation: genericexplosionsmall 0.45s steps(3);
  background-image: url(../image/generic-explosion.png);
  background-position: 0 -30px;
  background-size: auto;
}

.balloon.dead {
  display: none;
}

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

.chain {
  /* slightly over 1px to "thicken up" when scaled */
  border-left: 1.02px dotted #999;
  /*
   * 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: 0;
  margin-left: 1.2px;
  top: 0;
  width: 0.75px;
}

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

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

.missile-launcher,
.missile-launcher.enemy {
  background-repeat: no-repeat;
  background-size: 54px 72px;
}

.missile-launcher.enemy {
  background-image: url(../image/missile-launcher-enemy.png);
}

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

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

.tank .transform-sprite,
.tank.enemy .transform-sprite {
  animation: animate-transform-sprite-tank 0.1s steps(3) infinite;
}

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

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

.van,
.van.enemy {
  background-image: url(../image/van.png);
  background-size: 38px 48px; /* retina sprite, 76 x 96 -> 36 x (16px * 3) - vertical sprite */
  height: 16px;
  width: 38px;
  z-index: 2;
}

.van.enemy {
  background-image: url(../image/van-enemy.png);
}

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

.infantry .transform-sprite {
  /* NOTE: sprite is backwards in sequence. reverse restores proper order. */
  animation: animate-transform-sprite-infantry 0.4s steps(5) infinite reverse;
  background-image: url(../image/infantry-sprite-horizontal.png);
  background-size: 55px 11px;
  height: 11px;
  position: absolute;
  width: 55px;
}

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

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

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

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

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

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

.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 {
  animation: animate-transform-sprite-engineer-bnb 0.8s steps(10) infinite;
  /* https://www.spriters-resource.com/genesis_32x_scd/beavisandbutthead/sheet/44963/ */
  background-image: url(../image/beavis-walking.png);
}

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

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

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 {
  height: 32px;
  /* correction for positioning */
  margin-top: -1.5px;
  /* "whilst headbanging" */
  width: 18.25px;
}

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 {
  animation: animate-transform-sprite-engineer-headbang-bnb 0.4s steps(4)
    infinite;
  background-size: 73px 32px;
  height: 32px;
  width: 73px;
}

.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 {
  /* shorter until parachute is deployed. */
  height: 11px;
  width: 14px;
  /* ensure they display in front of bunkers. */
  z-index: 2;
}

.parachute-infantry .transform-sprite {
  background-image: url(../image/parachute-infantry.png);
  background-position: 0 -60px;
  background-size: 14px 100px;
}

.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 {
  animation: parachute-swing 1s ease-in-out infinite alternate;
  background-position: 0 0;
}

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

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

.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 ease-in-out reverse;
  /* 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%, 0) 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: red !important;
  border-color: red !important;
}

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

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

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

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

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

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

.helicopter.respawning.first-time {
  margin-top: -1px;
}

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

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

.helicopter.rotated-left,
.helicopter.rotated-right {
  animation: rotateleft 0.33s steps(3);
  background-image: url(../image/helicopter-rotating.png) !important;
  height: 20px;
  width: 50px;
}

.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-left.enemy,
.helicopter.rotated-right {
  /* 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 {
  height: 18px;
  overflow: hidden;
  width: 55px;
}

.helicopter.enemy .transform-sprite {
  animation: animate-transform-sprite-helicopter-enemy 0.52s steps(4) infinite;
  background-image: url(../image/helicopter-enemy-sprite-horizontal.png);
  background-size: 220px 18px;
  height: 18px;
  width: 220px;
}

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

.helicopter.dead {
  display: none;
}

.gunfire {
  background-color: #ccc;
  background-color: #9c9f08;
  border-radius: 100%;
  height: 1.5px;
  left: 0;
  position: absolute;
  top: 0;
  width: 2px;
  z-index: 2;
}

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

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

#battlefield .smart-missile:not(.armed),
.smart-missile.expired {
  animation: blink 0.125s infinite;
  /* blink initially, until armed - and when expired */
  transition-property: transform, opacity;
}

.smart-missile.rubber-chicken {
  /* heh */
  background: transparent url(../image/rubber-chicken.gif) no-repeat 0 0;
  background-position: 50% 50%;
  background-size: contain;
  height: 12px;
  width: 24px;
}

#world.rubber-chicken-mode #mobile-controls li.weapons-item a.smart-missile,
#world.rubber-chicken-mode ul.stats-bar .missiles em {
  background: transparent url(../image/rubber-chicken-static.png) no-repeat 0 0;
  background-position: 50% 33%;
  background-repeat: no-repeat;
  background-size: 16px 4.5px;
  min-width: 16px;
}

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

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

body.original_missile_mode ul.stats-bar .missiles .alternate-missiles,
body.original_missile_mode ul.stats-bar .missiles .divider {
  /* hide |C|B in UI when "alternate missiles" are disabled. */
  display: none !important;
}

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

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

.helicopter-trailer,
.smart-missile-trailer {
  background-color: #9c9f08;
  height: 1px;
  position: absolute;
  transition: opacity 0.5s ease-in-out;
  width: 1px;
}

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

.smoke .transform-sprite {
  background: transparent url(../image/smoke-sprite.png) no-repeat 0 0;
  background-size: 9px 108px;
  height: 108px;
  width: 9px;
}

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

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

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

.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);
  background-size: contain;
  height: 19px;
  width: 41px;
}

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

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

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

.barb-wire,
.cactus {
  background-size: contain;
}

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

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

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

.landing-pad .transform-sprite {
  animation: animate-transform-sprite-landing-pad 1s steps(4) infinite;
  background-image: url(../image/landing-pad-sprite-horizontal.png);
  height: 7px;
  width: 324px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#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 {
  height: 15px;
  overflow: hidden;
  width: 48px;
  z-index: 4; /* show on top of landing pad */
}

.helicopter .transform-sprite {
  animation: animate-transform-sprite-helicopter 0.52s steps(4) infinite;
  background-image: url(../image/helicopter-sprite-horizontal.png);
  background-size: 200px 15px;
  height: 15px;
  width: 200px;
}

.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) 0 0 no-repeat;
  background-position: 50% 0;
  background-size: 18px 64px;
  height: 15px;
  width: 22px; /* 18 + a few pixels for turret rotation */
}

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

.turret.destroyed {
  background: transparent;
}

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

.bomb {
  bottom: auto;
  height: 6px;
  left: 0;
  position: absolute;
  top: 0;
  width: 14px;
  z-index: 2;
}

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

.bomb.explosion-large,
.bomb.spark .sub-sprite {
  animation: none;
}

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

.gunfire.spark,
.smart-missile.spark {
  background-color: transparent;
  z-index: 5;
}

.bomb.explosion-large {
  background: none;
  height: 22px;
  height: 56px;
  margin-left: 0;
  margin-top: -32px;
  transform-origin: 50% 100%;
  width: 51px;
}

.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-position: 0 0;
  background-size: 512px 51px;
  height: 51px;
  /* default state */
  transform: translate3d(-512px, 0, 0);
  width: 512px;
}

body:not(.game-over) #world-wrapper.jammed #radar {
  display: none; /* better? */
  /* exception: allow the radar to show, even if jammed, when the game is over. */
  visibility: hidden;
}

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

/* .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 {
  background-color: #17a007;
  border: 0.5px solid rgba(23, 160, 7, 0.75);
  border-bottom-color: #17a007;
  /* round corners */
  border-radius: 1px 1px 0 0;
  height: 3px;
  margin-left: -1px;
  padding: 0.5px;
  /* friendly */
  width: 2px;
}

#radar .sprite.super-bunker {
  height: 1.33px;
  margin-left: -2.25px;
  width: 4.5px;
}

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

#radar .sprite.balloon,
#radar .sprite.bunker.enemy,
#radar .sprite.super-bunker.enemy {
  /* yellow-ish tinge */
  background-color: #9c9f09;
  border-color: #9c9f09;
}

#radar .sprite.bunker.enemy,
#radar .sprite.super-bunker.enemy {
  border-color: rgba(156, 159, 9, 0.75) rgba(156, 159, 9, 0.75) #9c9f09;
}

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

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

#radar .sprite.helicopter {
  background-color: transparent;
  border-bottom: 2.5px solid transparent;
  border-left: 2.5px solid #17a007;
  border-top: 2.5px solid transparent;
  font-size: 0;
  height: 0;
  margin-bottom: -0.5px;
  margin-left: 0.5px;
  outline: none;
  width: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bunker.exploding,
.helicopter.exploding,
.missile-launcher.exploding,
.tank.enemy.exploding,
.tank.exploding,
.turret.exploding,
.van.exploding {
  animation: explosionshrapnel2 1s steps(12);
  animation-fill-mode: forwards; /* Stay on last frame when finished */
  background-image: url(../image/explosion-shrapnel-2.png);
  background-position: 0 -384px;
  /* default state */
  background-repeat: no-repeat;
  background-size: auto;
  height: 32px;
  width: 79px;
}

.tank.exploding {
  margin-left: -11px;
  /* align with where tank was */
  margin-top: -12px;
  /* offset for 57-pixel-wide normal tank */
}

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

.bunker.exploding {
  animation: none;
  /* special case */
  background-image: none;
}

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

/* special case */

.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-position: 112px 0;
  background-repeat: no-repeat;
  background-size: 2352px 112px;
  margin-top: -2px;
  transform: scale3d(0.88, 0.88, 1);
  transform-origin: 50% 100%;
  visibility: hidden;
  z-index: 3;
}

.bunker.burning .sub-sprite.nuke,
.bunker.exploding .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 {
  animation: ephemeralexplosion 0.75s steps(14);
  animation-fill-mode: forwards; /* Stay on last frame when finished */
  background-image: url(../image/explosion_by_tungkann_dam5o19.png);
  background-position: 0 0;
  /* default state */
  background-repeat: no-repeat;
  background-size: 1400px 100px;
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate3d(-50%, -50%, 0) scale3d(0.5, 0.5, 1);
  transform-origin: 50% 100%; /* bottom-align */
  width: 100px;
  z-index: 3;
}

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

.sprite.tank .energy-status {
  bottom: 1px;
}

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

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

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

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

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

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

body.bnb .cornholio {
  display: block;
}

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

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

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, 0, 0);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.sprite.ordering {
  contain: layout;
  /* TODO: remove margin-bottom once all bottom-aligned things are out */
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  transition: margin 2s;
  /* 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: 2.5px solid transparent;
  border-right-color: #ccc;
}

#radar .sprite.turret {
  background-color: #17a007;
  height: 2px;
  margin-left: -0.5px;
  width: 1px;
}

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

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

#game-fps {
  color: #666;
  font-size: 75%;
  right: 3px;
  text-align: right;
}

#game-fps,
.shrapnel {
  position: absolute;
  top: 0;
}

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

.shrapnel .transform-sprite {
  background-image: url(../image/shrapnel.png);
  background-position: 0 0;
  height: 12px;
  /* note: active width is 48px, but background image will be repositioned so only one type shows. */
  width: 12px;
}

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

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

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

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

.cloud3 {
  background-image: url(../image/cloud-3.png);
  height: 34px;
  width: 125px;
}

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

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

#stats-endgame table td,
#stats-endgame table th {
  background-color: rgba(0, 153, 0, 0.25);
  border-left: 1px solid #090;
  min-width: 2em;
  padding: 0.25em 0.33em;
}

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

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

#game-tips {
  /* single line height */
  font-family: de_valenciaregular, FA Sysfont C, JetBrains Mono, Menlo, Monaco,
    SF Mono, Lucida Console, Terminal, monospace;
  font-weight: 700;
  height: 13px;
  left: 0;
  position: absolute;
  top: 95px;
  width: 100%;
}

#game-tips .tips-container {
  border-radius: 1em;
  color: #707070;
  display: none;
  left: 50%;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-shadow: 0 1px 0 #000;
  top: 23.5%;
  transform: translate3d(-50%, -50%, 0);
  width: 65%;
}

body.is_safari:not(.is-mobile) #game-tips .tips-container {
  /* safari 2x zoom shenanigans */
  zoom: 2;
  height: 2em;
  margin: 0;
  /* note, adjusted because of zoom. */
  top: 4px;
  transform: scale3d(0.5, 0.5, 1) translate3d(-50%, -50%, 0);
  transform-origin: 0 0;
  /* TODO: sort out container width vs. wrapping */
  width: 400px;
}

body.is_safari:not(.is-mobile) #game-tips .tips-container .animation-node,
body.is_safari:not(.is-mobile) #game-tips .tips-container .tip {
  animation: scrollText-safari-scale 16s linear;
  font-size: 28px;
  line-height: 20px;
  width: 64rem;
}

#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 {
  color: #ccc;
  display: none;
  font-size: 1rem;
  font-weight: 300;
  height: 1rem;
  left: 0;
  letter-spacing: -0.25em;
  margin-top: -0.5rem;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 0 #000;
  top: 50%;
  width: 100%;
  z-index: 10;
}

body.is-mobile #game-paused {
  font-size: 7vmin;
  letter-spacing: -0.25em;
}

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

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 .animation-node,
body.game-paused #game-tips .tips-container .tip {
  /* 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 {
  /**
   * 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(
    90deg,
    #000 0,
    transparent 10%,
    transparent 90%,
    #000
  );
  height: 100%;
  left: 0;
  /* overlay tips */
  position: absolute;
  top: 0;
  width: 100%;
}

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

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

#game-tips .tips-container .animation-node,
#game-tips .tips-container .tip {
  animation: scrollText 20s linear;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.25em;
  line-height: 16px;
  padding: 1px;
  text-rendering: optimizeSpeed;
  /* "ticker-tape" style? */
  /* animation-timing-function: steps(150); */
}

/* go bigger on landscape. */

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

#game-tips .tips-container .animation-node:not(.hide-on-mobile),
#game-tips .tips-container .tip:not(.hide-on-mobile) {
  display: inline-block;
  min-width: 32rem;
  /* each tip should roughly clear the screen before the next appears. */
  width: 75%;
}

#game-tips #game-announcements {
  color: #bbb;
  font-size: 1.5em;
  font-weight: 300;
  left: 0;
  letter-spacing: -0.25em;
  line-height: 1em;
  margin: 0 auto;
  min-height: 100%;
  opacity: 0;
  /* overlay-type thingy */
  position: absolute;
  text-align: center;
  top: 0;
  transition: opacity 0.2s ease-in-out;
  width: 100%;
}

body.is-mobile #game-tips #game-announcements {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 1em;
  padding: 4px;
}

#world.tutorial-mode #game-tips #game-announcements {
  font-family: Chicago, FA Sysfont C, courier, sans-serif;
}

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

#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,
#game-tips.has-announcement .tips-fader {
  opacity: 0;
}

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

#help,
#tutorial {
  display: none;
}

#help {
  float: right;
  font-size: 0.5rem;
  margin-left: 1em;
  margin-right: 1em;
  position: relative;
  top: 0.75px;
  white-space: nowrap;
}

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

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

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

body.is-mobile #game-options-link,
body.is-mobile #help .exit-pipe {
  /* hide, because touch UI has a button now. */
  display: none;
}

body.is-mobile.notch-at-left #help {
  /* "home screen" app, iOS Safari */
  margin-right: calc(env(safe-area-inset-left) / 3);
}

body.is-mobile.notch-at-right #help {
  margin-right: calc(env(safe-area-inset-right) / 3);
}

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

#help a.static {
  display: inline;
}

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

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

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

#player-status-bar .spacer {
  /* centering / sizing shenanigans */
  left: -4px;
  padding-right: 5px;
  position: relative;
  /* previously */
  /* min-width: 5% */
  width: 32px;
}

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

/* except when BnB, and landscape? */
body.bnb.is-mobile #player-status-bar .spacer {
  display: inline-block !important;
  min-height: 16px;
  top: 2px;
  /* display shenanigans */
  vertical-align: top;
}

body.bnb.is-mobile #bnb-now-playing {
  height: 100%;
  top: 1px;
}

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

body:not(.is-mobile) #bnb-now-playing {
  height: 20px;
  left: 1px;
  /* ugly hacks, I broke something while making changes for mobile. */
  top: -13px;
}

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

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

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

#bnb-now-playing .butthead {
  background: transparent url(../image/pow-butthead.webp) 50% 50% no-repeat;
  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 {
  background-clip: padding-box;
  background: rgba(32, 32, 32, 0.75);
  border: 0.5px solid rgba(48, 48, 48, 0.33);
  border-radius: 2px;
  color: #777;
  display: inline-block;
  height: 10px;
  line-height: 10px;
  margin-top: -1px;
  min-width: 6px;
  padding: 0 3px;
  text-align: center;
  vertical-align: middle;
  /* 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:active,
body.is-mobile #player-status-bar .inventory-item:hover {
  background-color: #999;
  border-color: #fff;
}

#player-status-bar .inventory-item a {
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  /* annoying vertical alignment fix */
  margin-top: -1px;
  vertical-align: middle;
  /* these shouldn't be clickable, despite being a link. :X */
  pointer-events: none;
}

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

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

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

#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;
  height: 9px;
  width: 29px;
}

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

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

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

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

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

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

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

#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. */
#mobile-controls.can-not-order-engineer .engineer,
#mobile-controls.can-not-order-infantry .infantry,
#mobile-controls.can-not-order-missile-launcher .missile-launcher,
#mobile-controls.can-not-order-tank .tank,
#mobile-controls.can-not-order-van .van,
#player-status-bar.can-not-order-engineer .engineer,
#player-status-bar.can-not-order-infantry .infantry,
#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 {
  filter: grayscale(1);
  opacity: 0.5;
}

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

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

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

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

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

/* 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 {
  animation: none;
  background-color: inherit;
}

/* TODO: make this configurable. */

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

/* go bigger on landscape. */

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

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

#mobile-controls li,
#mobile-controls li a {
  border-radius: 100%;
  position: relative;
}

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

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

#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 {
  bottom: 0;
  /* text labels */
  /* hidden for now */
  display: none;
  letter-spacing: 0.05rem;
  line-height: 1rem;
  /* ignore events, let the link get it. */
  pointer-events: none;
  /* TODO: maybe show later on landscape */
  position: absolute;
  text-align: center;
  width: 100%;
}

#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.engineer,
#mobile-controls li.inventory-item a.infantry {
  background-size: 33%;
}

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

#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-position: 50% 50%;
  /* background-image: url(../image/status-missile.png); */
  background-size: 40%;
}

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

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

/* hide groups of controls until activated */

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

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

.joystick,
.joystick-point {
  /**
   * 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%;
  /* include border in w/h so centering works */
  box-sizing: border-box;
  /* prevent other events on the joystick itself? */
  pointer-events: none;
  position: absolute;
}

.joystick {
  border: 1px dotted #333;
  height: 100px;
  opacity: 0;
  transform: scale(0.125);
  transform-origin: 50% 50%;
  transition: all 0.15s ease-in-out;
  transition-property: opacity, transform;
  /* TODO: fix dimension -> scale calculations.: D */
  width: 100px;
}

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

.joystick-point {
  background-image: url(../image/checkerboard-black-mask-75percent.png);
  border: 1px dotted #333;
  height: 50%;
  left: 50%;
  margin: -25% 0 0 -25%;
  top: 50%;
  width: 50%;
}

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

#pointer.enabled {
  display: block;
}

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

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

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

#notification-toasts {
  contain: strict;
  height: 256px;
  overflow: hidden;
  position: absolute;
  right: 8px;
  top: 104px;
  width: 14em;
}

body.is_safari:not(.is-mobile) #notification-toasts {
  /* desktop safari zoom hacks */
  zoom: 2;
  height: 128px;
  right: 4px;
  /* note: half-scale of original */
  top: 57px;
  transform: scale3d(0.5, 0.5, 1);
  transform-origin: top right;
}

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

.notification-toast {
  color: #999;
  left: 100%;
  opacity: 0;
  position: relative;
  text-align: right;
  top: 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 span {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid transparent;
  display: inline-block;
  font-size: 6px;
  padding-bottom: 1px;
}

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

#queue sup,
.notification-toast sup.nsf {
  font-size: 75%;
  /* pull closer to text at left */
  margin-left: -1.5px;
  position: relative;
  right: -1px;
  /* super-script: closer to fraction "slash" */
  top: 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 {
  left: 3px;
  /* building queue: nudge a little */
  position: relative;
  top: -1px;
}

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

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

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

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

#queue sub {
  left: -0.5px;
}

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

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

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

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

body.is-mobile #game-prefs-modal:not(.is-network) {
  top: 54.5%;
}

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

/* iOS Safari hacks */

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

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

#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;
  background: transparent;
  border: 0.5px solid #000;
  border-radius: 6px;
  height: 6px;
  margin-bottom: 0;
  margin-top: -0.5px;
  outline: none;
  padding: 0 0.5px;
  width: 50px;
}

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

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

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

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

/* safari desktop: zoom hacks */
body.is_safari:not(.is-mobile).edit-mode #editor-window,
body.is_safari:not(.is-mobile).edit-mode #editor-window-help {
  zoom: 2;
  /* note: half of "usual" value */
  transform: scale3d(1.13, 1.13, 1);
  transform-origin: 0 0;
}

body.is_safari:not(.is-mobile).edit-mode #editor-window-help {
  /* safari scale shenanigans: roughly half */
  left: 160px;
}

body.is_safari:not(.is-mobile).edit-mode #editor-window {
  left: 10px;
}

.finder .title-bar {
  background: #f3f3f3;
  border-color: transparent;
  border-style: solid;
  border-width: 1px 0;
  height: 7px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

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

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

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

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

.close-button {
  background: #f3f3f3;
  border: 0.25px solid #000;
  border-radius: 0.25px;
  height: 4.5px;
  left: 3.75px;
  outline: 0.25px solid hsla(0, 0%, 100%, 0.67);
  position: absolute;
  top: 0.75px;
  width: 4.5px;
  z-index: 2;
}

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

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

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

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

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

.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 {
  background: #f3f3f3;
  /* border all the way around */
  border: 0.5px solid #000;
  box-sizing: border-box;
  color: #000;
  font-family: geneva, verdana, arial, sans-serif;
  font-size: 5px;
  height: 10rem;
  overflow: auto;
  position: relative;
  /* Firefox may show scaled-up scrollbars - this helps a bit. */
  scrollbar-width: thin;
}

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

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

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

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

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

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

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

#game-prefs-modal .fieldset-container {
  /**
   * Scrollbar shenanigans
   * Render small so the scrollbar size is right,
   * then zoom up the inner contents.
   */
  zoom: 0.4;
  max-height: 800px;

  /* auto may cause rendering to be cut short on mobile, we'll revert it below. */
  overflow-y: auto;
  position: relative;

  /**
   * 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-mobile #game-prefs-modal .fieldset-container {
  /* suspected cause of form truncation, especially in portrait. */
  overflow-y: unset;
}

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

/**
 * 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 {
  background-color: #fff;
  width: 22px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 {
  letter-spacing: -0.12px;
  margin: 0;
  padding-bottom: 3px;
  padding-top: 1px;
}

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

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

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

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

.finder.mac-classic p.non-indented,
.mac-classic .non-indented,
.mac-classic ul li p.options-heading {
  margin-left: 0;
}

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

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

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

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

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

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

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

.mac-classic input[type='checkbox'] {
  border-radius: 1px;
  margin-top: -2px;
}

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

.mac-classic input[type='checkbox']:before {
  background: transparent;
  border-radius: 0;
  content: '×';
  font-size: 10px;
  font-weight: 700;
  height: 7px;
  line-height: 7px;
  margin: -1.5px 0 0 -0.5px;
  text-align: center;
  vertical-align: middle;
}

body.is-mobile.is_safari .mac-classic input[type='checkbox']:before {
  margin-left: -1.25px;
  margin-top: -1.25px;
}

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

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

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

.mac-classic input[type='checkbox']:active:before {
  opacity: 0.5;
  transform: scale(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 {
  transform: scale(0.4);
  transform-origin: 50%;
  visibility: visible;
}

.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='checkbox']:disabled,
.mac-classic input[type='radio']:disabled {
  opacity: 0.33;
}

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

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

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: 0.1rem 0.25rem 0;
  padding: 0;
}

#game-prefs-modal .network,
#game-prefs-modal.is-guest .show-to-host,
#game-prefs-modal.is-host .show-to-guest {
  /* hide by default */
  display: none;
}

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

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

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

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

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

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

button.primary {
  /* 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;
  /**
   * 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;
  /**
   * 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;
  outline-offset: 0.5px;

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

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

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

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

.mac-system-spinner,
.mac-system-waiting {
  background-repeat: no-repeat;
  display: inline-block;
  height: 8px;
}

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

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

/* game menu screen */

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

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

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

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

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

body.is_safari:not(.is-mobile) #game-menu button {
  /* safari 2x zoom hacks: these are glitchy when combined with zoom, methinks. */
  transition: none;
}

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

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

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

/* outer -> inner */
#game-prefs-modal .border-3 {
  border-color: #dadaff #8787b3 #8787b3 #dadaff;
  border-style: solid;
  border-width: 0.5px;
}

#game-prefs-modal .border-2 {
  border: 0.5px solid #cdcdcd;
}

#game-prefs-modal .border-1 {
  border-color: #8787b3 #dadaff #dadaff #8787b3;
  border-style: solid;
  border-width: 0.5px;
}

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

/* "DOMFetti" - DOM confetti effect */

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

.zone-post {
  background: #875400;
  border-radius: 1px;
  bottom: 0;
  contain: layout !important;
  height: 6px;
  margin-bottom: -1px;
  margin-left: -1px;
  overflow: visible !important;
  width: 2px;
}

.zone-flag,
.zone-post {
  pointer-events: none;
  z-index: 4;
}

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

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

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

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

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

#network-status {
  display: none;
}

body.is_safari:not(.is-mobile) #lights {
  /* zoom only for desktop Safari. */
  zoom: 4;
}

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

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

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

#message-box {
  position: absolute;
  top: -1px;
  left: 25%;
  display: none;
  width: 50%;
  height: 14px;
  text-align: center;
  z-index: 2;
}

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

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

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

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

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

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

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

/* 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 {
  border-radius: 3px;
  outline: 1px solid #999;
}

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

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

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

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

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

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

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 {
  border-top: 0.75px dotted #666;
  bottom: 0;
  height: 0;
  left: 0;
  margin-bottom: -1px;
  pointer-events: none;
  position: absolute;
  transition: height 0.25s ease-in-out;
  transition-property: height, margin;
  width: 100%;
}

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

#editor-window {
  display: none;
}

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

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

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

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

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

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

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

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

#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;
  height: 3.5px;
  width: 40.5px;
}

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

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

#editor-clipboard {
  display: none;
}

#aa ul.inline-list,
#aa ul.inline-list li,
#editor-clipboard.active {
  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;
  left: 50%;
  top: 50%;
  transform: scale(1) translate(-50%, -50%);
  transform-origin: 0 0;
}

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

#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 {
  line-height: 1.33em;
  margin-left: 0;
  margin-right: 0;
}

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

#level-preview {
  height: 100%;
  width: 100%;
}

#level-preview,
.target-dot {
  position: absolute;
  top: 0;
}

.target-dot {
  background: #c00;
  border: 0.5px solid #000;
  border-radius: 2px;
  height: 2px;
  right: 0;
  width: 2px;
}

.tank .target-dot {
  top: 1px;
}

.target-marker {
  background: #c00;
  border-bottom: 0 solid transparent;
  border-bottom-left-radius: 0.5px;
  border-bottom-right-radius: 0.5px;
  height: 2px;
  margin-left: -1.5px;
  position: absolute;
  top: 34px;
  width: 3px;
  will-change: transform;
}

#world-wrapper.jammed .target-marker,
.sprite.dead .target-ui,
.sprite.exploding .target-ui,
.target-ui.disabled {
  opacity: 0;
}

@media screen and (orientation: landscape) {
  body.is-mobile #world-overlay {
    /* better vertical centering. */
    top: 24px;
  }
  body.is-mobile #game-status {
    font-size: 120%;
    height: 20px;
  }
  body.is-mobile #funds-count {
    top: 1px;
    transform: scale(1.5);
    transform-origin: 0 0;
    margin-left: -6px;
  }
  /* scale up a bit; center of screen, avoid The Notch and such. */
  body.is-mobile ul.stats-bar {
    /* prevent overlap with fuel bar */
    padding-top: 3px;
    /* scale up these controls. */
    transform: scale3d(1.5, 1.5, 1);
    transform-origin: 50% 0;
  }
  body.is-mobile #game-paused {
    font-size: 15vmin;
    margin-top: 10vw;
  }
  body.is-mobile #game-tips .tips-container .animation-node,
  body.is-mobile #game-tips .tips-container .tip {
    font-size: 26px;
    line-height: 20px;
    width: 75%;
  }
  body.is-mobile:not(.game-paused) #game-tips.has-announcement {
    top: 55vh;
  }
  body.is-mobile #game-tips #game-announcements {
    /* larger type, please. */
    font-size: 2.75em;
    line-height: 1em;
  }
  /* 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 #mobile-controls li {
    /* account for 2x border */
    border-width: 0.5px;
  }
  body.is-mobile.notch-at-right #mobile-controls .mobile-controls-ordering,
  body.is-mobile.notch-at-right #mobile-controls .mobile-controls-weapons {
    left: auto;
    /* HACKISH: offset for zoom */
    margin-right: calc(env(safe-area-inset-right) / 2);
    right: 0;
  }
  body.is-mobile.notch-at-left #mobile-controls .mobile-controls-ordering,
  body.is-mobile.notch-at-left #mobile-controls .mobile-controls-weapons {
    left: 0;
    /* HACKISH: offset for zoom */
    margin-left: calc(env(safe-area-inset-left) / 2);
    right: auto;
  }

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

  body.is-mobile.notch-at-left #funds,
  body.is-mobile.notch-at-right #funds {
    /* "home screen" app, iOS Safari */
    margin-left: calc(env(safe-area-inset-left) / 1.5) !important;
  }

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

  /* 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 #notification-toasts {
    /* note: half-size height, given transform. */
    height: 128px;
    transform: scale3d(2, 2, 1);
    transform-origin: top right;
  }
  /* account for toast location, and apply transform appropriately */
  body.is-mobile #notification-toasts.left-aligned {
    transform-origin: top left;
  }
  #mobile-controls li span.letter-block.show_inventory {
    top: 1.5px;
  }
  #game-prefs-modal.is-network {
    top: 52%;
  }
  /* don't mess with scrollbars, just let the whole body scroll naturally. */
  body.is-mobile #game-prefs-modal .fieldset-container {
    max-height: unset;
  }
  /* scale up a bit; center of screen, avoid The Notch and such. */
  body.is-mobile #tutorial-window {
    left: 50%;
    top: 130px;
    transform: scale3d(2, 2, 1) translate(-50%, 0);
    transform-origin: 0 0;
  }
}

@media screen and (orientation: portrait) {
  /* remove for portrait mode. */
  body.is-mobile #game-status li:first-of-type {
    margin-left: 0;
  }
  body.is-mobile #game-status li:last-of-type {
    margin-right: 0;
  }
  body.is-mobile #funds-count {
    top: -0.5px;
  }
  body.is-mobile #game-paused {
    margin-top: 25vw;
  }
  body.is-mobile #game-tips {
    height: 13px;
    top: 82px;
  }
  body.is-mobile:not(.game-paused) #game-tips.has-announcement {
    top: 25vh;
  }
  body.is-mobile #game-tips .tips-container {
    margin: 0;
    /* take most of the screen real estate */
    top: 0;
    transform: translate3d(-50%, 0, 0);
    width: 95%;
  }
  body.is-mobile #game-tips .tips-container .animation-node,
  body.is-mobile #game-tips .tips-container .tip {
    min-width: 30rem;
  }
  body.is-mobile
    #game-tips
    .tips-container
    .animation-node:not(.hide-on-mobile),
  body.is-mobile #game-tips .tips-container .tip:not(.hide-on-mobile) {
    min-width: 15rem;
    width: 75%;
  }
  body.is-mobile #game-tips #game-announcements {
    /* smaller type, please. */
    font-size: 1.25em;
    line-height: 1.25em;
    text-align: center;
  }
  body.is-mobile #help {
    margin-left: 0.25rem;
  }
  body.bnb.is-mobile #bnb-now-playing {
    /* More positioning hacks. Ugh. */
    left: -1px;
  }
  /* mobile, portrait: smaller controls. */
  body.is-mobile #mobile-controls .mobile-controls-ordering,
  body.is-mobile #mobile-controls .mobile-controls-weapons {
    zoom: 1.25;
    /* collapse bullshit whitespace */
    font-size: 0;
    left: 0;
    /* left side, by default */
    right: auto;
    width: 54px;
  }
  /* giant hack, for now */
  #mobile-controls li {
    height: 25px;
  }
  /* hide text when in portrait mode. */
  /* only show if on a very wide device, e.g., ipad / tablet. */

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

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

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

  /* helicopter weapons */
  #mobile-controls li.inventory-item a.ammo,
  #mobile-controls li.weapons-item a.parachute-infantry {
    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_inventory {
    left: 0.25px;
    line-height: 23px;
    top: 0.5px;
  }
  body.is-mobile #mobile-landscape-tip {
    display: block;
  }
  body.game-paused #game-tips .tips-container,
  body.game-paused #mobile-controls,
  body.game-paused #notification-toasts {
    visibility: hidden;
  }
  body.is_iphone #game-prefs-modal {
    zoom: 1.85;
  }
  body.is_iphone.is_standalone #game-prefs-modal {
    /* "home screen"-specific version */
    zoom: 1.75;
  }
  /* leave room for notifications. */
  body.is-mobile #tutorial-window {
    top: 180px;
  }
}

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

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

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

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

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

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

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

@keyframes scrollText-safari-scale {
  0% {
    transform: translate3d(0, 0, 0) scale(0.5, 0.5);
  }

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

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

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

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

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

@keyframes largeexplosion {
  0% {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-512px, 0, 0);
  }
}

@keyframes explosionshrapnel2 {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: 0 -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 {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: 0 -60px;
  }
}

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

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

@keyframes jerkingmychain {
  0% {
    margin-top: 0;
  }
  to {
    margin-top: -16px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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. 😇
   */
  0% {
    box-shadow: 0 0 0 0.5px #fff, 0 0 0 2px #000;
  }
  to {
    border-color: transparent;
    box-shadow: 0 0 0 4px #f3f3f3, 0 0 0 2px #f3f3f3;
  }
}

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

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