@media (orientation: portrait) {
  #virtual-pads {
    --unit: calc(100dvw / 16);
  }
}

@media (orientation: landscape) {
  #virtual-pads {
    --unit: calc(100dvh / 15);
  }
}

#virtual-pads {
  display: none;

  * {
    box-sizing: border-box;
  }

  .group {
    position: absolute;
    bottom: calc(var(--unit) * 1);
    background-color: hsl(0 0 0 / 0.125);
    width: calc(var(--unit) * 6);
    height: calc(var(--unit) * 6);
  }

  .g0 {
    left: calc(var(--unit) * 1);
  }

  .g1 {
    right: calc(var(--unit) * 1);
  }

  .btn {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    position: absolute;
    background-color: hsl(0 0 50 / 0);
    color: hsl(0 0 50 / 0.75);
    border: 1px solid hsl(0 0 50 / 0.75);
    border-radius: 25%;
    width: calc(var(--unit) * 2);
    height: calc(var(--unit) * 2);
  }

  .left {
    top: calc(50% - var(--unit));
    left: 0;
  }

  .right {
    top: calc(50% - var(--unit));
    right: 0;
  }

  .up {
    left: calc(50% - var(--unit));
    top: 0;
  }

  .down {
    left: calc(50% - var(--unit));
    bottom: 0;
  }

  .b0 {
    bottom: calc(var(--unit) / 2);
    left: calc(var(--unit) / 2);
  }

  .b1 {
    bottom: calc(var(--unit) / 2);
    right: calc(var(--unit) / 2);
  }

  .b2 {
    top: calc(var(--unit) / 2);
    left: calc(var(--unit) / 2);
  }

  .b3 {
    top: calc(var(--unit) / 2);
    right: calc(var(--unit) / 2);
  }
}