html,
body {
  height: 100%;
}
body,
::backdrop {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  font-size: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}
#wrapper {
  display: block;
  position: relative;
}
.no-cursor #wrapper {
  cursor: none;
}
.loading #wrapper {
  visibility: hidden;
}
.stretch-stage #wrapper {
  width: 100vw;
  height: 100vh;
}
/* CSS for proportional wrapper scaling is added dynamically by htmlifier.ts */
#monitors {
  position: absolute;
  top: 0;
  left: 0;
}
#stage {
  width: 100%;
  height: 100%;
}
#loading-progress {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  border-radius: 20px;
  --progress: 0%;
  z-index: 100;
}
.show-loading-progress #loading-progress {
  display: block;
}
#loading-progress::before {
  content: attr(data-progress);
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 15px;
}
#loading-progress::after {
  content: '';
  display: block;
  height: 16px;
  border-radius: 20px;
  width: var(--progress);
}
#loading-image {
  position: fixed;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.stretch-loading-image #loading-image {
  width: 100%;
  height: 100%;
}
.buttons {
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: 12px;
}
.buttons .button,
.buttons button {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.buttons button:disabled,
#add-sprite-file:disabled + #add-sprite-btn {
  cursor: auto;
  opacity: 0.5;
}
#start-btn {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"%3E%3Cpath d="M8 5v14l11-7z" fill="%23fff"/%3E%3C/svg%3E%0A');
}
.running #start-btn {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"%3E%3Cpath d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" fill="%23fff"/%3E%3C/svg%3E');
}
#stop-btn {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"%3E%3Cpath d="M6 6h12v12H6z" fill="%23fff"/%3E%3C/svg%3E%0A');
}
#fullscreen-btn {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"%3E%3Cpath d="M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z" fill="%23fff"/%3E%3C/svg%3E');
}
.fullscreen #fullscreen-btn {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"%3E%3Cpath d="M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z" fill="%23fff"/%3E%3C/svg%3E');
}
#download-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5,20h14v-2H5V20z M19,9h-4V3H9v6H5l7,7L19,9z'/%3E%3C/svg%3E");
}
#add-sprite-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/%3E%3C/svg%3E");
}
#add-sprite-file {
  display: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.show-start-stop-btns #start-btn,
.show-start-stop-btns #stop-btn,
.show-fullscreen-btn #fullscreen-btn,
.show-download-btn #download-btn,
.show-add-sprite-btn #add-sprite-btn,
.show-add-sprite-btn #add-sprite-file {
  display: inline-block;
}
.monitor {
  position: absolute;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  overflow: hidden;
  padding: 3px;
  white-space: pre;
}
.show-monitor-box .monitor {
  border-color: rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.3);
}
.monitor-label {
  margin: 0 5px;
  font-weight: bold;
}
.monitor-value {
  display: inline-block;
  vertical-align: top;
  min-width: 34px;
  text-align: center;
  border-radius: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  transform: translateZ(0);
}
.default .monitor-value,
.slider .monitor-value {
  margin: 0 5px;
  padding: 1px 3px;
}
.show-monitor-box .default .monitor-value,
.show-monitor-box .slider .monitor-value {
  background-color: rgba(0, 0, 0, 0.5);
}
.large {
  padding: 0.1rem 0.25rem;
  min-width: 3rem;
}
.show-monitor-box .large {
  background-color: rgba(0, 0, 0, 0.6);
}
.large .monitor-label {
  display: none;
}
.large .monitor-value {
  font-size: 1rem;
  width: 100%;
}
.list {
  padding: 0;
  overflow: auto;
  overflow-x: hidden;
}
.list .monitor-label {
  text-align: center;
  padding: 3px;
  width: 100%;
  display: block;
  margin: 0;
  box-sizing: border-box;
  white-space: pre-wrap;
}
.list .monitor-value {
  display: block;
}
.row {
  display: flex;
  align-items: center;
  padding: 2px;
  height: 24px;
  box-sizing: border-box;
  transform: translateZ(0);
}
.index {
  font-weight: bold;
  margin: 0 3px;
  flex: none;
}
.row-value {
  flex: auto;
  margin: 0 3px;
  text-align: left;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  height: 22px;
  padding: 3px 5px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.show-monitor-box .row-value {
  border-color: rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.5);
}
.slider input {
  display: block;
  width: 100%;
  transform: translateZ(0);
}
#asking-box {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(33, 33, 33, 0.7);
}
.asking #asking-box {
  display: block;
}
#question {
  display: block;
  margin: 0 10px;
  margin-top: 10px;
  font-size: 12px;
  color: white;
}
#answer {
  border: none;
  background: none;
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: white;
  padding: 10px;
  box-sizing: border-box;
}
#answer:focus {
  outline: none;
}
#errors {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: rgba(255, 0, 0, 0.7);
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}


#wrapper { width: 100vw; height: 100vh; }
@media (min-aspect-ratio: 480/360) {
#wrapper { height: 100vh; width: 100vw; }
}
#loading-progress {
border: 1px solid #00ffff;
}
#loading-progress::before {
color: #00ffff;
}
#loading-progress::after {
background-color: #00ffff;
}
.monitor {
color: #ffffff;
}