/* Chapter 1 uses the viewport as its layout grid on ordinary desktop screens. */
@media (min-width: 901px) and (min-height: 700px) {
  body[data-screen="chapter"] .shell,
  body[data-screen="complete"] .shell { overflow: visible; }

  body[data-screen="chapter"] .topbar,
  body[data-screen="complete"] .topbar { height: 56px; }

  body[data-screen="chapter"] .footer,
  body[data-screen="complete"] .footer {
    min-height: 32px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  body[data-screen="chapter"] #app,
  body[data-screen="complete"] #app { min-height: 0; }

  .chapter-screen {
    min-height: calc(100vh - 88px);
    min-height: calc(100dvh - 88px);
    display: grid;
    grid-template-rows: auto minmax(min-content, 1fr) auto;
    gap: 7px;
    padding: 9px clamp(20px, 3vw, 48px) 7px;
  }

  .chapter-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin: 0;
  }
  .chapter-top h1 { font-size: clamp(43px, 3.8vw, 57px); margin: 2px 0 1px; }
  .chapter-top p { font-size: 13px; line-height: 1.3; }
  .chapter-counter strong { font-size: 29px; margin-top: 2px; }
  .chapter-counter small { font-size: 15px; }

  .chapter-layout {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-rows: minmax(min-content, 1fr);
    gap: 14px;
    min-height: 0;
  }

  .scene-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
  }
  .city-scene { height: auto; min-height: 0; }
  .city-buildings { height: min(270px, 62%); }
  .repair-track { padding: 9px 14px; }
  .track { margin: 7px 0; }

  .question-panel { min-height: 0; }
  .question-panel-top, .question-bottom { padding: 9px 14px; }
  .question-body { padding: 9px 16px; }
  .quote-line { height: 20px; font-size: 36px; }
  .question-body blockquote {
    min-height: 0;
    margin: 3px 0 9px;
    font-size: clamp(21px, 2vw, 28px);
    line-height: 1.2;
  }
  .question-rule { margin-bottom: 10px; }
  .task-label { margin-bottom: 7px; }
  .feedback { gap: 9px; padding: 9px 11px; margin-bottom: 9px; }
  .feedback p { margin-top: 4px; line-height: 1.35; }
  .detect-actions { gap: 8px; }
  .choice { min-height: 52px; padding: 8px 11px; }
  .repair-actions { gap: 6px; }
  .repair-choice { min-height: 46px; }
  .chapter-footer { padding-top: 0; }
  .chapter-footer .text-button { padding: 6px; }

  .complete-screen {
    min-height: calc(100vh - 88px);
    min-height: calc(100dvh - 88px);
    padding: 14px clamp(20px, 5vw, 68px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .complete-emblem { width: 64px; height: 64px; font-size: 40px; margin: 12px auto 10px; }
  .complete-screen h1 { font-size: clamp(53px, 5vw, 72px); }
  .complete-lead { margin: 9px 0 13px; }
  .echo-reveal { padding: 13px 19px; margin-bottom: 12px; }
  .echo-reveal p { margin-top: 6px; line-height: 1.5; }
  .reward { padding: 10px 16px; margin-bottom: 14px; }
}