.s2047-touch-controls {
  --s2047-touch-opacity: .82;
  --s2047-touch-scale: 1;
  position: fixed;
  inset: auto 0 1rem;
  z-index: 10040;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0 1rem;
  pointer-events: none;
  opacity: var(--s2047-touch-opacity);
  transform: scale(var(--s2047-touch-scale));
  transform-origin: bottom center;
}
.s2047-touch-move,
.s2047-touch-actions {
  pointer-events: auto;
  display: grid;
  gap: .35rem;
}
.s2047-touch-move {
  grid-template: repeat(3, 3.1rem) / repeat(3, 3.1rem);
}
.s2047-touch-move .up { grid-column: 2; grid-row: 1; }
.s2047-touch-move .left { grid-column: 1; grid-row: 2; }
.s2047-touch-move .down { grid-column: 2; grid-row: 3; }
.s2047-touch-move .right { grid-column: 3; grid-row: 2; }
.s2047-touch-actions {
  grid-template-columns: repeat(2, 3.4rem);
}
.s2047-touch-button {
  min-width: 3.1rem;
  min-height: 3.1rem;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(4, 15, 28, .8);
  color: #fff;
  font: 700 .9rem/1 system-ui, sans-serif;
  box-shadow: 0 .2rem .75rem rgba(0,0,0,.35);
  touch-action: none;
  user-select: none;
}
.s2047-touch-button.is-active {
  transform: scale(.92);
  background: rgba(255,216,77,.95);
  color: #07111d;
}
@media (hover: hover) and (pointer: fine) {
  .s2047-touch-controls { display: none; }
}
@media (max-width: 480px) {
  .s2047-touch-controls { padding: 0 .55rem; bottom: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .s2047-touch-button { transition: none; }
}