:root {
  color-scheme: dark;
  --pad-fill: rgba(232, 230, 240, 0.14);
  --pad-fill-active: rgba(232, 230, 240, 0.32);
  --pad-ink: rgba(232, 230, 240, 0.7);
}

html,
body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#screen {
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- touch controls ---------- */

.touch {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.touch[hidden] {
  display: none;
}

.dpad,
.btn-a {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
}

.dpad {
  left: calc(16px + env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 132px;
  height: 132px;
}

.btn-a {
  right: calc(24px + env(safe-area-inset-right));
  bottom: calc(36px + env(safe-area-inset-bottom));
  width: 84px;
  height: 84px;
}

.touch svg {
  width: 100%;
  height: 100%;
  display: block;
}

.touch .pad {
  fill: var(--pad-fill);
}

.touch .arrow,
.touch .glyph {
  fill: var(--pad-ink);
}

.btn-a.active .pad,
.dpad.active .pad {
  fill: var(--pad-fill-active);
}

.noscript {
  color: #e8e6f0;
  font: 16px/1.5 ui-monospace, monospace;
  padding: 16px;
}