/* Compact touch controls; keep the reader's chosen text size and desktop layout. */
@media (max-width: 680px), (max-height: 500px) and (hover: none) and (pointer: coarse) {
  #kakomukun.kk-ui-ready .kk-wrap { padding: 8px 8px 22px; }
  #kakomukun .kk-app-heading { min-height: 54px; gap: 10px; padding: 2px 2px 8px; }
  #kakomukun .kk-brand-mark { width: 38px; height: 34px; }
  #kakomukun .kk-brand { gap: 7px; }
  #kakomukun .kk-header-actions { gap: 5px; }
  #kakomukun button.kk-header-button, #kakomukun button.kk-help-button {
    min-height: 44px;
    min-width: 44px;
    padding: 8px;
  }
  #kakomukun button.kk-help-button { width: 44px; }
  #kakomukun .kk-back-nav { margin: 8px 0; }
  #kakomukun .kk-back-link { min-height: 44px; padding: 6px 10px; }
  #kakomukun .kk-app-shell { margin-top: 8px; gap: 10px; }

  #kakomukun .kk-primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }
  #kakomukun button.kk-action-sequence { order: 3; }
  #kakomukun button.kk-action-settings { order: 4; }
  #kakomukun .kk-speech-controls { grid-column: 1 / -1; gap: 8px; order: 5; }
  #kakomukun button.kk-primary-action,
  #kakomukun .kk-speech-controls button.kk-primary-action {
    min-height: 48px;
    padding: 6px 8px;
    flex-direction: row;
    gap: 6px;
    border-radius: 11px;
    font-size: .875rem;
    line-height: 1.4;
    box-shadow: 0 2px 6px #1a4d3518;
  }
  #kakomukun button.kk-primary-action .kk-action-icon,
  #kakomukun .kk-speech-controls button.kk-primary-action .kk-action-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  #kakomukun button.kk-action-settings { grid-column: auto; }

  #kakomukun .kk-reader-card { border-radius: 15px; }
  #kakomukun .kk-reader-card-header { min-height: 44px; padding: 8px 10px; gap: 7px; }
  #kakomukun .kk-reader-card-header h2 { font-size: .95rem; }
  #kakomukun .kk-reader-card-header h2 .kk-action-icon { width: 1.4rem; height: 1.4rem; }
  #kakomukun .kk-reader-card-actions { gap: 7px; }
  #kakomukun button.kk-card-button { min-height: 44px; padding: 6px 8px; }
  #kakomukun .kk-display-controls { gap: 6px; padding: 6px 10px; }
  #kakomukun .kk-display-controls .kk-v04-setting { gap: 8px; }
  #kakomukun .kk-display-controls .kk-segmented button { min-height: 44px; padding: 4px; }
  #kakomukun .kk-feature-status { padding: 5px 10px; }
  #kakomukun .kk-reader-card .kk-output { padding: 16px 12px; }
  #kakomukun .kk-reader-hint { margin-top: 8px; padding: 7px 10px; gap: 8px; }

  #kakomukun .kk-settings-drawer .kk-icon-card { min-height: 56px; padding: 5px 3px; }
  #kakomukun .kk-settings-drawer .kk-icon-card .kk-action-icon { width: 1.4rem; height: 1.4rem; }
}

/* A phone held sideways has room for three columns and needs more reading height. */
@media (min-width: 681px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  #kakomukun .kk-primary-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #kakomukun .kk-speech-controls { grid-column: span 2; }
}