html,
body {
  margin: 0;
  height: 100%;
  background: #000000;
  color: #999999;
  font: 13px/1.4 Arial, "Liberation Sans", Helvetica, sans-serif;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#screen {
  position: relative;
  overflow: hidden;
  background: #000000;
  flex: none;
}

#screen:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 600px;
  overflow: hidden;
  transform-origin: 0 0;
}

#screen:fullscreen #stage {
  position: relative;
  flex: none;
  transform-origin: center;
}

.layer {
  position: absolute;
  inset: 0;
}

.layer[hidden] {
  display: none;
}

#title {
  background: #000000;
}

#game {
  background: #999999;
}

.obj {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.art {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

svg.art {
  overflow: visible;
}

svg.art text {
  white-space: pre;
}

.button .state {
  display: none;
}

.button[data-state="up"] .state[data-state="up"],
.button[data-state="over"] .state[data-state="over"],
.button[data-state="down"] .state[data-state="down"] {
  display: block;
}

.button .hit {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

#credits {
  flex: none;
  padding: 6px 16px 8px;
  text-align: center;
}

#credits p {
  margin: 2px 0;
}

#credits a {
  color: #cccccc;
}

#fullscreenButton {
  margin-top: 4px;
  font: inherit;
  color: #cccccc;
  background: #222222;
  border: 1px solid #555555;
  border-radius: 3px;
  padding: 2px 10px;
  cursor: pointer;
}