/* Keep content in normal flow on narrow screens, including older WebViews. */
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .game-shell, .story-view, .lesson-view, .workbench-view,
  .lesson-layout, .workbench-grid { min-height: 0; }
  .story-view { padding-bottom: 18px; }
  .topbar { height: 64px; padding: 0 12px; gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand strong { font-size: 17px; letter-spacing: .06em; }
  .brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
  .text-btn { gap: 5px; font-size: 12px; }
  .objective { position: relative; top: auto; left: auto; width: calc(100% - 32px); margin: 16px; padding: 10px 12px; }
  .objective .clue-row { padding-top: 4px; margin-top: 0; }
  .portrait { top: 170px; bottom: auto; width: 66%; max-width: 300px; }
  .portrait svg { height: 250px; max-height: none; width: 100%; }
  .portrait-left { left: -4%; }
  .portrait-right { right: -4%; }
  .portrait-name { display: none; }
  .dialogue-wrap { position: relative; left: auto; bottom: auto; transform: none; width: auto; margin: 200px 16px 0; }
  .dialogue-box { min-height: 0; padding: 20px 18px 16px; box-shadow: 4px 5px 0 rgba(41,63,67,.25); }
  #dialogueText { min-height: 0; font-size: 16px; line-height: 1.75; letter-spacing: 0; }
  .dialogue-footer { gap: 10px; margin-top: 16px; flex-wrap: wrap; }
  .dialogue-footer>span { font-size: 11px; letter-spacing: 0; }
  .next-btn { min-height: 44px; padding: 0 12px; margin-left: auto; font-size: 13px; letter-spacing: 0; }
  .speaker-tab { min-width: 150px; padding: 6px 16px; }
  .speaker-tab strong { font-size: 18px; }
  .beta-panel { margin: 0 12px 16px; padding: 14px 16px; gap: 10px; }
  .beta-panel>div { flex: 1 1 160px; }
  .beta-panel strong { font-size: 15px; }
  .beta-panel span { font-size: 12px; line-height: 1.6; margin-top: 3px; }
  .beta-panel>button { width: auto; min-height: 44px; padding: 0 12px; flex-shrink: 0; }
  .beta-panel small { font-size: 11px; line-height: 1.6; }
  .beta-panel small button { min-height: 28px; }
  .workbench-header { height: auto; min-height: 68px; padding: 12px; }
  .workbench-header>div { min-width: 0; }
  .workbench-header>div strong { font-size: 14px; letter-spacing: 0; }
  .lesson-duration { display: none; }
  .lesson-view .workbench-header { grid-template-columns: 32px 1fr; }
  .lesson-nav { padding: 8px 12px; }
  .lesson-page { padding: 22px 16px; }
  .lesson-copy h2 { font-size: 22px; }
  .key-points { gap: 10px; }
  .key-points b { font-size: 13px; }
  .key-points span { display: block; line-height: 1.6; }
  .lesson-footer { gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .lesson-footer button { min-height: 44px; }
  .lesson-footer .primary-btn { flex: 1; white-space: normal; }
  .lesson-demo { min-height: 360px; }
  .checklist-demo { min-height: 400px; }
  .journal-dialog, .review-dialog, .refine-dialog, .beta-dialog {
    width: calc(100% - 24px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    margin: auto; overflow-y: auto; box-shadow: 4px 5px 0 rgba(41,63,67,.2);
  }
  .beta-dialog { padding: 20px; }
  .beta-dialog h2 { font-size: 21px; }
  .beta-dialog label { margin: 12px 0; }
  .beta-dialog input:not([type=checkbox]), .beta-dialog textarea,
  .refine-body textarea, .refine-body select { font-size: 16px; }
  .beta-dialog .beta-consent { font-size: 12px; }
  .review-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .review-actions button { flex: 1; min-height: 44px; padding: 8px 10px; }
}
@media (max-width: 360px) {
  .brand strong { font-size: 15px; }
  .brand-mark { width: 28px; height: 28px; font-size: 20px; }
  .dialogue-wrap { margin-left: 12px; margin-right: 12px; }
  .beta-panel>div { flex-basis: 140px; }
  .beta-panel>button { padding: 0 8px; }
}