/* A bounded mobile learning surface. The lesson content and existing controls
   remain shared with desktop; secondary content opens in native dialogs. */
.mobile-only,
.mobile-word-actions,
.mobile-word-step { display: none; }

@media (max-width: 600px), (max-width: 900px) and (max-height: 600px) {
  html { height: 100%; overflow: hidden; }
  body {
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    overflow: hidden;
    overscroll-behavior: none;
  }
  .shell { width: calc(100% - 20px); max-width: none; }
  .site-header { height: 48px; min-height: 0; gap: 10px; }
  .brand { gap: 6px; font-size: 20px; letter-spacing: -.6px; }
  .brand-seal { width: 26px; height: 29px; font-size: 22px; border-radius: 8px; }
  .site-header nav.journey-nav { gap: 10px; justify-content: flex-end; }
  .journey-nav > .quiet-button { min-height: 44px; padding: 4px 1px; gap: 4px; font-size: 12px; }
  .journey-nav > #journey-open::after { bottom: 1px; height: 2px; }
  .journey-nav > #saved-open { display: none; }
  #saved-count { min-width: 17px; width: 17px; height: 17px; font-size: 10px; }
  .journey-nav .settings-menu { margin-left: 0; }
  .settings-menu > summary { min-width: 44px; min-height: 44px; justify-content: center; padding: 8px; }
  .settings-label { display: none; }
  .settings-panel {
    top: 46px;
    right: 0;
    width: 290px;
    max-width: calc(100vw - 24px);
    max-height: calc(100svh - 72px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    z-index: 40;
  }
  main.shell { min-height: 0; height: 100%; padding: 6px 0; }
  .lesson-section { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 0; }
  .lesson-heading { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-items: stretch; gap: 5px; margin: 0 0 6px; }
  .lesson-title-group { padding: 0 2px; }
  .lesson-title-group h1 {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    white-space: normal;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -.7px;
  }
  .lesson-title-group .eyebrow,
  .lesson-subtitle,
  .scene-navigation { display: none; }
  .learning-modes { width: 100%; padding: 2px; gap: 3px; border-radius: 11px; }
  .learning-modes button { min-height: 44px; padding: 3px; gap: 6px; font-size: 12px; }
  .learning-modes button::before { width: 22px; height: 22px; font-size: 11px; }
  .learning-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto 64px;
    grid-template-areas: "picture" "word" "player";
    align-items: stretch;
    gap: 6px;
  }
  .picture-column,
  .side-column { display: contents; }
  .scene-figure {
    grid-area: picture;
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 24px;
    min-height: 0;
    height: 100%;
    padding: 0 3px;
    border-radius: 13px;
  }
  .picture-toolbar { min-height: 0; height: 44px; padding: 0 3px 0 7px; gap: 3px; }
  .picture-toolbar > #scene-caption { font-size: 12px; }
  .settings-panel .picture-toolbar { display: flex; height: 44px; margin: 0 0 12px; padding: 0; gap: 6px; }
  .settings-panel .picture-toolbar > #scene-caption { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .settings-panel .zoom-controls { flex-shrink: 0; }
  .zoom-controls button { min-width: 44px; min-height: 44px; }
  .zoom-controls #zoom-reset { min-width: 44px; font-size: 11px; }
  .scene-viewport {
    display: flex;
    min-height: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 8px;
    scrollbar-width: none;
    background: var(--surface-soft);
  }
  .scene-viewport::-webkit-scrollbar { display: none; }
  .scene-frame { flex: none; margin: auto; }
  .scene-figure figcaption { min-height: 24px; height: 24px; padding: 0 5px; gap: 6px; font-size: 11px; }
  #picture-instruction { font-size: 11px; }
  #scene-progress { display: inline; font-size: 11px; }
  #mobile-collection-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 0 3px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  #mobile-collection-open svg { width: 18px; height: 18px; }
  #mobile-collection-count { min-width: 18px; font-size: 11px; font-variant-numeric: tabular-nums; }
  .hotspot { width: 44px; height: 44px; }
  .hotspot-dot { width: 12px; height: 12px; }
  .hotspot .han { font-size: 13px; }
  .hotspot-label { padding: 4px 7px; bottom: 34px; }
  .hotspot-low-label .hotspot-label { top: 34px; }
  .word-card {
    grid-area: word;
    position: static;
    display: grid;
    grid-template-rows: auto auto 44px;
    gap: 5px;
    min-height: 0;
    padding: 7px 10px;
    border-radius: 13px;
  }
  .word-card > .word-card-top,
  .word-card > .word-details,
  .word-card > .explanation-button,
  .word-card > .word-navigation,
  .word-card .word-crop { display: none; }
  .word-identity { gap: 8px; margin: 0; min-height: 45px; }
  .word-core { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 9px; row-gap: 0; }
  .word-core h2 { font-size: 25px; line-height: 1.15; font-weight: 600; }
  .word-pinyin { margin: 0; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
  .word-meaning { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; line-height: 1.3; }
  .mobile-word-step { display: none; }
  .pronounce-button { flex-shrink: 0; min-width: 44px; width: 44px; min-height: 44px; height: 44px; padding: 10px; }
  .pronounce-button svg { width: 22px; height: 22px; }
  .example-preview { margin: 0; padding: 6px 9px; border-radius: 8px; }
  .example-preview #example-zh { font-size: 17px; line-height: 1.3; font-weight: 550; }
  .example-preview #example-en { margin-top: 2px; font-size: 12px; line-height: 1.3; }
  .mobile-word-actions { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px 44px; gap: 6px; align-items: stretch; min-height: 44px; }
  .mobile-word-actions button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font-size: 12px; }
  .mobile-word-actions #mobile-prev-word,
  .mobile-word-actions #mobile-next-word { padding: 4px; font-size: 23px; }
  #mobile-explain { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  #mobile-explain[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
  .narrator { grid-area: player; min-height: 0; margin: 0; padding: 6px 10px; border-radius: 11px; }
  .narrator::before,
  .narrator::after,
  .narration-line { display: none; }
  .narrator-main { gap: 10px; height: 100%; }
  .play-main { width: 44px; height: 44px; }
  .play-main svg { width: 22px; height: 22px; }
  .narrator-copy { gap: 0; }
  .narrator-copy strong { font-size: 13px; line-height: 1.2; }
  #audio-seek { height: 19px; min-height: 19px; }
  .player-timing { font-size: 12px; line-height: 1.1; }
  .player-timing #audio-time { font-size: 12px; }
  .player-timing #player-status { display: none; }
  .learning-layout .collection-panel,
  .lesson-bottom,
  .journey-section,
  .site-footer { display: none; }
  dialog {
    width: min(520px, calc(100% - 24px));
    max-height: calc(100svh - 24px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
    margin: auto;
    padding: 17px;
    border-radius: 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  dialog .dialog-top { margin-bottom: 12px; gap: 10px; }
  dialog .dialog-top .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  dialog h2 { font-size: 23px; }
  dialog .dialog-intro { font-size: 13px; }
  #mobile-collection-content .collection-panel { display: block; padding: 0; border: 0; box-shadow: none; background: transparent; }
  #mobile-collection-content .collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  #mobile-collection-content .collection-heading { flex-wrap: wrap; gap: 5px; }
  #mobile-collection-content .collection-heading h3,
  #mobile-collection-content #collection-count { font-size: 12px; }
  #mobile-collection-content .collection-word { min-height: 82px; }
  #mobile-collection-content .word-thumbnail { width: 45px; height: 43px; }
  #mobile-wordbook-open { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 9px 12px; margin-top: 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 13px; }
  #mobile-word-content .word-card-top { display: flex; margin: 0 0 7px; min-height: 44px; }
  #mobile-word-content .word-card-top .icon-button { width: 44px; height: 44px; }
  #mobile-word-content .discovery-status { font-size: 11px; }
  #mobile-word-content .word-details { margin: 0; }
  #mobile-word-content .word-details > summary { display: none; }
  #mobile-word-content .detail-content { padding: 0 0 4px; font-size: 14px; line-height: 1.8; }
  #mobile-word-content #example-pinyin { font-size: 14px; }
  #mobile-word-content .known-button { font-size: 13px; min-height: 44px; }
  .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); max-width: calc(100% - 28px); font-size: 12px; }
}

/* Short phones keep the same reading size while using one row for the title
   and modes. Collection remains available in the compact header. */
@media (max-width: 600px) and (max-height: 700px) {
  body { grid-template-rows: 44px minmax(0, 1fr); }
  .site-header { height: 44px; }
  .lesson-heading { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); align-items: center; gap: 6px; }
  .lesson-title-group h1 { font-size: 21px; line-height: 1.06; letter-spacing: -.5px; }
  .learning-modes { padding: 1px; gap: 1px; }
  .learning-modes button { font-size: 11px; padding: 2px; }
  .learning-modes button::before { display: none; }
  .scene-figure { grid-template-rows: minmax(0, 1fr); }
  .scene-figure figcaption { display: none; }
  .word-card { padding: 6px 9px; gap: 4px; }
  .example-preview { padding: 5px 8px; }
  .example-preview #example-zh { font-size: 16px; }
}

@media (max-width: 900px) and (max-height: 600px) and (orientation: landscape) {
  body { grid-template-rows: 44px minmax(0, 1fr); }
  .site-header { height: 44px; }
  main.shell { padding: 4px 0; }
  .lesson-heading { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
  .lesson-title-group { min-width: 0; flex: 1; }
  .lesson-title-group h1 { font-size: 24px; line-height: 1.05; }
  .learning-modes { width: min(45%, 300px); flex: 0 0 auto; }
  .learning-modes button { min-height: 40px; font-size: 12px; }
  .learning-modes button::before { display: none; }
  .learning-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 58px; grid-template-areas: "picture word" "player player"; }
  .scene-figure { grid-template-rows: minmax(0, 1fr); }
  .scene-figure figcaption { display: none; }
  .word-card { align-self: stretch; align-content: space-between; grid-template-rows: auto auto 44px; padding: 6px 9px; gap: 3px; overflow-y: auto; overscroll-behavior: contain; }
  .word-identity { min-height: 44px; }
  .word-core h2 { font-size: 24px; }
  .example-preview { padding: 5px 8px; }
  .example-preview #example-zh { font-size: 16px; }
  .narrator { padding: 5px 10px; }
  .narrator-copy { display: grid; grid-template-columns: minmax(130px, .6fr) minmax(80px, 1fr) auto; align-items: center; gap: 12px; }
  .player-timing { white-space: nowrap; }
  #audio-seek { min-width: 60px; }
}

/* Tall phones can keep a full-width 4:3 image without a deep letterbox.
   Extra vertical room goes to comfortable word and example reading instead. */
@media (max-width: 600px) and (min-height: 741px) {
  .learning-layout {
    grid-template-rows: minmax(0, min(calc((100vw - 28px) * .75 + 26px), calc(100svh - 490px))) minmax(0, 1fr) 72px;
    grid-template-rows: minmax(0, min(calc((100vw - 28px) * .75 + 26px), calc(100dvh - 490px))) minmax(0, 1fr) 72px;
  }
  .word-card { grid-template-rows: auto minmax(0, 1fr) 48px; gap: 10px; padding: 14px; }
  .word-identity { gap: 10px; min-height: 62px; }
  .word-card .word-crop { display: block; width: 52px; height: 60px; flex: 0 0 52px; border-width: 3px; border-radius: 8px; }
  .word-core h2 { font-size: 30px; }
  .word-pinyin { font-size: 15px; line-height: 1.4; }
  .word-meaning { margin-top: 4px; font-size: 14px; line-height: 1.4; }
  .example-preview { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 10px 12px; }
  .example-preview #example-zh { font-size: 20px; line-height: 1.45; }
  .example-preview #example-en { margin-top: 5px; font-size: 14px; line-height: 1.45; }
  .mobile-word-actions { min-height: 48px; }
  .mobile-word-actions button { min-height: 48px; font-size: 13px; }
  .narrator { padding: 9px 12px; }
  .narrator-copy strong { font-size: 14px; }
}

/* A larger accessibility font or an unusually short window may exceed the
   bounded card; preserve the text and controls with a local scroll surface. */
@media (max-width: 600px) and (max-height: 520px) and (orientation: portrait) {
  .learning-layout { grid-template-rows: minmax(90px, 1fr) minmax(0, 175px) 60px; overflow-y: auto; overscroll-behavior: contain; }
  .word-card { overflow-y: auto; }
}