/* MusicMuse Native Luxury Mobile Layer */

@media (max-width: 900px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #05050a !important;
  }

  * {
    box-sizing: border-box !important;
  }

  body {
    margin: 0 !important;
  }

  .page,
  main,
  section,
  .container,
  #lesson-page,
  #practice-page,
  #legend-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  [style*="max-width:1180px"],
  [style*="max-width:1200px"],
  [style*="max-width: 1180px"],
  [style*="max-width: 1200px"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  [style*="display:grid"],
  [style*="display: grid"],
  [style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }

  [style*="width:320px"],
  [style*="width: 320px"],
  [style*="min-width"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  img, video, canvas {
    max-width: 100% !important;
  }

  h1 {
    font-size: clamp(42px, 11vw, 64px) !important;
    line-height: .95 !important;
  }

  a, button {
    max-width: 100% !important;
  }
}

@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
}

/* Practice page surgical mobile fix */
@media (max-width: 900px) {
  .practice-mobile-control-wrap {
    width: min(100%, 430px) !important;
    margin: 22px auto 28px !important;
    padding: 0 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .practice-mobile-control-wrap > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 20px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .practice-bpm-display {
    min-width: 82px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #EEEEF5 !important;
    line-height: 1 !important;
  }

  .practice-bpm-display span:last-child {
    font-size: 12px !important;
    color: #777799 !important;
    letter-spacing: .08em !important;
  }

  #metro-btn {
    flex: 1 !important;
    min-width: 130px !important;
    max-width: 220px !important;
    height: 52px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }
}

/* =========================
   FINAL IOS NATIVE POLISH
========================= /

@media (max-width: 900px) {

  / tighter control cards /
  .practice-mobile-control-wrap > div,
  #practice-page .practice-mobile-control-wrap > div {
    min-height: auto !important;
    padding: 18px !important;
  }

  / metronome layout /
  .practice-bpm-display {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #F5F5FA !important;
    line-height: 1 !important;
  }

  .practice-bpm-display span:last-child {
    font-size: 12px !important;
    opacity: .65 !important;
    letter-spacing: .08em !important;
  }

  / metronome card alignment /
  #metro-btn {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    padding: 0 24px !important;
  }

  / metronome label /
  #practice-page .practice-mobile-control-wrap {
    gap: 14px !important;
  }

  #practice-page .practice-mobile-control-wrap .metronome-label,
  #practice-page .practice-mobile-control-wrap small {
    margin-top: 10px !important;
    display: block !important;
  }

  / practice title /
  #practice-page h1,
  #practice-page .practice-title {
    font-size: clamp(44px, 9vw, 64px) !important;
    line-height: .96 !important;
    letter-spacing: -.04em !important;
  }

  / prevent right-side clipping /
  #practice-page * {
    max-width: 100% !important;
  }

  / recording card /
  #practice-page .record-card,
  #practice-page .record-section {
    overflow: hidden !important;
  }

  / floating widgets */
  .intercom-launcher,
  .chat-widget,
  iframe {
    max-width: calc(100vw - 24px) !important;
  }

}


/* =========================
   PRACTICE PAGE IOS REPAIR
========================= */

@media (max-width: 900px) {
  body {
    overflow-x: hidden !important;
  }

  #practice-page {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .practice-mobile-control-wrap {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 24px 0 !important;
  }

  .practice-mobile-control-wrap > div {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .practice-bpm-display {
    display: flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: #F7F7FF !important;
    margin: 0 0 12px !important;
    white-space: nowrap !important;
  }

  .practice-bpm-display span:last-child {
    font-size: 12px !important;
    opacity: .65 !important;
    letter-spacing: .12em !important;
  }

  #metro-btn {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #record-btn,
  .record-btn {
    width: 100% !important;
    max-width: 100% !important;
    height: 72px !important;
    border-radius: 18px !important;
  }

  #practice-page h1,
  #practice-page .practice-title {
    font-size: clamp(42px, 12vw, 62px) !important;
    line-height: .96 !important;
    letter-spacing: -.04em !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  #practice-page [style*="position:absolute"] {
    max-width: 100% !important;
  }

  #practice-page * {
    box-sizing: border-box !important;
  }
}