.monarch-engine {
  /* overlay */
  /* menu basics */
  /* standard menu panel */
  /* main menu */
  /* editor menu */
  /* mechanic menu */
}
.monarch-engine, .monarch-engine * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.monarch-engine:focus, .monarch-engine *:focus {
  outline: solid 1px orange;
}
.monarch-engine, .monarch-engine body {
  width: 100%;
  height: 100%;
}
.monarch-engine .monarch-canvas {
  width: 100%;
  height: 100%;
}
.monarch-engine .overlay {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}
.monarch-engine .overlay > * {
  pointer-events: all;
}
.monarch-engine .overlay .thumbsticks {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
}
.monarch-engine .overlay .stick {
  position: absolute;
  width: 40%;
  height: 100%;
  top: 0;
}
.monarch-engine .overlay .stick:first-of-type {
  left: 0;
}
.monarch-engine .overlay .stick:last-of-type {
  right: 0;
}
.monarch-engine .menu-bar {
  display: flex;
  justify-content: flex-start;
  padding: 0 20%;
}
.monarch-engine .menu {
  z-index: 999;
  flex: 0 1 auto;
  position: relative;
  margin-left: 1em;
}
.monarch-engine .menu-button {
  opacity: 0.2;
  padding: 0.5em 1em;
  user-select: none;
  cursor: pointer;
  text-transform: uppercase;
}
.monarch-engine .menu[data-open=true] .menu-button {
  opacity: 0.9;
}
.monarch-engine .menu-button:hover {
  opacity: 0.9;
}
.monarch-engine .menu-panel {
  position: absolute;
  padding: 0.5em;
  top: 100%;
  width: 20em;
  border-radius: 0 5px 5px 5px;
}
.monarch-engine .menu {
  color: white;
}
.monarch-engine .menu-button {
  background: black;
}
.monarch-engine .menu-panel {
  background: rgba(0, 0, 0, 0.6);
}
@media (max-width: 1000px) {
  .monarch-engine .menu-bar {
    padding: 0;
  }
  .monarch-engine .menu {
    position: static;
  }
  .monarch-engine .menu-panel {
    top: 2.5em;
    left: 0;
    max-width: 100%;
  }
}
.monarch-engine .menu-panel h2 {
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.monarch-engine .main-menu > div + div {
  margin-top: 0.5em;
}
.monarch-engine .main-menu .setting {
  display: flex;
  justify-content: space-between;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.2);
}
.monarch-engine .main-menu .setting > * {
  flex: 0;
  margin: 0.5em;
}
.monarch-engine .main-menu .setting label {
  user-select: none;
  flex: 1;
}
.monarch-engine .main-menu .input-wrapper {
  position: relative;
  flex: 0 0 4em;
}
.monarch-engine .main-menu .input-wrapper > input {
  position: absolute;
  width: 100%;
}
.monarch-engine .main-menu input[type=number] {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 0.4em 0.8em;
  border-radius: 3px;
}
.monarch-engine .main-menu .stats {
  display: flex;
  flex-direction: row;
  user-select: none;
}
.monarch-engine .main-menu .stats > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  text-align: center;
  padding: 0.5em;
}
.monarch-engine .main-menu .stats > div + div {
  margin-left: 0.4em;
}
.monarch-engine .main-menu .stats > div > label {
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.5);
  order: 1;
}
.monarch-engine .main-menu .stats > div > output {
  font-family: "Courier New", monospace;
}
.monarch-engine .editor-menu .tools {
  display: flex;
}
.monarch-engine .editor-menu .tool {
  flex: 1 1 auto;
}
.monarch-engine .editor-menu .tool + .tool {
  margin-left: 0.4em;
}
.monarch-engine .editor-menu .tool {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: inherit;
  border-radius: 5px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
}
.monarch-engine .editor-menu .tools .tool[data-active=true] {
  background: rgba(255, 255, 255, 0.5);
}
.monarch-engine .mechanic-menu .loader {
  display: flex;
}
.monarch-engine .mechanic-menu .loader > * {
  padding: 0.5em;
  flex: 1 1 auto;
}
.monarch-engine .mechanic-menu .loader input {
  flex: 2 1 auto;
}
.monarch-engine .mechanic-menu .scene-object-list {
  margin: 0.5em auto;
  max-height: 320px;
  overflow: auto;
}
.monarch-engine .mechanic-menu .scene-object-list li {
  display: flex;
  font-size: 0.8em;
  margin: 0.2em auto;
  background: rgba(255, 255, 255, 0.2);
}
.monarch-engine .mechanic-menu .scene-object-list li[data-is-selected=true] {
  background: rgba(255, 255, 255, 0.3);
}
.monarch-engine .mechanic-menu .scene-object-list li > * {
  padding: 0.1em 0.5em;
  flex: 1 1 auto;
}
.monarch-engine .mechanic-menu .scene-object-list li p {
  background: rgba(255, 255, 255, 0);
}
.monarch-engine .mechanic-menu .scene-object-list li p:hover {
  background: rgba(255, 255, 255, 0.1);
}
.monarch-engine .mechanic-menu .scene-object-list li button {
  flex: 0 0 0;
}
.monarch-engine .mechanic-menu .danger-zone {
  display: flex;
  justify-content: center;
}
.monarch-engine .mechanic-menu .danger-zone button {
  padding: 0.5em;
}

.monarch-site {
  font-family: sans-serif;
  text-align: center;
  background: #333;
  background: linear-gradient(170deg, #444, #222);
  color: white;
  text-shadow: 1px 1px 5px black;
}
.monarch-site a {
  color: skyblue;
}
.monarch-site a:visited {
  color: #8467b6;
}
.monarch-site a:hover {
  color: #9dd7ef;
}
.monarch-site a:active {
  color: #b3e0f2;
}
.monarch-site body {
  padding: 10%;
}
.monarch-site body * + p {
  margin-top: 1em;
}

.monarch-slate, .monarch-propshop {
  font-family: Oswald, sans-serif;
  background: linear-gradient(170deg #444, #333);
  overflow: hidden;
}

/*# sourceMappingURL=monarch-style.css.map */