/*
 * Page-only responsive fixes for:
 * antanas-zmuidzinavicius-sielvartas-1906-tyrinek
 * Keeps shared drag-n-drop behavior intact.
 */

/* Stabilize viewport height on mobile browsers with dynamic UI chrome. */
html.dd-root-layered,
html.dd-root-layered body,
#app.dd-layered {
  height: 100dvh;
  min-height: 100dvh;
}

/* Keep the answer clip full stage height (no tiny centered preview). */
#app.dd-layered .dd-fg-video {
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: 100%;
}

/* Mobile landscape: keep tray on the side and tighten vertical chrome. */
@media (max-width: 900px) and (orientation: landscape) {
  #app.dd-layered .dd-top {
    padding: 8px 12px;
  }

  #app.dd-layered .dd-page-title {
    font-size: clamp(18px, 2.8vw, 30px);
    margin-bottom: 4px;
  }

  #app.dd-layered .dd-instruction {
    font-size: clamp(12px, 1.7vw, 16px);
    line-height: 1.2;
  }

  #app.dd-layered .dd-main {
    flex-direction: row;
    gap: 10px;
    padding: 10px;
  }

  #app.dd-layered .dd-stage {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  #app.dd-layered .dd-tray {
    flex: 0 0 clamp(210px, 30vw, 320px);
    width: clamp(210px, 30vw, 320px);
    height: auto;
    max-height: none;
    padding: 10px;
  }

  #app.dd-layered .dd-drop-ring-label {
    padding: 10px 12px;
  }

  #app.dd-layered .dd-drop-ring-label strong {
    font-size: clamp(13px, 1.8vw, 18px);
  }
}

/* Very short landscape screens: compact the tray and tools even more. */
@media (max-height: 500px) and (orientation: landscape) {
  #app.dd-layered .dd-top {
    padding: 6px 10px;
  }

  #app.dd-layered .dd-main {
    gap: 8px;
    padding: 8px;
  }

  #app.dd-layered .dd-tray {
    flex-basis: clamp(188px, 28vw, 280px);
    width: clamp(188px, 28vw, 280px);
    padding: 8px;
  }
}