/* A wide track rather than the usual 3:4. */
.arena { width: 100%; aspect-ratio: 9 / 5; }

/* On touch screens the track ends halfway down, so a big pad below it jumps too, where a thumb rests. */
.tap-pad {
  display: block;
  width: 100%;
  height: max(110px, calc(100dvh - 620px));
  margin-top: 14px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.tap-pad:active { background: var(--surface-2); color: var(--text); }
[data-theme="fun"] .tap-pad { font-family: var(--display); }
@media (pointer: fine) {
  .tap-pad { display: none; }
}

/* Messages sit high on the short track, clear of the runner. */
.stage .overlay { padding-top: 8%; }