/* Motion — one motion word in the top area that itself grows, shrinks, spins, slides or stays still;
   the answer pad (drawn motion icon + short label) in the bottom 45%. */

/* sizes follow the screen height, so every key stays on screen on an iPhone SE and a 360 × 600 phone */
.mo-stim { min-height: clamp(140px, 26dvh, 200px); }
/* roomy enough for a 70% grow (about 80 px tall) and a 70 px slide; the motion is a transform, so nothing reflows */
.mo-holder { width: 100%; height: clamp(120px, 22dvh, 170px); display: flex; align-items: center; justify-content: center; }
.mo-word {
  display: inline-block;
  font-size: 46px; font-weight: 600; letter-spacing: 0.04em; line-height: 1;
  color: var(--stage-ink);
  transform-origin: 50% 50%;
  will-change: transform;
  user-select: none; -webkit-user-select: none;
}
.mo-word.zh { letter-spacing: 0.1em; font-weight: 500; }
.mo-word.dim { opacity: 0.3; }

.mo-controls { flex: none; }
.mo-pad {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px;
  height: min(330px, 40vh);
  height: clamp(176px, 40dvh, 330px);
}
.mo-key { position: relative; gap: 12px; padding: 0; min-height: 44px; user-select: none; -webkit-user-select: none; }
.mo-key svg { display: block; flex: none; color: var(--stage-ink); }
.mo-key small { font-size: 13px; color: var(--stage-dim); }
/* six keys: icon beside the label so each row stays calm */
.mo-pad.n6 .mo-key { flex-direction: row; }
/* after a miss: a thin outline on the motion it really was */
.mo-key.was { border-color: var(--stage-dim); }