/* leave room for the control pad under the stage */
.stage { width: min(96vw, calc((100vh - 13.5rem) * var(--ar, 1))); }
.tst-pad { gap: 0.4rem; margin: 0.4rem auto 0.6rem; max-width: 40rem; touch-action: none; user-select: none; -webkit-user-select: none; }
.tst-pad button { flex-direction: column; gap: 0.1rem; min-width: 3.4rem; padding: 0.3rem 0.6rem; font-weight: 800; touch-action: none; }
.tst-pad button .lbl { font-size: 1.25rem; line-height: 1.1; }
.tst-pad button kbd { font-size: 0.65rem; opacity: 0.8; }
.tst-pad button.on, .tst-pad button:active { border-color: var(--gold); background: #2a2a10; }
@media (pointer: coarse) {
  .stage { width: min(96vw, calc((100dvh - 15rem) * var(--ar, 1))); }
  .tst-pad { display: grid; grid-template-columns: repeat(4, 1fr); width: min(96vw, 26rem); }
  .tst-pad button { min-height: 3.2rem; }
  .tst-pad button kbd { display: none; }
  .tst-pad [data-b='drop'] { grid-column: span 2; }
}