/* =========================================================
   Maqam Academy — Shared smartphone keyboard layer
   Loaded globally on Academy pages that use the shared shell.

   Contract:
   - desktop/tablet keyboard geometry remains in app.css
   - this file owns phone-only keyboard scrolling/gesture rules
   - the full keyboard keeps a usable musical key width on phones
   ========================================================= */

@media (max-width: 767px), (max-width: 900px) and (max-height: 500px) {
  .keyboard-wrap,
  .keyboard-mount,
  .practice-keyboard-mount {
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    touch-action:pan-x pan-y;
  }

  .keyboard-wrap {
    justify-content:flex-start;
    padding-left:0;
    padding-right:0;
  }

  #piano-svg {
    display:block;
    width:max(720px, 100%) !important;
    min-width:720px !important;
    max-width:none !important;
    margin-inline:0 !important;
    height:auto;
    flex:0 0 auto;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    touch-action:pan-x pan-y;
  }

  #piano-svg *,
  .piano-key,
  .piano-xray-key {
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
}