/* Comfortable phone typography with a compact study layout. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  :root {
    --phone-reading: 18px;
    --phone-control: 16px;
    --phone-caption: 14px;
    --muted: #83758f;
    font-size: 16px;
  }
  body { font-size: var(--phone-reading); line-height: 1.55; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  button, input, textarea { line-height: 1.5; }
  button { touch-action: manipulation; }
  .workspace { margin-left: 0; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .main { padding: 18px 16px; }
  .dashboard-grid, .right-column, .stats-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .main-column, .panel, .dialog, .game-dialog, .book-info { min-width: 0; }

  .sidebar {
    inset: auto 0 0; width: 100%; height: auto; min-height: 72px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--line);
    background: #fffffff5; backdrop-filter: blur(16px);
  }
  .sidebar > .brand, .nav-label, .sidebar-bottom { display: none; }
  .nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0; height: auto; }
  .nav button {
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0; min-height: 56px; padding: 6px 2px; gap: 4px;
    font-size: 13px !important; line-height: 1.35; color: #82748f;
  }
  .nav button span:not(.count) { display: block; white-space: normal; }
  .nav button.active:after, .nav .count { display: none; }
  .nav svg { width: 21px; height: 21px; }
  .topbar { min-height: 64px; height: auto; padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .breadcrumb, .top-date, .top-divider { display: none; }
  .mobile-logo { display: flex; align-items: center; gap: 7px; font-size: 23px !important; letter-spacing: 1px; }
  .mobile-logo svg { width: 27px; height: 30px; }
  .mobile-logo small { display: block; margin: 3px 0 0; font-size: 13px !important; letter-spacing: 1px; }
  .top-actions { margin-left: auto; gap: 2px; }
  .icon-button, .book-strip > .icon-button, .avatar { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .icon-button svg { width: 21px; height: 21px; }
  .avatar { font-size: var(--phone-control) !important; }

  .hello, .eyebrow, .page-heading .eyebrow, .question .eyebrow,
  .tag, .hero-start .duration, .mode-tag, .mode-bottom,
  .book-info p, .book-progress span, .ring-center > span,
  .goal-stats p, .goal-stats strong small, .goal-note,
  .panel-title > .muted, .week-foot, .word-state,
  .word-row .phonetic, .stat-card p, .stat-card strong small,
  .chart-column small, .chart-column b, .badge-row p, .badge-status,
  .session-row p, .small-note, .footer, .footer .text-button,
  .book-choice p, .book-choice > .check, .choice-row button small,
  .game-header h2 > span, .game-meta, .game-progress > span,
  .game-time, .game-header .game-time, .question-pronunciation,
  .spell-hint, .result-stats p, .result-stats strong > span,
  .detail-footer > .muted, .import-label, .meaning-editor .import-label,
  .import-dropzone > span, .import-divider, .import-format > span,
  .import-local, .import-summary span, .import-preview-head,
  .import-issues, .import-pending-note, .pending-meaning {
    font-size: var(--phone-caption) !important; line-height: 1.5; letter-spacing: 0;
  }
  .text-button, .section-heading .text-button, .section-actions .text-button,
  .panel-title .text-button, .toolbar > .text-button,
  .primary-button, .secondary-button, .import-entry,
  .filter-pills button, .import-actions button, .result-actions button,
  .feedback .primary-button, .spell-form .primary-button,
  .meaning-editor .primary-button, .import-format > .text-button,
  .import-book-option > span, .book-choice h3, .session-row,
  .help-item h3, .help-item p, .help-tip, .game-header h2,
  .feedback h3, .feedback p, .game-finish > p,
  .empty-state p, .dialog-description, .import-dialog .dialog-description,
  .question-example, .word-detail .detail-tip, .detail-example small, .page-heading p {
    font-size: var(--phone-control) !important; line-height: 1.55; letter-spacing: 0;
  }
  .primary-button, .secondary-button, .import-actions button, .result-actions button {
    min-height: 44px; padding: 10px 14px; white-space: normal; border-radius: 10px;
  }
  .primary-button svg, .text-button svg, .secondary-button svg { width: 18px; height: 18px; }
  .text-button { min-height: 40px; gap: 6px; white-space: normal; }
  .hello { margin-bottom: 6px; color: #8c7d9c; }
  .hello svg { width: 17px; height: 17px; }
  .greeting { margin-bottom: 18px; }
  .greeting h1 { max-width: none; font-size: 24px !important; line-height: 1.45; letter-spacing: 0; }
  .greeting h1 span { display: inline; }
  .page-heading { margin-bottom: 20px; }
  .page-heading h1 { font-size: 26px !important; line-height: 1.4; }
  .page-heading .eyebrow { margin-bottom: 8px; }
  .streak-pill { display: none; }

  /* The homepage keeps the three game entrances together. */
  .hero { height: auto; min-height: 0; padding: 18px 20px; }
  .hero-copy { max-width: none; }
  .hero-art, .hero-decoration, .hero .tag, .hero-copy > p { display: none; }
  .hero h2 { font-size: 28px !important; line-height: 1.25; margin: 0; letter-spacing: 0; }
  .hero h2 br { display: none; }
  .hero-start { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; }
  .hero-start .primary-button { padding: 11px 14px; font-size: 17px !important; gap: 12px; }
  .hero-start .duration { font-size: 13px !important; }
  .section-heading { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 6px 12px; margin: 22px 0 12px; }
  .section-heading h2, .panel-title h2 { font-size: 19px !important; line-height: 1.45; }
  .section-heading h2 small { display: none; }
  .section-actions { flex-wrap: wrap; gap: 6px 14px; }
  .section-actions .text-button { font-size: 14px !important; }
  .game-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .mode-card { min-height: 0; padding: 14px 11px; border-radius: 15px; overflow: visible; }
  .mode-top { display: flex; align-items: center; margin-bottom: 10px; gap: 8px; }
  .mode-art { width: 36px; height: 36px; }
  .mode-art svg { width: 23px; height: 23px; }
  .mode-tag { display: none; }
  .mode-card h3 { font-size: 16px !important; line-height: 1.4; white-space: normal; letter-spacing: 0; }
  .mode-card p { font-size: 14px !important; line-height: 1.45; white-space: normal; min-height: 0; margin-top: 6px; }
  .mode-bottom { gap: 4px; margin-top: 10px; font-size: 12px !important; }
  .mode-bottom svg { width: 16px; height: 16px; }

  .book-strip { display: grid; grid-template-columns: 42px minmax(0, 1fr) 44px; padding: 15px 14px; gap: 9px 10px; }
  .book-cover { width: 42px; height: 56px; }
  .book-cover small { font-size: 12px !important; line-height: 1.2; }
  .book-cover strong { font-size: 25px !important; line-height: 1.2; }
  .book-info h3 { font-size: 17px !important; white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; line-height: 1.4; }
  .book-info p { margin-top: 5px; }
  .book-progress { grid-column: 2 / 4; grid-row: 2; width: 100%; text-align: left; }
  .book-strip > .icon-button { grid-column: 3; grid-row: 1; }
  .book-strip > .text-button { grid-column: 3; grid-row: 1; font-size: 14px !important; }
  .track { height: 5px; margin-top: 5px; }
  .panel { padding: 18px 16px; }
  .panel-title { align-items: center; gap: 10px; flex-wrap: wrap; }
  .goal-panel { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 12px; text-align: left; }
  .goal-panel .panel-title { grid-column: 1 / -1; }
  .goal-ring, .goal-ring svg { width: 104px; height: 104px; }
  .goal-ring { grid-column: 1; grid-row: 2 / 4; margin: 4px auto; }
  .ring-numbers { font-size: 30px !important; }
  .ring-numbers small { font-size: 15px !important; }
  .ring-center > span { font-size: 12px !important; margin-top: 6px; }
  .goal-note { grid-column: 2; grid-row: 2; padding: 0; margin: 5px 0 0; font-size: 13px !important; }
  .goal-note svg { width: 16px; height: 16px; }
  .goal-stats { grid-column: 2; grid-row: 3; margin-top: 4px; padding-top: 10px; gap: 6px; text-align: center; }
  .goal-stats strong { font-size: 25px !important; }
  .goal-stats p { font-size: 12px !important; margin-top: 3px; }
  .week-panel, .daily-word { display: none; }
  .footer { align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; font-size: 13px !important; }
  .footer .text-button { font-size: 13px !important; }
  .footer-mark { display: none; }

  .toolbar { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
  .search-field, .toolbar .search-field { flex: 1 1 100%; max-width: none; width: 100%; }
  .search-field input, .import-name, .import-text, .meaning-editor .import-text {
    width: 100%; min-height: 44px; font-size: var(--phone-control) !important; line-height: 1.5; padding: 11px 12px;
  }
  .search-field input { padding-left: 43px; }
  .search-field svg { width: 20px; height: 20px; left: 14px; top: 50%; transform: translateY(-50%); }
  .filter-pills { width: 100%; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
  .filter-pills button { flex: 1; min-width: 0; min-height: 40px; padding: 8px 6px; font-size: 14px !important; white-space: normal; }
  .import-entry { justify-content: center; padding: 10px 13px; }
  .library-caption { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 6px 10px; font-size: 13px !important; line-height: 1.5; }
  .word-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 44px; padding: 15px 13px; gap: 9px; align-items: center; }
  .word-row > div:first-child { grid-column: 1; grid-row: 1; }
  .word-row strong { font-size: 22px !important; line-height: 1.35; }
  .word-row .meaning { grid-column: 2; grid-row: 1; font-size: 17px !important; line-height: 1.6; }
  .word-row .phonetic { margin-top: 5px; font-size: 13px !important; overflow-wrap: anywhere; }
  .word-row .word-state { display: none; }
  .word-row .star-button { grid-column: 3; grid-row: 1; }
  .word-click { max-width: 100%; }
  .review-summary { padding: 17px; align-items: stretch; flex-direction: column; gap: 12px; }
  .review-summary h2, .empty-state h2 { font-size: 22px !important; line-height: 1.4; }
  .review-summary p { font-size: 15px !important; line-height: 1.5; }
  .review-summary .primary-button { width: 100%; font-size: 16px !important; }
  .empty-state { padding: 30px 20px; }
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
  .stat-card { padding: 18px; }
  .stat-card > svg { width: 23px; height: 23px; }
  .stat-card strong { font-size: 34px !important; }
  .stat-card p { margin-top: 10px; }
  .chart { height: 215px; gap: 8px; padding-top: 22px; }
  .chart-column small { font-size: 12px !important; }
  .badge-row { flex-wrap: wrap; gap: 12px; padding: 18px 0; }
  .badge-row h3 { font-size: 17px !important; line-height: 1.45; }
  .badge-row > div:nth-child(2) { flex: 1; min-width: 120px; }
  .badge-row .badge-status { margin-left: 0; font-size: 12px !important; }
  .badge-icon { width: 44px; height: 44px; }
  .session-row { flex-wrap: wrap; gap: 12px; padding: 17px 0; }
  .session-row > strong { font-size: 25px !important; }

  /* Keep ordinary questions and feedback compact enough for a phone viewport. */
  .dialog-backdrop { padding: 8px; align-items: center; }
  .dialog, .game-dialog, .import-dialog { width: 100%; padding: 18px; max-height: calc(100dvh - 16px); border-radius: 18px; scroll-padding: 18px; }
  .dialog-header { align-items: center; gap: 10px; margin-bottom: 14px; }
  .dialog-header h2, .import-dialog .dialog-header h2 { font-size: 22px !important; line-height: 1.35; padding: 0; }
  .dialog-description { margin: 8px 0 18px; }
  .book-choice { padding: 16px 14px; gap: 13px; align-items: center; flex-wrap: wrap; }
  .book-choice .book-cover { width: 42px; height: 56px; }
  .book-choice > div:not(.book-cover) { flex: 1; min-width: 120px; }
  .book-choice > .check { margin-left: 0; }
  .choice-row { flex-direction: row; gap: 10px; }
  .choice-row button { font-size: 28px !important; padding: 18px 8px; }
  .help-item { gap: 12px; align-items: flex-start; }
  .help-item > svg { width: 22px; height: 22px; margin-top: 3px; }
  .game-header { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; align-items: center; gap: 8px; }
  .game-header h2 { font-size: 15px !important; flex-wrap: wrap; align-items: center; gap: 5px; padding: 0; line-height: 1.35; }
  .game-header h2 > span { display: none; }
  .game-header > .icon-button { grid-column: 3; grid-row: 1; width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  .game-header > .game-time { grid-column: 2; grid-row: 1; font-size: 12px !important; gap: 4px; }
  .game-header h2 svg, .game-time svg { width: 16px; height: 16px; }
  .game-progress { margin-top: 10px; gap: 10px; }
  .game-progress .track { height: 5px; }
  .game-progress > span { min-width: 48px; font-size: 13px !important; }
  .game-meta { margin-top: 8px; flex-wrap: wrap; gap: 6px; font-size: 13px !important; }
  .combo svg { width: 16px; height: 16px; }
  .question { padding: 12px 0; }
  .question .eyebrow { margin-bottom: 8px; font-size: 13px !important; }
  .question-word { font-size: 46px !important; line-height: 1.15; letter-spacing: -.5px; overflow-wrap: anywhere; }
  .question-meaning { font-size: 28px !important; line-height: 1.4; letter-spacing: 0; }
  .question-pronunciation { gap: 8px; margin-top: 6px; flex-wrap: wrap; }
  .question-pronunciation .icon-button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  .question-example { margin-top: 12px; overflow-wrap: anywhere; }
  .answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .answer { font-size: 18px !important; line-height: 1.45; min-height: 68px; padding: 10px 9px; gap: 7px; border-radius: 12px; align-items: flex-start; }
  .answer .answer-key { font-size: 13px !important; width: 22px; height: 22px; margin-top: 2px; }
  .spell-form { flex-direction: column; gap: 10px; }
  .spell-input { font-size: 27px !important; min-height: 55px; padding: 11px 12px; letter-spacing: 2px; }
  .spell-hint { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; font-size: 13px !important; }
  .spell-hint .text-button { font-size: 13px !important; min-height: 32px; }
  .feedback { flex-direction: row; align-items: center; gap: 12px; padding: 13px; margin-top: 14px; }
  .feedback > div { min-width: 0; flex: 1; }
  .feedback h3 { font-size: 15px !important; }
  .feedback p { font-size: 14px !important; margin-top: 5px; overflow-wrap: anywhere; }
  .feedback .primary-button { width: auto; flex: 0 0 88px; min-width: 88px; min-height: 44px; padding: 8px; font-size: 14px !important; gap: 5px; }
  .game-keyboard { display: none; }
  .game-finish { padding: 12px 0 0; }
  .game-finish h2, .close-game-question h2 { font-size: 25px !important; line-height: 1.45; }
  .game-finish > .eyebrow { font-size: 13px !important; }
  .result-icon { width: 64px; height: 64px; margin-bottom: 18px; }
  .result-icon svg { width: 36px; height: 36px; }
  .result-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 0; gap: 0; margin: 20px 0; }
  .result-stats > div { padding: 0 8px; min-width: 0; }
  .result-stats > div + div { border-top: 0; border-left: 1px solid #e4dbee; }
  .result-stats strong { font-size: 30px !important; }
  .result-stats p { font-size: 13px !important; }
  .result-stats strong > span { font-size: 14px !important; }
  .result-actions, .import-actions { flex-direction: row; gap: 10px; }
  .result-actions button, .import-actions button { width: auto; flex: 1; padding: 11px 10px; font-size: 15px !important; }
  .finish-words { justify-content: flex-start; gap: 8px; margin-bottom: 18px; }
  .finish-words span { font-size: 17px !important; padding: 6px 10px; }
  .close-game-question p { font-size: 16px !important; line-height: 1.6; }
  .word-detail h2 { font-size: 36px !important; line-height: 1.25; overflow-wrap: anywhere; }
  .word-detail .detail-meaning { font-size: 20px !important; line-height: 1.6; margin: 12px 0; }
  .detail-example p { font-size: 20px !important; line-height: 1.6; overflow-wrap: anywhere; }
  .detail-footer { flex-wrap: wrap; gap: 10px; }

  .import-dropzone { padding: 20px 16px; gap: 10px; }
  .import-dropzone > svg { width: 25px; height: 25px; }
  .import-dropzone strong { font-size: 18px !important; line-height: 1.5; }
  .import-name { margin-bottom: 16px; }
  .import-divider { margin: 17px 0; }
  .import-label { margin-bottom: 8px; }
  .import-text { min-height: 125px; max-height: 270px; }
  .import-format { flex-direction: column; gap: 8px; margin-top: 10px; }
  .import-summary { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .import-summary > div { display: block; padding: 13px 6px; text-align: center; }
  .import-summary strong { font-size: 29px !important; min-width: 0; }
  .import-summary span { font-size: 12px !important; margin-top: 5px; }
  .import-preview-head { display: grid; font-size: 13px !important; }
  .import-preview-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); padding: 14px; gap: 12px; }
  .import-preview-row > strong { font-size: 21px !important; line-height: 1.4; }
  .import-preview-row > span { font-size: 16px !important; line-height: 1.6; }
  .import-issues { padding: 14px; }
  .import-alert { font-size: 15px !important; line-height: 1.6; padding: 14px; }
  .import-pending-note { padding: 14px; gap: 10px; }
  .import-pending-note > svg { width: 20px; height: 20px; }
  .import-local { margin-top: 16px; }
  .import-book-option { padding: 16px; flex-wrap: wrap; }
  .import-book-option small { font-size: 13px !important; line-height: 1.5; }
  .meaning-editor { padding: 15px; }
  .meaning-editor .import-text { min-height: 100px; }
  .meaning-editor .primary-button { width: auto; margin-top: 10px; }
  .word-row .meaning, .mode-card p, .page-heading p, .dialog-description,
  .help-item p, .import-text, .import-name, .small-note, .library-caption,
  .book-info p, .game-meta, .import-label, .import-format > span, .import-local { color: #7b6989; }
  .word-row strong, .word-row .meaning, .question-meaning, .question-example,
  .answer > span:last-child, .detail-meaning, .word-detail .detail-meaning,
  .import-preview-row > strong, .import-preview-row > span, .import-issues { max-height: none; overflow: visible; }
  #toast { bottom: calc(84px + env(safe-area-inset-bottom)); font-size: 16px !important; padding: 13px 17px; line-height: 1.6; width: min(90%, 600px); }
}