.sticks { position: absolute; inset: 0; display: flex; }
.zone { position: relative; flex: 1; touch-action: none; }
.stick-base { position: absolute; display: none; width: 136px; height: 136px; margin: -68px 0 0 -68px; border-radius: 50%; border: 3px solid rgba(245, 244, 236, .55); background: rgba(245, 244, 236, .08); }
.stick-base.on { display: block; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(245, 244, 236, .85); }
.buttons { position: absolute; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; }
.buttons button { height: 62px; padding: 2px; border: 2px solid rgba(245, 244, 236, .55); border-radius: 12px; background: rgba(18, 61, 143, .72); color: #f5f4ec; font: 700 13px/1.1 inherit; font-family: inherit; overflow: hidden; touch-action: none; }
.buttons button.primary { background: #0f6b52; }
.buttons button.signal { background: #f2b705; color: #14233f; }
.buttons button.held { filter: brightness(1.5); transform: scale(.96); }