/* Shared mobile layout for the Music Cubes menu pages. Desktop sizing stays
   with each instrument; the EDM iframe keeps its own 7:8 stage. */
@media (max-width: 900px) {
  .piano-drop-container {
    width: calc(100% - 16px);
    max-width: 100%;
    margin-top: 10px;
    padding: 12px 10px;
    min-width: 0;
  }

  /* A render area 20% taller than the original square makes the cube 20%
     larger at the same camera FOV. Reserve a separate band above the canvas
     for the visualizer and controls, keeping them clear of the cube.
     Host and scene dimensions must match for the existing camera/raycasters. */
  #cubetainer.housecube:not(.edm-cube-host):not(.is-fullscreen):not(:fullscreen):not(:has(a-scene:fullscreen)) {
    --cube-toolbar-top: -70px;
    width: 100% !important;
    max-width: 650px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 5 / 6;
    margin-top: 80px !important;
    overflow: visible !important;
  }

  #cubetainer #eq-container,
  #cubetainer #rec-top-bar,
  #cubetainer #mix-top-bar {
    top: var(--cube-toolbar-top, 10px);
  }

  .piano-drop-container .logobanner,
  .piano-drop-container .logobanner img {
    max-width: 100%;
  }

  .piano-drop-container .logobanner img {
    height: auto;
  }

  .piano-drop-container .controls,
  .piano-drop-container .tempo-row,
  .piano-drop-container .recording-row {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .piano-drop-container #tempoSlider {
    max-width: 100%;
  }

  .piano-drop-container .controls button,
  .piano-drop-container .recording-row button,
  #cubetainer #recordVideoBtn,
  #cubetainer #share-fab,
  #cubetainer #new-mix-fab,
  #cubetainer #fullscreenBtn,
  #cubetainer #fullscreen-btn,
  #cubetainer #pack-fab {
    min-width: 44px;
    min-height: 44px;
  }

  #cubetainer #bottom-bar {
    max-width: calc(100% - 16px) !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  #cubetainer #controls-hud {
    display: none !important;
  }

  /* Keep share/record controls usable when a saved mix adds a New Mix button. */
  #cubetainer #rec-top-bar { left: 8px; max-width: 132px; gap: 6px; }
  #cubetainer #mix-top-bar {
    right: 8px;
    max-width: calc(100% - 156px);
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #cubetainer #recordVideoBtn,
  #cubetainer #share-fab,
  #cubetainer #new-mix-fab {
    max-width: 100%;
    min-width: 0;
    padding: 8px 10px;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
  }

  #cubetainer #share-mix-overlay {
    overflow-y: auto;
    align-items: flex-start;
    padding: 8px 0;
  }
  #cubetainer #share-mix-box {
    width: calc(100% - 16px);
    max-width: 420px;
    margin: auto;
    padding: 14px;
    flex-shrink: 0;
  }
  #cubetainer #share-mix-title,
  #cubetainer #share-mix-url { font-size: 16px; }
  #cubetainer #mix-toast {
    max-width: calc(100% - 16px);
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  #cubetainer.housecube:not(.edm-cube-host):not(.is-fullscreen):not(:fullscreen):not(:has(a-scene:fullscreen)) {
    /* Preserve the same 20% increase when the landscape height cap applies. */
    max-height: calc(120vh - 86.4px);
    max-height: calc(120svh - 86.4px);
  }
}