/* Mr. McLean Math embedded phone answer pads — mobile phones only. */
#mmmMobileKeypad{display:none}
html.mmm-phone-answer-pad #mmmMobileKeypad.mmm-keypad-visible{
  display:block;
  position:relative;
  width:min(100%,500px);
  margin:12px auto 6px;
  padding:9px;
  background:linear-gradient(180deg,rgba(250,253,255,.98),rgba(238,245,252,.98));
  border:1.5px solid rgba(111,139,169,.58);
  border-radius:15px;
  box-shadow:0 6px 18px rgba(29,53,82,.12);
}
#mmmMobileKeypad .mmm-keypad-caption{
  text-align:center;
  color:#5b6d80;
  font:800 .72rem/1.15 "Trebuchet MS",Arial,sans-serif;
  margin:0 0 7px;
  letter-spacing:.015em;
}
#mmmMobileKeypad .mmm-keypad-grid{
  display:grid;
  grid-template-columns:repeat(var(--mmm-keypad-cols,5),minmax(0,1fr));
  gap:6px;
}
#mmmMobileKeypad .mmm-key{
  appearance:none;
  -webkit-appearance:none;
  min-width:0;
  min-height:40px;
  border:1.4px solid #9aa9b9;
  border-radius:9px;
  background:linear-gradient(180deg,#fff,#edf3f8);
  color:#172b43;
  font:900 1rem/1 "Trebuchet MS",Arial,sans-serif;
  box-shadow:0 2px 0 rgba(66,83,105,.16);
  padding:6px 4px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
#mmmMobileKeypad .mmm-key:active,#mmmMobileKeypad .mmm-key.is-pressed{
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(66,83,105,.12);
  background:#e4edf6;
}
#mmmMobileKeypad .mmm-key.mmm-key-action{
  background:linear-gradient(180deg,#eef6ff,#dbe9fa);
  color:#17476f;
}
#mmmMobileKeypad .mmm-key.mmm-key-enter{
  background:linear-gradient(180deg,#1f8dff,#176bd0);
  border-color:#125eb9;
  color:#fff;
  box-shadow:0 2px 0 #0d4c97;
}
#mmmMobileKeypad.mmm-pad-resolved .mmm-key:disabled:not(.mmm-key-enter){
  opacity:.38;
  transform:none;
  box-shadow:none;
}
#mmmMobileKeypad .mmm-key:disabled{cursor:default}
@media (prefers-reduced-motion:reduce){#mmmMobileKeypad .mmm-key{transition:none}}


/* v180 — Practice-first phone layout.
   On phones the practice cards come first and the video tutorial follows Challenge Mode.
   Tablet/desktop placement remains unchanged. */
@media (max-width: 600px){
  .practice-layout-new .tutorial-rail{
    order:2 !important;
    position:relative !important;
    top:auto !important;
    margin:18px auto 0 !important;
  }
}