/* Mental arithmetic. The keypad is on screen because a phone keyboard covering half the question is
   the fastest way to make a two minute drill unplayable. */
.ma-q{
  text-align:center;font-size:34px;font-weight:400;color:var(--text);
  margin:18px 0 6px;font-variant-numeric:tabular-nums;line-height:1.2;
}
.ma-lines{display:flex;flex-direction:column;gap:6px;align-items:center;margin-bottom:6px}
.ma-line{font-size:17px;color:var(--text);font-variant-numeric:tabular-nums}
.ma-answer{
  min-height:56px;margin:6px auto 10px;max-width:320px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  font-size:30px;font-variant-numeric:tabular-nums;color:var(--text);
}
.ma-answer.empty::after{content:'?';color:var(--text-3,#9AA0A6)}
.ma-answer.hidden,.ma-pad.hidden,.choices.hidden{display:none}
.ma-feedback{min-height:34px;display:flex;flex-direction:column;align-items:center;text-align:center}
.ma-feedback .pill{height:auto;min-height:30px;padding:6px 12px;white-space:normal}

.ma-pad{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  max-width:320px;margin:12px auto 0;
}
.ma-key{
  min-height:56px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--text);
  font-size:22px;font-family:inherit;cursor:pointer;
  transition:background var(--fast) var(--ease),transform var(--fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.ma-key:active{transform:scale(.97);background:var(--line-2)}
.ma-key.go{background:var(--blue);color:#fff;border-color:transparent;font-size:18px}
.ma-key.wide{grid-column:1 / -1;font-size:16px;min-height:48px}
@media (min-width:760px){
  .ma-q{font-size:42px}
  .ma-pad{max-width:360px}
}