/* The games' on-screen controls and full-screen button. Every game page links this. */

/* Portrait puts the touch controls under the stage; landscape puts them either side of it. */
body.touch {
  --touch-size: min(150px, 34vw, 40dvh);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.touch main {
  display: grid;
  grid-template-areas: "frame frame" "pad buttons";
  align-items: center;
  justify-items: center;
  gap: 8px 16px;
}
body.touch .frame {
  grid-area: frame;
  height: min(calc(100dvh - 32px - var(--touch-size)), calc((100vw - 16px) * 575 / 500));
}
body.touch #stage,
body.touch .touch-pad,
body.touch .touch-buttons {
  touch-action: none;
}
body.touch .keys {
  display: none;
}
.touch-pad {
  grid-area: pad;
  position: relative;
  width: var(--touch-size);
  height: var(--touch-size);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  border: 2px solid rgb(255 255 255 / 0.2);
}
.touch-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: calc(var(--touch-size) * 0.1) solid transparent;
}
.touch-arrow.up { left: 40%; top: 4%; border-bottom-color: rgb(255 255 255 / 0.4); }
.touch-arrow.down { left: 40%; bottom: 4%; border-top-color: rgb(255 255 255 / 0.4); }
.touch-arrow.left { top: 40%; left: 4%; border-right-color: rgb(255 255 255 / 0.4); }
.touch-arrow.right { top: 40%; right: 4%; border-left-color: rgb(255 255 255 / 0.4); }
.touch-arrow.up.held { border-bottom-color: #fff; }
.touch-arrow.down.held { border-top-color: #fff; }
.touch-arrow.left.held { border-right-color: #fff; }
.touch-arrow.right.held { border-left-color: #fff; }
.touch-buttons {
  grid-area: buttons;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
}
.touch-button {
  width: calc(var(--touch-size) * 0.6);
  height: calc(var(--touch-size) * 0.6);
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.3);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  font: inherit;
  font-size: 16px;
}
.touch-button + .touch-button {
  width: calc(var(--touch-size) * 0.4);
  height: calc(var(--touch-size) * 0.4);
  font-size: 12px;
}
.touch-button.touch-fullscreen {
  font-size: 10px;
}
.touch-button.held {
  background: rgb(255 255 255 / 0.35);
}
@media (orientation: landscape) {
  body.touch main {
    grid-template-areas: "pad frame buttons";
  }
  body.touch .frame {
    height: min(calc(100dvh - 16px), calc((100vw - 2 * var(--touch-size) - 48px) * 575 / 500));
  }
}

.fullscreen-link {
  border: 0;
  padding: 0;
  background: none;
  color: #ccc;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
/* Full screen leaves the keys line out, giving the stage the height. */
:fullscreen .keys {
  display: none;
}
/* Touch controls size the stage themselves, around the pad and buttons. */
:fullscreen body:not(.touch) .frame {
  height: min(calc(100dvh - 16px), calc((100vw - 16px) * 575 / 500));
}