@media (max-width: 600px) {
  html, body, .page { height: 100%; min-height: 0; overflow: hidden; }
  header { height: 44px; padding: 3px 9px; }
  main { height: calc(100dvh - 44px); min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; padding: 4px 8px calc(5px + env(safe-area-inset-bottom)); overflow: hidden; }
  .paper { flex: none; width: min(calc(100vw - 16px), calc(100dvh - 220px)); max-width: 100%; padding: 5px 6px 3px; transform: none; }
  .paper-head { min-height: 26px; }
  .paper-head strong { font-size: 13px; }
  .paper #board { margin: 2px auto; }
  .paper #help { min-height: 0; margin: 2px 0; font-size: 11px; }
  aside { flex: none; width: min(100%, 620px); display: flex; flex-direction: column; gap: 5px; }
  .logo, .streak, .settings { display: none; }
  .info { min-height: 0; padding: 5px 8px; font-size: 11px; }
  .info strong { font-size: 15px; }
  .tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; }
  .tools .primary { grid-column: auto; }
  .tools button { min-height: 44px; padding: 4px; font-size: 12px; }
  .overlay { align-items: start; }
  .overlay .card { margin: auto; max-height: calc(100dvh - 16px); overflow-y: auto; }
}