/* Controller button map (pad.js). */
.pad { position: fixed; z-index: 32; left: var(--gutter); top: 50%; width: min(330px, calc(100vw - 2 * var(--gutter))); padding: 16px 18px 12px; border-radius: 6px; pointer-events: none;
  background: rgba(239, 235, 226, 0.88); backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(29, 29, 31, 0.12);
  opacity: 0; transform: translate(-8px, -50%); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.pad.is-on { opacity: 1; transform: translate(0, -50%); }
.pad__title { margin: 0 0 10px; font: 400 24px/1 var(--display); }
.pad__map { list-style: none; margin: 0; padding: 0; }
.pad__map li { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(29, 29, 31, 0.12); font: 400 13px/1.35 var(--body); }
.pad__map b { font: 500 10px/1.6 var(--label); letter-spacing: 0.1em; text-transform: uppercase; }
.pad__map i { font-style: normal; color: var(--fg-dim); }
@media (max-height: 620px) {
  .pad { padding: 10px 14px 6px; max-height: calc(100vh - 24px); overflow: hidden; }
  .pad__title { margin-bottom: 4px; font-size: 18px; }
  .pad__map li { padding: 2px 0; font-size: 12px; }
}