/* On wide but short windows, bound the scene so it cannot push choices below the fold. */
@media (min-width: 901px) and (max-height: 1000px) {
  .dynamic-main {
    height: auto;
    min-height: calc(100dvh - 24px);
    grid-template-rows: auto auto 4px minmax(180px, 45dvh) 104px;
    overflow: visible;
  }
  .dynamic-main.without-history-band {
    grid-template-rows: auto 4px minmax(180px, 50dvh) 104px;
  }
}

/* Keep timed choices in view on phones, zoomed pages and short landscape screens. */
@media (max-width: 900px), (max-height: 700px) {
  .experiment-page, .experiment-content {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }
  .experiment-content {
    padding: 52px 12px max(14px, env(safe-area-inset-bottom));
  }
  .dynamic-layout { height: auto; }
  .dynamic-main, .dynamic-main.without-history-band {
    height: auto;
    min-height: calc(100dvh - 66px);
    padding: 12px;
    gap: 9px;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
  }
  .dynamic-main {
    grid-template-rows: auto auto 4px auto minmax(170px, 1fr);
    grid-template-areas: "heading" "history" "track" "actions" "scene";
  }
  .dynamic-main.without-history-band {
    grid-template-rows: auto 4px auto minmax(170px, 1fr);
    grid-template-areas: "heading" "track" "actions" "scene";
  }
  .dynamic-heading { grid-area: heading; min-width: 0; flex-wrap: wrap; gap: 9px; }
  .dynamic-heading h1 { font-size: clamp(21px, 5vw, 28px); line-height: 1.18; }
  .live-status { width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-status.single { grid-template-columns: minmax(0, 1fr); }
  .live-status-item, .reputation-score-status { min-width: 0; }
  .dynamic-main > .norm-history-band { grid-area: history; min-width: 0; min-height: 0; }
  .deadline-track { grid-area: track; }
  .dynamic-actions {
    grid-area: actions;
    width: 100%;
    min-height: 88px;
    padding: 3px 0;
    z-index: 2;
  }
  .dynamic-choice-grid {
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .continue-choice, .jump-choice-v2 { min-height: 78px; padding: 10px 7px; }
  .continue-choice strong, .jump-choice-v2 strong { font-size: clamp(15px, 4vw, 18px); line-height: 1.25; }
  .queue-scene-v2 { grid-area: scene; min-height: 170px; height: min(34dvh, 280px); }
  .baseline-layout { height: auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
  .baseline-layout .task-copy { order: 0; }
  .baseline-layout .task-actions { order: 1; min-height: 0; }
  .baseline-layout .baseline-scene { order: 2; flex: none; height: min(35dvh, 260px); min-height: 180px; }
  .baseline-choice-panel { height: auto; }
  .conflict-choice-grid { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conflict-choice { min-width: 0; min-height: 90px; height: auto; }
}

@media (max-width: 600px) {
  .dynamic-main > .norm-history-band { padding: 8px; gap: 4px; }
  .dynamic-main > .norm-history-band .norm-history-copy { text-align: left; }
  .dynamic-main > .norm-history-band .norm-people {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 3px;
  }
  .dynamic-main > .norm-history-band .norm-person { transform: scale(.68); height: 42px; }
  .dynamic-main .history-focus-stage { padding: 14px; }
  .dynamic-main .history-focus-stage .norm-history-band {
    width: 100%; min-height: 0; padding: 15px;
    grid-template-columns: 1fr; grid-template-rows: auto auto;
  }
  .dynamic-main .history-focus-stage .norm-people {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 18px;
  }
  .dynamic-main .history-focus-stage .norm-person { transform: scale(.8); }
  .conflict-choice-grid { grid-template-columns: 1fr; }
  .conflict-choice { min-height: 76px; }
  .baseline-choice-hint { font-size: 13px; }
}