.pm-key-hint {
  opacity: 0.5;
  margin-right: 0.4em;
}



/* program.list grid + cell styles live in index.css (.ul-group / .ul-cell). */



















body,
html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-weight: 300;
  background-color: #222;
}

#root {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
  font-family: bitlight;
  user-select: none;
  text-rendering: geometricprecision;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
pre {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "04b25";
  letter-spacing: 0;
  font-weight: 400;
}

h3 {
  font-size: 1.25em;
}

@font-face {
  font-family: jhtitles;
  src: url("../../static/media/jhtitles.1839a5cf.ttf");
}

@font-face {
  font-family: bitlight;
  src: url("../../static/media/bitlight.1fe0875b.ttf");
}

@font-face {
  font-family: "04b25";
  src: url("../../static/media/04b25.95438b7a.ttf");
}

::-webkit-scrollbar {
  display: none;
}

.overlay-grid {
  display: grid;
  gap: 0.5em;
  padding: 1em 2em;
  grid-template-rows: 1fr 1fr 3fr 0.5fr 2.5em;
  grid-template-columns: 2fr 2fr 3fr 2fr 3em;
  height: 100%;
}

.battle-bg {
  background-size: cover;
  background-position: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
}

.battle-container {
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr auto 2.5em;
  padding: var(--padding);
}

.battle-container,
.battle-grid {
  --padding: 0.5em;

  display: grid;
  gap: var(--padding);
}

.battle-grid {
  touch-action: manipulation;
}

.battle-grid {
  margin: auto;
  grid-row: 1/5;
  grid-column: 2/5;
  padding: calc(var(--padding) * 2);
  position: relative;
  grid-auto-rows: 1fr;
}

.battle-grid::before {
  content: "";
  width: 0;
  padding-bottom: 100%;
  grid-row: 1/1;
  grid-column: 1/1;
}

.tile {
  background-color: #939b9e;
  animation: background-cycle 3s ease-in infinite;
  width: 3em;
  height: 3em;
}

@keyframes background-cycle {
  0% {
    background-color: rgb(220, 240, 255, 0.7);
  }

  50% {
    background-color: rgb(220, 240, 255, 0.55);
  }

  100% {
    background-color: rgb(220, 240, 255, 0.7);
  }
}

@keyframes background-cycle {
  0% {
    background-color: rgb(220, 240, 255, 0.7);
  }

  50% {
    background-color: rgb(220, 240, 255, 0.55);
  }

  100% {
    background-color: rgb(220, 240, 255, 0.7);
  }
}

.delay-0 {
  animation-delay: -0.3s;
}

.delay-1 {
  animation-delay: -0.6s;
}

.delay-2 {
  animation-delay: -0.9s;
}

.delay-3 {
  animation-delay: -1.2s;
}

.delay-4 {
  animation-delay: -1.5s;
}

.delay-5 {
  animation-delay: -1.8s;
}

.delay-6 {
  animation-delay: -2.1s;
}

.delay-7 {
  animation-delay: -2.4s;
}

.delay-8 {
  animation-delay: -2.7s;
}

.delay-9 {
  animation-delay: -3s;
}

.grid-program {
  z-index: 100;
}

.move {
  z-index: 250;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGxmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDQtMTdUMTk6NTQ6NDYtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDQtMTdUMjA6MDQ6MTktMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA0LTE3VDIwOjA0OjE5LTA0OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpmZTE4ODZmYS0yZGFmLTRhMjUtYWE2My1mNjQxZDgzODY5ZTAiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1M2NlMjcxYi00MjU4LWUyNDItODVkYS1kYTg3ODAwNmE3ZDUiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1NTk5ZThiZC0wNjJlLTQ5NmEtOWJkZi1hZWZlYjQyZWVlNTEiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTU5OWU4YmQtMDYyZS00OTZhLTliZGYtYWVmZWI0MmVlZTUxIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDE5OjU0OjQ2LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZjYzZjhhZWMtNWJjMC00ZGM1LWE0NzQtNDNjZWNjN2I5MWZhIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDIwOjAzOjQ4LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZmUxODg2ZmEtMmRhZi00YTI1LWFhNjMtZjY0MWQ4Mzg2OWUwIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDIwOjA0OjE5LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4RRk2rAAAAw0lEQVRYw8WX3Q2AMAiE2T92CdZhqBpNTeo/tByYEHy8+zRwUK11aUWKXrw7tZesKr07Dq5dRK+GA53zG4GtS4DzTwLSCun8l4AASJCFwPEIyPkvgV6AAJyrCcyS4FkCMyTIk4CVBHsTuJLwEmAmoBUBI6AVASWgEQEn4CVgmIDXJxgi4PkTDs0ByZ4DlDEHUKPYtAsQy0iVB5DrWJUHkIHkMxNGRLLSXykZofSVQFQsfyQQeZjcCESfZicCKQU5uQ29rOcBag5+ttrpAAAAAElFTkSuQmCC");
  cursor: pointer;
}

.dest,
.move {
  background-size: cover;
  background-position: 50%;
}

.dest {
  z-index: 249;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGlWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDUtMDNUMTk6MDQ6MzEtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDUtMDNUMTk6MDQ6MzEtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA1LTAzVDE5OjA0OjMxLTA0OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIyMzVmMjc2LThhNWQtNDlkZi04MmViLTU2MDEyNGJjZDUwMSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmNiYjk3ZGVhLWI5OTktMDc0Yi05OWFmLWRiZjMxMzlhMDEyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjNhYzIyZjg0LTQxNDctNDJlYS1hM2EwLWQxNjJhYjNhZmU3ZSIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6M2FjMjJmODQtNDE0Ny00MmVhLWEzYTAtZDE2MmFiM2FmZTdlIiBzdEV2dDp3aGVuPSIyMDIwLTA1LTAzVDE5OjA0OjMxLTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjIzNWYyNzYtOGE1ZC00OWRmLTgyZWItNTYwMTI0YmNkNTAxIiBzdEV2dDp3aGVuPSIyMDIwLTA1LTAzVDE5OjA0OjMxLTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpEb2N1bWVudEFuY2VzdG9ycz4gPHJkZjpCYWc+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmFlYzU0YWE2LWM4YzMtMDE0MS1iNWI3LTlmZTBiYTUzMDlkNzwvcmRmOmxpPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOkRvY3VtZW50QW5jZXN0b3JzPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiM2/CQAAACISURBVFgJY7hw4cJ7EP7//z/DQNAMIMZAYbADYK55/vz5Z3pimCPgrkEWpDWG2YURAjBBWsf9gIUANs9iFaRXFIyGANEhQEnCHLAQwGcOWSEw5NLAaAiMhsBoCIyGwPAKAXIqIqqGwGh7YGSFAC2b5ESFAD07JhghQO+uGUoIDBRmGMiuOQgDAFPfcnEsbBuNAAAAAElFTkSuQmCC");
  pointer-events: none;
}

.move-up {
  transform: rotate(-90deg);
}

.move-left {
  transform: rotate(-180deg);
}

.move-right {
  transform: rotate(0deg);
}

.move-down {
  transform: rotate(-270deg);
}

.move::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: jhtitles;
  font-size: 1.1em;
  color: #fff;
  pointer-events: none;
}

.move-up::after {
  content: "W";
  transform: rotate(90deg);
}

.move-left::after {
  content: "A";
  transform: rotate(180deg);
}

.move-down::after {
  content: "S";
  transform: rotate(270deg);
}

.move-right::after { content: "D"; }

.upload-list {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
}

.action {
  z-index: 300;
  background-size: cover;
  background-position: 50%;
  opacity: 0.6;
  pointer-events: none;
}

.action.clickable {
  cursor: pointer;
  pointer-events: all;
}

.action.attack {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDQtMTdUMTk6NTM6NDUtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDQtMTdUMjA6MDE6NTYtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA0LTE3VDIwOjAxOjU2LTA0OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNGRiMTkzMS02YjQ3LTQ4MTItYjU1My1kZTViYmE4NDY4YzIiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpjOGM5Mjc2Yi1kNzNmLTAzNGMtYTFiMS1jNTNlMjU1MTEwMGIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0NTkyOGM4NS05YWMyLTRiYTEtYTdjYS02ZWMyMDVkOGYzYzciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NDU5MjhjODUtOWFjMi00YmExLWE3Y2EtNmVjMjA1ZDhmM2M3IiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDE5OjUzOjQ1LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDRkYjE5MzEtNmI0Ny00ODEyLWI1NTMtZGU1YmJhODQ2OGMyIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDIwOjAxOjU2LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4LVS8nAAAAdElEQVRYCWP4P/PMfyBgGBAMtBvCYABSA4Gh5CByALFBh8dAkvQPXgeAEiZy4kTnYzEIPXHh1T/4HUBrPPgdQCgIKeUPfgeM3DRAbrYiNdsOfgdQO0rIrg0HzAEjNw2MlgOjdcFoGhhtE472C0Zm33CAu+cAzM0D/l3y+IcAAAAASUVORK5CYII=");
}

.action.helper {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF6WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDQtMTdUMTk6NTM6NTgtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDQtMTdUMjA6MDM6MjctMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA0LTE3VDIwOjAzOjI3LTA0OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpmMmRhMDIwMi05NTZkLTRlMmEtODhiNi1iMTE4NGYyYzVmNmQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NmZlZTBlYzUtYjZmMy00MTU5LWI5OGItZTFlOWQyNmI4MzMzIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NmZlZTBlYzUtYjZmMy00MTU5LWI5OGItZTFlOWQyNmI4MzMzIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjZmZWUwZWM1LWI2ZjMtNDE1OS1iOThiLWUxZTlkMjZiODMzMyIgc3RFdnQ6d2hlbj0iMjAyMC0wNC0xN1QxOTo1Mzo1OC0wNDowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmYyZGEwMjAyLTk1NmQtNGUyYS04OGI2LWIxMTg0ZjJjNWY2ZCIgc3RFdnQ6d2hlbj0iMjAyMC0wNC0xN1QyMDowMzoyNy0wNDowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+re4BiAAAAHdJREFUWMNjmHnl/7v///8zDAQG2Q1mMAyQC+B2DxoHEKsXn4Gk6B+8DgAlDuTEic7HZhB64sKnf/A7gNZ48DuAUBBSyh/8Dhi5aYDcbEVqth38DqB2lJBdGw6YA0ZuGhgtB0brgtE0MNomHO0XjMy+4QB3z98DAHjRHtpfjjHLAAAAAElFTkSuQmCC");
}

.action.neutral {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDQtMTdUMjA6MTM6NDItMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDQtMTdUMjA6MTM6NDItMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA0LTE3VDIwOjEzOjQyLTA0OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmUyNTVkMDRkLTRkYzYtNDI2NC1iZTE1LWQ1ZWI1OTdiMGI5MiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjI5MDcxZWQwLTU0MDktNWE0NS1iMzM4LTNhOWFmZWM2ZGUzOSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjU5YTM3MjZkLWE0MmItNGI5Yy04ZWEzLThlMzkyY2JmYjg4OSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTlhMzcyNmQtYTQyYi00YjljLThlYTMtOGUzOTJjYmZiODg5IiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDIwOjEzOjQyLTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZTI1NWQwNGQtNGRjNi00MjY0LWJlMTUtZDVlYjU5N2IwYjkyIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDIwOjEzOjQyLTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Q4i7dAAAAdklEQVRYCWM485/hPxAwDAQG2Q1mMKwCMgYAg+0eVA4gNujwGUiK/sHrAGDieA/CuPjYDEJLXHj1D34H0BoPfgcQCkJK+YPfASM3DZCbrUjNtoPfAdSOErJrwwFzwMhNA6PlwGhdMJoGRtuEo/2Ckdk3HOjuOQD6s1f7M2vv6gAAAABJRU5ErkJggg==");
}

.non-player {
  opacity: 0.6;
  cursor: default !important;
}

.program-menu {
  grid-row: 2/3;
  grid-column: 1;
  color: #fff;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
}

.program-menu::-webkit-scrollbar {
  width: 6px;
}

.program-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

.program-menu::-webkit-scrollbar-track {
  background: transparent;
}

.battle-container.databattle-started .program-menu {
  grid-row: 1/3;
}

.no-action {
  grid-row: 3;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.begin-databattle {
  grid-column: 2;
}

.begin-databattle,
.undo {
  grid-row: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.undo {
  grid-column: 1;
}

.grid-program {
  position: relative;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  z-index: 200;
}

.grid-program > .icon {
  flex: 1 1;
  width: 100%;
  z-index: 202;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.head {
  cursor: pointer;
  z-index: 201;
  outline: 0.2em solid transparent;
  outline-offset: 0.125em;
}

.head.active {
  outline-color: #fff;
  animation-name: outline-fade;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

@keyframes outline-fade {
  0% {
    outline-color: #fff;
  }

  100% {
    outline-color: transparent;
  }
}

@keyframes outline-fade {
  0% {
    outline-color: #fff;
  }

  100% {
    outline-color: transparent;
  }
}

.grid-program.done::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  left: 75%;
  top: -25%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGtWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDQtMTdUMjA6Mjg6MzYtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDQtMTdUMjA6MzQ6MjAtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA0LTE3VDIwOjM0OjIwLTA0OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkMmRmMTYxNC03YTRkLTQ5NWUtOWY1MC0yYTU5NTU3MWM3YjgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzVhNWYwMDgtMDliZC00MTU2LWFjM2MtZGRlNDBjYzcyMDMzIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NzVhNWYwMDgtMDliZC00MTU2LWFjM2MtZGRlNDBjYzcyMDMzIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjc1YTVmMDA4LTA5YmQtNDE1Ni1hYzNjLWRkZTQwY2M3MjAzMyIgc3RFdnQ6d2hlbj0iMjAyMC0wNC0xN1QyMDoyODozNi0wNDowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmY3OGNmM2Y2LThiOWMtNDJmZi1hMTgzLTQ0ODlhNGMyNDAzYyIgc3RFdnQ6d2hlbj0iMjAyMC0wNC0xN1QyMDoyOS0wNDowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmQyZGYxNjE0LTdhNGQtNDk1ZS05ZjUwLTJhNTk1NTcxYzdiOCIgc3RFdnQ6d2hlbj0iMjAyMC0wNC0xN1QyMDozNDoyMC0wNDowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+B+1dNAAAAGtJREFUWMPt1iEOwDAMA0D//wf7Ux9TPpCCqiRSl2kFUTwDk4D6UBqYGTIDAQSoB7i7PYYPEBUegggBwEx9wNdiDwgghQC7Aj+/2gwfYD3sC6NiHsAOEhXXBbyFpK3idMB/fkNdRLqKBWAHDKm6usEN8BAnAAAAAElFTkSuQmCC");
  background-size: cover;
  z-index: 203;
}

.grid-program > .link {
  --size: 30%;

  position: absolute;
  width: var(--size);
  height: var(--size);
  margin-top: calc(var(--size) / -2);
  margin-left: calc(var(--size) / -2);
  top: 0;
  left: 0;
  z-index: 199;
}

.grid-program > .upper-link {
  left: 50%;
  top: -2%;
}

.grid-program > .right-link {
  top: 50%;
  left: 102%;
}

.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: 6%;
  margin-left: 6%;
  opacity: 0.5;
  z-index: 198;
}

.grid-program.fading {
  animation-name: grid-fade;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

@keyframes grid-fade {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0.3;
    transform: scale(0.1);
  }
}

@keyframes grid-fade {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0.3;
    transform: scale(0.1);
  }
}

.grid-program.flickering {
  animation-name: flicker;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.pm-container {
  flex-direction: column;
  align-items: space-between;
  height: 100%;
  padding: 0.5em;
}

.pm-container,
.pm-header {
  display: flex;
  justify-content: stretch;
}

.pm-header {
  height: 3em;
  flex-direction: row;
  align-items: flex-start;
}

.pm-icon {
  flex: none;
  margin-right: 1em;
}

.pm-icon,
.pm-icon > img {
  position: relative;
  height: 100%;
}

.pm-icon > img {
  z-index: 302;
}

.pm-stats {
  flex: 1 1;
}

.pm-title {
  margin-top: 0.5em;
  margin-bottom: 0.25em;
}

.pm-commands {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  text-transform: uppercase;
  color: #bdbdbd;
}

.pm-actions {
  margin-left: -0.5em;
  margin-right: -0.5em;
  margin-bottom: 0.5em;
  display: flex;
  flex-direction: column;
}

.pm-actions > .Button {
  border-left: none !important;
  border-right: none !important;
}

.pm-actions > .Button:not(:last-child) {
  border-bottom: none !important;
}

.pm-action-req {
  padding-right: 1em;
}

.pm-noaction {
  background: linear-gradient(175deg, #616e9b, #161928);
}

.pm-action-title {
  text-transform: uppercase;
}

.pm-icon-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 6%;
  margin-left: 6%;
  opacity: 0.5;
  z-index: 298;
}

.pm-description {
  text-transform: uppercase;
  margin-top: 0;
}

.pm-info-action {
  background-color: hsl(0deg, 0%, 100%, 0.5);
  text-align: center;
  padding-top: 0.5em;
}

.Button,
.pm-info-action {
  color: #fff;
  padding-bottom: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
}

.Button {
  font-size: 1em;
  padding-top: 0.25em;
  border-width: 0.2em;
  border-style: solid;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Button.bg-gradient-light-blue {
  background: linear-gradient(178deg, #669dae, #0d2234);
}

.Button.bg-gradient-light-blue:not(.unclickable):active,
.Button.bg-gradient-light-blue:not(.unclickable):hover {
  background: linear-gradient(178deg, #6bcbe8, #0d2234);
}

.Button.bg-gradient-dark-blue {
  background: linear-gradient(178deg, #616e9b, #161928);
}

.Button.bg-gradient-dark-blue:not(.unclickable):active,
.Button.bg-gradient-dark-blue:not(.unclickable):hover {
  background: linear-gradient(178deg, #4b64c1, #161928);
}

.Button.bg-gradient-green {
  background: linear-gradient(178deg, #48813b, #131914);
}

.Button.bg-gradient-green:not(.unclickable):active,
.Button.bg-gradient-green:not(.unclickable):hover {
  background: linear-gradient(178deg, #4aa735, #131914);
}

.Button.bg-gradient-red {
  background: linear-gradient(178deg, #c57185, #5a1728);
}

.Button.bg-gradient-red:not(.unclickable):active,
.Button.bg-gradient-red:not(.unclickable):hover {
  background: linear-gradient(178deg, #f6003f, #630015);
}

.Button.unclickable {
  cursor: auto;
}

.Button.border-solid {
  border-color: #bdbdbd;
}

.Button.border-gradient {
  border-image: linear-gradient(
      -12deg,
      #a7b1ba,
      #424b4d 40%,
      #424b4d 60%,
      #a7b1ba
    )
    1;
  box-shadow: inset 0 0 0.2em 0.2em rgb(0, 0, 0, 0.5);
  padding-top: 0.4em;
  padding-bottom: 0.3em;
}

.Button:not(.bold) > .button-text {
  padding-top: 0.1em;
  font-family: bitlight;
}

.Button.bold > .button-text {
  font-family: "04b25";
  transform: scaleY(0.85);
  padding-bottom: 0.1em;
}

.Button:not(.unclickable):active {
  box-shadow: inset 0 0 0.4em 0.3em rgb(0, 0, 0, 0.6);
}

:root {
  --border: 0.125em solid #fff;
}

.battle-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.battle-intro-container {
  color: #fff;
  max-width: 50%;
}

.battle-intro-block,
.battle-intro-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.battle-intro-block {
  background-color: hsl(0deg, 0%, 100%, 0.3);
  padding: 2em 1em;
  border: 0.125em solid #fff;
  border: var(--border);
}

.battle-intro-logo {
  height: 10em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  margin-bottom: 2em;
}

.battle-intro-header,
.battle-warning {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.battle-intro-header {
  color: #ebfbff;
}

.battle-intro-text {
  text-transform: uppercase;
  margin-bottom: 1em;
  margin-right: 1em;
  line-height: 1.4em;
}

.battle-intro-bottom {
  position: relative;
  margin-top: 0.75em;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.battle-intro-bar {
  flex: 1 1;
  overflow: hidden;
  position: relative;
  border: 0.125em solid #fff;
  border: var(--border);
}

.battle-intro-loading {
  position: absolute;
  inset: 0;
  background-color: #48813b;
  opacity: 0.75;
  animation-name: loading;
  animation-timing-function: linear;
  will-change: transform;
  animation-fill-mode: both;
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

.battle-intro-bottom > .Button {
  margin-left: 1em;
  padding-left: 3em !important;
  padding-right: 3em !important;
  flex: none;
}

.ul-menu {
  background: rgb(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
  padding: 0.5em;
  overflow: none;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
}

.ul-menu-items {
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* program.list is a 3-column icon grid, grouped by program color. Each group
   is a contiguous run of cells with a left accent bar in the shared color;
   single-color programs collapse into the trailing misc group. */
.ul-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4em;
  padding: 0.4em 0 0.4em 0.5em;
  margin-bottom: 0.5em;
  border-left: 0.25em solid #888;
}

.ul-group-misc {
  border-left-color: rgba(189, 189, 189, 0.5);
}

.ul-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0.15em solid transparent;
}

.ul-cell.clickable {
  cursor: pointer;
}

.ul-cell-empty {
  opacity: 0.3;
}

.ul-cell.keyboard-highlight {
  border-color: #7df;
}

.ul-cell-icon-box {
  position: relative;
  width: 78%;
  height: 78%;
}

.ul-cell-icon {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ul-cell-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 12%;
  margin-left: 12%;
  opacity: 0.5;
  z-index: 1;
}

.ul-cell-count {
  position: absolute;
  bottom: 0.05em;
  right: 0.15em;
  z-index: 3;
  font-family: "04b25";
  color: #fff;
  font-size: 0.75em;
  text-shadow: 0 0 0.2em #000;
}

.ul-cell.clickable:active .ul-cell-icon {
  transform: scale(0.92);
}

@media (pointer: coarse) {
  .ul-cell.clickable:active {
    background: rgba(125, 255, 255, 0.15);
  }

  .ul-menu-scroll {
    display: none;
  }

  .undo .Button,
  .begin-databattle .Button {
    font-size: 1.3em;
  }

  .pm-container {
    font-size: 1.3em;
  }
}

.ul-menu-scroll {
  display: none !important;
}

.ul-menu-items {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
}

.ul-menu-items::-webkit-scrollbar {
  width: 6px;
}

.ul-menu-items::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

.ul-menu-items::-webkit-scrollbar-track {
  background: transparent;
}

.ul-menu-scroll-down,
.ul-menu-scroll-up {
  flex: 1 1;
  background-size: contain;
  background-position: 50%;
  background-repeat: space;
  cursor: pointer;
}

.ul-menu-scroll-up {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDUtMjVUMTg6Mzc6NDQtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDUtMjVUMTg6Mzc6NDQtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA1LTI1VDE4OjM3OjQ0LTA0OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVkMzE2ZDhmLTZjMjgtNDZhYS05MGQ0LWRlMGNmYTUwYzMxMCIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmM5ZWE4ZDczLTNkMDYtMzU0Zi05M2NkLWUxYmI3MzYxMWRiYiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjU2NDQ2YzcyLTNkYWItNDlkZC05ZjQ5LTA1MDliNzE3ZmYwNyIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTY0NDZjNzItM2RhYi00OWRkLTlmNDktMDUwOWI3MTdmZjA3IiBzdEV2dDp3aGVuPSIyMDIwLTA1LTI1VDE4OjM3OjQ0LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NWQzMTZkOGYtNmMyOC00NmFhLTkwZDQtZGUwY2ZhNTBjMzEwIiBzdEV2dDp3aGVuPSIyMDIwLTA1LTI1VDE4OjM3OjQ0LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz75Qr5VAAACt0lEQVR4nO3aP08UURyF4QdFFtHVNRCJJoKNpVErEVBBxP8WJmrhF1Q/hYmVjTYmgr2xwtJCQbG4TBZ02dmFmfmBzNtsQmaXc8+959w7szuwvr7uIHMoWkA0tQHRAqKpDYgWEE1tQLSAaGoDogVEUxsQLSCa2oBoAdHUBkQLiCbSgCZeYBZHokQMBv3fYSziEs5jDe8ihEQYcAIzmEMDLdzGKj6g0kdUAxU/EmtKg3/k32W/gpdYllZEJVTZAUPSsl/UOfNjeI6LFWqqzIBhadancbzLdeO4j6kqRFFNB5yUBj4nZT6PSakT1vBeyZ1Qdgc0pW3uof63uqwTPksFWQplRmAId6TZ3Mk+X0knlGVAlvlrumc+j3HckyJUCmV0QEsa+JzeMp/HJBbwUwmdUHQHNHFDavKij7creCWdEwrrhCIjkGV+QTln+zE8k47PhVGUASPamT9W0Gd2Yhx3FdgJRXRAy9azfdlMKLATdtsBWeYfqP7GagWvsWQXnbCbCGzOfMRdZSGdsFMDRvBY+ZnP47RddsJOZq4lZX5e4JOcTWSdsCp1wu9+3txvB0RmPo9vUid80kcn9BOBhnQsjcp8HqN4qs9O6NWALPNXxWY+j6wTZnp9Qy8z2dLe5/dC5vOYkO5As3NC107I64Ambkpn+7247LvRUyd0i0BDGvgt+2/wtDvhcreLtjMgy/yUvZ35PLJOmN3ugk4ze0r7Gd5+yHwe56RO+KFDJ/xtQBPXJdf247LfjjN4IhXj0sYrtkagIR1w5v1fg88Yle4drmz+Y7YLNKXCm8bRyqVVy1e8wVvSTGeZn5VWQV9n6X3IWanfvuPjoPTFxSS+bFzwvxtwGL9wActVfzm656h/IRItIJragGgB0dQGRAuIpjYgWkA0tQHRAqKpDYgWEE1tQLSAaA68AX8AoYduX7W97V4AAAAASUVORK5CYII=");
}

.ul-menu-scroll-down {
  margin-top: 5em;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkBRwVMTRuKgb/AAACLUlEQVRo3u2YT1PTQADFf5FQDxw8+GdGBbz5AWQcr4UT6ODV4TNywZEhVkRGxiRltKNMj34CHZ0R04LJVuph2VratJtN0/Sy75Z0s+/Xfa/NJk6X2erajP0tgAWwABbAAlgAC4DLApssMsffGXz1Fnsugq885D4XpQPE1Dh1SWiwwCr3SgY4J+CIyLnckj1hk9sl2p9RZ4f4fwk/s83P0uw7HLJHDOBenkpoUuEZd0uwF3gERPLA7Z2+4CPXqbI0Zfs2AYecqUNnYFv+mOfcmap9nZdy8QdXQOoLCS+4OSX7Du94328/DCBoUuHpVH6UAg9fZT8KQHahQpXlgu0j6v3ZK6XfC3xqfC/Uvs0xr4bt01ZA6gRRYBc6HHB0NXsdgOzCOosF2KdmrwOQXZhndeIuRIRp2SuN3w8EE3ehTZiefTYAOGGbH7ntOxzwhmTcEEf7gsJhhY1cXYip4fNr/CBXO02XT1RydCG6+p8/Stn2hAE1vhnZtwnZ1dtn35SadUHos1fSd6A3MnMXYjxCXfZK+g4oyS5UeaAZJ7P/k3Vas+eCgNeaLrQI2c1ub7ICUk0Strg14lPBWz5ky14pewd6V7DCeurGLcYj4NRsOtMVkF1wWRvqgmH2SvmeDet4A11oEZhln38FpJqIvi4I9vHNslcy70DvSh6xwRIye5/f+abJuwLQpcE8a9zgOE/2kwMANHBZZj+//SQRFKSZvyGxABbAAlgAC2ABLMA/i5CuHijDkB4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDUtMjhUMjE6NDk6NDUrMDA6MDAzf4D9AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA1LTI3VDE2OjU5OjQzKzAwOjAwb4SWAgAAAABJRU5ErkJggg==");
}

.modal-container {
  position: absolute;
  z-index: 1000;
  margin: auto;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 35%;
  max-width: 30em;
}

.modal {
  background-color: rgb(0, 0, 0, 0.6);
}

.modal-contents {
  padding: 2em;
  color: #fff;
}

.modal-header {
  margin-bottom: 1em;
}

.modal-header-centered {
  text-align: center;
}

.modal-text {
  font-family: bitlight;
  text-transform: uppercase;
  margin-top: 1em;
  margin-bottom: 1em;
  line-height: 1.4em;
}

.modal-buttons {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.modal-buttons > .Button {
  flex: 1 1;
}

.modal-buttons-h {
  flex-direction: row;
}

.modal-buttons-v {
  flex-direction: column;
}

:root {
  --shadow: 0 0 1em -0.125em rgb(0, 0, 0, 0.6);
}

.header-box {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: stretch;
}

.header-box,
.header-box-header {
  display: flex;
  align-items: stretch;
}

.header-box-header {
  padding-right: 1.5em;
  justify-content: space-between;
  background: linear-gradient(180deg, #c8c7d0, #89868d);
  box-shadow: 0 0 1em -0.125em rgb(0, 0, 0, 0.6);
  box-shadow: var(--shadow);
}

.header-box-arrow {
  width: 1.5em;
  margin: 0.25em 0;
  flex: none;
}

.show-arrow {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkBRwVMTRuKgb/AAACLUlEQVRo3u2YT1PTQADFf5FQDxw8+GdGBbz5AWQcr4UT6ODV4TNywZEhVkRGxiRltKNMj34CHZ0R04LJVuph2VratJtN0/Sy75Z0s+/Xfa/NJk6X2erajP0tgAWwABbAAlgAC4DLApssMsffGXz1Fnsugq885D4XpQPE1Dh1SWiwwCr3SgY4J+CIyLnckj1hk9sl2p9RZ4f4fwk/s83P0uw7HLJHDOBenkpoUuEZd0uwF3gERPLA7Z2+4CPXqbI0Zfs2AYecqUNnYFv+mOfcmap9nZdy8QdXQOoLCS+4OSX7Du94328/DCBoUuHpVH6UAg9fZT8KQHahQpXlgu0j6v3ZK6XfC3xqfC/Uvs0xr4bt01ZA6gRRYBc6HHB0NXsdgOzCOosF2KdmrwOQXZhndeIuRIRp2SuN3w8EE3ehTZiefTYAOGGbH7ntOxzwhmTcEEf7gsJhhY1cXYip4fNr/CBXO02XT1RydCG6+p8/Stn2hAE1vhnZtwnZ1dtn35SadUHos1fSd6A3MnMXYjxCXfZK+g4oyS5UeaAZJ7P/k3Vas+eCgNeaLrQI2c1ub7ICUk0Strg14lPBWz5ky14pewd6V7DCeurGLcYj4NRsOtMVkF1wWRvqgmH2SvmeDet4A11oEZhln38FpJqIvi4I9vHNslcy70DvSh6xwRIye5/f+abJuwLQpcE8a9zgOE/2kwMANHBZZj+//SQRFKSZvyGxABbAAlgAC2ABLMA/i5CuHijDkB4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDUtMjhUMjE6NDk6NDUrMDA6MDAzf4D9AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA1LTI3VDE2OjU5OjQzKzAwOjAwb4SWAgAAAABJRU5ErkJggg==");
  transform: rotate(90deg);
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.header-box-title {
  padding: 0.3em 0.5em 0;
  flex: none;
  background: linear-gradient(180deg, #2b3444, #737892);
  color: #fff;
  margin-bottom: 0.25em;
}

.header-box-header-spacer {
  flex: 1 1;
}

.header-box-button {
  cursor: pointer;
  padding: 0.3em 1.5em 0;
  margin-bottom: 0.25em;
  flex: none;
  background: #cfcfd0;
  color: #000;
  border-image: linear-gradient(#000, #656473) 3;
  border-width: 0.25em;
  border-style: solid;
  border-top: none !important;
}

.header-box-contents {
  min-height: 0;
  width: 100%;
  flex: 1 1;
  border-image: linear-gradient(#808288, #b1bab3) 30;
  border-width: 0.25em;
  border-style: solid;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  position: relative;
}

.header-box-contents,
.header-box-footer {
  box-shadow: 0 0 1em -0.125em rgb(0, 0, 0, 0.6);
  box-shadow: var(--shadow);
}

.header-box-footer {
  height: 0.5em;
  background: linear-gradient(180deg, #c8c7d0, #89868d);
}

:root {
  --size: 40%;
}

.credit {
  position: relative;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}

.credit > .credit-icon {
  flex: 1 1;
  margin-top: -4%;
  margin-top: calc(-0.1 * var(--size));
  margin-left: -4%;
  margin-left: calc(-0.1 * var(--size));
  width: 40%;
  width: var(--size);
  z-index: 152;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDQtMTdUMTk6NTc6NTgtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDQtMTdUMTk6NTc6NTgtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA0LTE3VDE5OjU3OjU4LTA0OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ5Nzg3YjI3LWUzYTgtNDI4OC1hY2IwLWQxYzE0NjhhMTM3MyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjUyODBiYzQ2LTU2NDktNDc0NC1iMjkzLWY2OTUyOTBiNDhjNyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjNjOWI1OWEwLTZiZGYtNDYxYi05MTY1LWVlNDVhMDUyYTUzMiIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6M2M5YjU5YTAtNmJkZi00NjFiLTkxNjUtZWU0NWEwNTJhNTMyIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDE5OjU3OjU4LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NDk3ODdiMjctZTNhOC00Mjg4LWFjYjAtZDFjMTQ2OGExMzczIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDE5OjU3OjU4LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Xp4afAAAAYklEQVRYCWP4//8/Awwb/zf+h4RpBhm2v2eE41EH0NIiohwz6gCCSmYyUAcPPQdQy+JRB1DVAXTNBaMOGHXAqANGHTBaFA+4A0YbJIPGAbSBp2B41AHoXTNawgswjGznqAMAKDz+A33sljAAAAAASUVORK5CYII=");
  background-size: 40%;
  background-size: var(--size);
  background-position: 50%;
  background-repeat: no-repeat;
}

.credit::after {
  content: "";
  position: absolute;
  width: 40%;
  width: var(--size);
  height: 40%;
  height: var(--size);
  margin-top: 36%;
  margin-top: calc(0.9 * var(--size));
  margin-left: 36%;
  margin-left: calc(0.9 * var(--size));
  opacity: 0.5;
  background-color: #000;
  z-index: 151;
  border-radius: 20%;
}

.data-pack {
  position: relative;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}

.data-pack > .datapack-icon {
  flex: 1 1;
  z-index: 153;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGxmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDQtMTdUMTk6NTU6MjUtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDQtMTdUMjA6MDQ6MzQtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA0LTE3VDIwOjA0OjM0LTA0OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmU2NjQxMDUxLTdiMTgtNDAxOC04NzJhLTY1ZTIxNmJjNzA5OSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRkOTE4MGRjLWFjYjktNGQ0MC05NDFkLTNkNzNjZDM2YzgxMiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmViZjA0ZmNiLTZjNTQtNDAxMi1hYzI2LTI5MGU2MmZmNzE2NSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZWJmMDRmY2ItNmM1NC00MDEyLWFjMjYtMjkwZTYyZmY3MTY1IiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDE5OjU1OjI1LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZDE3ODNjODktZGM0MS00M2JlLTlmYWQtZWVkMTg0YTJkZjYzIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDE5OjU1OjI1LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZTY2NDEwNTEtN2IxOC00MDE4LTg3MmEtNjVlMjE2YmM3MDk5IiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDIwOjA0OjM0LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6e9xrwAAAAoElEQVRYw+3XOwqAMBAE0NzJ0svNNfY2uYylkD7F2ET8IrhZ/IQthohpnsMaNJAMbyY44JuAnKiKJUBEKCJkTowxbtb13voawOiAuxDTGQBAM8DZ017dOwByYtf1w5ynASyAOT8EVM6AXQNXb8B+zwFtzYDyJHRAQzPwLqAEwAiAd2IKqG2iHrC0oGrCBFDThB2gpHxcUJG2AKr4r9lnAROy1hp/42z6FgAAAABJRU5ErkJggg==");
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}

.hackerman-container {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.hackerman {
  word-break: break-all;
  color: #fff;
  opacity: 0.6;
}

.attack-animation-container {
  overflow: visible;
  position: relative;
  animation-name: container;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.14, 0.93, 0.7, 0.93);
}

@keyframes container {
  0% {
    opacity: 1;
    transform: rotate(30deg);
  }

  80% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;
    transform: rotate(60deg);
  }
}

@keyframes container {
  0% {
    opacity: 1;
    transform: rotate(30deg);
  }

  80% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;
    transform: rotate(60deg);
  }
}

.attack-animation-start {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.attack-animation-square {
  background-color: #fff;
  margin: 1em;
  flex: 1 1;
  z-index: 99999;
  animation-name: move-out;
  animation-timing-function: ease-out;
}

@keyframes move-out {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(900%);
  }
}

@keyframes move-out {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(900%);
  }
}

.highlight-rect {
  position: fixed;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDUtMjZUMDA6MTg6NDgtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDUtMjZUMDA6MTg6NDgtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA1LTI2VDAwOjE4OjQ4LTA0OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmQxODdlM2M4LTAxYTEtNDc4ZS1hZjg5LTI2MmVlNGMzYmFlMSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmU3NjAxNzBiLTBjY2YtYjc0NC1iMTE1LTY3OTNkODkyOTA3MiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjZjMzM1ODc1LTEwNmUtNGZmYi1hNDI3LTY3NGRjYmNjOWYyYiIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NmMzMzU4NzUtMTA2ZS00ZmZiLWE0MjctNjc0ZGNiY2M5ZjJiIiBzdEV2dDp3aGVuPSIyMDIwLTA1LTI2VDAwOjE4OjQ4LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZDE4N2UzYzgtMDFhMS00NzhlLWFmODktMjYyZWU0YzNiYWUxIiBzdEV2dDp3aGVuPSIyMDIwLTA1LTI2VDAwOjE4OjQ4LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5OAA1LAAAQ7ElEQVR4nO3d27YmVXnH4f8SWkQDBgUNgQDpnbeRGwi0gux3gd4hYKPoMBIiMUQSZWCEMHKcO8lBLmzloNi1LLrXt76qmnPW+zwnjMFgrH4PelC/NWvOWQeHh4cBAGr5WusBAID1CQAAKEgAAEBBAgAAChIAAFCQAACAggQAABQkAACgIAEAAAUJAAAoSAAAQEECAAAKEgAAUJAAAICCBAAAFCQAAKAgAQAABQkAAChIAABAQQIAAAoSAABQkAAAgIIE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");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  opacity: 0.8;
  animation-name: arrow;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  z-index: 9999999;
}

/* Tutorial: pulsing white ring riveted to the element that needs clicking.
   Attached to the node itself (not a floating overlay) so it can never drift
   on reflow or mobile orientation change. Outset + inset rings so an ancestor
   with overflow:hidden can't fully clip it. */
.tutorial-target {
  position: relative;
  z-index: 300; /* above .grid-program (200) so the ring is never occluded */
  border-radius: inherit;
  animation: tutorial-pulse 0.08s ease-in-out infinite alternate;
}

/* During the tutorial, kill every other flashing/pulsing outline so the only
   thing blinking is the tutorial ring. Covers the white "selected" outline
   flash on any unit (head), not just grid programs; !important so it wins over
   the .head.active animation. */
body.tutorial-active .head.active,
body.tutorial-active .grid-program.head.active {
  outline-color: transparent !important;
  animation: none !important;
}

/* Superphreak yellow (#f5d71e) */
@keyframes tutorial-pulse {
  from {
    box-shadow: 0 0 10px 4px rgba(245, 215, 30, 0.4),
      0 0 0 3px rgba(255, 240, 150, 0.4), inset 0 0 0 2px rgba(255, 240, 150, 0.4);
  }

  to {
    box-shadow: 0 0 20px 8px rgba(245, 215, 30, 0.9),
      0 0 0 7px rgba(255, 240, 150, 1), inset 0 0 0 3px rgba(255, 240, 150, 1);
  }
}

@keyframes arrow {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(10%);
  }
}

@keyframes arrow {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(10%);
  }
}

.credits-green {
  background: #000 !important;
  color: #0f0;
  width: 6em;
  font-family: "04b25";
  padding-right: 0.5em;
  margin-right: 2em;
  text-align: right;
  margin-bottom: 0.25em;
}

.current-programs-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.current-programs-container > * {
  pointer-events: auto;
}

.current-programs-list {
  grid-row: 1/3;
  grid-column: 1;
  background-color: rgb(0, 0, 0, 0.5);
}

.current-programs-info {
  grid-row: 3/5;
  grid-column: 1;
  background-color: rgb(0, 0, 0, 0.5);
  color: #fff;
}

/* program.info scrolls natively like program.list (.ul-menu-items): vertical
   only, matching thin scrollbar — keeps the two panels the same width. */
.current-programs-info .header-box-contents {
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
}

.current-programs-info .header-box-contents::-webkit-scrollbar {
  width: 6px;
}

.current-programs-info .header-box-contents::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

.toggle-hidden {
  grid-row: 5;
  grid-column: 1;
  margin-top: auto;
  margin-bottom: auto;
}


:root {
  --arrow-size: 7.5em;
  --arrow-margin: 0.5em;
}

.netmap-container {
  position: absolute;
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
}

.netmap-bg {
  position: absolute;
  background-size: cover;
  background-position: 50%;
  transform-origin: top left;
  will-change: transform;
}

.netmap-node {
  --width: 108px;
  --height: 108px;
  --nudge: 16px;

  position: absolute;
  width: var(--width);
  height: var(--height);
  margin-left: calc(-0.5 * var(--width));
  margin-top: calc(-1 * var(--height) + var(--nudge));
  transition:
    transform 0.1s,
    filter 0.1s;
  transition:
    filter 0.1s,
    transform 0.1s;
  transition:
    filter 0.1s,
    transform 0.1s,
    filter 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
}

.netmap-node > img {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.netmap-node::after {
  content: none;
}

.node-tooltip {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity 0.1s;
}

.node-tooltip {
  top: 100%;
  left: 30%;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.32em;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  line-height: 1.2em;
  text-shadow: 0 0 4px #000, 0 0 8px #000, 1px 1px 2px #000;
}

.netmap-node.selected,
.netmap-node:active,
.netmap-node:hover {
  filter: contrast(150%) saturate(75%) brightness(115%);
}

.node-under-selected {
  position: absolute;
  width: 140px;
  height: 78px;
  transform: translate(-50%, -50%);
  transition: opacity 0.1s;
  pointer-events: none;
}

.netmap-node.selected {
  transform: translateY(-20%);
}

.netmap-node:active > .node-tooltip,
.netmap-node:hover > .node-tooltip {
  opacity: 1;
}

.netmap-node.selected > .node-tooltip {
  opacity: 0 !important;
}

.netmap-node.invisible {
  display: none;
}

.arrow {
  position: absolute;
  opacity: 0.5;
  height: 10em;
  height: var(--arrow-size);
  width: 10em;
  width: var(--arrow-size);
  cursor: pointer;
  background-image: url("../../static/media/arrow.b638fdf8.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
}

.arrow::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: jhtitles;
  font-size: calc(var(--arrow-size) * 0.2);
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.arrow-up::after {
  content: "W";
  transform: rotate(90deg);
}

.arrow-left::after {
  content: "A";
  transform: rotate(180deg);
}

.arrow-down::after {
  content: "S";
  transform: rotate(-90deg);
}

.arrow-right::after { content: "D"; }

.arrow-left {
  left: -1.5em;
  left: var(--arrow-margin);
  transform: rotate(180deg);
}

.arrow-left,
.arrow-right {
  top: 50%;
  margin-top: -5em;
  margin-top: calc(-0.5 * var(--arrow-size));
}

.arrow-right {
  right: -1.5em;
  right: var(--arrow-margin);
  transform: rotate(0deg);
}

.arrow-up {
  top: -1.5em;
  top: var(--arrow-margin);
  transform: rotate(270deg);
}

.arrow-down,
.arrow-up {
  left: 50%;
  margin-left: -5em;
  margin-left: calc(-0.5 * var(--arrow-size));
}

.arrow-down {
  bottom: -1.5em;
  bottom: var(--arrow-margin);
  transform: rotate(90deg);
}

.top-right-controls {
  position: absolute;
  top: 0.5em;
  right: 2em;
  color: #fff;
  vertical-align: baseline;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.top-right-controls > .Button {
  margin-left: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

/* Day/dawn mode toggle next to Menu: same height + font as the Menu button
   (isBold), 12x as wide as it is tall so the label has room. */
.top-right-controls > .nightfall-toggle {
  margin-left: 1em;
  align-self: stretch;
  aspect-ratio: 12;
  min-width: 0;
  padding: 0;
}

.credits-num {
  color: green;
  font-family: "04b25";
}

.nightfall {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  pointer-events: none;
}

.nightfall.entering,
.nightfall.exit {
  animation-name: nightfall;
  animation-duration: 1s;
  animation-timing-function: steps(10);
  animation-fill-mode: both;
  background-color: rgb(0, 0, 0, 0.5);
  pointer-events: all;
}

.nightfall.entering {
  animation-direction: normal;
}

.nightfall.exit {
  animation-direction: reverse;
  pointer-events: none;
}

.nightfall.entered {
  pointer-events: all;
  background-color: rgb(0, 0, 0, 0.5);
}

@keyframes nightfall {
  0%,
  7% {
    opacity: 0;
  }

  10%,
  27% {
    opacity: 1;
  }

  30%,
  37% {
    opacity: 0;
  }

  40%,
  67% {
    opacity: 1;
  }

  70%,
  97% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes nightfall {
  0%,
  7% {
    opacity: 0;
  }

  10%,
  27% {
    opacity: 1;
  }

  30%,
  37% {
    opacity: 0;
  }

  40%,
  67% {
    opacity: 1;
  }

  70%,
  97% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.warez-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.warez-container > * {
  pointer-events: auto;
}

.warez-container > .popup {
  grid-row: 1/3;
  grid-column: 2;
  margin: 1em 1em 2em;
}

.warez-menu {
  background-color: rgb(0, 0, 0, 0.5);
  grid-row: 2/4;
  grid-column: 3;
  color: #fff;
}

.warez-header {
  flex: none;
  margin-left: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.warez-programs {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex: 1 1;
}

.warez-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  cursor: pointer;
  padding: 0.5em 1em 0.25em 0.75em;
}

.warez-item:active,
.warez-item:hover {
  background: hsl(0deg, 0%, 100%, 0.5);
}

.warez-buttons {
  flex: none;
  width: 100%;
  display: flex;
  justify-content: stretch;
}

.warez-buttons > .Button {
  flex: 1 1;
}

.warez-list {
  height: 100%;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.warez-program-info {
  background-color: rgb(0, 0, 0, 0.5);
  grid-row: 3;
  grid-column: 4;
  color: #fff;
}

.popup {
  background-color: rgb(0, 0, 0, 0.6);
}

.popup-contents {
  padding: 1em;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.popup-header {
  margin-bottom: 1em;
}

.popup-contents > h3 {
  text-align: center;
  line-height: 1.6em;
  text-transform: uppercase;
}

:root {
  --bleep-color: #ddd;
}

.dialogue-container {
  position: absolute;
  inset: 0;
  padding: 18% 5% 5% 62%;
  display: flex;
  justify-content: stretch;
  align-items: stretch;

  /* Above the board units (grid-program z-index 200) so the dim covers them. */
  z-index: 1000;
}

.dialogue-container.passthrough {
  pointer-events: none;
}

/* Dim the rest of the screen behind a dialogue menu. Skipped for passthrough
   (tutorial) dialogues, which must keep the board visible and clickable.
   Uses a position:fixed pseudo so the dim covers the whole viewport -- not just
   the letterboxed .container -- which matters in fullscreen on mobile, where the
   container is narrower than the (rotated) screen and the netmap sides would
   otherwise show through. z-index:-1 keeps it behind the message box but above
   the board (the .dialogue-container z-index:1000 establishes the context). */
.dialogue-container:not(.passthrough)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

.dialogue-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.dialogue-header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  color: #fff;
  padding-top: 1em;
  padding-left: 1em;
  padding-bottom: 0.5em;
  background: linear-gradient(180deg, #fff, #a8b4bc);
  flex: 1 1;
}

.dialogue-header > .dialogue-image {
  position: relative;
  flex: 1 1;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  height: 100%;
}

.dialogue-header-name {
  padding-left: 0.5em;
  text-transform: uppercase;
  flex: 3 1;
}

.dialogue-text {
  flex: 3 1;
  padding: 1em;
  color: #fff;
  background: linear-gradient(180deg, rgb(0, 0, 0, 0.5), transparent);
  line-height: 1.4em;
  white-space: pre-wrap;
  font-size: 1.15em;
}

.dialogue-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  flex: 1 1;
}

.dialogue-content .Button {
  flex: none;
  pointer-events: all !important;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.dialogue-text-bleep {
  position: relative;
  display: inline-block;
  color: #ddd;
  color: var(--bleep-color);
}

.dialogue-text-bleep::after,
.dialogue-text-bleep::before {
  font-family: bitlight;
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
  color: #ddd;
  color: var(--bleep-color);
}

.dialogue-text-bleep::after {
  content: "~~~~~~~~~~~~~~~~~~~~~~~~~";
  margin-left: 0.1em;
  margin-top: -0.1em;
}

.dialogue-text-bleep::before {
  content: "**********************";
  margin-top: 0;
  font-size: 0.87em;
}

.cursor-blocker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.node-info-container {
  position: absolute;
  left: 55%;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  background-color: rgb(0, 0, 0, 0.5);
  color: #fff;
}

.node-info-logo {
  margin-left: 0.5em;
  margin-right: 0.5em;
  height: 4em;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.node-info-text {
  padding: 1em;
}

.node-info-stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  line-height: 1.4em;
}

.node-info-stats-left {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}

.node-info-missioninfo {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-size: 1.2em;
}

.node-info-missioninfo,
.node-info-name {
  text-transform: uppercase;
}

.node-info-credits {
  position: relative;
}

.node-info-credits::before {
  content: "";
  position: absolute;
  width: 150%;
  margin-left: calc(-100% - 0.75em);
  margin-bottom: 0.25em;
  inset: 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDQtMTdUMTk6NTc6NTgtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDQtMTdUMTk6NTc6NTgtMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA0LTE3VDE5OjU3OjU4LTA0OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ5Nzg3YjI3LWUzYTgtNDI4OC1hY2IwLWQxYzE0NjhhMTM3MyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjUyODBiYzQ2LTU2NDktNDc0NC1iMjkzLWY2OTUyOTBiNDhjNyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjNjOWI1OWEwLTZiZGYtNDYxYi05MTY1LWVlNDVhMDUyYTUzMiIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6M2M5YjU5YTAtNmJkZi00NjFiLTkxNjUtZWU0NWEwNTJhNTMyIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDE5OjU3OjU4LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NDk3ODdiMjctZTNhOC00Mjg4LWFjYjAtZDFjMTQ2OGExMzczIiBzdEV2dDp3aGVuPSIyMDIwLTA0LTE3VDE5OjU3OjU4LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Xp4afAAAAYklEQVRYCWP4//8/Awwb/zf+h4RpBhm2v2eE41EH0NIiohwz6gCCSmYyUAcPPQdQy+JRB1DVAXTNBaMOGHXAqANGHTBaFA+4A0YbJIPGAbSBp2B41AHoXTNawgswjGznqAMAKDz+A33sljAAAAAASUVORK5CYII=");
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.node-info-description {
  margin-bottom: 1em;
  text-transform: uppercase;
  line-height: 1.4em;
}

.node-info-buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
}

.node-info-buttons > .Button {
  flex: 1 1;
}

.SMART-container {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.SMART {
  max-width: 30%;
  background: rgb(0, 0, 0, 0.5);
  color: #fff;
  text-transform: uppercase;
}

.SMART-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}

.SMART-body p {
  padding: 1em;
  line-height: 1.4em;
}

.landing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.fade-in {
  animation-name: fade-in;
  animation-delay: 0.25s;
  animation-fill-mode: both;
}

.fade-out {
  animation-name: fade-out;
  animation-fill-mode: both;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.landing-text {
  flex: 1 1;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2em;
}

.landing-subtitle,
.landing-title {
  font-family: jhtitles;
  color: transparent;
  text-align: center;
  background: radial-gradient(#fff, #a0bcd3);
  background-clip: text;
  text-transform: uppercase;
  font-weight: 100;
}

.landing-title {
  font-size: 6em;
}

.landing-title-small {
  font-size: 3em;
}

.landing-button {
  flex: none;
  font-size: 2em;
}

.TitleButton {
  border: none;
  padding: 0.1em 1em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(180deg, #e7edee, #66696b);
  color: #000;
  cursor: pointer;
  outline: none;
}

.TitleButton:hover {
  background: linear-gradient(180deg, #e7edee, #356db4);
}

.TitleButton:active {
  background: linear-gradient(180deg, #999, #444);
}

.TitleButton > span {
  font-family: jhtitles;
}

.save-selector {
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  animation-name: fade-in;
  animation-duration: 0.5s;
}

.save-info,
.save-selector {
  display: flex;
  align-items: center;
}

.save-info {
  width: 16em;
  height: 13em;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background: linear-gradient(180deg, rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 0.3));
  flex: 1 1;
}

.save-info > p {
  line-height: 1.4;
  text-transform: uppercase;
}

.save-selector-button {
  font-family: jhtitles;
  font-size: 1.5em;
  padding-top: 0.35em;
  padding-bottom: 0.35em;
  margin-top: 0.2em;
  width: 100%;
}

.save-selector-delete {
  border: none;
  padding: 0.25em 2em !important;
  color: #ddd;
  margin-top: 4em;
  text-transform: lowercase;
}

.invisible {
  visibility: hidden;
}

.App {
  width: 100%;
  height: 100%;
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  --aspect-ratio: 1.5;
  --v-pct: calc(
    (100vh - env(safe-area-inset-top, 2em) * 2) / 100 * var(--aspect-ratio)
  );
  --h-pct: calc((100vw - env(safe-area-inset-left, 2em) * 2) / 100);
  --pct-raw: min(var(--v-pct), var(--h-pct));
  --pct: min(var(--pct-raw), 10px);
  --font-ratio: 1.3;

  position: relative;
  font-size: calc(var(--font-ratio) * var(--pct));
  width: calc(100 / var(--font-ratio) * 1em);
  height: calc(100 / var(--aspect-ratio) / var(--font-ratio) * 1em);
  background-image: url("../../static/media/code.62d38480.jpg");
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.container > .popup {
  position: absolute;
  width: 12em;
  height: 14em;
  bottom: 2em;
  right: 2em;
}

.saves-container {
  flex: 1 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.credits-container {
  padding-bottom: 1em;
  padding-right: 1em;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.credits-container > .Button {
  width: 12em;
}

.game-credits {
  flex: 1 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  color: #99c6f1;
  text-transform: uppercase;
  padding-top: 0.5em;
  padding-left: 3em;
  font-size: 1.2em;
  line-height: 1.13em;
}

.game-credits-left,
.game-credits-right {
  flex: 1 1;
}