gamecanvas.css

:root {
  --color-gray: hsl(0, 0%, 55%);
  --controls-size: 10vh;
}

@media (orientation: landscape) {
  :root {
    --controls-size: 20vh;
  }
}

html {
  touch-action: none;
}

#status {
  font-size: 1.5rem;
  color: var(--color-gray);
  text-align: center;
}

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

#dpad, #apad, #joystick {
  position: fixed;
  bottom: 1rem;
  z-index: 101;
}

#dpad {
  left: 1rem;
}

@media (orientation: landscape) {
  #layout.overflow #dpad {
    left: 72px;
  }

  #content.noSideBorders #layout.overflow #dpad {
    left: 48px;
  }

  #layout:fullscreen.overflow #dpad {
    left: 48px;
  }
}

#apad {
  right: 1rem;
}

#dpad svg, #joystick svg {
  width: calc(2 * var(--controls-size));
  height: calc(2 * var(--controls-size));
  fill: var(--color-gray);
}

#dpad svg rect {
  opacity: 0.4;
}

#apad .apadBtn {
  width: var(--controls-size);
  height: var(--controls-size);
  background-color: var(--color-gray);
  border-radius: 50%;
}

#apad > :nth-child(2) {
  position: relative;
  right: var(--controls-size);
}

#apad .apadRectBtn {
  position: relative;
  border-radius: 10%;
  margin-top: calc(var(--controls-size) * -0.4);
  bottom: calc(var(--controls-size) * 0.05);
  left: calc(var(--controls-size) * 0.21);
  width: calc(var(--controls-size) * 0.6);
  height: calc(var(--controls-size) * 0.4);
}

#apad .apadSqBtn {
  border-radius: 10%;
  width: calc(var(--controls-size) * 0.3);
  height: calc(var(--controls-size) * 0.3);
}

#apad .apadBtnContainer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: calc(var(--controls-size) * -0.8);
  top: calc(var(--controls-size) * -0.9);
  left: calc(var(--controls-size) * 0.1);
  width: calc(var(--controls-size) * 0.8);
  height: calc(var(--controls-size) * 0.8);
}

#apad .apadRectBtn + .apadBtnContainer {
  top: calc(var(--controls-size) * -1.9);
  left: calc(var(--controls-size) * -0.9);
}

#dpad path:not(.active), #apad .apadBtn:not(.active) {
  opacity: 0.4;
}

#layout:fullscreen #dpad, #layout:fullscreen #apad {
  bottom: 6rem;
}

#joystick {
  pointer-events: none;
  opacity: initial;
  transition: opacity ease-in-out;
}

#joystick.fadeOut {
  opacity: 0;
  transition-delay: 2s;
  transition-duration: 0.25s;
}

#joystick svg>circle,
.joystickBase {
  opacity: 0.4;
}

.joystickDpad {
  opacity: 0.2;
}

.joystickDpad.active {
  opacity: initial;
}

#layout:fullscreen #dpad.hasJoystick {
  display: none;
}

#layout:not(:fullscreen) #joystick {
  display: none;
}